/* chirp-ui — A love letter to CSS and HTML over the wire.
*
* Gorgeous by default. Unapologetically modern. Override any --chirpui-*
* variable in your own CSS to customize.
*/
/* ==========================================================================
Tokens — Design system foundation
Token tiers:
1) Core primitives: spacing, type, radius, base color, motion, shadow
2) Semantic tokens: stateful color + interaction semantics
3) Component aliases: per-component defaults that map to semantic/core
Theme precedence:
:root defaults -> [data-theme="light"|"dark"|"system"] mode overrides
-> @supports capability overrides (oklch, color-mix in oklch)
========================================================================== */
/* Alpine x-cloak — hide until Alpine initializes */
[x-cloak] { display: none !important; }
:root {
font-optical-sizing: var(--chirpui-font-optical-sizing, auto);
/* Spacing — fluid scale with clamp() */
--chirpui-spacing-xs: 0.25rem;
--chirpui-spacing-sm: clamp(0.375rem, 1vw, 0.5rem);
--chirpui-spacing: clamp(0.5rem, 2vw, 1rem);
--chirpui-spacing-md: clamp(0.75rem, 3vw, 1.25rem);
--chirpui-spacing-lg: clamp(1rem, 4vw, 1.5rem);
--chirpui-spacing-xl: clamp(1.25rem, 5vw, 2rem);
--chirpui-spacing-2xl: clamp(1.5rem, 6vw, 2.5rem);
--chirpui-spacing-3xl: clamp(2rem, 8vw, 3rem);
/* Spacing aliases — prefer these when spacing conveys role */
--chirpui-space-inline-gap: var(--chirpui-spacing-xs);
--chirpui-space-control-gap: var(--chirpui-spacing-sm);
--chirpui-space-cluster-gap: var(--chirpui-spacing-xs);
--chirpui-space-stack-gap: var(--chirpui-spacing);
--chirpui-space-section-gap: var(--chirpui-spacing-md);
--chirpui-space-page-gap: var(--chirpui-spacing-lg);
--chirpui-space-container-gutter: var(--chirpui-spacing);
--chirpui-space-card-padding: var(--chirpui-spacing);
--chirpui-space-card-gap: var(--chirpui-spacing-sm);
--chirpui-space-surface-padding: var(--chirpui-spacing);
--chirpui-space-result-gap: var(--chirpui-spacing-md);
--chirpui-measure-sm: 22rem;
--chirpui-measure-md: 32rem;
--chirpui-measure-lg: 48rem;
/* Sidebar — theme-overridable */
--chirpui-sidebar-active-bg: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
--chirpui-sidebar-active-color: var(--chirpui-accent);
--chirpui-sidebar-section-gap: var(--chirpui-spacing-md);
--chirpui-sidebar-link-gap: var(--chirpui-spacing-xs);
--chirpui-sidebar-collapsed-width: 4rem;
--chirpui-sidebar-expanded-width: 16rem;
--chirpui-sidebar-max-width: 20rem;
/* Radius */
--chirpui-radius-sm: 0.25rem;
--chirpui-radius: 0.5rem;
--chirpui-radius-lg: 0.75rem;
--chirpui-radius-xl: 1rem;
--chirpui-radius-2xl: 1.5rem;
/* Typography — fluid scale */
--chirpui-font-xs: 0.75rem;
--chirpui-font-sm: clamp(0.8125rem, 1.5vw, 0.875rem);
--chirpui-font-base: clamp(0.9375rem, 2vw, 1rem);
--chirpui-font-lg: clamp(1.0625rem, 2.5vw, 1.125rem);
--chirpui-font-xl: clamp(1.25rem, 3vw, 1.5rem);
--chirpui-font-2xl: clamp(1.5rem, 4vw, 1.75rem);
--chirpui-line-height-tight: 1.25;
--chirpui-line-height-normal: 1.5;
--chirpui-line-height-relaxed: 1.7;
/* UI typography — components (badges, cards, stats, labels) */
--chirpui-ui-xs: var(--chirpui-font-xs);
--chirpui-ui-sm: var(--chirpui-font-sm);
--chirpui-ui-base: var(--chirpui-font-base);
--chirpui-ui-lg: var(--chirpui-font-lg);
--chirpui-ui-xl: var(--chirpui-font-xl);
--chirpui-ui-font-family: ui-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--chirpui-ascii-font: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
--chirpui-font-optical-sizing: auto;
--chirpui-ui-font-weight-normal: 400;
--chirpui-ui-font-weight-medium: 500;
--chirpui-ui-font-weight-semibold: 600;
--chirpui-ui-font-weight-bold: 700;
/* Prose typography — document content (body, headings) */
--chirpui-prose-base: var(--chirpui-font-base);
--chirpui-prose-sm: var(--chirpui-font-sm);
--chirpui-prose-lg: var(--chirpui-font-lg);
--chirpui-prose-xl: var(--chirpui-font-xl);
--chirpui-prose-2xl: var(--chirpui-font-2xl);
--chirpui-prose-3xl: clamp(1.75rem, 5vw, 2rem);
--chirpui-prose-4xl: clamp(2rem, 6vw, 2.5rem);
--chirpui-prose-5xl: clamp(2.5rem, 8vw, 3rem);
--chirpui-prose-max-width: 65ch;
--chirpui-prose-font-family: ui-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--chirpui-prose-font-optical-sizing: auto;
--chirpui-prose-font-weight-normal: 400;
--chirpui-prose-font-weight-medium: 500;
--chirpui-prose-font-weight-heading: 600;
--chirpui-prose-font-weight-bold: 700;
/* Prose spacing — conventional vertical rhythm (override for looser/tighter) */
--chirpui-prose-spacing: 0.5em;
--chirpui-prose-spacing-heading: 0.75em;
/* Color — semantic tokens; light-dark() for dark mode (no @media duplication) */
color-scheme: light dark;
--chirpui-text: light-dark(#1e293b, #f1f5f9);
--chirpui-text-muted: light-dark(#64748b, #94a3b8);
--chirpui-surface: light-dark(#ffffff, #1e293b);
--chirpui-surface-alt: light-dark(#f8fafc, #334155);
--chirpui-border: light-dark(#e2e8f0, #475569);
--chirpui-border-subtle: color-mix(in srgb, var(--chirpui-border) 70%, transparent);
--chirpui-accent: light-dark(#0284c7, #38bdf8);
--chirpui-accent-hover: color-mix(in srgb, var(--chirpui-accent) var(--chirpui-shade-hover), black);
--chirpui-bg: light-dark(#f8fafc, #0f172a);
--chirpui-bg-subtle: light-dark(#f1f5f9, #1e293b);
--chirpui-surface-elevated: var(--chirpui-surface-alt);
--chirpui-focus-ring: color-mix(in srgb, var(--chirpui-accent) 30%, transparent);
/* Semantic — badges, status, progress, errors; *-muted use generic shade */
--chirpui-primary: light-dark(#5b9cf5, #93bbfc);
--chirpui-success: light-dark(#22c55e, #4ade80);
--chirpui-warning: light-dark(#f59e5b, #fbbf24);
--chirpui-error: light-dark(#dc2626, #f87171);
--chirpui-muted: light-dark(#6b7280, #9ca3af);
/* Optional component aliases */
--chirpui-card-header-color: var(--chirpui-text);
--chirpui-card-hover-border: var(--chirpui-border);
--chirpui-card-hover-shadow: var(--chirpui-elevation-2);
/* Card body links — titles/primary links in card content (no underline; card signals clickability) */
--chirpui-card-body-link-color: var(--chirpui-text);
--chirpui-card-body-link-decoration: none;
--chirpui-card-body-link-hover-color: var(--chirpui-accent);
/* Generic shade modifiers — apply to any color via color-mix(); themes override for global tuning */
--chirpui-shade-hover: 85%;
--chirpui-shade-active: 70%;
--chirpui-shade-light: 15%;
--chirpui-shade-dim: 40%;
--chirpui-shade-bright: 85%;
--chirpui-shade-muted: 15%;
/* Derived accent states — use generic shades; override base --chirpui-accent for all */
--chirpui-accent-dim: color-mix(in srgb, var(--chirpui-accent) var(--chirpui-shade-dim), black);
--chirpui-accent-bright: color-mix(in srgb, var(--chirpui-accent) var(--chirpui-shade-bright), white);
--chirpui-accent-light: color-mix(in srgb, var(--chirpui-accent) var(--chirpui-shade-light), white);
--chirpui-accent-active: color-mix(in srgb, var(--chirpui-accent) var(--chirpui-shade-active), black);
/* Semantic muted backgrounds — derived via generic shade */
--chirpui-primary-muted: color-mix(in srgb, var(--chirpui-primary) var(--chirpui-shade-muted), white);
--chirpui-success-muted: color-mix(in srgb, var(--chirpui-success) var(--chirpui-shade-muted), white);
--chirpui-warning-muted: color-mix(in srgb, var(--chirpui-warning) var(--chirpui-shade-muted), white);
--chirpui-error-muted: color-mix(in srgb, var(--chirpui-error) var(--chirpui-shade-muted), white);
--chirpui-muted-bg: color-mix(in srgb, var(--chirpui-muted) var(--chirpui-shade-muted), white);
/* Info semantic — alias of accent; override --chirpui-accent to change both */
--chirpui-info: var(--chirpui-accent);
/* Alert/admonition text/icon colors — derive from semantic base */
--chirpui-alert-info-color: var(--chirpui-info);
--chirpui-alert-success-color: var(--chirpui-success);
--chirpui-alert-warning-color: var(--chirpui-warning);
--chirpui-alert-error-color: var(--chirpui-error);
/* Secondary accent — second brand color for gradients, docs blocks, code syntax */
--chirpui-accent-secondary: light-dark(#7c3aed, #a78bfa);
--chirpui-accent-secondary-muted: color-mix(in srgb, var(--chirpui-accent-secondary) var(--chirpui-shade-muted), white);
--chirpui-alert-secondary-bg: light-dark(#f5f3ff, #2e1065);
--chirpui-alert-secondary-border: light-dark(#c4b5fd, #7c3aed);
--chirpui-alert-secondary-color: var(--chirpui-accent-secondary);
/* HTTP method tokens — API docs; map to semantic by default */
--chirpui-method-get: var(--chirpui-info);
--chirpui-method-get-bg: var(--chirpui-alert-info-bg);
--chirpui-method-get-border: var(--chirpui-alert-info-border);
--chirpui-method-post: var(--chirpui-success);
--chirpui-method-post-bg: var(--chirpui-alert-success-bg);
--chirpui-method-post-border: var(--chirpui-alert-success-border);
--chirpui-method-put: var(--chirpui-warning);
--chirpui-method-put-bg: var(--chirpui-alert-warning-bg);
--chirpui-method-put-border: var(--chirpui-alert-warning-border);
--chirpui-method-patch: var(--chirpui-warning);
--chirpui-method-patch-bg: var(--chirpui-alert-warning-bg);
--chirpui-method-patch-border: var(--chirpui-alert-warning-border);
--chirpui-method-delete: var(--chirpui-error);
--chirpui-method-delete-bg: var(--chirpui-alert-error-bg);
--chirpui-method-delete-border: var(--chirpui-alert-error-border);
--chirpui-method-head: var(--chirpui-muted);
--chirpui-method-head-bg: var(--chirpui-muted-bg);
--chirpui-method-head-border: var(--chirpui-border);
--chirpui-method-options: var(--chirpui-muted);
--chirpui-method-options-bg: var(--chirpui-muted-bg);
--chirpui-method-options-border: var(--chirpui-border);
/* Code syntax — inline code, code blocks, syntax highlighting */
--chirpui-code-bg: light-dark(#f1f5f9, #1e293b);
--chirpui-code-text: light-dark(#334155, #cbd5e1);
--chirpui-code-type: var(--chirpui-info);
--chirpui-code-type-bg: var(--chirpui-alert-info-bg);
--chirpui-code-keyword: light-dark(#7c3aed, #a78bfa);
--chirpui-code-string: light-dark(#059669, #34d399);
--chirpui-code-number: light-dark(#d97706, #fbbf24);
/* Code typography — font, size, line-height */
--chirpui-code-font-family: ui-monospace, ui-serif, "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
--chirpui-mono-font-family: var(--chirpui-code-font-family);
--chirpui-code-font-size-inline: 0.9em;
--chirpui-code-font-size-block: var(--chirpui-prose-sm);
--chirpui-code-line-height: 1.6;
--chirpui-pre-padding: var(--chirpui-spacing-sm);
/* Motion primitives */
--chirpui-motion-fast: 120ms;
--chirpui-motion-base: 150ms;
--chirpui-motion-slow: 250ms;
--chirpui-motion-slower: 400ms;
--chirpui-motion-extra-slow: 600ms;
--chirpui-motion-crawl: 1500ms;
--chirpui-motion-loading: 8s;
--chirpui-ease-standard: ease;
--chirpui-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
--chirpui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--chirpui-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--chirpui-ease-decel: cubic-bezier(0, 0, 0.2, 1);
--chirpui-ease-accel: cubic-bezier(0.4, 0, 1, 1);
/* Effect colors — shimmer, ripple, glow, beam */
--chirpui-shimmer-from: color-mix(in srgb, var(--chirpui-border) 40%, transparent);
--chirpui-shimmer-via: color-mix(in srgb, var(--chirpui-surface) 80%, transparent);
--chirpui-shimmer-to: color-mix(in srgb, var(--chirpui-border) 40%, transparent);
--chirpui-ripple-color: color-mix(in srgb, var(--chirpui-accent) 25%, transparent);
--chirpui-beam-color: var(--chirpui-accent);
--chirpui-glow-color: color-mix(in srgb, var(--chirpui-accent) 40%, transparent);
/* Backward-compatible motion aliases */
--chirpui-transition: var(--chirpui-motion-base) var(--chirpui-ease-standard);
--chirpui-transition-slow: var(--chirpui-motion-slow) var(--chirpui-ease-standard);
--chirpui-transition-emphasized: var(--chirpui-motion-base) var(--chirpui-ease-emphasized);
/* Drag-drop tactile polish */
--chirpui-dnd-lift-scale: 1.02;
--chirpui-dnd-lift-offset-y: -4px;
--chirpui-dnd-lift-shadow: var(--chirpui-shadow-lg);
--chirpui-dnd-drag-opacity: 0.5;
--chirpui-dnd-ghost-opacity: 0.4;
--chirpui-dnd-drop-indicator-color: var(--chirpui-accent);
--chirpui-dnd-drop-indicator-width: 2px;
--chirpui-dnd-transition: var(--chirpui-motion-base) var(--chirpui-ease-emphasized);
--chirpui-dnd-drag-transition: var(--chirpui-motion-fast) var(--chirpui-ease-standard);
/* Avatar */
--chirpui-avatar-size-sm: 2rem;
--chirpui-avatar-size-md: 2.5rem;
--chirpui-avatar-size-lg: 3.5rem;
/* Video */
--chirpui-video-aspect-ratio: 16 / 9;
/* Message bubble */
--chirpui-message-bubble-radius: var(--chirpui-radius-lg);
--chirpui-message-bubble-user-bg: var(--chirpui-accent);
--chirpui-message-bubble-user-color: var(--chirpui-surface);
--chirpui-message-bubble-assistant-bg: var(--chirpui-bg-subtle);
--chirpui-message-bubble-assistant-color: var(--chirpui-text);
--chirpui-message-bubble-system-bg: var(--chirpui-muted-bg);
--chirpui-message-bubble-system-color: var(--chirpui-text-muted);
--chirpui-message-bubble-padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
--chirpui-message-bubble-max-width: 85%;
--chirpui-message-bubble-gap: var(--chirpui-spacing-sm);
/* Page header — component aliases */
--chirpui-page-header-padding: var(--chirpui-spacing-md);
--chirpui-page-header-gap: var(--chirpui-space-page-gap);
--chirpui-page-header-title-size: var(--chirpui-ui-lg);
--chirpui-page-header-title-weight: var(--chirpui-ui-font-weight-bold);
--chirpui-page-header-bg: transparent;
--chirpui-page-header-border: none;
/* Chat layout */
--chirpui-chat-layout-gap: var(--chirpui-spacing-md);
--chirpui-chat-layout-messages-padding: var(--chirpui-spacing-md);
--chirpui-chat-layout-input-padding: var(--chirpui-spacing-md);
--chirpui-chat-layout-input-border: 1px solid var(--chirpui-border);
--chirpui-chat-layout-activity-width: 280px;
--chirpui-chat-layout-min-height: 400px;
/* Workbench */
--chirpui-panel-header-padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-md);
--chirpui-panel-body-padding: var(--chirpui-spacing-md);
--chirpui-panel-footer-padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-md);
--chirpui-panel-min-height: 14rem;
--chirpui-file-tree-padding: var(--chirpui-spacing-md);
--chirpui-empty-panel-state-icon-size: 2rem;
--chirpui-split-sidebar-width: 18rem;
--chirpui-split-balanced-width: 1fr;
--chirpui-split-wide-width: minmax(0, 1.6fr);
--chirpui-split-narrow-width: minmax(16rem, 0.75fr);
--chirpui-workspace-min-height: 32rem;
/* Layout */
--chirpui-container-max: 72rem;
--chirpui-grid-min: 20rem;
/* grid() presets — @media below uses the same rem literals (var() not in @media). */
--chirpui-layout-bp-sm: 48rem;
--chirpui-layout-bp-md: 52rem;
--chirpui-layout-bp-lg: 64rem;
/* frame() — explicit tracks; override per wrapper via style= or theme */
--chirpui-frame-gap: var(--chirpui-spacing-lg);
--chirpui-frame-balanced-columns: minmax(0, 1fr) minmax(0, 1fr);
--chirpui-frame-hero-columns: minmax(0, 1fr) minmax(0, 1.25fr);
--chirpui-frame-sidebar-width: var(--chirpui-split-sidebar-width);
--chirpui-modal-width: 32rem;
--chirpui-modal-width-sm: 24rem;
--chirpui-modal-width-lg: 48rem;
--chirpui-toast-width: 24rem;
/* Tooltip — maps to theme (default matches floating menus); invert via tokens if needed */
--chirpui-tooltip-bg: var(--chirpui-surface);
--chirpui-tooltip-fg: var(--chirpui-text);
--chirpui-tooltip-border: 1px solid var(--chirpui-border);
--chirpui-tooltip-shadow: var(--chirpui-elevation-floating);
--chirpui-tooltip-radius: var(--chirpui-radius-sm);
--chirpui-tooltip-font-size: var(--chirpui-ui-xs);
--chirpui-tooltip-font-weight: var(--chirpui-ui-font-weight-medium);
--chirpui-tooltip-line-height: var(--chirpui-line-height-tight);
--chirpui-tooltip-padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
--chirpui-tooltip-gap: var(--chirpui-spacing-sm);
--chirpui-tooltip-max-width: min(16rem, 85vw);
--chirpui-tooltip-z: 50;
/* Alert variants */
--chirpui-alert-info-bg: light-dark(#eff6ff, #1e3a5f);
--chirpui-alert-info-border: light-dark(#bfdbfe, #3b82f6);
--chirpui-alert-success-bg: light-dark(#f0fdf4, #14532d);
--chirpui-alert-success-border: light-dark(#bbf7d0, #22c55e);
--chirpui-alert-warning-bg: light-dark(#fffbeb, #422006);
--chirpui-alert-warning-border: light-dark(#fde68a, #f59e0b);
--chirpui-alert-error-bg: light-dark(#fef2f2, #450a0a);
--chirpui-alert-error-border: light-dark(#fecaca, #ef4444);
/* Shadows adapt to scheme (core primitives) */
--chirpui-shadow-xs: light-dark(0 1px 1px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.2));
--chirpui-shadow-sm: light-dark(0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3));
--chirpui-shadow-md: light-dark(
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1),
0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3)
);
--chirpui-shadow-lg: light-dark(
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1),
0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4)
);
--chirpui-shadow-xl: light-dark(
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1),
0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4)
);
/* Elevation semantics */
--chirpui-elevation-0: none;
--chirpui-elevation-1: var(--chirpui-shadow-sm);
--chirpui-elevation-2: var(--chirpui-shadow-md);
--chirpui-elevation-3: var(--chirpui-shadow-lg);
--chirpui-elevation-4: var(--chirpui-shadow-xl);
--chirpui-elevation-card-rest: var(--chirpui-elevation-1);
--chirpui-elevation-card-hover: var(--chirpui-elevation-2);
--chirpui-elevation-floating: var(--chirpui-elevation-2);
--chirpui-elevation-overlay: var(--chirpui-elevation-3);
--chirpui-elevation-topbar: var(--chirpui-elevation-1);
/* Interaction state semantics */
--chirpui-state-surface-hover: var(--chirpui-bg-subtle);
--chirpui-state-surface-active: color-mix(in srgb, var(--chirpui-accent) 12%, var(--chirpui-bg-subtle));
--chirpui-state-border-hover: color-mix(in srgb, var(--chirpui-accent) 35%, var(--chirpui-border));
--chirpui-state-border-active: color-mix(in srgb, var(--chirpui-accent) 55%, var(--chirpui-border));
--chirpui-state-text-hover: var(--chirpui-accent-hover);
--chirpui-state-focus-outline: 2px solid var(--chirpui-accent);
--chirpui-state-focus-offset: 2px;
/* Style-axis defaults (data-style="default|neumorphic") */
--chirpui-neu-surface: var(--chirpui-surface);
--chirpui-neu-raised: var(--chirpui-shadow-sm);
--chirpui-neu-inset: inset 0 1px 2px rgba(15, 23, 42, 0.12);
--chirpui-neu-pressed: inset 0 2px 5px rgba(15, 23, 42, 0.18);
--chirpui-neu-highlight-border: color-mix(in srgb, white 50%, var(--chirpui-border));
--chirpui-neu-lowlight-border: color-mix(in srgb, black 16%, var(--chirpui-border));
--chirpui-neu-chamfer: color-mix(in srgb, white 34%, transparent);
/* Overlay — for text-on-image contrast */
--chirpui-overlay-dark: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
--chirpui-overlay-gradient-bottom: linear-gradient(
to top,
rgba(0, 0, 0, 0.6),
transparent
);
--chirpui-overlay-gradient-top: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.6),
transparent
);
/* Glass / frosted — backdrop-filter required */
--chirpui-glass-bg: light-dark(
rgba(255, 255, 255, 0.25),
rgba(30, 41, 59, 0.4)
);
--chirpui-glass-border: light-dark(
rgba(255, 255, 255, 0.4),
rgba(71, 85, 105, 0.3)
);
--chirpui-frosted-bg: light-dark(
rgba(255, 255, 255, 0.4),
rgba(30, 41, 59, 0.5)
);
--chirpui-frosted-border: light-dark(
rgba(255, 255, 255, 0.5),
rgba(71, 85, 105, 0.4)
);
--chirpui-smoke-bg: light-dark(
rgba(0, 0, 0, 0.08),
rgba(0, 0, 0, 0.25)
);
--chirpui-smoke-border: light-dark(
rgba(0, 0, 0, 0.1),
rgba(255, 255, 255, 0.08)
);
/* Gradient presets — theme-overridable */
--chirpui-gradient-subtle: linear-gradient(
135deg,
var(--chirpui-bg-subtle) 0%,
color-mix(in srgb, var(--chirpui-accent) 6%, var(--chirpui-bg)) 100%
);
--chirpui-gradient-accent: linear-gradient(
135deg,
color-mix(in srgb, var(--chirpui-accent) 15%, white) 0%,
color-mix(in srgb, var(--chirpui-accent) 8%, var(--chirpui-bg)) 100%
);
--chirpui-gradient-border: linear-gradient(
to right,
var(--chirpui-accent),
var(--chirpui-accent-secondary),
var(--chirpui-accent)
);
--chirpui-gradient-split: linear-gradient(
to right,
var(--chirpui-surface) 0%,
var(--chirpui-surface) 50%,
var(--chirpui-bg-subtle) 50%,
var(--chirpui-bg-subtle) 100%
);
/* Mesh — simulated via radial overlays (BBC-style ambient) */
--chirpui-gradient-mesh: radial-gradient(
ellipse 80% 50% at 20% 40%,
color-mix(in srgb, var(--chirpui-accent) 25%, transparent),
transparent
),
radial-gradient(
ellipse 60% 80% at 80% 20%,
color-mix(in srgb, var(--chirpui-accent-secondary) 20%, transparent),
transparent
),
var(--chirpui-bg);
}
/* Force light theme when [data-theme="light"] */
[data-theme="light"] {
--chirpui-text: #1e293b;
--chirpui-text-muted: #64748b;
--chirpui-surface: #ffffff;
--chirpui-surface-alt: #f8fafc;
--chirpui-border: #e2e8f0;
--chirpui-accent: #0284c7;
--chirpui-bg: #f8fafc;
--chirpui-bg-subtle: #f1f5f9;
--chirpui-alert-info-bg: #eff6ff;
--chirpui-alert-info-border: #bfdbfe;
--chirpui-alert-success-bg: #f0fdf4;
--chirpui-alert-success-border: #bbf7d0;
--chirpui-alert-warning-bg: #fffbeb;
--chirpui-alert-warning-border: #fde68a;
--chirpui-alert-error-bg: #fef2f2;
--chirpui-alert-error-border: #fecaca;
--chirpui-primary: #5b9cf5;
--chirpui-success: #22c55e;
--chirpui-warning: #f59e5b;
--chirpui-error: #dc2626;
--chirpui-muted: #6b7280;
--chirpui-accent-secondary: #7c3aed;
--chirpui-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
--chirpui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--chirpui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--chirpui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--chirpui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
@supports (color: oklch(0 0 0)) {
:root {
--chirpui-text: light-dark(oklch(0.24 0.02 260), oklch(0.965 0.005 260));
--chirpui-text-muted: light-dark(oklch(0.55 0.02 261), oklch(0.68 0.02 260));
--chirpui-surface: light-dark(oklch(1 0 0), oklch(0.24 0.02 260));
--chirpui-surface-alt: light-dark(oklch(0.985 0.002 260), oklch(0.31 0.02 260));
--chirpui-border: light-dark(oklch(0.92 0.01 260), oklch(0.42 0.02 260));
--chirpui-accent: light-dark(oklch(0.55 0.15 230), oklch(0.78 0.12 230));
--chirpui-accent-hover: light-dark(oklch(0.45 0.15 230), oklch(0.85 0.1 230));
--chirpui-bg: light-dark(oklch(0.985 0.002 260), oklch(0.18 0.02 260));
--chirpui-bg-subtle: light-dark(oklch(0.965 0.005 260), oklch(0.24 0.02 260));
--chirpui-alert-info-bg: light-dark(oklch(0.97 0.02 250), oklch(0.25 0.06 250));
--chirpui-alert-info-border: light-dark(oklch(0.84 0.06 250), oklch(0.6 0.15 250));
--chirpui-alert-success-bg: light-dark(oklch(0.975 0.02 145), oklch(0.22 0.06 145));
--chirpui-alert-success-border: light-dark(oklch(0.88 0.08 145), oklch(0.65 0.19 145));
--chirpui-alert-warning-bg: light-dark(oklch(0.985 0.02 85), oklch(0.28 0.06 85));
--chirpui-alert-warning-border: light-dark(oklch(0.9 0.1 85), oklch(0.75 0.15 85));
--chirpui-alert-error-bg: light-dark(oklch(0.975 0.02 25), oklch(0.28 0.06 25));
--chirpui-alert-error-border: light-dark(oklch(0.88 0.08 25), oklch(0.6 0.2 25));
}
[data-theme="light"] {
--chirpui-text: oklch(0.24 0.02 260);
--chirpui-text-muted: oklch(0.55 0.02 261);
--chirpui-surface: oklch(1 0 0);
--chirpui-surface-alt: oklch(0.985 0.002 260);
--chirpui-border: oklch(0.92 0.01 260);
--chirpui-accent: oklch(0.55 0.15 230);
--chirpui-accent-hover: oklch(0.45 0.15 230);
--chirpui-bg: oklch(0.985 0.002 260);
--chirpui-bg-subtle: oklch(0.965 0.005 260);
--chirpui-alert-info-bg: oklch(0.97 0.02 250);
--chirpui-alert-info-border: oklch(0.84 0.06 250);
--chirpui-alert-success-bg: oklch(0.975 0.02 145);
--chirpui-alert-success-border: oklch(0.88 0.08 145);
--chirpui-alert-warning-bg: oklch(0.985 0.02 85);
--chirpui-alert-warning-border: oklch(0.9 0.1 85);
--chirpui-alert-error-bg: oklch(0.975 0.02 25);
--chirpui-alert-error-border: oklch(0.88 0.08 25);
--chirpui-primary: oklch(0.55 0.15 250);
--chirpui-success: oklch(0.6 0.18 145);
--chirpui-warning: oklch(0.72 0.15 65);
--chirpui-error: oklch(0.55 0.2 25);
--chirpui-muted: oklch(0.55 0.02 260);
}
[data-theme="dark"] {
--chirpui-primary: oklch(0.65 0.15 250);
--chirpui-success: oklch(0.7 0.18 145);
--chirpui-warning: oklch(0.8 0.15 65);
--chirpui-error: oklch(0.65 0.2 25);
--chirpui-muted: oklch(0.6 0.02 260);
}
}
/* Use oklch for color-mix when supported — better perceptual uniformity */
@supports (color: oklch(0 0 0)) {
:root {
--chirpui-accent-hover: color-mix(in oklch, var(--chirpui-accent) var(--chirpui-shade-hover), black);
--chirpui-accent-dim: color-mix(in oklch, var(--chirpui-accent) var(--chirpui-shade-dim), black);
--chirpui-accent-bright: color-mix(in oklch, var(--chirpui-accent) var(--chirpui-shade-bright), white);
--chirpui-accent-light: color-mix(in oklch, var(--chirpui-accent) var(--chirpui-shade-light), white);
--chirpui-accent-active: color-mix(in oklch, var(--chirpui-accent) var(--chirpui-shade-active), black);
--chirpui-primary-muted: color-mix(in oklch, var(--chirpui-primary) var(--chirpui-shade-muted), white);
--chirpui-success-muted: color-mix(in oklch, var(--chirpui-success) var(--chirpui-shade-muted), white);
--chirpui-warning-muted: color-mix(in oklch, var(--chirpui-warning) var(--chirpui-shade-muted), white);
--chirpui-error-muted: color-mix(in oklch, var(--chirpui-error) var(--chirpui-shade-muted), white);
--chirpui-muted-bg: color-mix(in oklch, var(--chirpui-muted) var(--chirpui-shade-muted), white);
--chirpui-accent-secondary-muted: color-mix(in oklch, var(--chirpui-accent-secondary) var(--chirpui-shade-muted), white);
--chirpui-focus-ring: color-mix(in oklch, var(--chirpui-accent) 30%, transparent);
--chirpui-border-subtle: color-mix(in oklch, var(--chirpui-border) 70%, transparent);
}
}
/* ==========================================================================
Base — prevent layout shift from scrollbar
========================================================================== */
html {
scrollbar-gutter: stable;
}
/* ==========================================================================
Layout — Tetris-inspired block system
========================================================================== */
.chirpui-container {
container-type: inline-size;
container-name: chirpui-layout;
width: 100%;
max-width: min(var(--chirpui-container-max), 90vw);
margin-inline: auto;
padding-inline: var(--chirpui-space-container-gutter);
}
.chirpui-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--chirpui-grid-min), 100%), 1fr));
gap: var(--chirpui-space-stack-gap);
}
/* Grid items default to min-width:auto (min-content), so rich cells overflow tracks and cover gap.
Matches .chirpui-block; use block() when you need span= or explicit cell semantics. */
.chirpui-grid > * {
min-width: 0;
}
.chirpui-grid--cols-2 {
grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--chirpui-grid-min) * 0.75), 100%), 1fr));
}
.chirpui-grid--cols-3 {
grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--chirpui-grid-min) * 0.6), 100%), 1fr));
}
.chirpui-grid--cols-4 {
grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--chirpui-grid-min) * 0.5), 100%), 1fr));
}
.chirpui-grid--gap-sm { gap: var(--chirpui-spacing-sm); }
.chirpui-grid--gap-md { gap: var(--chirpui-spacing-md); }
.chirpui-grid--gap-lg { gap: var(--chirpui-spacing-lg); }
/* Row alignment for uneven-height cells (default grid align-items is stretch) */
.chirpui-grid--items-start {
align-items: start;
}
.chirpui-grid--items-end {
align-items: end;
}
.chirpui-grid--items-center {
align-items: center;
}
/* Fixed-track presets for grid() — see docs/LAYOUT-PRESETS.md (aliases: split-2-1-1, split-thirds, …) */
.chirpui-grid.chirpui-grid--preset-bento-211 {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.chirpui-grid.chirpui-grid--preset-thirds {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Two-column detail row (1fr : 1.35fr); stacks at 52rem. detail_single = one full-width column. */
.chirpui-grid.chirpui-grid--preset-detail-two {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
align-items: stretch;
}
.chirpui-grid.chirpui-grid--preset-detail-two.chirpui-grid--detail-two-single {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-grid.chirpui-grid--preset-detail-two .chirpui-block .chirpui-surface,
.chirpui-grid.chirpui-grid--preset-detail-two .chirpui-block .chirpui-callout {
height: 100%;
}
.chirpui-grid.chirpui-grid--preset-detail-two .chirpui-cluster--detail-two-sprites {
flex-wrap: wrap;
justify-content: flex-start;
}
.chirpui-grid.chirpui-grid--preset-detail-two.chirpui-grid--detail-two-single .chirpui-cluster--detail-two-sprites {
justify-content: center;
}
/* --chirpui-layout-bp-md */
@media (max-width: 52rem) {
.chirpui-grid.chirpui-grid--preset-detail-two:not(.chirpui-grid--detail-two-single) {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-grid.chirpui-grid--preset-detail-two .chirpui-cluster--detail-two-sprites {
justify-content: center;
}
}
/* --chirpui-layout-bp-lg */
@media (max-width: 64rem) {
.chirpui-grid.chirpui-grid--preset-bento-211 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.chirpui-grid.chirpui-grid--preset-bento-211 .chirpui-block--span-2 {
grid-column: 1 / -1;
}
}
/* --chirpui-layout-bp-sm */
@media (max-width: 48rem) {
.chirpui-grid.chirpui-grid--preset-bento-211,
.chirpui-grid.chirpui-grid--preset-thirds {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-grid.chirpui-grid--preset-bento-211 .chirpui-block--span-2 {
grid-column: span 1;
}
}
/* --------------------------------------------------------------------------
Frame — structural layouts (hero, sidebar, equal columns). Not auto-fit flow.
Use grid() for wrapping card/tile lists. See docs/LAYOUT-GRIDS-AND-FRAMES.md.
-------------------------------------------------------------------------- */
.chirpui-frame {
display: grid;
gap: var(--chirpui-frame-gap);
min-width: 0;
}
.chirpui-frame > * {
min-width: 0;
}
.chirpui-frame--gap-sm {
gap: var(--chirpui-spacing-sm);
}
.chirpui-frame--gap-md {
gap: var(--chirpui-spacing-md);
}
.chirpui-frame--gap-lg {
gap: var(--chirpui-spacing-lg);
}
.chirpui-frame--balanced {
grid-template-columns: var(--chirpui-frame-balanced-columns);
}
.chirpui-frame--hero {
align-items: center;
grid-template-columns: var(--chirpui-frame-hero-columns);
}
.chirpui-frame--sidebar-end {
grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--chirpui-frame-sidebar-width), 100%));
}
@container chirpui-layout (width < 48rem) {
.chirpui-frame--balanced,
.chirpui-frame--hero,
.chirpui-frame--sidebar-end {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-frame--hero {
align-items: stretch;
}
}
@media (max-width: 48rem) {
.chirpui-frame--balanced,
.chirpui-frame--hero,
.chirpui-frame--sidebar-end {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-frame--hero {
align-items: stretch;
}
}
.chirpui-stack {
display: flex;
flex-direction: column;
gap: var(--chirpui-space-stack-gap);
}
.chirpui-stack--xs { gap: var(--chirpui-spacing-xs); }
.chirpui-stack--sm { gap: var(--chirpui-spacing-sm); }
.chirpui-stack--md { gap: var(--chirpui-spacing-md); }
.chirpui-stack--lg { gap: var(--chirpui-spacing-lg); }
.chirpui-stack--xl { gap: var(--chirpui-spacing-xl); }
.chirpui-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--chirpui-space-cluster-gap);
}
.chirpui-cluster--xs { gap: var(--chirpui-spacing-xs); }
.chirpui-cluster--sm { gap: var(--chirpui-spacing-sm); }
.chirpui-cluster--md { gap: var(--chirpui-spacing-md); }
.chirpui-cluster--lg { gap: var(--chirpui-spacing-lg); }
/* Label overline — see label_overline.html */
.chirpui-label-overline {
display: block;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 0.35rem;
}
.chirpui-label-overline--section {
margin-bottom: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
}
/* Prose + stack: use block flow so margins collapse; stack gap would double spacing */
.chirpui-prose.chirpui-stack {
display: block;
}
.chirpui-block {
min-width: 0;
}
/* Escape hatch for custom flex rows / raw markup (Tailwind-style min-w-0). */
.chirpui-min-w-0 {
min-width: 0;
}
.chirpui-block--span-2 { grid-column: span 2; }
.chirpui-block--span-3 { grid-column: span 3; }
.chirpui-block--span-full { grid-column: 1 / -1; }
@container chirpui-layout (width < 768px) {
.chirpui-block--span-2,
.chirpui-block--span-3 {
grid-column: span 1;
}
}
.chirpui-page-header {
padding: var(--chirpui-page-header-padding);
background: var(--chirpui-page-header-bg);
border: var(--chirpui-page-header-border);
}
.chirpui-page-header__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--chirpui-page-header-gap);
}
.chirpui-page-header__top > div:first-child {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
}
.chirpui-page-header__actions {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
flex-wrap: wrap;
flex-shrink: 0;
}
.chirpui-page-header__actions:empty {
display: none;
}
.chirpui-page-header__breadcrumbs {
margin-bottom: var(--chirpui-spacing-xs);
}
.chirpui-page-header__meta {
margin-top: var(--chirpui-spacing-xs);
margin-bottom: 0;
}
.chirpui-document-header {
display: flex;
flex-direction: column;
gap: var(--chirpui-spacing-sm);
}
.chirpui-document-header__eyebrow {
margin: 0;
padding: 0 var(--chirpui-page-header-padding);
color: var(--chirpui-text-muted);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.chirpui-document-header__page-header {
padding-bottom: 0;
}
.chirpui-document-header__details {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--chirpui-spacing-sm);
padding: 0 var(--chirpui-page-header-padding) var(--chirpui-page-header-padding);
color: var(--chirpui-text-muted);
font-size: var(--chirpui-ui-sm);
}
.chirpui-document-header__path {
padding: 0.15rem 0.45rem;
border-radius: var(--chirpui-radius-sm);
border: 1px solid var(--chirpui-border-subtle);
background: var(--chirpui-bg-subtle);
color: var(--chirpui-text);
font-family: var(--chirpui-ascii-font);
font-size: 0.95em;
}
.chirpui-document-header__detail {
white-space: nowrap;
}
.chirpui-document-header__status {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: var(--chirpui-bg-subtle);
color: var(--chirpui-text);
font-weight: var(--chirpui-ui-font-weight-medium);
}
.chirpui-section-header {
margin-bottom: var(--chirpui-space-section-gap);
padding-bottom: var(--chirpui-space-section-gap);
border-bottom: 1px solid var(--chirpui-border-subtle);
}
.chirpui-section-header__title-block {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
}
.chirpui-section-header__icon {
font-size: 1em;
line-height: 1;
flex-shrink: 0;
}
.chirpui-section-header__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--chirpui-space-section-gap);
}
.chirpui-section-header__top > .chirpui-section-header__title-block {
flex: 1 1 auto;
min-width: 0;
}
.chirpui-section-header__title-block > div {
min-width: 0;
overflow-wrap: break-word;
}
.chirpui-section-header__actions {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
flex-wrap: wrap;
flex-shrink: 0;
}
.chirpui-section-header__actions:empty {
display: none;
}
.chirpui-page-header h1 {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-page-header-title-size);
font-weight: var(--chirpui-page-header-title-weight);
margin: 0;
}
.chirpui-page-header--compact {
--chirpui-page-header-padding: 0.6rem 1.25rem;
--chirpui-page-header-gap: var(--chirpui-space-control-gap);
--chirpui-page-header-title-size: var(--chirpui-ui-base);
--chirpui-page-header-title-weight: var(--chirpui-ui-font-weight-semibold);
--chirpui-page-header-bg: var(--chirpui-bg-subtle);
--chirpui-page-header-border: 1px solid var(--chirpui-border-subtle);
flex-direction: row;
align-items: center;
}
.chirpui-page-header--compact .chirpui-page-header__top {
flex-direction: row;
align-items: center;
}
.chirpui-section-header h2 {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-base);
font-weight: var(--chirpui-ui-font-weight-semibold);
margin: 0;
}
.chirpui-section-header--inline .chirpui-section-header__top {
align-items: center;
}
.chirpui-section-header--inline .chirpui-section-header__title-block {
align-items: center;
}
.chirpui-section-header--inline .chirpui-section-header__title-inline {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-base);
font-weight: var(--chirpui-ui-font-weight-semibold);
margin: 0;
}
.chirpui-section-collapsible__summary {
list-style: none;
cursor: pointer;
}
.chirpui-section-collapsible__summary::-webkit-details-marker {
display: none;
}
.chirpui-section-collapsible__summary::marker {
display: none;
}
/* ==========================================================================
Workbench
========================================================================== */
.chirpui-panel {
display: flex;
flex-direction: column;
min-height: var(--chirpui-panel-min-height);
overflow: hidden;
}
.chirpui-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--chirpui-space-control-gap);
padding: var(--chirpui-panel-header-padding);
border-bottom: 1px solid var(--chirpui-border-subtle);
}
.chirpui-panel__heading {
min-width: 0;
}
.chirpui-panel__title {
margin: 0;
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-base);
font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-panel__subtitle {
margin: var(--chirpui-spacing-xs) 0 0;
color: var(--chirpui-text-muted);
font-size: var(--chirpui-ui-sm);
}
.chirpui-panel__actions {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
flex-wrap: wrap;
flex-shrink: 0;
}
.chirpui-panel__actions:empty,
.chirpui-panel__footer:empty {
display: none;
}
.chirpui-panel__body {
padding: var(--chirpui-panel-body-padding);
min-height: 0;
}
.chirpui-panel__body--scroll {
flex: 1 1 auto;
overflow: auto;
}
.chirpui-panel__footer {
padding: var(--chirpui-panel-footer-padding);
border-top: 1px solid var(--chirpui-border-subtle);
}
.chirpui-file-tree .chirpui-panel__body {
padding: 0;
}
.chirpui-file-tree__nav {
height: 100%;
}
.chirpui-file-tree__nav .chirpui-nav-tree__header {
padding: var(--chirpui-spacing-sm) var(--chirpui-file-tree-padding) 0;
margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-file-tree__nav .chirpui-nav-tree__list {
padding: 0 var(--chirpui-file-tree-padding) var(--chirpui-file-tree-padding);
}
.chirpui-split-layout {
display: grid;
gap: var(--chirpui-spacing-md);
min-width: 0;
align-items: stretch;
}
.chirpui-split-layout--gap-sm { gap: var(--chirpui-spacing-sm); }
.chirpui-split-layout--gap-md { gap: var(--chirpui-spacing-md); }
.chirpui-split-layout--gap-lg { gap: var(--chirpui-spacing-lg); }
.chirpui-split-layout--horizontal {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-split-layout--vertical {
grid-template-columns: minmax(0, 1fr);
}
.chirpui-split-layout--vertical > .chirpui-split-layout__primary,
.chirpui-split-layout--vertical > .chirpui-split-layout__secondary,
.chirpui-split-layout__primary,
.chirpui-split-layout__secondary {
min-width: 0;
}
.chirpui-split-layout--vertical {
grid-template-rows: auto auto;
}
.chirpui-split-layout--horizontal.chirpui-split-layout--sidebar {
grid-template-columns: minmax(14rem, var(--chirpui-split-sidebar-width)) minmax(0, 1fr);
}
.chirpui-split-layout--horizontal.chirpui-split-layout--balanced {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.chirpui-split-layout--horizontal.chirpui-split-layout--wide-primary {
grid-template-columns: var(--chirpui-split-wide-width) var(--chirpui-split-narrow-width);
}
.chirpui-split-layout--horizontal.chirpui-split-layout--wide-secondary {
grid-template-columns: var(--chirpui-split-narrow-width) var(--chirpui-split-wide-width);
}
.chirpui-workspace-shell {
display: flex;
flex-direction: column;
gap: var(--chirpui-spacing-md);
}
.chirpui-workspace-shell__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--chirpui-page-header-gap);
padding: var(--chirpui-page-header-padding);
background: var(--chirpui-page-header-bg);
border: var(--chirpui-page-header-border);
}
.chirpui-workspace-shell__heading {
min-width: 0;
}
.chirpui-workspace-shell__title {
margin: 0;
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-lg);
font-weight: var(--chirpui-ui-font-weight-bold);
}
.chirpui-workspace-shell__subtitle {
margin: var(--chirpui-spacing-xs) 0 0;
color: var(--chirpui-text-muted);
font-size: var(--chirpui-ui-sm);
}
.chirpui-workspace-shell__toolbar {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
flex-wrap: wrap;
justify-content: flex-end;
flex-shrink: 0;
}
.chirpui-workspace-shell__toolbar:empty {
display: none;
}
.chirpui-workspace-shell__layout,
.chirpui-workspace-shell__content-layout {
min-height: var(--chirpui-workspace-min-height);
}
.chirpui-workspace-shell__main {
min-width: 0;
min-height: 100%;
}
@container chirpui-layout (width < 960px) {
.chirpui-split-layout--horizontal.chirpui-split-layout--sidebar,
.chirpui-split-layout--horizontal.chirpui-split-layout--wide-primary,
.chirpui-split-layout--horizontal.chirpui-split-layout--wide-secondary,
.chirpui-split-layout--horizontal.chirpui-split-layout--balanced {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
Entity header (dashboard-grade)
========================================================================== */
.chirpui-entity-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--chirpui-space-section-gap);
flex-wrap: wrap;
}
.chirpui-entity-header__content {
display: flex;
align-items: flex-start;
gap: var(--chirpui-space-control-gap);
flex: 1 1 auto;
min-width: 0;
}
.chirpui-entity-header__content > div {
min-width: 0;
overflow-wrap: break-word;
}
.chirpui-entity-header__icon {
font-size: var(--chirpui-ui-lg);
line-height: 1;
flex-shrink: 0;
}
.chirpui-entity-header__title {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-lg);
font-weight: var(--chirpui-ui-font-weight-bold);
margin: 0;
}
.chirpui-entity-header__meta {
margin-top: var(--chirpui-spacing-xs);
margin-bottom: 0;
}
.chirpui-entity-header__actions {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
flex-shrink: 0;
}
.chirpui-entity-header__actions:empty {
display: none;
}
/* ==========================================================================
Inline edit field
========================================================================== */
.chirpui-inline-edit {
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-sm);
}
.chirpui-inline-edit--display {
cursor: pointer;
padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
margin: calc(-1 * var(--chirpui-spacing-xs)) calc(-1 * var(--chirpui-spacing-sm));
border-radius: var(--chirpui-radius-sm);
}
.chirpui-inline-edit--display:hover {
background: color-mix(in srgb, var(--chirpui-accent) 8%, transparent);
}
.chirpui-inline-edit--display .chirpui-inline-edit__value {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-base);
}
.chirpui-inline-edit--edit .chirpui-inline-edit__form {
display: flex;
align-items: center;
gap: var(--chirpui-spacing-sm);
}
.chirpui-inline-edit__input {
min-width: 12ch;
}
.chirpui-inline-edit__actions {
display: flex;
gap: var(--chirpui-spacing-xs);
}
.chirpui-inline-edit__trigger {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
}
.chirpui-inline-edit__icon {
font-size: 0.85em;
opacity: 0.75;
}
.chirpui-inline-edit__trigger:hover .chirpui-inline-edit__icon {
opacity: 1;
}
/* ==========================================================================
Row actions (kebab menu)
========================================================================== */
.chirpui-row-actions__trigger {
padding: var(--chirpui-spacing-xs);
}
/* ==========================================================================
Divider
========================================================================== */
.chirpui-divider {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
width: 100%;
margin: var(--chirpui-spacing) 0;
}
.chirpui-divider::before,
.chirpui-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--chirpui-border);
}
.chirpui-divider:not(:has(.chirpui-divider__text))::before,
.chirpui-divider:not(:has(.chirpui-divider__text))::after {
display: none;
}
.chirpui-divider:not(:has(.chirpui-divider__text)) {
border-block-start: 1px solid var(--chirpui-border);
}
.chirpui-divider__text {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-medium);
color: var(--chirpui-text-muted);
white-space: nowrap;
}
.chirpui-divider--horizontal {
flex-direction: row;
}
.chirpui-divider--horizontal::before,
.chirpui-divider--horizontal::after {
width: 1px;
height: 100%;
min-height: 1.5em;
}
.chirpui-divider--horizontal:not(:has(.chirpui-divider__text)) {
border-block-start: none;
border-inline-start: 1px solid var(--chirpui-border);
margin: 0 var(--chirpui-spacing);
width: auto;
min-height: 1.5em;
}
.chirpui-divider--primary::before,
.chirpui-divider--primary::after { background: var(--chirpui-primary); }
.chirpui-divider--primary:not(:has(.chirpui-divider__text)) { border-color: var(--chirpui-primary); }
.chirpui-divider--success::before,
.chirpui-divider--success::after { background: var(--chirpui-success); }
.chirpui-divider--success:not(:has(.chirpui-divider__text)) { border-color: var(--chirpui-success); }
.chirpui-divider--warning::before,
.chirpui-divider--warning::after { background: var(--chirpui-warning); }
.chirpui-divider--warning:not(:has(.chirpui-divider__text)) { border-color: var(--chirpui-warning); }
.chirpui-divider--error::before,
.chirpui-divider--error::after { background: var(--chirpui-error); }
.chirpui-divider--error:not(:has(.chirpui-divider__text)) { border-color: var(--chirpui-error); }
.chirpui-divider--accent::before,
.chirpui-divider--accent::after { background: var(--chirpui-accent); }
.chirpui-divider--accent:not(:has(.chirpui-divider__text)) { border-color: var(--chirpui-accent); }
/* ==========================================================================
Avatar
========================================================================== */
.chirpui-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--chirpui-avatar-size-md);
height: var(--chirpui-avatar-size-md);
border-radius: 50%;
overflow: hidden;
background: var(--chirpui-bg-subtle);
color: var(--chirpui-text-muted);
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-medium);
}
.chirpui-avatar--sm {
width: var(--chirpui-avatar-size-sm);
height: var(--chirpui-avatar-size-sm);
font-size: var(--chirpui-ui-xs);
}
.chirpui-avatar--lg {
width: var(--chirpui-avatar-size-lg);
height: var(--chirpui-avatar-size-lg);
font-size: var(--chirpui-ui-base);
}
.chirpui-avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chirpui-avatar__initials,
.chirpui-avatar__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.chirpui-avatar--online {
box-shadow: 0 0 0 2px var(--chirpui-surface), 0 0 0 4px var(--chirpui-success);
}
.chirpui-avatar--offline {
box-shadow: 0 0 0 2px var(--chirpui-surface), 0 0 0 4px var(--chirpui-muted);
}
/* ==========================================================================
Media Object
========================================================================== */
.chirpui-media-object {
display: flex;
align-items: flex-start;
gap: var(--chirpui-spacing);
}
.chirpui-media-object--align-center {
align-items: center;
}
.chirpui-media-object__media {
flex-shrink: 0;
}
.chirpui-media-object__media img,
.chirpui-media-object__media video {
display: block;
max-width: 100%;
height: auto;
}
.chirpui-media-object__body {
flex: 1;
min-width: 0;
}
.chirpui-media-object__actions {
flex-shrink: 0;
}
.chirpui-media-object__media:empty,
.chirpui-media-object__body:empty,
.chirpui-media-object__actions:empty {
display: none;
}
/* ==========================================================================
Stat
========================================================================== */
.chirpui-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--chirpui-spacing-xs);
text-align: center;
}
.chirpui-stat__value {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-lg);
font-weight: var(--chirpui-ui-font-weight-semibold);
font-feature-settings: "tnum";
color: var(--chirpui-text);
}
.chirpui-stat__label {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-medium);
color: var(--chirpui-text-muted);
}
.chirpui-stat__icon {
font-size: var(--chirpui-ui-xl);
color: var(--chirpui-text-muted);
}
.chirpui-metric-grid {
align-items: stretch;
}
.chirpui-metric-card {
height: 100%;
}
.chirpui-metric-card__stat {
align-items: flex-start;
text-align: start;
}
.chirpui-metric-card__trend,
.chirpui-metric-card__hint {
margin: 0;
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
.chirpui-metric-card__trend {
margin-top: var(--chirpui-space-card-gap);
font-weight: var(--chirpui-ui-font-weight-medium);
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-2xs);
}
.chirpui-metric-card__trend--up { color: var(--chirpui-success); }
.chirpui-metric-card__trend--down { color: var(--chirpui-error); }
.chirpui-metric-card__trend--neutral { color: var(--chirpui-text-muted); }
.chirpui-metric-card__trend-arrow { font-size: 0.75em; }
.chirpui-metric-card__top {
display: flex;
align-items: flex-start;
gap: var(--chirpui-spacing-sm);
}
.chirpui-metric-card__icon-badge {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--chirpui-radius);
flex-shrink: 0;
font-size: var(--chirpui-ui-base);
background: var(--chirpui-surface-alt);
color: var(--chirpui-text-muted);
}
.chirpui-metric-card__icon-badge--primary { background: var(--chirpui-primary-muted); color: var(--chirpui-primary); }
.chirpui-metric-card__icon-badge--success { background: var(--chirpui-success-muted); color: var(--chirpui-success); }
.chirpui-metric-card__icon-badge--warning { background: var(--chirpui-warning-muted); color: var(--chirpui-warning); }
.chirpui-metric-card__icon-badge--error { background: var(--chirpui-error-muted); color: var(--chirpui-error); }
.chirpui-metric-card__values { flex: 1; min-width: 0; }
.chirpui-metric-card__footer {
display: block;
margin-top: var(--chirpui-spacing-sm);
padding-top: var(--chirpui-spacing-sm);
border-top: 1px solid var(--chirpui-border);
font-size: var(--chirpui-font-xs);
color: var(--chirpui-accent);
text-decoration: none;
transition: color var(--chirpui-transition);
}
.chirpui-metric-card__footer:hover { color: var(--chirpui-accent-hover); }
/* ==========================================================================
Action Bar
========================================================================== */
.chirpui-action-bar {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
}
.chirpui-action-bar__item {
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
background: none;
border: none;
font: inherit;
color: var(--chirpui-text-muted);
cursor: pointer;
border-radius: var(--chirpui-radius-sm);
transition: color var(--chirpui-transition), background var(--chirpui-transition);
}
a.chirpui-action-bar__item {
text-decoration: none;
}
.chirpui-action-bar__item:hover {
color: var(--chirpui-accent);
background: var(--chirpui-bg-subtle);
}
.chirpui-action-bar__item:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-action-bar__item--active {
color: var(--chirpui-error);
}
.chirpui-action-bar__item--active:hover {
color: var(--chirpui-error);
}
.chirpui-action-bar__item--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.chirpui-action-bar__icon {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-lg);
}
.chirpui-action-bar__count {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-medium);
color: inherit;
}
/* ==========================================================================
Action Containers
========================================================================== */
.chirpui-action-strip {
width: 100%;
}
.chirpui-action-strip__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--chirpui-space-control-gap);
width: 100%;
}
.chirpui-action-strip__primary,
.chirpui-action-strip__controls,
.chirpui-action-strip__actions {
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
min-width: 0;
}
.chirpui-action-strip__primary {
flex: 1 1 18rem;
}
.chirpui-action-strip__primary > * {
width: 100%;
}
.chirpui-action-strip__controls {
flex: 1 1 14rem;
flex-wrap: wrap;
}
.chirpui-action-strip__actions {
flex: 0 0 auto;
margin-inline-start: auto;
flex-wrap: wrap;
justify-content: end;
}
.chirpui-action-strip--sm .chirpui-action-strip__inner {
gap: var(--chirpui-spacing-xs);
}
.chirpui-action-strip--scroll .chirpui-action-strip__inner {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.125rem;
}
.chirpui-action-strip--scroll .chirpui-action-strip__primary,
.chirpui-action-strip--scroll .chirpui-action-strip__controls,
.chirpui-action-strip--scroll .chirpui-action-strip__actions {
flex-wrap: nowrap;
}
.chirpui-action-strip--collapse .chirpui-action-strip__controls {
flex: 0 1 auto;
}
.chirpui-action-strip--sticky {
position: sticky;
top: 0;
z-index: 10;
}
.chirpui-filter-bar__form {
width: 100%;
}
.chirpui-command-bar .chirpui-action-strip__actions {
gap: var(--chirpui-spacing-xs);
}
.chirpui-search-header__form {
width: 100%;
}
.chirpui-search-header__strip .chirpui-action-strip__primary {
flex-basis: 24rem;
}
@media (max-width: 48rem) {
.chirpui-action-strip__primary,
.chirpui-action-strip__controls,
.chirpui-action-strip__actions {
flex: 1 1 100%;
}
.chirpui-action-strip__actions {
margin-inline-start: 0;
justify-content: start;
}
.chirpui-action-strip--scroll .chirpui-action-strip__primary,
.chirpui-action-strip--scroll .chirpui-action-strip__controls,
.chirpui-action-strip--scroll .chirpui-action-strip__actions {
flex: 0 0 auto;
}
}
/* ==========================================================================
Chat Layout
========================================================================== */
.chirpui-chat-layout {
display: flex;
gap: var(--chirpui-chat-layout-gap);
min-height: var(--chirpui-chat-layout-min-height);
}
.chirpui-chat-layout__main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.chirpui-chat-layout__messages {
flex: 1;
overflow-y: auto;
padding: var(--chirpui-chat-layout-messages-padding);
}
.chirpui-chat-layout__input {
padding: var(--chirpui-chat-layout-input-padding);
border-top: var(--chirpui-chat-layout-input-border);
}
.chirpui-chat-layout__activity {
width: var(--chirpui-chat-layout-activity-width);
flex-shrink: 0;
overflow-y: auto;
}
/* Fill remaining height inside a flex parent (e.g. #page-content > .chirpui-page-fill). */
.chirpui-chat-layout--fill {
flex: 1;
min-height: 0;
align-self: stretch;
}
.chirpui-chat-layout--fill .chirpui-chat-layout__messages {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
/* Transcript / thread scroll lives inside slots, not on this shell */
}
/* Put on SSE / HTMX / custom wrapper around the scroll region inside __messages. */
.chirpui-chat-layout__messages-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
@media (max-width: 767px) {
.chirpui-chat-layout {
flex-direction: column;
}
.chirpui-chat-layout__activity {
width: 100%;
}
}
/* ==========================================================================
Message Bubble & Thread
========================================================================== */
.chirpui-message-thread {
list-style: none;
margin: 0;
padding: var(--chirpui-spacing);
display: flex;
flex-direction: column;
gap: var(--chirpui-spacing-sm);
}
.chirpui-message-bubble {
display: flex;
gap: var(--chirpui-message-bubble-gap);
max-width: var(--chirpui-message-bubble-max-width);
padding: var(--chirpui-message-bubble-padding);
border-radius: var(--chirpui-message-bubble-radius);
background: var(--chirpui-bg-subtle);
}
.chirpui-message-bubble--right {
align-self: flex-end;
flex-direction: row-reverse;
background: var(--chirpui-accent);
color: var(--chirpui-surface);
}
.chirpui-message-bubble--left {
align-self: flex-start;
}
.chirpui-message-bubble--user {
background: var(--chirpui-message-bubble-user-bg);
color: var(--chirpui-message-bubble-user-color);
align-self: flex-end;
flex-direction: row-reverse;
}
.chirpui-message-bubble--assistant {
background: var(--chirpui-message-bubble-assistant-bg);
color: var(--chirpui-message-bubble-assistant-color);
align-self: flex-start;
}
.chirpui-message-bubble--system {
background: var(--chirpui-message-bubble-system-bg);
color: var(--chirpui-message-bubble-system-color);
align-self: center;
max-width: 70%;
font-size: var(--chirpui-font-sm);
}
.chirpui-message-bubble--sent,
.chirpui-message-bubble--read,
.chirpui-message-bubble--pending {
opacity: 1;
}
.chirpui-message-bubble--pending {
opacity: 0.85;
}
/* ==========================================================================
Typing Indicator
========================================================================== */
.chirpui-typing-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: var(--chirpui-spacing-sm);
}
.chirpui-typing-indicator__dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--chirpui-text-muted);
animation: chirpui-typing-bounce 1.4s ease-in-out infinite both;
}
.chirpui-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
.chirpui-typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes chirpui-typing-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
/* ==========================================================================
Chat Input
========================================================================== */
.chirpui-chat-input {
display: flex;
flex-direction: column;
gap: var(--chirpui-spacing-sm);
padding: var(--chirpui-spacing);
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
}
.chirpui-chat-input__composer {
display: flex;
gap: var(--chirpui-spacing-sm);
}
.chirpui-chat-input__field {
flex: 1;
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius-sm);
font: inherit;
background: var(--chirpui-surface);
color: var(--chirpui-text);
resize: none;
transition: border-color var(--chirpui-transition);
}
.chirpui-chat-input__field:focus {
outline: none;
border-color: var(--chirpui-accent);
box-shadow: 0 0 0 3px var(--chirpui-focus-ring);
}
.chirpui-chat-input__field:disabled,
.chirpui-chat-input__field[readonly] {
background: var(--chirpui-bg-subtle);
color: var(--chirpui-text-muted);
cursor: not-allowed;
border-color: var(--chirpui-border);
}
.chirpui-chat-input__field[readonly] {
cursor: default;
opacity: 1;
}
.chirpui-chat-input__field:disabled {
opacity: 0.5;
}
.chirpui-chat-input__footer {
display: flex;
justify-content: flex-end;
gap: var(--chirpui-spacing-sm);
}
/* ==========================================================================
Conversation List & Item
========================================================================== */
.chirpui-conversation-list {
display: flex;
flex-direction: column;
gap: var(--chirpui-spacing-xs);
}
.chirpui-conversation-item {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
text-decoration: none;
color: inherit;
border-radius: var(--chirpui-radius);
transition: background var(--chirpui-transition);
}
.chirpui-conversation-item:hover {
background: var(--chirpui-bg-subtle);
}
.chirpui-conversation-item:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-conversation-item__avatar {
flex-shrink: 0;
}
.chirpui-conversation-item__body {
flex: 1;
min-width: 0;
}
.chirpui-conversation-item__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--chirpui-spacing-sm);
}
.chirpui-conversation-item__name {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-conversation-item__time {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-xs);
font-weight: var(--chirpui-ui-font-weight-normal);
color: var(--chirpui-text-muted);
}
.chirpui-conversation-item__preview {
margin: var(--chirpui-spacing-xs) 0 0;
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-normal);
color: var(--chirpui-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chirpui-conversation-item--muted .chirpui-conversation-item__preview {
opacity: 0.8;
}
.chirpui-conversation-item__actions:empty {
display: none;
}
.chirpui-conversation-item__unread {
flex-shrink: 0;
min-width: 1.25rem;
padding: 0.125rem 0.35rem;
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-xs);
font-weight: var(--chirpui-ui-font-weight-semibold);
text-align: center;
background: var(--chirpui-accent);
color: var(--chirpui-surface);
border-radius: 9999px;
}
/* ==========================================================================
Reaction Pill & Message Reactions
========================================================================== */
.chirpui-message-reactions {
display: flex;
flex-wrap: wrap;
gap: var(--chirpui-spacing-xs);
margin-top: var(--chirpui-spacing-xs);
}
.chirpui-reaction-pill {
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
padding: 0.125rem 0.5rem;
font: inherit;
background: var(--chirpui-bg-subtle);
border: 1px solid var(--chirpui-border);
border-radius: 9999px;
cursor: pointer;
transition: background var(--chirpui-transition), border-color var(--chirpui-transition);
}
.chirpui-reaction-pill:hover {
background: var(--chirpui-border);
}
.chirpui-reaction-pill:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-reaction-pill--active {
border-color: var(--chirpui-accent);
background: var(--chirpui-primary-muted);
}
.chirpui-reaction-pill--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.chirpui-reaction-pill__emoji {
font-size: var(--chirpui-ui-sm);
}
.chirpui-reaction-pill__count {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-xs);
font-weight: var(--chirpui-ui-font-weight-medium);
color: var(--chirpui-text-muted);
}
/* ==========================================================================
Post Card (Social)
========================================================================== */
.chirpui-post-card {
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
overflow: hidden;
}
.chirpui-post-card__header {
padding: var(--chirpui-spacing);
}
.chirpui-post-card__author {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
}
.chirpui-post-card__avatar {
flex-shrink: 0;
}
.chirpui-post-card__meta {
flex: 1;
min-width: 0;
}
.chirpui-post-card__name {
font-weight: 600;
color: var(--chirpui-text);
}
a.chirpui-post-card__name:hover {
color: var(--chirpui-accent);
}
.chirpui-post-card__handle {
color: var(--chirpui-text-muted);
font-size: var(--chirpui-font-sm);
margin-left: var(--chirpui-spacing-xs);
}
.chirpui-post-card__time {
display: block;
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
.chirpui-post-card__body {
padding: 0 var(--chirpui-spacing) var(--chirpui-spacing);
}
.chirpui-post-card__body p {
margin: 0;
}
.chirpui-post-card__media {
padding: 0 var(--chirpui-spacing) var(--chirpui-spacing);
}
.chirpui-post-card__media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--chirpui-radius-sm);
}
.chirpui-post-card__media:empty,
.chirpui-post-card__actions:empty {
display: none;
}
.chirpui-post-card__actions {
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
border-top: 1px solid var(--chirpui-border);
}
/* ==========================================================================
Comment & Comment Thread
========================================================================== */
.chirpui-comment {
padding: var(--chirpui-spacing);
}
.chirpui-comment__header {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-comment__avatar {
flex-shrink: 0;
}
.chirpui-comment__meta {
display: flex;
align-items: baseline;
gap: var(--chirpui-spacing-sm);
}
.chirpui-comment__author {
font-weight: 600;
font-size: var(--chirpui-font-sm);
}
a.chirpui-comment__author:hover {
color: var(--chirpui-accent);
}
.chirpui-comment__time {
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
.chirpui-comment__body {
padding-inline-start: calc(var(--chirpui-avatar-size-sm) + var(--chirpui-spacing));
}
.chirpui-comment__body p {
margin: 0;
}
.chirpui-comment__footer {
margin-top: var(--chirpui-spacing-sm);
padding-inline-start: calc(var(--chirpui-avatar-size-sm) + var(--chirpui-spacing));
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
}
.chirpui-comment__footer:not(:has(.chirpui-comment__replies-link)):has(.chirpui-comment__actions:empty) {
display: none;
}
.chirpui-comment__actions:empty {
display: none;
}
.chirpui-comment__replies {
margin-top: var(--chirpui-spacing-sm);
padding-inline-start: calc(var(--chirpui-avatar-size-sm) + var(--chirpui-spacing));
}
.chirpui-comment__replies-link {
font-size: var(--chirpui-font-sm);
color: var(--chirpui-accent);
}
.chirpui-comment-thread {
list-style: none;
margin: 0;
padding: 0;
}
.chirpui-comment-thread .chirpui-comment {
border-bottom: 1px solid var(--chirpui-border);
}
.chirpui-comment-thread .chirpui-comment:last-child {
border-bottom: none;
}
/* ==========================================================================
Profile Header
========================================================================== */
.chirpui-profile-header {
position: relative;
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
overflow: hidden;
}
.chirpui-profile-header__cover {
height: 8rem;
background-size: cover;
background-position: center;
background-color: var(--chirpui-bg-subtle);
}
.chirpui-profile-header__content {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--chirpui-spacing-lg);
padding: var(--chirpui-spacing);
}
.chirpui-profile-header__avatar {
flex-shrink: 0;
}
.chirpui-profile-header__avatar:empty,
.chirpui-profile-header__bio:empty,
.chirpui-profile-header__stats:empty,
.chirpui-profile-header__action:empty {
display: none;
}
.chirpui-profile-header__info {
flex: 1;
min-width: 0;
}
.chirpui-profile-header__name {
margin: 0 0 var(--chirpui-spacing-xs);
font-size: var(--chirpui-font-xl);
}
a.chirpui-profile-header__name:hover {
color: var(--chirpui-accent);
}
.chirpui-profile-header__bio {
margin: 0 0 var(--chirpui-spacing-sm);
color: var(--chirpui-text-muted);
}
.chirpui-profile-header__stats {
display: flex;
gap: var(--chirpui-spacing-lg);
margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-profile-header__action {
flex-shrink: 0;
}
/* ==========================================================================
Avatar Stack
========================================================================== */
.chirpui-avatar-stack {
display: flex;
}
.chirpui-avatar-stack .chirpui-avatar {
margin-inline-start: -0.75rem;
}
.chirpui-avatar-stack .chirpui-avatar:first-child {
margin-inline-start: 0;
}
.chirpui-avatar-stack__more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--chirpui-avatar-size-sm);
height: var(--chirpui-avatar-size-sm);
margin-inline-start: -0.75rem;
font-size: var(--chirpui-font-xs);
font-weight: 600;
background: var(--chirpui-bg-subtle);
border: 2px solid var(--chirpui-surface);
border-radius: 50%;
color: var(--chirpui-text-muted);
}
/* ==========================================================================
Trending Tag & Mention
========================================================================== */
.chirpui-trending-tag {
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
font-size: var(--chirpui-font-sm);
font-family: var(--chirpui-ui-font-family);
font-weight: var(--chirpui-ui-font-weight-medium);
background: var(--chirpui-bg-subtle);
border: 1px solid transparent;
border-radius: var(--chirpui-radius-sm);
text-decoration: none;
color: inherit;
transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}
a.chirpui-trending-tag {
border-color: var(--chirpui-border);
cursor: pointer;
}
a.chirpui-trending-tag:hover {
background: var(--chirpui-border);
border-color: color-mix(in srgb, var(--chirpui-border) 70%, black);
color: var(--chirpui-text);
}
a.chirpui-trending-tag:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
a.chirpui-trending-tag:active {
background: color-mix(in srgb, var(--chirpui-border) 80%, black);
}
@media (prefers-reduced-motion: no-preference) {
a.chirpui-trending-tag {
transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
color var(--chirpui-transition), box-shadow var(--chirpui-transition),
transform var(--chirpui-transition);
}
a.chirpui-trending-tag:hover {
transform: translateY(-1px);
box-shadow: var(--chirpui-shadow-sm);
}
a.chirpui-trending-tag:active {
transition: none;
transform: translateY(0);
box-shadow: none;
}
}
.chirpui-trending-tag__hash {
color: var(--chirpui-text-muted);
transition: color var(--chirpui-transition);
}
a.chirpui-trending-tag .chirpui-trending-tag__hash {
color: var(--chirpui-accent);
}
a.chirpui-trending-tag:hover .chirpui-trending-tag__hash {
color: var(--chirpui-accent-hover);
}
.chirpui-trending-tag__count {
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
.chirpui-trending-tag--up .chirpui-trending-tag__count::before {
content: "↑ ";
color: var(--chirpui-success);
}
.chirpui-mention {
font-weight: var(--chirpui-ui-font-weight-medium);
color: inherit;
}
a.chirpui-mention {
color: var(--chirpui-accent);
text-decoration: none;
transition: color var(--chirpui-transition);
}
a.chirpui-mention:hover {
color: var(--chirpui-accent-hover);
text-decoration: underline;
}
a.chirpui-mention:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
/* ==========================================================================
Breadcrumbs
========================================================================== */
.chirpui-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--chirpui-font-sm);
}
.chirpui-breadcrumbs__item {
display: flex;
align-items: center;
gap: var(--chirpui-spacing-sm);
}
.chirpui-breadcrumbs__item:not(:last-child)::after {
content: "/";
color: var(--chirpui-text-muted);
font-weight: 400;
}
.chirpui-breadcrumbs__link {
color: var(--chirpui-accent);
text-decoration: none;
transition: color var(--chirpui-transition);
}
.chirpui-breadcrumbs__link:hover {
color: var(--chirpui-accent-hover);
text-decoration: underline;
}
.chirpui-breadcrumbs__link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-breadcrumbs__current {
color: var(--chirpui-text-muted);
}
/* ==========================================================================
Navbar
========================================================================== */
.chirpui-navbar {
display: flex;
align-items: center;
gap: var(--chirpui-spacing-lg);
padding: var(--chirpui-spacing) 0;
border-bottom: 1px solid var(--chirpui-border);
}
.chirpui-navbar__brand {
font-weight: 600;
font-size: var(--chirpui-font-lg);
color: var(--chirpui-text);
text-decoration: none;
flex-shrink: 0;
}
.chirpui-navbar__brand:hover {
color: var(--chirpui-accent);
}
.chirpui-navbar__brand:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
/* ==========================================================================
Logo
========================================================================== */
.chirpui-logo {
--chirpui-logo-image-height: 1.25rem;
--chirpui-logo-font-size: var(--chirpui-font-base);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--chirpui-spacing-sm);
color: inherit;
text-decoration: none;
}
.chirpui-logo:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-logo__img {
display: block;
height: var(--chirpui-logo-image-height);
width: auto;
max-width: 100%;
}
.chirpui-logo__text {
font-size: var(--chirpui-logo-font-size);
font-weight: 600;
line-height: 1.2;
color: inherit;
}
.chirpui-logo--text .chirpui-logo__img {
display: none;
}
.chirpui-logo--image .chirpui-logo__text {
display: none;
}
.chirpui-logo--sm {
--chirpui-logo-image-height: 1rem;
--chirpui-logo-font-size: var(--chirpui-font-sm);
}
.chirpui-logo--md {
--chirpui-logo-image-height: 1.25rem;
--chirpui-logo-font-size: var(--chirpui-font-base);
}
.chirpui-logo--lg {
--chirpui-logo-image-height: 1.5rem;
--chirpui-logo-font-size: var(--chirpui-font-lg);
}
.chirpui-logo--start {
justify-content: flex-start;
}
.chirpui-logo--center {
justify-content: center;
}
.chirpui-logo--end {
justify-content: flex-end;
}
.chirpui-navbar__links {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
flex-wrap: wrap;
}
.chirpui-navbar__link {
color: var(--chirpui-text-muted);
text-decoration: none;
font-size: var(--chirpui-font-sm);
padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
border-radius: var(--chirpui-radius-sm);
transition: color var(--chirpui-transition), background var(--chirpui-transition);
}
.chirpui-navbar__link:hover {
color: var(--chirpui-text);
background: var(--chirpui-bg-subtle);
}
.chirpui-navbar__link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-navbar__link--active {
color: var(--chirpui-accent);
font-weight: 600;
background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
}
.chirpui-navbar--sticky {
position: sticky;
top: 0;
z-index: 50;
background: var(--chirpui-surface);
}
.chirpui-navbar__links--end {
margin-left: auto;
}
.chirpui-navbar__links--end:empty {
display: none;
}
.chirpui-navbar-dropdown {
position: relative;
display: inline-block;
}
.chirpui-navbar-dropdown__trigger {
cursor: pointer;
list-style: none;
}
.chirpui-navbar-dropdown__trigger::-webkit-details-marker {
display: none;
}
.chirpui-navbar-dropdown__trigger::after {
content: "\25B8";
display: inline-block;
transition: rotate var(--chirpui-transition);
margin-inline-start: auto;
font-size: 0.75em;
color: var(--chirpui-text-muted);
}
.chirpui-navbar-dropdown[open] > .chirpui-navbar-dropdown__trigger::after {
rotate: 90deg;
}
/* ==========================================================================
Sidebar
========================================================================== */
.chirpui-sidebar {
width: 16rem;
flex-shrink: 0;
border-right: 1px solid var(--chirpui-border);
padding: var(--chirpui-spacing) 0;
}
.chirpui-sidebar__header:empty,
.chirpui-sidebar__footer:empty {
display: none;
}
.chirpui-sidebar__nav {
display: flex;
flex-direction: column;
gap: var(--chirpui-sidebar-section-gap);
}
.chirpui-sidebar__section {
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-sm);
}
.chirpui-sidebar__section-title {
display: block;
font-size: var(--chirpui-font-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--chirpui-text-muted);
margin-bottom: var(--chirpui-spacing-xs);
}
.chirpui-sidebar__link {
display: flex;
align-items: center;
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-sm);
color: var(--chirpui-text-muted);
text-decoration: none;
font-size: var(--chirpui-font-sm);
border-radius: 0 var(--chirpui-radius-sm) var(--chirpui-radius-sm) 0;
margin-inline-start: var(--chirpui-spacing-sm);
transition: color var(--chirpui-transition), background var(--chirpui-transition);
}
.chirpui-sidebar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25em;
margin-inline-end: var(--chirpui-spacing-sm);
font-family: var(--chirpui-ascii-font);
}
.chirpui-sidebar__link:hover {
color: var(--chirpui-text);
background: var(--chirpui-state-surface-hover);
}
.chirpui-sidebar__link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-sidebar__link--active {
color: var(--chirpui-sidebar-active-color);
font-weight: 500;
background: var(--chirpui-sidebar-active-bg);
}
/* ==========================================================================
Stepper
========================================================================== */
.chirpui-stepper {
margin: var(--chirpui-spacing-lg) 0;
}
.chirpui-stepper__list {
display: flex;
align-items: flex-start;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
counter-reset: stepper;
}
.chirpui-stepper__item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-width: 0;
position: relative;
text-align: center;
}
/* Connector line between steps — drawn via ::before on all items except first */
.chirpui-stepper__item + .chirpui-stepper__item::before {
content: "";
position: absolute;
top: 1rem; /* vertically center on the 2rem indicator */
right: 50%;
width: 100%;
height: 2px;
background: var(--chirpui-border);
z-index: 0;
}
.chirpui-stepper__item--completed + .chirpui-stepper__item::before {
background: var(--chirpui-accent);
}
.chirpui-stepper__indicator {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--chirpui-bg-subtle, var(--chirpui-border));
color: var(--chirpui-text-muted);
font-size: var(--chirpui-font-sm);
font-weight: 600;
flex-shrink: 0;
border: 2px solid var(--chirpui-border);
transition: all var(--chirpui-transition);
}
.chirpui-stepper__item--active .chirpui-stepper__indicator {
background: var(--chirpui-accent);
color: white;
border-color: var(--chirpui-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--chirpui-accent) 25%, transparent);
}
.chirpui-stepper__item--completed .chirpui-stepper__indicator {
background: color-mix(in srgb, var(--chirpui-accent) 15%, transparent);
color: var(--chirpui-accent);
border-color: var(--chirpui-accent);
}
.chirpui-stepper__check {
font-size: 0.875rem;
line-height: 1;
}
.chirpui-stepper__label {
display: block;
margin-top: var(--chirpui-spacing-xs);
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding: 0 var(--chirpui-spacing-xs);
}
.chirpui-stepper__item--active .chirpui-stepper__label {
color: var(--chirpui-text);
font-weight: 600;
}
.chirpui-stepper__item--completed .chirpui-stepper__label {
color: var(--chirpui-text-muted);
}
/* Hide the old connector element — lines are now drawn via ::before */
.chirpui-stepper__connector {
display: none;
}
/* ==========================================================================
Wizard Form
========================================================================== */
.chirpui-wizard-form__body {
margin-top: var(--chirpui-spacing-lg);
}
/* ==========================================================================
Description List
========================================================================== */
.chirpui-dl__header:empty {
display: none;
}
.chirpui-dl {
margin: 0;
}
.chirpui-dl__row {
margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-dl__row:last-child {
margin-bottom: 0;
}
.chirpui-dl__term {
font-size: var(--chirpui-font-sm);
font-weight: 500;
color: var(--chirpui-text-muted);
margin: 0 0 var(--chirpui-spacing-xs) 0;
}
.chirpui-dl__detail {
margin: 0;
font-size: var(--chirpui-font-base);
color: var(--chirpui-text);
}
.chirpui-dl--horizontal {
display: grid;
gap: var(--chirpui-spacing-sm) var(--chirpui-spacing-lg);
}
.chirpui-dl--horizontal .chirpui-dl__row {
display: grid;
grid-template-columns: minmax(var(--chirpui-dl-term-width, 8rem), auto) 1fr;
gap: var(--chirpui-spacing);
align-items: baseline;
margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-dl--horizontal .chirpui-dl__term {
margin-bottom: 0;
}
.chirpui-dl--compact .chirpui-dl__row {
margin-bottom: var(--chirpui-spacing-xs);
}
.chirpui-dl--compact .chirpui-dl__term {
font-size: var(--chirpui-font-xs);
}
.chirpui-dl__detail--url,
.chirpui-dl__detail--path {
font-family: var(--chirpui-mono-font-family);
font-size: var(--chirpui-font-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chirpui-dl__detail--number {
text-align: right;
}
/* Detail alignment overrides */
.chirpui-dl--detail-left .chirpui-dl__detail { text-align: left; }
.chirpui-dl--detail-center .chirpui-dl__detail { text-align: center; }
.chirpui-dl--detail-right .chirpui-dl__detail { text-align: right; }
.chirpui-dl__detail-unset {
color: var(--chirpui-text-muted);
font-style: italic;
}
/* ==========================================================================
Settings Row (label | status | detail)
========================================================================== */
.chirpui-settings-row-list {
display: grid;
grid-template-columns: minmax(var(--chirpui-dl-term-width, 8rem), auto) minmax(6rem, auto) 1fr;
gap: var(--chirpui-spacing-sm, 0.5rem) var(--chirpui-spacing-lg, 1.5rem);
align-items: center;
}
.chirpui-settings-row {
display: contents;
}
.chirpui-settings-row__label {
flex-shrink: 0;
}
.chirpui-settings-row__status {
min-width: 0;
}
.chirpui-settings-row__detail {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.chirpui-settings-row__detail code {
font-family: var(--chirpui-ascii-font, ui-monospace, monospace);
}
/* ==========================================================================
Config Row (label | control)
========================================================================== */
.chirpui-config-row-list {
display: grid;
grid-template-columns: minmax(var(--chirpui-dl-term-width, 8rem), auto) 1fr;
gap: var(--chirpui-spacing-sm, 0.5rem) var(--chirpui-spacing-lg, 1.5rem);
align-items: center;
}
.chirpui-config-row {
display: contents;
}
.chirpui-config-row__label {
flex-shrink: 0;
}
.chirpui-config-row__control {
min-width: 0;
}
.chirpui-config-row__form {
display: flex;
align-items: center;
}
.chirpui-config-row__toggle-wrap {
margin: 0;
}
.chirpui-config-row__select {
max-width: 20rem;
}
.chirpui-config-row__editable {
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-sm);
}
.chirpui-config-row__editable.chirpui-inline-edit--display {
margin-inline-start: calc(-1 * var(--chirpui-spacing-sm));
}
/* ==========================================================================
Timeline
========================================================================== */
.chirpui-timeline {
position: relative;
padding-inline-start: var(--chirpui-spacing-lg);
border-inline-start: 2px solid var(--chirpui-border);
}
.chirpui-timeline__item {
position: relative;
padding-bottom: var(--chirpui-spacing-lg);
}
.chirpui-timeline__item:last-child {
padding-bottom: 0;
}
.chirpui-timeline__dot {
position: absolute;
left: calc(-1 * var(--chirpui-spacing-lg) - 4px);
top: 0.35rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--chirpui-accent);
}
.chirpui-timeline__content {
margin-inline-start: var(--chirpui-spacing);
}
.chirpui-timeline__header {
display: flex;
align-items: baseline;
gap: var(--chirpui-spacing-sm);
margin-bottom: var(--chirpui-spacing-xs);
}
.chirpui-timeline__header-actions {
margin-inline-start: auto;
}
.chirpui-timeline__header-actions:empty,
.chirpui-timeline__body:empty {
display: none;
}
.chirpui-timeline__title {
font-weight: 500;
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text);
}
.chirpui-timeline__date {
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
.chirpui-timeline__body {
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
/* Timeline: icon/avatar variants */
.chirpui-timeline__icon {
position: absolute;
left: calc(-1 * var(--chirpui-spacing-lg) - 10px);
top: 0.15rem;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--chirpui-surface);
border: 2px solid var(--chirpui-border);
font-size: 0.65rem;
color: var(--chirpui-text-muted);
}
.chirpui-timeline__avatar {
position: absolute;
left: calc(-1 * var(--chirpui-spacing-lg) - 10px);
top: 0.15rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
object-fit: cover;
}
.chirpui-timeline__time {
display: block;
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
margin-bottom: var(--chirpui-spacing-2xs);
font-variant-numeric: tabular-nums;
}
/* Timeline: semantic dot colors */
.chirpui-timeline__item--success .chirpui-timeline__dot,
.chirpui-timeline__item--success .chirpui-timeline__icon { background: var(--chirpui-success); border-color: var(--chirpui-success); color: white; }
.chirpui-timeline__item--warning .chirpui-timeline__dot,
.chirpui-timeline__item--warning .chirpui-timeline__icon { background: var(--chirpui-warning); border-color: var(--chirpui-warning); color: white; }
.chirpui-timeline__item--error .chirpui-timeline__dot,
.chirpui-timeline__item--error .chirpui-timeline__icon { background: var(--chirpui-error); border-color: var(--chirpui-error); color: white; }
.chirpui-timeline__item--info .chirpui-timeline__dot,
.chirpui-timeline__item--info .chirpui-timeline__icon { background: var(--chirpui-info); border-color: var(--chirpui-info); color: white; }
/* Timeline: hoverable rows */
.chirpui-timeline--hoverable .chirpui-timeline__item {
border-radius: var(--chirpui-radius);
padding: var(--chirpui-spacing-xs);
transition: background var(--chirpui-transition);
}
.chirpui-timeline--hoverable .chirpui-timeline__item:hover {
background: var(--chirpui-surface-alt);
}
/* Timeline: clickable link overlay */
.chirpui-timeline__item--link { position: relative; }
.chirpui-timeline__link-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
/* ==========================================================================
List
========================================================================== */
.chirpui-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--chirpui-spacing-xs);
}
.chirpui-list__item {
transition: opacity var(--chirpui-transition-slow), transform var(--chirpui-transition-slow);
@starting-style {
opacity: 0;
transform: translateY(4px);
}
}
.chirpui-list--bordered .chirpui-list__item {
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius-sm);
background: var(--chirpui-surface);
}
.chirpui-list--bordered .chirpui-list__item + .chirpui-list__item {
margin-top: var(--chirpui-spacing-xs);
}
.chirpui-list__link {
color: var(--chirpui-accent);
text-decoration: none;
transition: color var(--chirpui-transition);
}
.chirpui-list__link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-list__link:hover {
color: var(--chirpui-accent-hover);
text-decoration: underline;
}
/* ==========================================================================
Utilities
========================================================================== */
.chirpui-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.chirpui-focus-ring:focus-visible {
outline: 2px solid var(--chirpui-focus-ring);
outline-offset: var(--chirpui-state-focus-offset);
}
/* Typography utilities */
.chirpui-font-xs { font-size: var(--chirpui-font-xs); }
.chirpui-font-sm { font-size: var(--chirpui-font-sm); }
.chirpui-font-base { font-size: var(--chirpui-font-base); }
.chirpui-font-lg { font-size: var(--chirpui-font-lg); }
.chirpui-font-xl { font-size: var(--chirpui-font-xl); }
.chirpui-font-mono { font-family: var(--chirpui-mono-font-family); }
.chirpui-font-2xl { font-size: var(--chirpui-font-2xl); }
.chirpui-text-muted { color: var(--chirpui-text-muted); }
/* UI typography utilities — size, weight, composite */
.chirpui-ui-xs { font-size: var(--chirpui-ui-xs); }
.chirpui-ui-sm { font-size: var(--chirpui-ui-sm); }
.chirpui-ui-base { font-size: var(--chirpui-ui-base); }
.chirpui-ui-lg { font-size: var(--chirpui-ui-lg); }
.chirpui-ui-xl { font-size: var(--chirpui-ui-xl); }
.chirpui-ui-normal { font-weight: var(--chirpui-ui-font-weight-normal); }
.chirpui-ui-medium { font-weight: var(--chirpui-ui-font-weight-medium); }
.chirpui-ui-semibold { font-weight: var(--chirpui-ui-font-weight-semibold); }
.chirpui-ui-bold { font-weight: var(--chirpui-ui-font-weight-bold); }
.chirpui-ui-label {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-medium);
letter-spacing: 0.02em;
}
.chirpui-ui-title {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-base);
font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-ui-meta {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-xs);
font-weight: var(--chirpui-ui-font-weight-normal);
}
.chirpui-prose-sm { font-size: var(--chirpui-prose-sm); }
.chirpui-prose-lg { font-size: var(--chirpui-prose-lg); }
/* Link — underline styling for anchors */
.chirpui-link {
color: var(--chirpui-accent);
text-decoration: none;
text-underline-offset: 0.15em;
position: relative;
transition: color var(--chirpui-transition);
}
.chirpui-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.05em;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--chirpui-transition);
}
.chirpui-link:hover {
color: var(--chirpui-accent-hover);
}
.chirpui-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Typography — prose and headings */
.chirpui-prose {
font-family: var(--chirpui-prose-font-family);
font-size: var(--chirpui-prose-base);
font-weight: var(--chirpui-prose-font-weight-normal);
line-height: var(--chirpui-line-height-relaxed);
color: var(--chirpui-text);
max-width: var(--chirpui-prose-max-width, 65ch);
}
.chirpui-grid .chirpui-prose,
.chirpui-block.chirpui-prose {
min-width: 0;
}
:where(.chirpui-prose) h1,
:where(.chirpui-prose) h2,
:where(.chirpui-prose) h3 {
text-wrap: balance;
font-family: var(--chirpui-prose-font-family);
font-weight: var(--chirpui-prose-font-weight-heading);
letter-spacing: -0.02em;
color: var(--chirpui-text);
margin: var(--chirpui-prose-spacing-heading) 0 var(--chirpui-prose-spacing);
}
:where(.chirpui-prose) h1 { font-size: var(--chirpui-prose-3xl); }
:where(.chirpui-prose) h2 { font-size: var(--chirpui-prose-2xl); }
:where(.chirpui-prose) h3 { font-size: var(--chirpui-prose-xl); }
:where(.chirpui-prose) h1:first-child,
:where(.chirpui-prose) h2:first-child,
:where(.chirpui-prose) h3:first-child {
margin-top: 0;
}
:where(.chirpui-prose) p {
margin-bottom: var(--chirpui-prose-spacing);
}
:where(.chirpui-prose) code {
font-family: var(--chirpui-code-font-family);
font-size: var(--chirpui-code-font-size-inline);
background: var(--chirpui-code-bg);
color: var(--chirpui-code-text);
padding: 0.15em 0.35em;
border-radius: var(--chirpui-radius-sm);
}
.chirpui-code {
font-family: var(--chirpui-code-font-family);
font-size: var(--chirpui-code-font-size-inline);
background: var(--chirpui-code-bg);
color: var(--chirpui-code-text);
padding: 0.15em 0.35em;
border-radius: var(--chirpui-radius-sm);
}
.chirpui-code-block {
overflow-x: auto;
padding: var(--chirpui-pre-padding);
background: var(--chirpui-code-bg);
border-radius: var(--chirpui-radius-sm);
margin-bottom: var(--chirpui-prose-spacing);
white-space: pre-wrap;
font-family: var(--chirpui-code-font-family);
font-size: var(--chirpui-code-font-size-block);
line-height: var(--chirpui-code-line-height);
}
.chirpui-code-block code {
background: none;
padding: 0;
color: var(--chirpui-code-text);
}
/* Code block copy button — revealed on hover, top-right corner */
.chirpui-code-block-wrapper {
position: relative;
}
.chirpui-code-block-wrapper .chirpui-code-block {
margin-bottom: 0;
}
.chirpui-code-block__copy {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.25rem 0.5rem;
font-family: var(--chirpui-font-family);
font-size: var(--chirpui-prose-xs);
line-height: 1.4;
color: var(--chirpui-code-text);
background: var(--chirpui-code-bg);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius-sm);
cursor: pointer;
opacity: 0;
transition: opacity var(--chirpui-transition), background var(--chirpui-transition);
}
.chirpui-code-block-wrapper:hover .chirpui-code-block__copy,
.chirpui-code-block__copy:focus-visible {
opacity: 1;
}
.chirpui-code-block__copy:hover {
background: var(--chirpui-bg-subtle);
}
.chirpui-code-block__copy:focus-visible {
outline: 2px solid var(--chirpui-focus-ring);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-fieldset {
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius-sm);
padding: var(--chirpui-spacing);
margin: 0 0 var(--chirpui-spacing);
}
.chirpui-fieldset__legend {
padding: 0 0.5em;
font-weight: 600;
}
:where(.chirpui-prose) pre {
overflow-x: auto;
padding: var(--chirpui-pre-padding);
background: var(--chirpui-code-bg);
border-radius: var(--chirpui-radius-sm);
margin-bottom: var(--chirpui-prose-spacing);
font-family: var(--chirpui-code-font-family);
font-size: var(--chirpui-code-font-size-block);
line-height: var(--chirpui-code-line-height);
}
:where(.chirpui-prose) pre code {
background: none;
padding: 0;
color: var(--chirpui-code-text);
}
:where(.chirpui-prose) a {
color: var(--chirpui-accent);
text-decoration: none;
}
:where(.chirpui-prose) a:hover {
text-decoration: underline;
}
:where(.chirpui-prose) ul,
:where(.chirpui-prose) ol {
padding-inline-start: 1.5em;
margin-bottom: var(--chirpui-prose-spacing);
}
:where(.chirpui-prose) blockquote {
margin: var(--chirpui-prose-spacing) 0;
padding-inline-start: var(--chirpui-spacing);
border-inline-start: 3px solid var(--chirpui-accent);
color: var(--chirpui-text-muted);
}
:where(.chirpui-prose) > *:last-child {
margin-bottom: 0;
}
:where(.chirpui-prose) hr {
margin: var(--chirpui-prose-spacing-heading) 0;
border: none;
border-top: 1px solid var(--chirpui-border);
}
:where(.chirpui-prose) table {
width: 100%;
margin-bottom: var(--chirpui-prose-spacing);
border-collapse: collapse;
}
:where(.chirpui-prose) th,
:where(.chirpui-prose) td {
padding: 0.25em 0.5em;
border: 1px solid var(--chirpui-border);
text-align: left;
}
:where(.chirpui-prose) th {
font-weight: var(--chirpui-prose-font-weight-heading);
background: var(--chirpui-bg-subtle);
}
/* ==========================================================================
Streaming and AI components
========================================================================== */
.chirpui-streaming-block {
min-height: 2rem;
position: relative;
white-space: pre-wrap;
}
.chirpui-streaming-block__cursor {
display: inline-block;
width: 2px;
height: 1em;
background: var(--chirpui-accent);
margin-left: 2px;
animation: chirpui-cursor-blink 0.8s step-end infinite;
vertical-align: text-bottom;
}
.chirpui-streaming-block--active .chirpui-streaming-block__cursor {
animation: chirpui-cursor-blink 0.8s step-end infinite;
}
@keyframes chirpui-cursor-blink {
50% { opacity: 0; }
}
@supports (text-box-trim: trim-both) {
.chirpui-copy-btn,
.chirpui-badge,
.chirpui-pagination__link,
.chirpui-modal__close,
.chirpui-toast__close,
.chirpui-alert__close {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
}
.chirpui-copy-btn {
padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
font-size: var(--chirpui-font-sm);
background: var(--chirpui-bg-subtle);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius-sm);
color: var(--chirpui-text-muted);
cursor: pointer;
transition: background var(--chirpui-transition), color var(--chirpui-transition);
}
.chirpui-copy-btn:hover {
background: var(--chirpui-border);
color: var(--chirpui-text);
}
.chirpui-copy-btn:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-model-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chirpui-spacing-sm);
}
.chirpui-model-card__title {
font-weight: 600;
}
.chirpui-model-card__badge {
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-xs);
font-weight: var(--chirpui-ui-font-weight-medium);
padding: 0.15rem 0.4rem;
background: var(--chirpui-bg-subtle);
border-radius: var(--chirpui-radius-sm);
color: var(--chirpui-text-muted);
}
.chirpui-model-card__body {
min-height: 3rem;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.chirpui-streaming-block__cursor {
animation: none;
}
}
/* ==========================================================================
Surface
========================================================================== */
.chirpui-surface {
border-radius: var(--chirpui-radius);
padding: var(--chirpui-space-surface-padding);
}
.chirpui-surface--default {
background: var(--chirpui-surface);
}
.chirpui-surface--muted {
background: var(--chirpui-bg-subtle);
}
.chirpui-surface--elevated {
background: var(--chirpui-surface-elevated);
box-shadow: var(--chirpui-elevation-2);
}
.chirpui-surface--accent {
background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
}
.chirpui-surface--gradient-subtle {
background: var(--chirpui-gradient-subtle);
}
.chirpui-surface--gradient-accent {
background: var(--chirpui-gradient-accent);
}
.chirpui-surface--gradient-mesh {
background: var(--chirpui-gradient-mesh);
}
/* Gradient border — dual background, background-clip; fallback solid border */
.chirpui-surface--gradient-border {
background: var(--chirpui-surface);
border: 2px solid var(--chirpui-border);
}
@supports (background: linear-gradient(red, blue)) and (background-clip: padding-box) {
.chirpui-surface--gradient-border {
background: linear-gradient(var(--chirpui-surface), var(--chirpui-surface)),
var(--chirpui-gradient-border);
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
background-repeat: no-repeat;
border: 2px solid transparent;
}
}
/* Glass — subtle blur, translucent */
.chirpui-surface--glass {
background: var(--chirpui-surface-alt);
border: 1px solid var(--chirpui-border);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
.chirpui-surface--glass {
background: var(--chirpui-glass-bg);
border-color: var(--chirpui-glass-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Frosted — stronger blur, more opaque */
.chirpui-surface--frosted {
background: var(--chirpui-surface-alt);
border: 1px solid var(--chirpui-border);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.chirpui-surface--frosted {
background: var(--chirpui-frosted-bg);
border-color: var(--chirpui-frosted-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
}
/* Smoke — dark tinted glass for overlays */
.chirpui-surface--smoke {
background: var(--chirpui-bg-subtle);
border: 1px solid var(--chirpui-border);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
.chirpui-surface--smoke {
background: var(--chirpui-smoke-bg);
border-color: var(--chirpui-smoke-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
}
.chirpui-surface--full {
width: 100%;
}
/* Blade — full-width edge-to-edge section; breaks out of container */
.chirpui-blade {
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* Parallax — subtle scroll-driven opacity (Chrome 115+); respects prefers-reduced-motion */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.chirpui-blade--parallax .chirpui-surface {
animation: chirpui-parallax-fade linear;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}
}
}
@keyframes chirpui-parallax-fade {
from { opacity: 0.97; }
to { opacity: 1; }
}
.chirpui-surface--no-padding {
padding: 0;
}
/* ==========================================================================
Callout
========================================================================== */
.chirpui-callout {
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
border-radius: var(--chirpui-radius-sm);
border-inline-start: 4px solid var(--chirpui-border);
}
.chirpui-callout--info {
background: var(--chirpui-alert-info-bg);
border-inline-start-color: var(--chirpui-alert-info-border);
}
.chirpui-callout--success {
background: var(--chirpui-alert-success-bg);
border-inline-start-color: var(--chirpui-alert-success-border);
}
.chirpui-callout--warning {
background: var(--chirpui-alert-warning-bg);
border-inline-start-color: var(--chirpui-alert-warning-border);
}
.chirpui-callout--error {
background: var(--chirpui-alert-error-bg);
border-inline-start-color: var(--chirpui-alert-error-border);
}
.chirpui-callout--neutral {
background: var(--chirpui-bg-subtle);
border-inline-start-color: var(--chirpui-border);
}
.chirpui-callout__header {
display: flex;
align-items: flex-start;
gap: var(--chirpui-spacing-sm);
margin-bottom: var(--chirpui-spacing-xs);
}
.chirpui-callout__icon {
font-size: 1em;
line-height: 1;
flex-shrink: 0;
}
.chirpui-callout__title {
font-weight: 600;
font-size: var(--chirpui-font-base);
margin-bottom: 0;
}
.chirpui-callout__header-actions {
margin-inline-start: auto;
}
.chirpui-callout__header-actions:empty {
display: none;
}
.chirpui-callout__header:not(:has(.chirpui-callout__icon)):not(:has(.chirpui-callout__title)):has(.chirpui-callout__header-actions:empty) {
display: none;
}
.chirpui-callout__body {
font-size: var(--chirpui-font-sm);
}
/* ==========================================================================
Hero
========================================================================== */
.chirpui-hero {
width: 100%;
padding: var(--chirpui-spacing-xl) var(--chirpui-spacing);
}
.chirpui-hero__inner {
max-width: var(--chirpui-container-max);
margin-inline: auto;
text-align: center;
}
.chirpui-hero__title {
font-size: var(--chirpui-font-2xl);
font-weight: 700;
line-height: var(--chirpui-line-height-tight);
margin: 0 0 var(--chirpui-spacing-sm);
color: var(--chirpui-text);
}
.chirpui-hero__subtitle {
font-size: var(--chirpui-font-lg);
color: var(--chirpui-text-muted);
margin: 0 0 var(--chirpui-spacing);
line-height: var(--chirpui-line-height-normal);
}
.chirpui-hero__content {
margin-top: var(--chirpui-spacing);
}
.chirpui-hero__action {
margin-top: var(--chirpui-spacing);
}
.chirpui-hero__action:empty {
display: none;
}
.chirpui-hero--solid {
background: var(--chirpui-bg-subtle);
}
.chirpui-hero--muted {
background: var(--chirpui-surface-alt);
}
.chirpui-hero--gradient {
background: linear-gradient(
135deg,
var(--chirpui-bg-subtle) 0%,
color-mix(in srgb, var(--chirpui-accent) 8%, var(--chirpui-bg)) 100%
);
}
.chirpui-hero--mesh {
background: var(--chirpui-gradient-mesh);
}
.chirpui-hero--animated-gradient {
background: var(--chirpui-gradient-subtle);
}
@media (prefers-reduced-motion: no-preference) {
.chirpui-hero--animated-gradient {
background: linear-gradient(
-45deg,
var(--chirpui-bg-subtle),
color-mix(in srgb, var(--chirpui-accent) 8%, var(--chirpui-bg)),
color-mix(in srgb, var(--chirpui-accent-secondary) 6%, var(--chirpui-bg)),
var(--chirpui-bg-subtle)
);
background-size: 400% 400%;
animation: chirpui-gradient-shift 15s ease infinite;
}
}
@keyframes chirpui-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Page hero (docs, editorial) */
.chirpui-hero--page .chirpui-hero__eyebrow,
.chirpui-hero--page .chirpui-hero__actions,
.chirpui-hero--page .chirpui-hero__metadata,
.chirpui-hero--page .chirpui-hero__footer {
margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-hero--page .chirpui-hero__eyebrow:empty,
.chirpui-hero--page .chirpui-hero__actions:empty,
.chirpui-hero--page .chirpui-hero__metadata:empty,
.chirpui-hero--page .chirpui-hero__footer:empty {
display: none;
}
.chirpui-hero--page-minimal .chirpui-hero__eyebrow {
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
/* ==========================================================================
Overlay
========================================================================== */
.chirpui-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.chirpui-overlay--dark {
background: var(--chirpui-overlay-dark);
}
.chirpui-overlay--gradient-bottom {
background: var(--chirpui-overlay-gradient-bottom);
}
.chirpui-overlay--gradient-top {
background: var(--chirpui-overlay-gradient-top);
}
/* ==========================================================================
Carousel
========================================================================== */
.chirpui-carousel {
position: relative;
}
.chirpui-carousel__track {
display: flex;
gap: var(--chirpui-spacing);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-inline: var(--chirpui-spacing);
}
.chirpui-carousel__slide {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 auto;
}
.chirpui-carousel--compact .chirpui-carousel__slide {
min-width: min(280px, 85vw);
}
.chirpui-carousel--page .chirpui-carousel__slide {
min-width: 100%;
scroll-snap-align: center;
}
.chirpui-carousel__dots {
display: flex;
justify-content: center;
gap: var(--chirpui-spacing-sm);
margin-top: var(--chirpui-spacing);
padding-inline: var(--chirpui-spacing);
}
.chirpui-carousel__dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--chirpui-border);
transition: background var(--chirpui-transition);
}
.chirpui-carousel__dot:hover {
background: var(--chirpui-accent);
}
.chirpui-carousel:has(#slide-1:target) .chirpui-carousel__dot[href="#slide-1"],
.chirpui-carousel:has(#slide-2:target) .chirpui-carousel__dot[href="#slide-2"],
.chirpui-carousel:has(#slide-3:target) .chirpui-carousel__dot[href="#slide-3"],
.chirpui-carousel:has(#slide-4:target) .chirpui-carousel__dot[href="#slide-4"],
.chirpui-carousel:has(#slide-5:target) .chirpui-carousel__dot[href="#slide-5"] {
background: var(--chirpui-accent);
}
/* ==========================================================================
Card
========================================================================== */
.chirpui-card {
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
overflow: hidden;
box-shadow: var(--chirpui-elevation-card-rest);
transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition),
transform var(--chirpui-transition), opacity var(--chirpui-transition);
@starting-style {
opacity: 0;
transform: translateY(8px);
}
}
.chirpui-card__header {
display: flex;
align-items: center;
gap: var(--chirpui-space-card-gap);
padding: var(--chirpui-space-card-gap) var(--chirpui-space-card-padding);
font-family: var(--chirpui-ui-font-family);
font-size: var(--chirpui-ui-sm);
font-weight: var(--chirpui-ui-font-weight-semibold);
color: var(--chirpui-card-header-color);
border-bottom: 1px solid var(--chirpui-border);
}
.chirpui-card__icon {
font-size: 1em;
line-height: 1;
flex-shrink: 0;
}
.chirpui-card__header-content {
flex: 1;
}
.chirpui-card__title {
display: block;
font-size: var(--chirpui-ui-base);
font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-card__header-actions {
display: flex;
align-items: center;
gap: var(--chirpui-space-inline-gap);
margin-inline-start: auto;
}
.chirpui-card__header-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--chirpui-space-inline-gap);
flex-shrink: 0;
}
.chirpui-card__header-badges:empty {
display: none;
}
.chirpui-card__header-subtitle {
margin-top: var(--chirpui-spacing-xs);
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
.chirpui-card__header-subtitle:empty {
display: none;
}
.chirpui-card__body {
padding: var(--chirpui-space-card-padding);
}
.chirpui-card__body-actions:empty {
display: none;
}
.chirpui-card__body-actions:not(:empty) {
margin-top: var(--chirpui-space-card-gap);
display: flex;
align-items: center;
gap: var(--chirpui-space-control-gap);
}
/* Links in card body — no underline by default; card/title signals clickability */
.chirpui-card__body a {
color: var(--chirpui-card-body-link-color);
text-decoration: var(--chirpui-card-body-link-decoration);
transition: color var(--chirpui-transition);
}
.chirpui-card__body a:hover {
color: var(--chirpui-card-body-link-hover-color);
}
.chirpui-card:has(.chirpui-card__footer) .chirpui-card__body,
.chirpui-card:has(.chirpui-card__footer-wrap:not(:empty)) .chirpui-card__body {
padding-bottom: var(--chirpui-space-card-gap);
}
.chirpui-card__footer {
padding: var(--chirpui-space-card-gap) var(--chirpui-space-card-padding);
border-top: 1px solid var(--chirpui-border);
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
.chirpui-card__footer-wrap:not(:empty) {
border-top: 1px solid var(--chirpui-border);
padding: var(--chirpui-space-card-gap) var(--chirpui-space-card-padding);
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
.chirpui-card__top-meta {
display: flex;
flex-direction: column;
gap: var(--chirpui-space-inline-gap);
padding: var(--chirpui-space-card-gap) var(--chirpui-space-card-padding);
border-bottom: 1px solid var(--chirpui-border);
font-size: var(--chirpui-font-xs);
}
.chirpui-card__top-meta:empty {
display: none;
}
.chirpui-card__main-link {
display: block;
flex: 1;
color: inherit;
text-decoration: none;
}
.chirpui-resource-card {
height: 100%;
}
.chirpui-resource-card__description {
margin: 0;
}
.chirpui-card--collapsible summary {
cursor: pointer;
list-style: none;
}
.chirpui-card--collapsible summary::before {
content: "\25B6";
display: inline-block;
margin-right: var(--chirpui-spacing-xs);
transition: transform var(--chirpui-transition);
font-size: 0.75em;
}
.chirpui-card--collapsible[open] summary::before {
rotate: 90deg;
}
.chirpui-card__media {
overflow: hidden;
}
.chirpui-card__media:empty {
display: none;
}
.chirpui-card__media img,
.chirpui-card__media video {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--chirpui-video-aspect-ratio);
object-fit: cover;
}
.chirpui-card--feature .chirpui-card__media,
.chirpui-card--media .chirpui-card__media {
order: -1;
}
.chirpui-card--horizontal {
display: flex;
flex-direction: row;
}
.chirpui-card--horizontal .chirpui-card__media {
flex: 0 0 40%;
max-width: 12rem;
}
.chirpui-card--horizontal .chirpui-card__media img,
.chirpui-card--horizontal .chirpui-card__media video {
aspect-ratio: 1;
height: 100%;
}
.chirpui-card--stats .chirpui-card__body {
text-align: center;
}
.chirpui-card--stats .chirpui-card__header {
border-bottom: none;
font-size: var(--chirpui-font-2xl);
font-weight: 700;
}
.chirpui-card--glass {
background: color-mix(in srgb, var(--chirpui-surface) 80%, transparent);
backdrop-filter: blur(8px);
}
/* Gradient border — dual background, background-clip; fallback solid */
.chirpui-card--gradient-border {
border: 2px solid var(--chirpui-border);
}
@supports (background-clip: padding-box) {
.chirpui-card--gradient-border {
background: linear-gradient(var(--chirpui-surface), var(--chirpui-surface)),
var(--chirpui-gradient-border);
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
background-repeat: no-repeat;
border: 2px solid transparent;
}
}
.chirpui-card--gradient-header .chirpui-card__header {
background: var(--chirpui-gradient-subtle);
}
.chirpui-card--hoverable:not(.chirpui-card--link) {
cursor: pointer;
transition: transform var(--chirpui-transition), box-shadow var(--chirpui-transition);
}
.chirpui-card:not(.chirpui-card--link):hover {
border-color: var(--chirpui-card-hover-border);
box-shadow: var(--chirpui-elevation-card-hover);
}
@media (prefers-reduced-motion: no-preference) {
.chirpui-card:not(.chirpui-card--link):hover {
transform: translateY(-2px);
}
.chirpui-card--hoverable:not(.chirpui-card--link):hover {
transform: translateY(-2px);
box-shadow: var(--chirpui-shadow-md);
}
}
.chirpui-card--link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: box-shadow var(--chirpui-transition), border-color var(--chirpui-transition);
}
.chirpui-card--linked {
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow var(--chirpui-transition), border-color var(--chirpui-transition);
}
.chirpui-resource-index {
width: 100%;
}
.chirpui-resource-index__search,
.chirpui-resource-index__filters,
.chirpui-resource-index__results {
width: 100%;
}
.chirpui-card--link .chirpui-card__body {
flex: 1;
}
.chirpui-card--linked .chirpui-card__body {
flex: 1;
}
.chirpui-card--link:hover {
border-color: var(--chirpui-state-border-hover);
box-shadow: var(--chirpui-elevation-card-hover);
}
.chirpui-card--linked:hover,
.chirpui-card--linked:has(.chirpui-card__main-link:focus-visible) {
border-color: var(--chirpui-state-border-hover);
box-shadow: var(--chirpui-elevation-card-hover);
}
@media (prefers-reduced-motion: no-preference) {
.chirpui-card--link {
transition: box-shadow var(--chirpui-transition), border-color var(--chirpui-transition),
transform var(--chirpui-transition);
}
.chirpui-card--linked {
transition: box-shadow var(--chirpui-transition), border-color var(--chirpui-transition),
transform var(--chirpui-transition);
}
.chirpui-card--link:hover {
transform: translateY(-2px);
}
.chirpui-card--linked:hover,
.chirpui-card--linked:has(.chirpui-card__main-link:focus-visible) {
transform: translateY(-2px);
}
.chirpui-card--link:active {
transform: translateY(0);
}
.chirpui-card--linked:has(.chirpui-card__main-link:active) {
transform: translateY(0);
}
}
.chirpui-card--link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-card--linked:has(.chirpui-card__main-link:focus-visible) {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-card--link:active {
box-shadow: var(--chirpui-elevation-card-rest);
border-color: var(--chirpui-state-border-active);
}
.chirpui-card--linked:has(.chirpui-card__main-link:active) {
box-shadow: var(--chirpui-elevation-card-rest);
border-color: var(--chirpui-state-border-active);
}
/* ==========================================================================
Video Card
========================================================================== */
.chirpui-video-card {
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
overflow: hidden;
transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}
.chirpui-video-card:hover {
border-color: var(--chirpui-card-hover-border);
box-shadow: var(--chirpui-elevation-card-hover);
}
.chirpui-video-card__link {
display: block;
text-decoration: none;
color: inherit;
}
.chirpui-video-card__thumbnail {
position: relative;
margin: 0;
aspect-ratio: var(--chirpui-video-aspect-ratio);
overflow: hidden;
background: var(--chirpui-bg-subtle);
}
.chirpui-video-card__thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.chirpui-video-card__actions {
position: absolute;
top: var(--chirpui-spacing-xs);
right: var(--chirpui-spacing-xs);
}
.chirpui-video-card__actions:empty {
display: none;
}
.chirpui-video-card__duration {
position: absolute;
right: var(--chirpui-spacing-xs);
bottom: var(--chirpui-spacing-xs);
padding: 0.125rem 0.35rem;
font-size: var(--chirpui-font-xs);
font-weight: 600;
background: rgba(0, 0, 0, 0.75);
color: white;
border-radius: var(--chirpui-radius-sm);
}
.chirpui-video-card__body {
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
}
.chirpui-video-card__title {
margin: 0 0 var(--chirpui-spacing-xs);
font-size: var(--chirpui-font-sm);
font-weight: 600;
line-height: var(--chirpui-line-height-tight);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chirpui-video-card__channel,
.chirpui-video-card__meta {
margin: 0;
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
.chirpui-video-card__channel-link {
color: inherit;
text-decoration: none;
}
.chirpui-video-card__channel-link:hover {
color: var(--chirpui-accent);
text-decoration: underline;
}
/* ==========================================================================
Channel Card
========================================================================== */
.chirpui-channel-card {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
padding: var(--chirpui-spacing);
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
}
.chirpui-channel-card__link {
display: flex;
align-items: center;
gap: var(--chirpui-spacing);
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
}
.chirpui-channel-card__link:hover .chirpui-channel-card__name {
color: var(--chirpui-accent);
}
.chirpui-channel-card__info {
min-width: 0;
}
.chirpui-channel-card__name {
margin: 0;
font-size: var(--chirpui-font-base);
font-weight: 600;
}
.chirpui-channel-card__subscribers {
margin: var(--chirpui-spacing-xs) 0 0;
font-size: var(--chirpui-font-sm);
color: var(--chirpui-text-muted);
}
.chirpui-channel-card__body:empty {
display: none;
}
.chirpui-channel-card__actions {
flex-shrink: 0;
}
/* ==========================================================================
Video Thumbnail
========================================================================== */
.chirpui-video-thumbnail {
display: block;
position: relative;
aspect-ratio: var(--chirpui-video-aspect-ratio);
overflow: hidden;
background: var(--chirpui-bg-subtle);
border-radius: var(--chirpui-radius);
}
.chirpui-video-thumbnail__img-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.chirpui-video-thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.chirpui-video-thumbnail__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.chirpui-video-thumbnail__duration {
position: absolute;
right: var(--chirpui-spacing-xs);
bottom: var(--chirpui-spacing-xs);
padding: 0.125rem 0.35rem;
font-size: var(--chirpui-font-xs);
font-weight: 600;
background: rgba(0, 0, 0, 0.75);
color: white;
border-radius: var(--chirpui-radius-sm);
}
.chirpui-video-thumbnail__progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
background: var(--chirpui-error);
}
/* ==========================================================================
Live Badge
========================================================================== */
.chirpui-live-badge {
display: inline-flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
padding: 0.125rem 0.5rem;
font-size: var(--chirpui-font-xs);
font-weight: 600;
background: var(--chirpui-error);
color: white;
border-radius: var(--chirpui-radius-sm);
}
.chirpui-live-badge__dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: currentColor;
animation: chirpui-live-pulse 1.5s ease-in-out infinite;
}
@keyframes chirpui-live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.chirpui-live-badge__viewers {
opacity: 0.9;
}
/* ==========================================================================
Playlist
========================================================================== */
.chirpui-playlist {
background: var(--chirpui-surface);
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
overflow: hidden;
}
.chirpui-playlist__header {
display: flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
border-bottom: 1px solid var(--chirpui-border);
}
.chirpui-playlist__title {
margin: 0;
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
font-size: var(--chirpui-font-sm);
font-weight: 600;
flex: 1;
}
.chirpui-playlist__header-actions:empty {
display: none;
}
.chirpui-playlist__list {
list-style: none;
margin: 0;
padding: 0;
}
.chirpui-playlist-item {
border-bottom: 1px solid var(--chirpui-border);
}
.chirpui-playlist-item:last-child {
border-bottom: none;
}
.chirpui-playlist-item__link {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--chirpui-spacing);
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
text-decoration: none;
color: inherit;
transition: background var(--chirpui-transition);
}
.chirpui-playlist-item__link:hover {
background: var(--chirpui-bg-subtle);
}
.chirpui-playlist-item__link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-playlist-item--active .chirpui-playlist-item__link {
color: var(--chirpui-accent);
background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
font-weight: 600;
}
.chirpui-playlist-item__title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chirpui-playlist-item__duration {
flex-shrink: 0;
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
/* ==========================================================================
Chapter List
========================================================================== */
.chirpui-chapter-list {
border: 1px solid var(--chirpui-border);
border-radius: var(--chirpui-radius);
background: var(--chirpui-surface);
}
.chirpui-chapter-list__summary {
padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: var(--chirpui-spacing-xs);
}
.chirpui-chapter-list__summary::after {
content: "\25B8";
display: inline-block;
transition: rotate var(--chirpui-transition);
margin-inline-start: auto;
font-size: 0.75em;
color: var(--chirpui-text-muted);
}
.chirpui-chapter-list[open] > .chirpui-chapter-list__summary::after {
rotate: 90deg;
}
.chirpui-chapter-list__summary-text {
flex: 1;
}
.chirpui-chapter-list__summary-actions:empty {
display: none;
}
.chirpui-chapter-list__summary::-webkit-details-marker {
display: none;
}
.chirpui-chapter-list__list {
padding: 0 var(--chirpui-spacing) var(--chirpui-spacing);
margin: 0;
list-style: none;
}
.chirpui-chapter-item {
margin-bottom: var(--chirpui-spacing-xs);
}
.chirpui-chapter-item:last-child {
margin-bottom: 0;
}
.chirpui-chapter-item__link {
display: flex;
gap: var(--chirpui-spacing);
padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
text-decoration: none;
color: inherit;
border-radius: var(--chirpui-radius-sm);
transition: background var(--chirpui-transition);
}
a.chirpui-chapter-item__link:hover {
background: var(--chirpui-bg-subtle);
}
a.chirpui-chapter-item__link:focus-visible {
outline: var(--chirpui-state-focus-outline);
outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-chapter-item__timestamp {
flex-shrink: 0;
font-size: var(--chirpui-font-xs);
color: var(--chirpui-text-muted);
}
.chirpui-chapter-item__title {
flex: 1;
min-width: 0;
}
/* ==========================================================================
Modal
========================================================================== */
/* Native