/* ============================================================================
 * chirp-ui — GENERATED FILE; do not hand-edit.
 *
 * Source partials: src/chirp_ui/templates/css/
 * Rebuild:         poe build-css   (or python scripts/build_chirpui_css.py)
 *
 * See docs/plans/PLAN-css-scope-and-layer.md for the authoring model.
 * ============================================================================
 */

@layer chirpui.reset, chirpui.token, chirpui.base, chirpui.component, chirpui.utility;

/* === partials/001_tokens.css === */
@layer chirpui.component {
/* 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)
   ========================================================================== */

}

/* === partials/002_reset.css === */
@layer chirpui.component {
/* ==========================================================================
   Reset — minimal browser normalization
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* Alpine x-cloak — hide until Alpine initializes */
[x-cloak] { display: none !important; }

/* Media reset — prevent img/video/iframe/etc from overflowing their parent.
   :where() keeps specificity at 0 so any authored selector wins.
   Inline SVG keeps its inline flow; only gets a max-width safety net. */
:where(img, video, canvas) {
    max-width: 100%;
    height: auto;
}

:where(iframe, embed, object) {
    display: block;
    max-width: 100%;
}

:where(svg) {
    max-width: 100%;
}

/* Pre/table auto-containment outside prose — scoped to cards, surfaces, callouts.
   Prose already handles its own pre/table at higher specificity. */
:where(.chirpui-card__body, .chirpui-surface, .chirpui-callout) :is(pre, table) {
    max-width: 100%;
    overflow-x: auto;
}

:where(.chirpui-card__body, .chirpui-surface, .chirpui-callout) table {
    display: block;
}

/* Global reduced-motion cap — OS-level accessibility preference honored at the root.
   Duration 0.01ms (not 0) so animationend/transitionend still fire. Per-component
   @media (prefers-reduced-motion: reduce) blocks still override for bespoke handling. */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    font-optical-sizing: var(--chirpui-font-optical-sizing, auto);

    /* Spacing — fluid scale with clamp() */
    --chirpui-spacing-2xs: 0.125rem;
    --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 shorthand aliases */
    --chirpui-space-xs: var(--chirpui-spacing-xs);
    --chirpui-space-sm: var(--chirpui-spacing-sm);

    /* 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-control-block-size: 2.5rem;
    --chirpui-control-block-size-sm: 2rem;
    --chirpui-control-touch-target: 2.5rem;
    --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;
    --chirpui-sidebar-mobile-max-block-size: min(40dvh, 12rem);

    /* Radius */
    --chirpui-radius-xs: 0.125rem;
    --chirpui-radius-sm: 0.25rem;
    --chirpui-radius: 0.5rem;
    --chirpui-radius-lg: 0.75rem;
    --chirpui-radius-xl: 1rem;
    --chirpui-radius-2xl: 1.5rem;
    --chirpui-radius-full: 9999px;

    /* 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-xs: var(--chirpui-font-xs);
    --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-6xl: clamp(3rem, 10vw, 3.75rem);
    --chirpui-prose-7xl: clamp(3.5rem, 12vw, 4.625rem);
    --chirpui-display-letter-spacing: -0.025em;
    --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;
    accent-color: var(--chirpui-accent);
    --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);

    /* Aliases — shorthand for common token lookups */
    --chirpui-fg: var(--chirpui-text);
    --chirpui-fg-muted: var(--chirpui-text-muted);
    --chirpui-danger: var(--chirpui-error);
    --chirpui-on-accent: #fff;
    --chirpui-on-warning: light-dark(#1a1a1a, #1a1a1a);
    --chirpui-font-family: var(--chirpui-prose-font-family);
    --chirpui-font-mono: var(--chirpui-mono-font-family);
    --chirpui-navbar-height: 3.5rem;

    /* 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.
       Mix toward --chirpui-surface (not white) so dark mode gets dark tints. */
    --chirpui-primary-muted: color-mix(in srgb, var(--chirpui-primary) var(--chirpui-shade-muted), var(--chirpui-surface));
    --chirpui-success-muted: color-mix(in srgb, var(--chirpui-success) var(--chirpui-shade-muted), var(--chirpui-surface));
    --chirpui-warning-muted: color-mix(in srgb, var(--chirpui-warning) var(--chirpui-shade-muted), var(--chirpui-surface));
    --chirpui-error-muted: color-mix(in srgb, var(--chirpui-error) var(--chirpui-shade-muted), var(--chirpui-surface));
    --chirpui-muted-bg: color-mix(in srgb, var(--chirpui-muted) var(--chirpui-shade-muted), var(--chirpui-surface));

    /* 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), var(--chirpui-surface));
    --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);

    /* Animation durations — for @keyframes (transitions use --chirpui-motion-*) */
    --chirpui-anim-flash: 0.2s;
    --chirpui-anim-quick: 0.4s;
    --chirpui-anim-pace: 0.6s;
    --chirpui-anim-breath: 0.8s;
    --chirpui-anim-pulse: 1.5s;
    --chirpui-anim-cycle: 3s;
    --chirpui-anim-drift: 8s;
    --chirpui-anim-ambient: 20s;

    /* 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: var(--chirpui-z-sticky);

    /* Corner accent — architectural bracket decoration on surfaces */
    --chirpui-corner-accent-color: var(--chirpui-border);
    --chirpui-corner-accent-size: 12px;
    --chirpui-corner-accent-width: 1px;

    /* 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)
    );
    --chirpui-shadow-deep: light-dark(
        0 0 24px 0 rgba(0, 0, 0, 0.03) inset, 0 0.5px 0 0.75px rgba(0, 0, 0, 0.05),
        0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.06), 0 36px 48px rgba(0, 0, 0, 0.08),
        0 0 24px 0 rgba(0, 0, 0, 0.2) inset, 0 0.5px 0 0.75px rgba(255, 255, 255, 0.05),
        0 4px 6px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.2), 0 36px 48px rgba(0, 0, 0, 0.25)
    );
    --chirpui-shadow-inset-glow: inset 0 1px 0 0 color-mix(in srgb, var(--chirpui-accent) 8%, transparent);

    /* 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);
    --chirpui-elevation-5: var(--chirpui-shadow-deep);
    --chirpui-elevation-deep: var(--chirpui-shadow-deep);

    /* Z-index — global stacking hierarchy (local 0/1/2 within components are intentionally hardcoded) */
    --chirpui-z-dropdown: 10;
    --chirpui-z-popover: 20;
    --chirpui-z-sticky-col: 40;
    --chirpui-z-sticky: 50;
    --chirpui-z-sticky-corner: 60;
    --chirpui-z-toast: 100;
    --chirpui-z-tray: 1100;
    --chirpui-z-modal: 1200;
    --chirpui-z-command-palette: 9999;
    --chirpui-z-celebration: 10000;

    /* 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);

    /* SVG pattern tiles — url() paths are relative to chirpui.css (serve templates/ as static root) */
    --chirpui-pattern-checker: url("patterns/checker.svg");
    --chirpui-pattern-dots-sm: url("patterns/dots-sm.svg");
    --chirpui-pattern-dots-md: url("patterns/dots-md.svg");
    --chirpui-pattern-grid: url("patterns/grid.svg");
    --chirpui-pattern-diag: url("patterns/diag.svg");
    --chirpui-pattern-crosshatch: url("patterns/crosshatch.svg");
    --chirpui-pattern-weave: url("patterns/weave.svg");
    --chirpui-pattern-noise-fine: url("patterns/noise-fine.svg");
    --chirpui-pattern-noise-coarse: url("patterns/noise-coarse.svg");
    --chirpui-pattern-hex: url("patterns/hex.svg");

    /* CSS-only repeating fills (gradient geometry; tune ink without changing tile size) */
    --chirpui-bg-pattern-base: var(--chirpui-bg-subtle);
    --chirpui-bg-pattern-ink: color-mix(in oklab, var(--chirpui-border) 50%, transparent);
    --chirpui-bg-pattern-ink-accent: color-mix(in oklab, var(--chirpui-accent) 30%, transparent);
}

/* 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), var(--chirpui-surface));
        --chirpui-success-muted: color-mix(in oklch, var(--chirpui-success) var(--chirpui-shade-muted), var(--chirpui-surface));
        --chirpui-warning-muted: color-mix(in oklch, var(--chirpui-warning) var(--chirpui-shade-muted), var(--chirpui-surface));
        --chirpui-error-muted: color-mix(in oklch, var(--chirpui-error) var(--chirpui-shade-muted), var(--chirpui-surface));
        --chirpui-muted-bg: color-mix(in oklch, var(--chirpui-muted) var(--chirpui-shade-muted), var(--chirpui-surface));
        --chirpui-accent-secondary-muted: color-mix(in oklch, var(--chirpui-accent-secondary) var(--chirpui-shade-muted), var(--chirpui-surface));
        --chirpui-focus-ring: color-mix(in oklch, var(--chirpui-accent) 30%, transparent);
        --chirpui-border-subtle: color-mix(in oklch, var(--chirpui-border) 70%, transparent);
    }
}
}

/* === partials/003_base.css === */
@layer chirpui.component {
/* ==========================================================================
   Base — prevent layout shift from scrollbar
   ========================================================================== */

html {
    scrollbar-gutter: stable;
}

}

/* === partials/004_layout.css === */
@layer chirpui.component {
/* ==========================================================================
   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/fundamentals/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/fundamentals/layout-grids-and-frames.md.
   -------------------------------------------------------------------------- */

.chirpui-frame {
    display: grid;
    gap: var(--chirpui-frame-gap);
    min-width: 0;
}

.chirpui-frame > * {
    min-width: 0;
}

.chirpui-frame > [data-chirpui-role~="rail"],
.chirpui-frame > [data-chirpui-role~="nav"] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.chirpui-frame > [data-chirpui-role~="content"],
.chirpui-frame > [data-chirpui-pressure~="flex"] {
    min-inline-size: 0;
}

.chirpui-frame > [data-chirpui-pressure~="compress"] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.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-start {
    grid-template-columns: minmax(0, min(var(--chirpui-frame-sidebar-width), 100%)) minmax(0, 1fr);
}

.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-start,
    .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-start,
    .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);
}

:where(.chirpui-stack:not(.chirpui-prose)) > :where(:not(script, style, template)) {
    margin-block: 0;
}

.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);
}

:where(.chirpui-cluster) > :where(:not(script, style, template)) {
    margin: 0;
}

.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); }

/* Layer — overlapping card deck with hover-to-front.
   Inspired by emdashCSS layers: horizontal flex row with negative margin overlap,
   slight rotation on idle cards, hover straightens and elevates.
   Usage: layer(direction="center", overlap="md", angle="subtle") */

.chirpui-layer {
    --chirpui-layer-overlap: var(--chirpui-layer-overlap-md);
    --chirpui-layer-angle: var(--chirpui-layer-angle-subtle);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
}

.chirpui-layer--left   { justify-content: flex-start; }
.chirpui-layer--center { justify-content: center; }
.chirpui-layer--right  { justify-content: flex-end; }

.chirpui-layer > * {
    flex-shrink: 0;
    transition: transform var(--chirpui-motion-base) var(--chirpui-ease-spring),
                z-index 0s;
}

.chirpui-layer > *:not(:first-child) {
    margin-inline-start: var(--chirpui-layer-overlap);
    transform: rotate(var(--chirpui-layer-angle));
}

.chirpui-layer--hover > *:hover {
    transform: rotate(0deg) scale(1.04);
    z-index: var(--chirpui-z-dropdown);
}

/* Overlap sizes (negative margin pulls cards together) */
.chirpui-layer--overlap-sm { --chirpui-layer-overlap: -1.5rem; }
.chirpui-layer--overlap-md { --chirpui-layer-overlap: -3rem; }
.chirpui-layer--overlap-lg { --chirpui-layer-overlap: -5rem; }

/* Default overlap token values (used when no --overlap-* modifier) */
:root {
    --chirpui-layer-overlap-sm: -1.5rem;
    --chirpui-layer-overlap-md: -3rem;
    --chirpui-layer-overlap-lg: -5rem;
    --chirpui-layer-angle-none: 0deg;
    --chirpui-layer-angle-subtle: -2deg;
    --chirpui-layer-angle-moderate: -4deg;
}

/* Angle variants */
.chirpui-layer--angle-none     { --chirpui-layer-angle: var(--chirpui-layer-angle-none); }
.chirpui-layer--angle-subtle   { --chirpui-layer-angle: var(--chirpui-layer-angle-subtle); }
.chirpui-layer--angle-moderate { --chirpui-layer-angle: var(--chirpui-layer-angle-moderate); }

/* Alternating tilt: even children rotate opposite for a "fanned" look */
.chirpui-layer > *:not(:first-child):nth-child(even) {
    transform: rotate(calc(var(--chirpui-layer-angle) * -1));
}

.chirpui-layer--hover > *:nth-child(even):hover {
    transform: rotate(0deg) scale(1.04);
    z-index: var(--chirpui-z-dropdown);
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-layer > * {
        transition: none;
    }
    .chirpui-layer > *:not(:first-child) {
        transform: none;
    }
    .chirpui-layer > *:not(:first-child):nth-child(even) {
        transform: none;
    }
    .chirpui-layer--hover > *:hover {
        transform: scale(1.02);
    }
    .chirpui-layer--hover > *:nth-child(even):hover {
        transform: scale(1.02);
    }
}

/* Container modifiers — propagate non-inheritable properties to direct children.
   Inspired by emdashCSS c-* prefix (e.g. .c-rounded-11 > *).
   Kept intentionally small: only for properties CSS custom properties can't inherit. */

.chirpui-children--rounded > *     { border-radius: var(--chirpui-radius); }
.chirpui-children--rounded-sm > *  { border-radius: var(--chirpui-radius-sm); }
.chirpui-children--rounded-lg > *  { border-radius: var(--chirpui-radius-lg); }
.chirpui-children--rounded-xl > *  { border-radius: var(--chirpui-radius-xl); }
.chirpui-children--rounded-full > * { border-radius: 9999px; }

.chirpui-children--equal > *       { flex: 1; }

.chirpui-children--clip > *        { min-width: 0; overflow: clip; }

/* 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: var(--chirpui-ui-font-weight-bold);
    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;
}

/* Horizontal scroll container for wide children (tables, toolbars, dense rows).
   Parent clips; this child absorbs the overflow as a local scroll region.
   overscroll-behavior: contain prevents scroll-chain to the page at the boundary. */
.chirpui-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
}

/* Single-line truncation with ellipsis. Requires the element to have a width
   constraint (block/grid/flex child in a bounded container). */
.chirpui-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Multi-line clamp with ellipsis (2 or 3 lines). */
.chirpui-clamp-2,
.chirpui-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

.chirpui-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.chirpui-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.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 < 48rem) {
    .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);
    margin-inline: calc(var(--chirpui-page-header-padding) * -1);
}

.chirpui-page-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--chirpui-page-header-gap);
    flex-wrap: wrap;
    min-width: 0;
}

.chirpui-page-header__top > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--chirpui-spacing-xs);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-page-header__top > div:first-child > * {
    margin-block: 0;
}

.chirpui-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    flex-wrap: wrap;
    flex-shrink: 0;
    max-width: 100%;
    justify-content: flex-end;
}

.chirpui-page-header__actions:empty {
    display: none;
}

.chirpui-page-header__breadcrumbs {
    margin-block: 0;
}

.chirpui-page-header__meta {
    margin-block: 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: flex-start;
    gap: var(--chirpui-space-control-gap);
    min-width: 0;
    max-width: 100%;
}

.chirpui-section-header__icon {
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.15em;
}

.chirpui-section-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--chirpui-space-section-gap);
    flex-wrap: wrap;
    min-width: 0;
}

.chirpui-section-header__top > .chirpui-section-header__title-block {
    flex: 1 1 auto;
    min-width: 0;
}

.chirpui-section-header__title-block > div {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-section-header__title-block > div > * {
    margin-block: 0;
}

.chirpui-section-header__actions {
    display: flex;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    flex-wrap: wrap;
    flex-shrink: 0;
    max-width: 100%;
    justify-content: flex-end;
}

.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-block: 0;
    overflow-wrap: anywhere;
}

.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 {
    margin-inline: 0;
}

.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-block: 0;
    overflow-wrap: anywhere;
}

.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__icon {
    margin-top: 0;
}

.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-block: 0;
}

@media (max-width: 42rem) {
    .chirpui-page-header__top,
    .chirpui-section-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .chirpui-page-header__actions,
    .chirpui-section-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.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;
}
}

/* === partials/005_workbench.css === */
@layer chirpui.component {
/* ==========================================================================
   Workbench
   ========================================================================== */

.chirpui-panel {
    display: flex;
    flex-direction: column;
    min-height: var(--chirpui-panel-min-height);
    overflow: clip;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chirpui-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--chirpui-space-control-gap);
    flex-wrap: wrap;
    padding: var(--chirpui-panel-header-padding);
    border-bottom: 1px solid var(--chirpui-border-subtle);
}

.chirpui-panel__heading {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.chirpui-panel__title {
    margin-block: 0;
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-ui-base);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.chirpui-panel__subtitle {
    margin-block: 0;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-ui-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-panel__actions {
    display: flex;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    flex-wrap: wrap;
    flex-shrink: 0;
    max-width: 100%;
    justify-content: flex-end;
}

.chirpui-panel__actions:empty,
.chirpui-panel__footer:empty {
    display: none;
}

.chirpui-panel__body {
    padding: var(--chirpui-panel-body-padding);
    min-height: 0;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-panel__body > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-panel__body > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
    margin-block-start: var(--chirpui-spacing-sm);
}

.chirpui-panel__body--scroll {
    flex: 1 1 auto;
    overflow: auto;
}

.chirpui-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--chirpui-space-control-gap);
    padding: var(--chirpui-panel-footer-padding);
    border-top: 1px solid var(--chirpui-border-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.chirpui-panel__footer > :where(:not(script, style, template)) {
    margin-block: 0;
}

@media (max-width: 42rem) {
    .chirpui-panel__header {
        flex-direction: column;
        align-items: stretch;
    }

    .chirpui-panel__actions,
    .chirpui-panel__footer {
        justify-content: flex-start;
    }
}

.chirpui-file-tree .chirpui-panel__body {
    padding: 0;
}

.chirpui-file-tree--plain {
    --chirpui-file-tree-padding: var(--chirpui-spacing-md);
}

.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-file-tree--explorer .chirpui-nav-tree__list {
    display: grid;
    gap: var(--chirpui-spacing-2xs);
}

.chirpui-file-tree--explorer .chirpui-nav-tree__list--nested {
    position: relative;
    margin-inline-start: var(--chirpui-spacing);
    padding: var(--chirpui-spacing-2xs) 0 var(--chirpui-spacing-2xs) var(--chirpui-spacing);
    border-inline-start: 1px solid color-mix(in srgb, var(--chirpui-border) 70%, transparent);
}

.chirpui-file-tree--explorer :where(.chirpui-nav-tree__link, .chirpui-nav-tree__text) {
    min-block-size: calc(var(--chirpui-spacing-xl) + var(--chirpui-spacing-xs));
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-file-tree--explorer :where(.chirpui-nav-tree__link, .chirpui-nav-tree__text):hover {
    border-color: var(--chirpui-border-subtle);
    background: var(--chirpui-state-surface-hover);
    color: var(--chirpui-text);
}

.chirpui-file-tree--explorer .chirpui-nav-tree__link--active {
    border-color: color-mix(in srgb, var(--chirpui-accent) 46%, var(--chirpui-border));
}

.chirpui-file-tree--explorer .chirpui-nav-tree__link--leaf,
.chirpui-file-tree--explorer .chirpui-nav-tree__text--leaf {
    padding-inline-start: var(--chirpui-spacing-sm);
}

.chirpui-file-tree--explorer .chirpui-nav-tree__title::before {
    display: inline-flex;
    justify-content: center;
    inline-size: 1rem;
    margin-inline-end: var(--chirpui-spacing-xs);
    color: var(--chirpui-text-muted);
    font-family: var(--chirpui-ascii-font);
}

.chirpui-file-tree--explorer .chirpui-nav-tree__item--branch > .chirpui-nav-tree__node > .chirpui-nav-tree__label .chirpui-nav-tree__title::before {
    content: "▾";
}

.chirpui-file-tree--explorer .chirpui-nav-tree__item--branch > .chirpui-nav-tree__node:not([open]) > .chirpui-nav-tree__label .chirpui-nav-tree__title::before {
    content: "▸";
}

.chirpui-file-tree--explorer .chirpui-nav-tree__item:not(.chirpui-nav-tree__item--branch) .chirpui-nav-tree__title::before {
    content: "◇";
}

.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__heading[data-chirpui-pressure~="flex"],
.chirpui-workspace-shell__main[data-chirpui-pressure~="flex"] {
    min-inline-size: 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[data-chirpui-affinity~="end"] {
    margin-inline-start: auto;
}

.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__sidebar,
.chirpui-workspace-shell__inspector {
    min-inline-size: 0;
    min-block-size: 0;
    overflow-wrap: anywhere;
}

.chirpui-workspace-shell__sidebar-panel,
.chirpui-workspace-shell__inspector-panel {
    min-inline-size: 0;
    min-block-size: 0;
}

.chirpui-workspace-shell__sidebar[data-chirpui-pressure~="compress"],
.chirpui-workspace-shell__inspector[data-chirpui-pressure~="compress"] {
    max-inline-size: 100%;
}

.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);
    }
}
}

/* === partials/006_entity-header.css === */
@layer chirpui.component {
/* ==========================================================================
   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;
    min-width: 0;
}

.chirpui-entity-header__content {
    display: flex;
    align-items: flex-start;
    gap: var(--chirpui-space-control-gap);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.chirpui-entity-header__content > div {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-entity-header__content > div > * {
    margin-block: 0;
}

.chirpui-entity-header__icon {
    font-size: var(--chirpui-ui-lg);
    line-height: var(--chirpui-line-height-tight);
    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);
    line-height: var(--chirpui-line-height-tight);
    margin-block: 0;
    overflow-wrap: anywhere;
}

.chirpui-entity-header__meta {
    margin-block: 0;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.chirpui-entity-header__actions {
    display: flex;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    flex-shrink: 0;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: flex-end;
}

.chirpui-entity-header__actions:empty {
    display: none;
}

@media (max-width: 42rem) {
    .chirpui-entity-header {
        flex-direction: column;
        align-items: stretch;
    }

    .chirpui-entity-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
}
}

/* === partials/007_inline-edit-field.css === */
@layer chirpui.component {
/* ==========================================================================
   Inline edit field
   ========================================================================== */

.chirpui-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-inline-size: 0;
}

.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);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.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);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-inline-edit__icon {
    font-size: var(--chirpui-ui-sm);
    line-height: 1;
    opacity: 0.75;
}

.chirpui-inline-edit__trigger:hover .chirpui-inline-edit__icon {
    opacity: 1;
}
}

/* === partials/008_row-actions.css === */
@layer chirpui.component {
/* ==========================================================================
   Row actions (kebab menu)
   ========================================================================== */

.chirpui-row-actions__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: var(--chirpui-control-block-size-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-xs);
}
}

/* === partials/009_divider.css === */
@layer chirpui.component {
/* ==========================================================================
   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);
    line-height: var(--chirpui-line-height-tight);
    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); }

/* Pattern dividers */
.chirpui-divider--dotted:not(:has(.chirpui-divider__text)) {
    border: none;
    height: 1px;
    background-image: radial-gradient(circle, var(--chirpui-border) 1px, transparent 1px);
    background-size: 6px 1px;
}
.chirpui-divider--fade:not(:has(.chirpui-divider__text)) {
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
}

/* === partials/010_avatar.css === */
@layer chirpui.component {
/* ==========================================================================
   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: clip;
    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);
}

}

/* === partials/011_media-object.css === */
/* ==========================================================================
   Media Object
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-media-object) to (.chirpui-media-object .chirpui-media-object) {
        :scope {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: var(--chirpui-spacing);
            box-sizing: border-box;
            min-inline-size: 0;
            max-inline-size: 100%;
            overflow-wrap: anywhere;
        }

        :scope.chirpui-media-object--align-center {
            align-items: center;
        }

        .chirpui-media-object__media {
            flex: 0 1 auto;
            box-sizing: border-box;
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        .chirpui-media-object__media img,
        .chirpui-media-object__media video {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .chirpui-media-object__body {
            display: grid;
            flex: 999 1 12rem;
            gap: var(--chirpui-spacing-xs);
            min-inline-size: 0;
            max-inline-size: 100%;
            overflow-wrap: anywhere;
        }

        .chirpui-media-object__body > :where(:not(script, style, template)) {
            min-inline-size: 0;
            margin-block: 0;
        }

        .chirpui-media-object__actions {
            display: inline-flex;
            flex: 0 1 auto;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: var(--chirpui-spacing-xs);
            min-inline-size: 0;
            max-inline-size: 100%;
            margin-inline-start: auto;
            overflow-wrap: anywhere;
        }

        .chirpui-media-object__actions > :where(:not(script, style, template)) {
            margin: 0;
        }

        .chirpui-media-object__media:empty,
        .chirpui-media-object__body:empty,
        .chirpui-media-object__actions:empty {
            display: none;
        }

        @media (max-width: 36rem) {
            .chirpui-media-object__actions {
                justify-content: flex-start;
                margin-inline-start: 0;
            }
        }
    }
}

/* === partials/012_stat.css === */
@layer chirpui.component {
/* ==========================================================================
   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-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    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);
    line-height: var(--chirpui-line-height-tight);
    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);
    line-height: var(--chirpui-line-height-normal);
    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); }
}

/* === partials/013_action-bar.css === */
@layer chirpui.component {
/* ==========================================================================
   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;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    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);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: inherit;
}
}

/* === partials/014_action-containers.css === */
@layer chirpui.component {
/* ==========================================================================
   Action Containers
   ========================================================================== */

.chirpui-action-strip {
    --chirpui-action-control-block-size: var(--chirpui-control-block-size);
    --chirpui-action-control-padding-block: var(--chirpui-spacing-sm);
    --chirpui-action-control-padding-inline: var(--chirpui-spacing-sm);
    width: 100%;
}

.chirpui-surface:has(> .chirpui-command-bar) {
    border: 1px solid var(--chirpui-border);
    background: color-mix(in srgb, var(--chirpui-surface) 92%, var(--chirpui-bg-subtle));
    box-shadow: var(--chirpui-elevation-card-rest);
}

.chirpui-action-strip--sm,
.chirpui-action-strip:has(.chirpui-btn--sm, .chirpui-icon-btn--sm) {
    --chirpui-action-control-block-size: var(--chirpui-control-block-size-sm);
    --chirpui-action-control-padding-block: var(--chirpui-spacing-xs);
    --chirpui-action-control-padding-inline: var(--chirpui-spacing-sm);
}

.chirpui-action-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    width: 100%;
    font-family: var(--chirpui-ui-font-family);
}

.chirpui-action-strip__inner > * {
    flex: 0 0 auto;
}

.chirpui-action-strip__inner > :where(:not(script, style, template)),
.chirpui-action-strip__primary > :where(:not(script, style, template)),
.chirpui-action-strip__controls > :where(:not(script, style, template)),
.chirpui-action-strip__actions > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-action-strip__inner .chirpui-field {
    margin-block-end: 0;
}

.chirpui-action-strip__inner .chirpui-field__input:not(textarea):not([type="checkbox"]):not([type="radio"]):not([multiple]),
.chirpui-action-strip__inner .chirpui-search-bar__input {
    min-block-size: var(--chirpui-action-control-block-size);
    padding-block: var(--chirpui-action-control-padding-block);
    padding-inline: var(--chirpui-action-control-padding-inline);
}

.chirpui-action-strip__inner select.chirpui-field__input:not([multiple]) {
    padding-inline-end: calc(var(--chirpui-spacing-xl) + var(--chirpui-spacing-xs));
}

.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--md .chirpui-action-strip__inner {
    gap: var(--chirpui-space-control-gap);
}

.chirpui-action-strip--scroll .chirpui-action-strip__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block: var(--chirpui-spacing-2xs);
    scroll-padding-inline: var(--chirpui-spacing-sm);
}

.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: var(--chirpui-z-dropdown);
}

.chirpui-filter-bar__form {
    width: 100%;
}

.chirpui-filter-bar .chirpui-action-strip__inner,
.chirpui-filter-bar .chirpui-action-strip__primary,
.chirpui-filter-bar .chirpui-action-strip__controls,
.chirpui-filter-bar .chirpui-action-strip__actions {
    align-items: center;
}

.chirpui-filter-bar .chirpui-field {
    min-inline-size: 8rem;
    margin-block-end: 0;
}

.chirpui-filter-bar .chirpui-field__label {
    margin-block-end: var(--chirpui-spacing-2xs);
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}

.chirpui-filter-bar .chirpui-action-strip__actions {
    align-self: center;
}

.chirpui-filter-row {
    align-items: center;
    margin-bottom: var(--chirpui-spacing);
}

.chirpui-filter-row label {
    white-space: nowrap;
}

.chirpui-command-bar .chirpui-action-strip__actions {
    gap: var(--chirpui-spacing-xs);
}

.chirpui-command-bar .chirpui-action-strip__inner {
    align-items: center;
    gap: var(--chirpui-spacing-sm);
}

.chirpui-command-bar .chirpui-action-strip__inner:has(> [data-chirpui-role~="hints"]) {
    align-items: flex-start;
}

.chirpui-command-bar .chirpui-action-strip__primary,
.chirpui-command-bar .chirpui-action-strip__controls,
.chirpui-command-bar .chirpui-action-strip__actions {
    align-items: center;
}

.chirpui-command-bar .chirpui-action-strip__primary {
    flex: 0 0 auto;
}

.chirpui-command-bar .chirpui-action-strip__primary > * {
    width: auto;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > :where([data-chirpui-role~="search"], form, [role="search"]) {
    display: flex;
    flex: 1 1 28rem;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    min-inline-size: min(100%, 18rem);
    max-inline-size: 100%;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > :where([data-chirpui-role~="search"], form, [role="search"])
    > :where(input:not([type="hidden"]), .chirpui-field__input, .chirpui-search-bar) {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > :where([data-chirpui-role~="search"], form, [role="search"])
    > label:not(.chirpui-visually-hidden) {
    flex: 1 1 100%;
    margin-block: 0;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > :where(.chirpui-chip-group, .chirpui-cluster),
:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-role~="hints"],
:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-role~="filters"],
:where(.chirpui-command-bar, .chirpui-filter-bar) .chirpui-action-strip__inner > div[aria-label] {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-role~="hints"][data-chirpui-affinity~="end"],
:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-role~="actions"][data-chirpui-affinity~="end"] {
    justify-content: flex-end;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-pressure~="flex"] {
    min-inline-size: 0;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-pressure~="compress"] {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-pressure~="rigid"] {
    flex: 0 0 auto;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-affinity~="end"] {
    margin-inline-start: auto;
}

:where(.chirpui-command-bar, .chirpui-filter-bar)
    .chirpui-action-strip__inner
    > [data-chirpui-affinity~="fill"] {
    flex-grow: 1;
}

.chirpui-command-bar .chirpui-action-strip__controls {
    flex: 1 1 24rem;
    min-inline-size: min(100%, 16rem);
}

.chirpui-command-bar .chirpui-action-strip__actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.chirpui-command-bar .chirpui-primary-nav {
    flex: 0 1 auto;
}

.chirpui-command-bar .chirpui-command-palette__trigger {
    flex: 1 1 18rem;
    max-inline-size: 24rem;
}

.chirpui-search-header {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chirpui-search-header > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-search-header > .chirpui-page-header {
    margin-inline: 0;
}

.chirpui-search-header__form {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.chirpui-search-header__strip {
    width: 100%;
    min-width: 0;
}

.chirpui-search-header__strip .chirpui-action-strip__inner {
    align-items: stretch;
}

.chirpui-search-header__strip .chirpui-action-strip__primary {
    flex: 999 1 24rem;
    min-inline-size: min(100%, 18rem);
}

.chirpui-search-header__strip .chirpui-action-strip__controls {
    flex: 1 1 14rem;
}

.chirpui-search-header__strip .chirpui-action-strip__controls:empty {
    display: none;
}

.chirpui-search-header__strip .chirpui-search-bar,
.chirpui-search-header__strip .chirpui-search-bar__inner {
    width: 100%;
    min-width: 0;
}

@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;
    }

    .chirpui-search-header__strip .chirpui-action-strip__primary,
    .chirpui-search-header__strip .chirpui-action-strip__controls {
        flex-basis: 100%;
        min-inline-size: 0;
    }

    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > :where([data-chirpui-role~="search"], form, [role="search"]),
    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > :where(.chirpui-chip-group, .chirpui-cluster),
    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > [data-chirpui-role~="hints"],
    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > [data-chirpui-role~="filters"],
    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > div[aria-label] {
        flex-basis: 100%;
    }

    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > [data-chirpui-affinity~="end"] {
        margin-inline-start: 0;
    }
}

@media (max-width: 36rem) {
    :where(.chirpui-command-bar, .chirpui-filter-bar)
        .chirpui-action-strip__inner
        > :where([data-chirpui-role~="search"], form, [role="search"])
        > :where(.chirpui-btn, button) {
        flex: 1 1 auto;
    }
}
}

/* === partials/015_chat-layout.css === */
@layer chirpui.component {
/* ==========================================================================
   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: clip;
    /* 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: 47.9375rem) {
    .chirpui-chat-layout {
        flex-direction: column;
    }

    .chirpui-chat-layout__activity {
        width: 100%;
    }
}

}

/* === partials/016_message-bubble-and-thread.css === */
@layer chirpui.component {
/* ==========================================================================
   Message Bubble & Thread
   ========================================================================== */

.chirpui-message-thread {
    list-style: none;
    margin: 0;
    padding: var(--chirpui-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-lg);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--chirpui-bg-subtle) 78%, transparent),
            color-mix(in srgb, var(--chirpui-surface) 88%, transparent)
        );
    min-height: 16rem;
}

.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);
    border: 1px solid color-mix(in srgb, var(--chirpui-border) 68%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, black 12%, transparent);
    min-width: 0;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-message-bubble > * {
    min-width: 0;
}

.chirpui-message-bubble p {
    margin-block: 0 var(--chirpui-spacing-xs);
    overflow-wrap: anywhere;
}

.chirpui-message-bubble--right {
    align-self: flex-end;
    flex-direction: row-reverse;
    background: var(--chirpui-accent);
    border-color: color-mix(in srgb, var(--chirpui-accent) 74%, var(--chirpui-bg));
    color: var(--chirpui-on-accent);
}

.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;
    border-color: color-mix(in srgb, var(--chirpui-message-bubble-user-bg) 74%, var(--chirpui-bg));
}

.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);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-message-bubble--sent,
.chirpui-message-bubble--read,
.chirpui-message-bubble--pending {
    opacity: 1;
}

.chirpui-message-bubble--pending {
    opacity: 0.85;
}
}

/* === partials/017_typing-indicator.css === */
@layer chirpui.component {
/* ==========================================================================
   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; }
}

}

/* === partials/018_chat-input.css === */
@layer chirpui.component {
/* ==========================================================================
   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);
}

}

/* === partials/019_conversation-list-and-item.css === */
@layer chirpui.component {
/* ==========================================================================
   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);
    min-inline-size: 0;
}

.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);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.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);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    white-space: nowrap;
}

.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);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text-muted);
    white-space: nowrap;
    overflow: clip;
    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: var(--chirpui-spacing-2xs) 0.35rem;
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-ui-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    text-align: center;
    background: var(--chirpui-accent);
    color: var(--chirpui-surface);
    border-radius: 9999px;
}
}

/* === partials/020_reaction-pill-and-message-reactions.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-spacing-2xs) var(--chirpui-spacing-sm);
    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);
}

}

/* === partials/021_post-card.css === */
@layer chirpui.component {
/* ==========================================================================
   Post Card (Social)
   ========================================================================== */

.chirpui-post-card {
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    overflow: clip;
}

.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: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    overflow-wrap: anywhere;
}

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);
    line-height: var(--chirpui-line-height-tight);
    margin-left: var(--chirpui-spacing-xs);
    overflow-wrap: anywhere;
}

.chirpui-post-card__time {
    display: block;
    font-size: var(--chirpui-font-xs);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}

.chirpui-post-card__body {
    padding: 0 var(--chirpui-spacing) var(--chirpui-spacing);
}

.chirpui-post-card__body p {
    margin: 0;
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.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);
}
}

/* === partials/022_comment-and-comment-thread.css === */
@layer chirpui.component {
/* ==========================================================================
   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;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-sm);
    min-inline-size: 0;
}

.chirpui-comment__author {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

a.chirpui-comment__author:hover {
    color: var(--chirpui-accent);
}

.chirpui-comment__time {
    font-size: var(--chirpui-font-xs);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    white-space: nowrap;
}

.chirpui-comment__body {
    padding-inline-start: calc(var(--chirpui-avatar-size-sm) + var(--chirpui-spacing));
}

.chirpui-comment__body p {
    margin: 0;
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.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);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    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;
}
}

/* === partials/023_profile-header.css === */
@layer chirpui.component {
/* ==========================================================================
   Profile Header
   ========================================================================== */

.chirpui-profile-header {
    position: relative;
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    overflow: clip;
}

.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;
    overflow-wrap: anywhere;
}

.chirpui-profile-header__name {
    margin: 0 0 var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-xl);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

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);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    max-inline-size: var(--chirpui-measure-sm);
    overflow-wrap: anywhere;
}

.chirpui-profile-header__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-lg);
    margin-bottom: var(--chirpui-spacing-sm);
    font-size: var(--chirpui-font-sm);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-profile-header__action {
    flex-shrink: 0;
}
}

/* === partials/024_avatar-stack.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-semibold);
    background: var(--chirpui-bg-subtle);
    border: 2px solid var(--chirpui-surface);
    border-radius: 50%;
    color: var(--chirpui-text-muted);
}

}

/* === partials/025_trending-tag-and-mention.css === */
@layer chirpui.component {
/* ==========================================================================
   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);
}

}

/* === partials/026_breadcrumbs.css === */
@layer chirpui.component {
/* ==========================================================================
   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);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-inline-size: 0;
}

.chirpui-breadcrumbs__item:not(:last-child)::after {
    content: "/";
    color: var(--chirpui-text-muted);
    font-weight: var(--chirpui-ui-font-weight-normal);
}

.chirpui-breadcrumbs__link {
    color: var(--chirpui-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
    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);
    font-weight: var(--chirpui-ui-font-weight-medium);
    overflow-wrap: anywhere;
}

.chirpui-breadcrumbs__overflow {
    position: relative;
}

.chirpui-breadcrumbs__overflow-menu {
    position: relative;
}

.chirpui-breadcrumbs__overflow-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: 0 var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius-sm);
    color: var(--chirpui-text-muted);
    cursor: pointer;
    list-style: none;
}

.chirpui-breadcrumbs__overflow-trigger::-webkit-details-marker {
    display: none;
}

.chirpui-breadcrumbs__overflow-trigger:hover {
    background: var(--chirpui-surface-alt);
    color: var(--chirpui-text);
}

.chirpui-breadcrumbs__overflow-trigger:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-breadcrumbs__overflow-list {
    position: absolute;
    z-index: var(--chirpui-z-dropdown);
    inset-block-start: calc(100% + var(--chirpui-spacing-xs));
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-2xs);
    min-inline-size: 12rem;
    max-inline-size: min(20rem, calc(100vw - 2 * var(--chirpui-spacing)));
    max-block-size: min(24rem, calc(100dvh - 2 * var(--chirpui-spacing)));
    overflow: auto;
    margin: 0;
    padding: var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-md);
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-shadow-lg);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    list-style: none;
}

.chirpui-breadcrumbs__overflow-item {
    display: flex;
    min-inline-size: 0;
}

.chirpui-breadcrumbs__overflow-item .chirpui-breadcrumbs__link,
.chirpui-breadcrumbs__overflow-item .chirpui-breadcrumbs__current {
    display: block;
    inline-size: 100%;
    overflow: hidden;
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chirpui-breadcrumbs__overflow-item .chirpui-breadcrumbs__link:hover {
    background: var(--chirpui-surface-alt);
}
}

/* === partials/027_navbar.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-semibold);
    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);
}

}

/* === partials/028_logo.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    color: inherit;
    overflow-wrap: anywhere;
}

.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);
    line-height: var(--chirpui-line-height-tight);
    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: var(--chirpui-ui-font-weight-semibold);
    background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
}

.chirpui-navbar--sticky {
    position: sticky;
    top: 0;
    z-index: var(--chirpui-z-sticky);
    background: var(--chirpui-surface);
}

.chirpui-navbar--sticky ~ * :where([id]) {
    scroll-margin-top: calc(var(--chirpui-navbar-height, 3.5rem) + var(--chirpui-spacing-sm));
}

.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: var(--chirpui-font-xs);
    line-height: 1;
    color: var(--chirpui-text-muted);
}

.chirpui-navbar-dropdown[open] > .chirpui-navbar-dropdown__trigger::after {
    rotate: 90deg;
}
}

/* === partials/029_sidebar.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chirpui-text-muted);
    margin-bottom: var(--chirpui-spacing-xs);
    overflow-wrap: anywhere;
}

.chirpui-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-sm);
    color: var(--chirpui-text-muted);
    text-decoration: none;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    border-radius: 0 var(--chirpui-radius-sm) var(--chirpui-radius-sm) 0;
    margin-inline-start: var(--chirpui-spacing-sm);
    min-inline-size: 0;
    overflow-wrap: anywhere;
    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;
    flex: 0 0 auto;
    font-family: var(--chirpui-ascii-font);
}

.chirpui-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    margin-inline-start: auto;
    padding-inline: var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: 999px;
    background: var(--chirpui-muted-bg);
    color: var(--chirpui-text);
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-sidebar__badge--reserved {
    min-inline-size: 1.75rem;
    opacity: 0.58;
}

.chirpui-sidebar__badge--loading::before {
    content: "...";
}

.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: var(--chirpui-ui-font-weight-medium);
    background: var(--chirpui-sidebar-active-bg);
}
}

/* === partials/030_stepper.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    flex-shrink: 0;
    border: 2px solid var(--chirpui-border);
    box-shadow: 0 0 0 0.25rem var(--chirpui-bg);
    transition: all var(--chirpui-transition);
}

.chirpui-stepper__item--active .chirpui-stepper__indicator {
    background: var(--chirpui-accent);
    color: var(--chirpui-on-accent);
    border-color: var(--chirpui-accent);
    box-shadow:
        0 0 0 0.25rem var(--chirpui-bg),
        0 0 0 calc(0.25rem + 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%, var(--chirpui-bg-subtle));
    color: var(--chirpui-accent);
    border-color: var(--chirpui-accent);
}

.chirpui-stepper__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: inherit;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-stepper__label {
    display: block;
    margin-top: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    white-space: nowrap;
    overflow: clip;
    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: var(--chirpui-ui-font-weight-semibold);
}

.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;
}
}

/* === partials/031_wizard-form.css === */
@layer chirpui.component {
/* ==========================================================================
   Wizard Form
   ========================================================================== */

.chirpui-wizard-form__body {
    margin-top: var(--chirpui-spacing-lg);
    min-inline-size: 0;
    font-size: var(--chirpui-font-base);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-wizard-form__body > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-wizard-form__body > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
    margin-block-start: var(--chirpui-spacing);
}
}

/* === partials/032_description-list.css === */
@layer chirpui.component {
/* ==========================================================================
   Description List
   ========================================================================== */

.chirpui-dl__header:empty {
    display: none;
}

.chirpui-dl {
    margin: 0;
    min-width: 0;
}

.chirpui-dl__row {
    margin-bottom: var(--chirpui-spacing-sm);
    min-width: 0;
}

.chirpui-dl__row:last-child {
    margin-bottom: 0;
}

.chirpui-dl__term {
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    margin: 0 0 var(--chirpui-spacing-xs) 0;
    min-width: 0;
}

.chirpui-dl__detail {
    margin: 0;
    font-size: var(--chirpui-font-base);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.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(0, var(--chirpui-dl-term-width, 8rem)) minmax(0, 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-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.chirpui-dl__detail--number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@container chirpui-layout (width < 28rem) {
    .chirpui-dl--horizontal .chirpui-dl__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--chirpui-spacing-xs);
        align-items: start;
    }

    .chirpui-dl__detail--number {
        text-align: left;
    }
}

/* 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;
}
}

/* === partials/033_settings-row.css === */
@layer chirpui.component {
/* ==========================================================================
   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;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-settings-row {
    display: contents;
}

.chirpui-settings-row__label {
    flex-shrink: 0;
    font-weight: var(--chirpui-ui-font-weight-medium);
    color: var(--chirpui-text);
}

.chirpui-settings-row__status {
    min-width: 0;
    color: var(--chirpui-text-muted);
    font-variant-numeric: tabular-nums;
}

.chirpui-settings-row__detail {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    color: var(--chirpui-text-muted);
}

.chirpui-settings-row__detail code {
    font-family: var(--chirpui-ascii-font, ui-monospace, monospace);
}
}

/* === partials/034_config-row.css === */
@layer chirpui.component {
/* ==========================================================================
   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;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.chirpui-config-row__control {
    min-width: 0;
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-config-row__form {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-inline-size: 0;
}

.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);
    min-inline-size: 0;
}

.chirpui-config-row__editable.chirpui-inline-edit--display {
    margin-inline-start: calc(-1 * var(--chirpui-spacing-sm));
}
}

/* === partials/035_timeline.css === */
@layer chirpui.component {
/* ==========================================================================
   Timeline
   ========================================================================== */

.chirpui-timeline {
    --chirpui-timeline-marker-size: 0.625rem;
    --chirpui-timeline-marker-top: 0.45rem;
    --chirpui-timeline-rail-x: calc(var(--chirpui-timeline-marker-size) / 2);
    --chirpui-timeline-content-gap: var(--chirpui-spacing);
    position: relative;
    padding-inline-start: calc(var(--chirpui-timeline-marker-size) + var(--chirpui-timeline-content-gap));
}

.chirpui-timeline::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--chirpui-timeline-rail-x) - 1px);
    width: 2px;
    background: var(--chirpui-border);
    border-radius: var(--chirpui-radius-full, 999px);
}

.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-timeline-marker-size) + var(--chirpui-timeline-content-gap)));
    top: var(--chirpui-timeline-marker-top);
    width: var(--chirpui-timeline-marker-size);
    height: var(--chirpui-timeline-marker-size);
    border-radius: 50%;
    background: var(--chirpui-accent);
    box-shadow: 0 0 0 3px var(--chirpui-bg);
}

.chirpui-timeline__content {
    position: relative;
    z-index: 1;
}

.chirpui-timeline__header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-sm);
    margin-bottom: var(--chirpui-spacing-xs);
    min-inline-size: 0;
}

.chirpui-timeline__header-actions {
    margin-inline-start: auto;
}

.chirpui-timeline__header-actions:empty,
.chirpui-timeline__body:empty {
    display: none;
}

.chirpui-timeline__title {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    overflow-wrap: anywhere;
}

.chirpui-timeline__hint {
    min-width: 0;
}

.chirpui-timeline__title-link {
    text-decoration: none;
}

.chirpui-timeline__title-link:hover {
    color: var(--chirpui-accent);
    text-decoration: underline;
}

.chirpui-timeline__title-link:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-timeline__date {
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    font-variant-numeric: tabular-nums;
    color: var(--chirpui-text-muted);
}

.chirpui-timeline__body {
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text-muted);
    overflow-wrap: anywhere;
}

/* Timeline: icon/avatar variants */
.chirpui-timeline__icon {
    position: absolute;
    left: calc(-1 * (var(--chirpui-timeline-marker-size) + var(--chirpui-timeline-content-gap)) - 0.3125rem);
    top: calc(var(--chirpui-timeline-marker-top) - 0.375rem);
    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-timeline-marker-size) + var(--chirpui-timeline-content-gap)) - 0.3125rem);
    top: calc(var(--chirpui-timeline-marker-top) - 0.375rem);
    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: var(--chirpui-on-accent); }
.chirpui-timeline__item--warning .chirpui-timeline__dot,
.chirpui-timeline__item--warning .chirpui-timeline__icon { background: var(--chirpui-warning); border-color: var(--chirpui-warning); color: var(--chirpui-on-accent); }
.chirpui-timeline__item--error .chirpui-timeline__dot,
.chirpui-timeline__item--error .chirpui-timeline__icon { background: var(--chirpui-error); border-color: var(--chirpui-error); color: var(--chirpui-on-accent); }
.chirpui-timeline__item--info .chirpui-timeline__dot,
.chirpui-timeline__item--info .chirpui-timeline__icon { background: var(--chirpui-info); border-color: var(--chirpui-info); color: var(--chirpui-on-accent); }

/* Timeline: hoverable rows */
/* Timeline: surface-aware — adapt line/dot contrast on non-default surfaces */
.chirpui-timeline--on-muted {
    --chirpui-timeline-rail-color: var(--chirpui-fg-muted);
}
.chirpui-timeline--on-muted::before {
    background: var(--chirpui-timeline-rail-color);
}
.chirpui-timeline--on-muted .chirpui-timeline__dot {
    background: var(--chirpui-fg-muted);
}
.chirpui-timeline--on-accent {
    --chirpui-timeline-rail-color: var(--chirpui-accent);
}
.chirpui-timeline--on-accent::before {
    background: var(--chirpui-timeline-rail-color);
}
.chirpui-timeline--on-accent .chirpui-timeline__dot {
    background: var(--chirpui-fg);
}

.chirpui-timeline--compact {
    --chirpui-timeline-marker-size: 0.5rem;
    --chirpui-timeline-content-gap: var(--chirpui-spacing-sm);
}

.chirpui-timeline--compact .chirpui-timeline__item {
    padding-bottom: var(--chirpui-spacing);
}

.chirpui-timeline--spacious {
    --chirpui-timeline-marker-size: 0.75rem;
    --chirpui-timeline-content-gap: var(--chirpui-spacing-lg);
}

.chirpui-timeline--spacious .chirpui-timeline__item {
    padding-bottom: var(--chirpui-spacing-xl);
}

.chirpui-timeline--cards .chirpui-timeline__content {
    padding: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-shadow-sm);
}

.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;
}
}

/* === partials/036_list.css === */
/* ==========================================================================
   List
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-list) to (.chirpui-list .chirpui-list) {
        :scope {
            display: flex;
            flex-direction: column;
            gap: var(--chirpui-spacing-xs);
            box-sizing: border-box;
            min-inline-size: 0;
            max-inline-size: 100%;
            padding: 0;
            margin: 0;
            overflow-wrap: anywhere;
            list-style: none;
        }

        .chirpui-list__item {
            box-sizing: border-box;
            min-inline-size: 0;
            max-inline-size: 100%;
            overflow-wrap: anywhere;
            transition:
                opacity var(--chirpui-transition-slow),
                transform var(--chirpui-transition-slow);
            @starting-style {
                opacity: 0;
                transform: translateY(4px);
            }
        }

        .chirpui-list__item > :where(:not(script, style, template)) {
            min-inline-size: 0;
            margin-block: 0;
        }

        :scope.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);
        }

        :scope.chirpui-list--bordered .chirpui-list__item + .chirpui-list__item {
            margin-top: 0;
        }

        .chirpui-list__link {
            display: inline-flex;
            min-inline-size: 0;
            max-inline-size: 100%;
            overflow-wrap: anywhere;
            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;
        }
    }
}

/* === partials/037_utilities.css === */
@layer chirpui.utility {
/* ==========================================================================
   Utilities
   ========================================================================== */

.chirpui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: clip;
    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-font-medium { font-weight: 500; }
.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);
    text-wrap: pretty;
}

: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;
    overscroll-behavior: contain;
    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);
}

/* --- Install snippet (command + copy) --- */

.chirpui-install-snippet {
    position: relative;
}

.chirpui-install-snippet__label {
    margin: 0 0 var(--chirpui-spacing-xs);
}

.chirpui-install-snippet__row {
    position: relative;
    display: flex;
    align-items: center;
}

.chirpui-install-snippet__command {
    flex: 1;
    margin: 0;
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    padding-right: 4rem;
    background: var(--chirpui-code-bg);
    border-radius: var(--chirpui-radius-sm);
    overflow-x: auto;
    white-space: nowrap;
}

.chirpui-install-snippet .chirpui-code-block__copy {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    opacity: 1;
}

:where(.chirpui-prose) pre {
    overflow-x: auto;
    overscroll-behavior: contain;
    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);
}
}

/* === partials/038_streaming-and-ai-components.css === */
@layer chirpui.component {
/* ==========================================================================
   Streaming and AI components
   ========================================================================== */

.chirpui-streaming-block {
    min-height: 2rem;
    position: relative;
    font-family: var(--chirpui-prose-font-family);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-relaxed);
    white-space: normal;
    overflow-wrap: anywhere;
}

.chirpui-streaming-block__cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--chirpui-accent);
    margin-inline-start: 0.15rem;
    animation: chirpui-cursor-blink var(--chirpui-anim-breath) step-end infinite;
    vertical-align: -0.12em;
}

.chirpui-streaming-block--active .chirpui-streaming-block__cursor {
    animation: chirpui-cursor-blink var(--chirpui-anim-breath) step-end infinite;
}

@keyframes chirpui-cursor-blink {
    50% { opacity: 0; }
}

.chirpui-streaming--error {
    padding: var(--chirpui-space-xs, 0.25rem) var(--chirpui-space-sm, 0.5rem);
    opacity: 0.6;
}

@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-copy-btn__label,
.chirpui-copy-btn__done {
    pointer-events: none;
}

.chirpui-copy-btn--user {
    opacity: 0.7;
}

.chirpui-copy-btn--assistant {
    opacity: 1;
}

.chirpui-copy-btn--system {
    opacity: 0.5;
}

.chirpui-model-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--chirpui-spacing-sm);
    min-inline-size: 0;
}

.chirpui-model-card__title {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.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);
    line-height: var(--chirpui-line-height-tight);
    font-variant-numeric: tabular-nums;
}

.chirpui-model-card__body {
    min-height: 3rem;
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-model-card__footer {
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    font-variant-numeric: tabular-nums;
    color: var(--chirpui-text-muted);
}

/* streaming_bubble state variants */
.chirpui-streaming-bubble--thinking {
    opacity: 0.8;
}

.chirpui-message-bubble .chirpui-streaming-block {
    min-height: 0;
    padding-block: var(--chirpui-spacing-2xs);
}

.chirpui-streaming-bubble__thinking {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.chirpui-streaming-bubble__thinking::before,
.chirpui-streaming-bubble__thinking::after {
    content: "·";
    font-weight: bold;
    animation: chirpui-thinking-pulse var(--chirpui-motion-slow) ease-in-out infinite;
}

.chirpui-streaming-bubble__thinking::after {
    animation-delay: calc(var(--chirpui-motion-fast));
}

@keyframes chirpui-thinking-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.chirpui-streaming-bubble--error {
    border-color: var(--chirpui-error);
    background: color-mix(in srgb, var(--chirpui-error) 5%, transparent);
}

/* sse_status */
.chirpui-sse-status {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}

.chirpui-sse-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chirpui-sse-status--connected .chirpui-sse-status__dot {
    background: var(--chirpui-success);
}

.chirpui-sse-status--disconnected .chirpui-sse-status__dot {
    background: var(--chirpui-text-muted);
}

.chirpui-sse-status--error .chirpui-sse-status__dot {
    background: var(--chirpui-danger);
}

/* sse_retry — inherits .chirpui-btn .chirpui-btn--sm styling */
.chirpui-sse-retry {
    align-self: center;
}

.chirpui-sse-retry--loading {
    opacity: 0.7;
    pointer-events: none;
}

.chirpui-sse-retry__loading {
    font-style: italic;
}

@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;
    }
}
}

/* === partials/039_surface.css === */
/* ==========================================================================
   Surface — @scope + @layer envelope.

   Surface is broadly used and has many variants with descendant rules
   (links, ::before/::after corner accents). Upper scope boundary
   `.chirpui-surface .chirpui-surface` stops outer-surface variant rules
   (gradient backgrounds, glass blur, corner accents) at the first nested
   surface — fixes bleed where an outer surface's `--cornered` ::before
   would also paint on inner surfaces, or `a` rules from the outer would
   override inner-link styles.

   `.chirpui-blade` rules (and `.chirpui-blade--parallax .chirpui-surface`)
   stay outside the envelope — blade is a sibling layout concept, not a
   surface variant.
   See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-surface) to (.chirpui-surface .chirpui-surface) {
        :scope {
            border-radius: var(--chirpui-radius);
            padding: var(--chirpui-space-surface-padding);
            min-width: 0;
            overflow-wrap: break-word;
        }

        a {
            overflow-wrap: anywhere;
        }

        :scope:not(.chirpui-surface--no-padding) > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        :scope:not(.chirpui-surface--no-padding) > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-space-card-gap);
        }

        :scope.chirpui-surface--default {
            background: var(--chirpui-surface);
        }

        /* Appearance axis */
        :scope.chirpui-surface--filled {
            background: var(--chirpui-surface);
        }

        :scope.chirpui-surface--tonal {
            background: var(--chirpui-bg-subtle);
        }

        :scope.chirpui-surface--outlined {
            background: transparent;
            border: 1px solid var(--chirpui-border);
        }

        :scope.chirpui-surface--ghost {
            background: transparent;
            border-color: transparent;
        }

        /* Tone axis */
        :scope.chirpui-surface--surface {
            background: var(--chirpui-surface);
        }

        :scope.chirpui-surface--neutral {
            background: var(--chirpui-bg-subtle);
        }

        :scope.chirpui-surface--primary {
            --_surface-tone: var(--chirpui-accent);
            background: color-mix(in srgb, var(--_surface-tone) 9%, var(--chirpui-surface));
        }

        :scope.chirpui-surface--secondary {
            --_surface-tone: var(--chirpui-primary);
            background: color-mix(in srgb, var(--_surface-tone) 7%, var(--chirpui-surface));
        }

        :scope.chirpui-surface--success {
            --_surface-tone: var(--chirpui-success);
            background: color-mix(in srgb, var(--_surface-tone) 9%, var(--chirpui-surface));
        }

        :scope.chirpui-surface--warning {
            --_surface-tone: var(--chirpui-warning);
            background: color-mix(in srgb, var(--_surface-tone) 9%, var(--chirpui-surface));
        }

        :scope.chirpui-surface--danger {
            --_surface-tone: var(--chirpui-danger);
            background: color-mix(in srgb, var(--_surface-tone) 9%, var(--chirpui-surface));
        }

        :scope.chirpui-surface--info {
            --_surface-tone: var(--chirpui-info);
            background: color-mix(in srgb, var(--_surface-tone) 9%, var(--chirpui-surface));
        }

        :scope.chirpui-surface--outlined.chirpui-surface--primary,
        :scope.chirpui-surface--outlined.chirpui-surface--secondary,
        :scope.chirpui-surface--outlined.chirpui-surface--success,
        :scope.chirpui-surface--outlined.chirpui-surface--warning,
        :scope.chirpui-surface--outlined.chirpui-surface--danger,
        :scope.chirpui-surface--outlined.chirpui-surface--info {
            background: transparent;
            border-color: var(--_surface-tone);
        }

        :scope.chirpui-surface--muted {
            background: var(--chirpui-bg-subtle);
        }

        :scope.chirpui-surface--elevated {
            background: var(--chirpui-surface-elevated);
            box-shadow: var(--chirpui-elevation-2);
        }

        :scope.chirpui-surface--accent {
            background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
        }

        :scope.chirpui-surface--gradient-subtle {
            background: var(--chirpui-gradient-subtle);
        }

        :scope.chirpui-surface--gradient-accent {
            background: var(--chirpui-gradient-accent);
        }

        :scope.chirpui-surface--gradient-mesh {
            background: var(--chirpui-gradient-mesh);
        }

        /* Gradient border — dual background, background-clip; fallback solid border */
        :scope.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) {
            :scope.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 */
        :scope.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)) {
            :scope.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 */
        :scope.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)) {
            :scope.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 */
        :scope.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)) {
            :scope.chirpui-surface--smoke {
                background: var(--chirpui-smoke-bg);
                border-color: var(--chirpui-smoke-border);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }
        }

        /* Deep — multi-layer dimensional shadow */
        :scope.chirpui-surface--deep {
            box-shadow: var(--chirpui-elevation-deep);
        }
        :scope.chirpui-surface--deep.chirpui-surface--inset-glow {
            box-shadow: var(--chirpui-elevation-deep), var(--chirpui-shadow-inset-glow);
        }

        /* Cornered — architectural bracket accents at opposing corners */
        :scope.chirpui-surface--cornered {
            position: relative;
        }
        :scope.chirpui-surface--cornered::before,
        :scope.chirpui-surface--cornered::after {
            content: "";
            position: absolute;
            width: var(--chirpui-corner-accent-size);
            height: var(--chirpui-corner-accent-size);
            pointer-events: none;
        }
        :scope.chirpui-surface--cornered::before {
            top: 0;
            left: 0;
            border-top: var(--chirpui-corner-accent-width) solid var(--chirpui-corner-accent-color);
            border-left: var(--chirpui-corner-accent-width) solid var(--chirpui-corner-accent-color);
        }
        :scope.chirpui-surface--cornered::after {
            bottom: 0;
            right: 0;
            border-bottom: var(--chirpui-corner-accent-width) solid var(--chirpui-corner-accent-color);
            border-right: var(--chirpui-corner-accent-width) solid var(--chirpui-corner-accent-color);
        }
        :scope.chirpui-surface--cornered.chirpui-surface--accent {
            --chirpui-corner-accent-color: var(--chirpui-accent);
        }

        :scope.chirpui-surface--full {
            width: 100%;
        }

        :scope.chirpui-surface--no-padding {
            padding: 0;
        }
    }

    /* Blade — full-width edge-to-edge section; breaks out of container.
       Outside the surface envelope: blade is a sibling layout concept that
       may CONTAIN a surface, not be one. */
    .chirpui-blade {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
    }

    .chirpui-app-shell .chirpui-app-shell__main .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; }
    }
}

/* === partials/040_aura.css === */
@layer chirpui.component {
/* ==========================================================================
   Aura — chromatic halo behind wrapped content (glass cards, panels, etc.)
   Pair with inner chirpui-surface--glass; keeps pseudos free on the surface
   (e.g. chirpui-surface--cornered). Content stacks in .chirpui-aura__content.
   ========================================================================== */

.chirpui-aura {
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    overflow: visible;
    --chirpui-aura-blur: 22px;
    --chirpui-aura-inset-x: -12%;
    --chirpui-aura-inset-top: -14%;
    --chirpui-aura-inset-bottom: -32%;
    --chirpui-aura-a: color-mix(in oklab, var(--chirpui-accent) 52%, transparent);
    --chirpui-aura-b: color-mix(in oklab, var(--chirpui-primary) 38%, transparent);
    --chirpui-aura-c: color-mix(in oklab, var(--chirpui-accent-secondary) 28%, transparent);
    --chirpui-aura-mess: color-mix(in oklab, var(--chirpui-accent) 9%, transparent);
}

.chirpui-aura--sm {
    --chirpui-aura-blur: 14px;
    --chirpui-aura-inset-x: -8%;
    --chirpui-aura-inset-top: -10%;
    --chirpui-aura-inset-bottom: -20%;
}

.chirpui-aura--md {
    --chirpui-aura-blur: 22px;
    --chirpui-aura-inset-x: -12%;
    --chirpui-aura-inset-top: -14%;
    --chirpui-aura-inset-bottom: -32%;
}

.chirpui-aura--lg {
    --chirpui-aura-blur: 32px;
    --chirpui-aura-inset-x: -16%;
    --chirpui-aura-inset-top: -18%;
    --chirpui-aura-inset-bottom: -40%;
}

.chirpui-aura--warm {
    --chirpui-aura-a: color-mix(in oklab, var(--chirpui-primary) 45%, transparent);
    --chirpui-aura-b: color-mix(in oklab, var(--chirpui-accent-secondary) 42%, transparent);
    --chirpui-aura-c: color-mix(in oklab, var(--chirpui-accent) 32%, transparent);
    --chirpui-aura-mess: color-mix(in oklab, var(--chirpui-primary) 8%, transparent);
}

.chirpui-aura--cool {
    --chirpui-aura-a: color-mix(in oklab, var(--chirpui-accent) 48%, transparent);
    --chirpui-aura-b: color-mix(in oklab, var(--chirpui-primary) 42%, transparent);
    --chirpui-aura-c: color-mix(in oklab, var(--chirpui-accent-secondary) 24%, transparent);
    --chirpui-aura-mess: color-mix(in oklab, var(--chirpui-accent) 8%, transparent);
}

.chirpui-aura--muted {
    --chirpui-aura-a: color-mix(in oklab, var(--chirpui-muted) 38%, transparent);
    --chirpui-aura-b: color-mix(in oklab, var(--chirpui-accent) 28%, transparent);
    --chirpui-aura-c: color-mix(in oklab, var(--chirpui-border) 22%, transparent);
    --chirpui-aura-mess: color-mix(in oklab, var(--chirpui-text) 5%, transparent);
}

.chirpui-aura--primary {
    --chirpui-aura-a: color-mix(in oklab, var(--chirpui-primary) 50%, transparent);
    --chirpui-aura-b: color-mix(in oklab, var(--chirpui-accent) 36%, transparent);
    --chirpui-aura-c: color-mix(in oklab, var(--chirpui-accent-secondary) 26%, transparent);
    --chirpui-aura-mess: color-mix(in oklab, var(--chirpui-primary) 8%, transparent);
}

.chirpui-aura--accent {
    --chirpui-aura-a: color-mix(in oklab, var(--chirpui-accent) 52%, transparent);
    --chirpui-aura-b: color-mix(in oklab, var(--chirpui-primary) 38%, transparent);
    --chirpui-aura-c: color-mix(in oklab, var(--chirpui-accent-secondary) 28%, transparent);
    --chirpui-aura-mess: color-mix(in oklab, var(--chirpui-accent) 9%, transparent);
}

.chirpui-aura::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: var(--chirpui-aura-inset-top) var(--chirpui-aura-inset-x) var(--chirpui-aura-inset-bottom)
        var(--chirpui-aura-inset-x);
    border-radius: calc(var(--chirpui-radius-xl) + 0.75rem);
    pointer-events: none;
    opacity: 0.9;
    filter: blur(var(--chirpui-aura-blur)) saturate(1.18);
    background:
        radial-gradient(
            ellipse 100% 80% at 30% 12%,
            var(--chirpui-aura-a) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 85% 70% at 95% 45%,
            var(--chirpui-aura-b) 0%,
            transparent 62%
        ),
        radial-gradient(
            ellipse 90% 65% at 42% 118%,
            var(--chirpui-aura-c) 0%,
            transparent 55%
        ),
        repeating-linear-gradient(
            118deg,
            transparent 0,
            transparent 8px,
            var(--chirpui-aura-mess) 8px,
            var(--chirpui-aura-mess) 9px
        ),
        linear-gradient(
            188deg,
            color-mix(in oklab, var(--chirpui-text) 6%, transparent) 0%,
            transparent 42%
        );
}

.chirpui-aura--mirror::before {
    transform: scaleX(-1);
}

.chirpui-aura__content {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-transparency: reduce) {
    .chirpui-aura::before {
        opacity: 0.35;
        filter: none;
    }
}

}

/* === partials/041_callout.css === */
/* ==========================================================================
   Callout — @scope + @layer envelope.

   Upper scope boundary `.chirpui-callout .chirpui-callout` stops outer-callout
   variant rules (info/success/warning/error backgrounds, surface-aware
   opacity adjustments) at the first nested callout — so an outer
   `--warning` callout's background tint cannot bleed onto an inner
   `--info` callout, and the `:has()` empty-header autohide rule won't reach
   into nested callouts' headers.
   See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-callout) to (.chirpui-callout .chirpui-callout) {
        :scope {
            padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
            border-radius: var(--chirpui-radius-sm);
            border-inline-start: 4px solid var(--chirpui-border);
            min-width: 0;
            overflow-wrap: break-word;
        }

        :scope.chirpui-callout--info {
            background: var(--chirpui-alert-info-bg);
            border-inline-start-color: var(--chirpui-alert-info-border);
        }

        :scope.chirpui-callout--success {
            background: var(--chirpui-alert-success-bg);
            border-inline-start-color: var(--chirpui-alert-success-border);
        }

        :scope.chirpui-callout--warning {
            background: var(--chirpui-alert-warning-bg);
            border-inline-start-color: var(--chirpui-alert-warning-border);
        }

        :scope.chirpui-callout--error {
            background: var(--chirpui-alert-error-bg);
            border-inline-start-color: var(--chirpui-alert-error-border);
        }

        :scope.chirpui-callout--neutral {
            background: var(--chirpui-bg-subtle);
            border-inline-start-color: var(--chirpui-border);
        }

        /* Surface-aware — reduce bg opacity on tinted/muted surfaces */
        :scope.chirpui-callout--on-muted {
            background: transparent;
        }
        :scope.chirpui-callout--on-accent {
            background: color-mix(in srgb, var(--chirpui-surface) 60%, transparent);
        }

        .chirpui-callout__header {
            display: flex;
            align-items: flex-start;
            gap: var(--chirpui-spacing-sm);
            margin-bottom: var(--chirpui-spacing-xs);
            &:not(:has(.chirpui-callout__icon)):not(:has(.chirpui-callout__title)):has(.chirpui-callout__header-actions:empty) {
                display: none;
            }
        }

        .chirpui-callout__icon {
            font-size: 1em;
            line-height: 1;
            flex-shrink: 0;
        }

        .chirpui-callout__title {
            font-weight: var(--chirpui-ui-font-weight-semibold);
            font-size: var(--chirpui-font-base);
            line-height: var(--chirpui-line-height-tight);
            margin-bottom: 0;
            overflow-wrap: anywhere;
        }

        .chirpui-callout__header-actions {
            margin-inline-start: auto;
            &:empty {
                display: none;
            }
        }

        .chirpui-callout__body {
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            color: var(--chirpui-text);
            overflow-wrap: anywhere;
        }

        .chirpui-callout__body > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        .chirpui-callout__body > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-spacing-xs);
        }
    }
}

/* === partials/042_hero.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-bold);
    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__title {
    max-inline-size: 12ch;
    margin-inline: auto;
    font-size: var(--chirpui-prose-5xl);
    letter-spacing: var(--chirpui-display-letter-spacing);
}

.chirpui-hero--page .chirpui-hero__subtitle {
    max-inline-size: 58ch;
    margin-inline: auto;
    line-height: var(--chirpui-line-height-relaxed);
}

.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);
}
}

/* === partials/043_overlay.css === */
@layer chirpui.component {
/* ==========================================================================
   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);
}

}

/* === partials/044_carousel.css === */
@layer chirpui.component {
/* ==========================================================================
   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;
    padding-inline: var(--chirpui-spacing);
    padding-block-end: var(--chirpui-spacing-xs);
    scrollbar-width: none;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
}

.chirpui-carousel__track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.chirpui-carousel__track::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--chirpui-border) 18%, transparent);
    border-radius: var(--chirpui-radius-full);
}

.chirpui-carousel__track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--chirpui-border) 70%, transparent);
    border-radius: var(--chirpui-radius-full);
}

.chirpui-carousel__track:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--chirpui-accent) 45%, var(--chirpui-border));
}

.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);
}
}

/* === partials/045_card.css === */
/* ==========================================================================
   Card — @scope + @layer envelope (Sprint 5 pilot).

   Upper scope boundary `.chirpui-card .chirpui-card` stops outer-card rules at
   the first nested card, fixing bleed (e.g. outer :hover border-color leaking
   into an inner card). See docs/plans/PLAN-css-scope-and-layer.md § Sprint 5 and
   examples/css-scope-prototype/card.scope.css.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-card) to (.chirpui-card .chirpui-card) {
        :scope {
            background: var(--chirpui-surface);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius);
            overflow: clip;
            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);
            }
        }

        /* Appearance axis */
        :scope.chirpui-card--filled {
            background: var(--chirpui-surface);
            border-color: var(--chirpui-border);
        }

        :scope.chirpui-card--tonal {
            background: var(--chirpui-bg-subtle);
            border-color: transparent;
        }

        :scope.chirpui-card--outlined {
            background: transparent;
            border-color: var(--chirpui-border);
        }

        :scope.chirpui-card--ghost {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }

        /* Tone axis */
        :scope.chirpui-card--neutral {
            --_card-tone: var(--chirpui-border);
        }

        :scope.chirpui-card--primary {
            --_card-tone: var(--chirpui-accent);
        }

        :scope.chirpui-card--secondary {
            --_card-tone: var(--chirpui-primary);
        }

        :scope.chirpui-card--success {
            --_card-tone: var(--chirpui-success);
        }

        :scope.chirpui-card--warning {
            --_card-tone: var(--chirpui-warning);
        }

        :scope.chirpui-card--danger {
            --_card-tone: var(--chirpui-danger);
        }

        :scope.chirpui-card--info {
            --_card-tone: var(--chirpui-info);
        }

        :scope.chirpui-card--primary,
        :scope.chirpui-card--secondary,
        :scope.chirpui-card--success,
        :scope.chirpui-card--warning,
        :scope.chirpui-card--danger,
        :scope.chirpui-card--info {
            background: color-mix(in srgb, var(--_card-tone) 7%, var(--chirpui-surface));
            border-color: color-mix(in srgb, var(--_card-tone) 45%, var(--chirpui-border));
        }

        :scope.chirpui-card--outlined.chirpui-card--primary,
        :scope.chirpui-card--outlined.chirpui-card--secondary,
        :scope.chirpui-card--outlined.chirpui-card--success,
        :scope.chirpui-card--outlined.chirpui-card--warning,
        :scope.chirpui-card--outlined.chirpui-card--danger,
        :scope.chirpui-card--outlined.chirpui-card--info {
            background: transparent;
            border-color: var(--_card-tone);
        }

        :scope.chirpui-card--ghost.chirpui-card--primary,
        :scope.chirpui-card--ghost.chirpui-card--secondary,
        :scope.chirpui-card--ghost.chirpui-card--success,
        :scope.chirpui-card--ghost.chirpui-card--warning,
        :scope.chirpui-card--ghost.chirpui-card--danger,
        :scope.chirpui-card--ghost.chirpui-card--info {
            background: transparent;
            border-color: transparent;
        }

        :scope.chirpui-card--primary .chirpui-card__title,
        :scope.chirpui-card--secondary .chirpui-card__title,
        :scope.chirpui-card--success .chirpui-card__title,
        :scope.chirpui-card--warning .chirpui-card__title,
        :scope.chirpui-card--danger .chirpui-card__title,
        :scope.chirpui-card--info .chirpui-card__title {
            color: color-mix(in srgb, var(--_card-tone) 78%, var(--chirpui-text));
        }

        .chirpui-card__header {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: var(--chirpui-space-card-gap);
            padding: var(--chirpui-space-card-gap) var(--chirpui-space-card-padding);
            background: color-mix(in srgb, var(--chirpui-surface) 88%, var(--chirpui-bg-subtle));
            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-subtle);
        }

        .chirpui-card__icon {
            font-size: 1em;
            line-height: 1;
            flex-shrink: 0;
            margin-top: 0.15em;
        }

        .chirpui-card__header-content {
            flex: 1 1 12rem;
            min-width: 0;
        }

        .chirpui-card__title {
            display: block;
            font-size: var(--chirpui-ui-base);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            overflow-wrap: anywhere;
        }

        .chirpui-card__header-actions {
            display: flex;
            flex: 0 0 auto;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: var(--chirpui-space-inline-gap);
            margin-inline-start: auto;
            min-width: 0;
        }

        .chirpui-card__header-badges {
            display: flex;
            flex: 0 1 auto;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--chirpui-space-inline-gap);
            min-width: 0;
            max-width: 100%;
            flex-shrink: 1;
            &:empty {
                display: none;
            }
        }

        .chirpui-card__header [data-chirpui-role~="content"] {
            flex: 1 1 12rem;
            min-inline-size: 0;
        }

        .chirpui-card__header [data-chirpui-role~="metadata"] {
            flex: 0 1 auto;
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        .chirpui-card__header [data-chirpui-role~="actions"] {
            flex: 0 0 auto;
            margin-inline-start: auto;
        }

        .chirpui-card__header-content[data-chirpui-pressure~="flex"],
        .chirpui-card__header-badges[data-chirpui-pressure~="flex"],
        .chirpui-card__top-meta[data-chirpui-pressure~="flex"],
        .chirpui-card__footer-wrap[data-chirpui-pressure~="flex"] {
            min-inline-size: 0;
        }

        .chirpui-card__header-badges[data-chirpui-pressure~="compress"],
        .chirpui-card__top-meta[data-chirpui-pressure~="compress"],
        .chirpui-card__footer-wrap[data-chirpui-pressure~="compress"] {
            min-inline-size: 0;
            overflow-wrap: anywhere;
        }

        .chirpui-card__header-actions[data-chirpui-pressure~="rigid"] {
            flex: 0 0 auto;
        }

        .chirpui-card__header-actions[data-chirpui-affinity~="end"] {
            margin-inline-start: auto;
        }

        .chirpui-card__header-content[data-chirpui-affinity~="fill"] {
            flex-grow: 1;
        }

        .chirpui-card__header-subtitle {
            margin-top: var(--chirpui-spacing-xs);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            color: var(--chirpui-text-muted);
            overflow-wrap: anywhere;
            &:empty {
                display: none;
            }
        }

        .chirpui-card__body {
            padding: var(--chirpui-space-card-padding);
            font-size: var(--chirpui-font-base);
            line-height: var(--chirpui-line-height-normal);
            a {
                overflow-wrap: anywhere;
                color: var(--chirpui-card-body-link-color);
                text-decoration: var(--chirpui-card-body-link-decoration);
                transition: color var(--chirpui-transition);
                &:hover {
                    color: var(--chirpui-card-body-link-hover-color);
                }
            }
        }

        .chirpui-card__body-content > :first-child {
            margin-block-start: 0;
        }

        .chirpui-card__body-content > :last-child {
            margin-block-end: 0;
        }

        .chirpui-card__body-content > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        .chirpui-card__body-content > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-space-card-gap);
        }

        .chirpui-card__body-actions {
            &:empty {
                display: none;
            }
            &:not(:empty) {
                margin-top: var(--chirpui-space-card-gap);
                display: flex;
                align-items: center;
                gap: var(--chirpui-space-control-gap);
            }
        }

        /* Squeeze body padding when a footer is present. `:scope` replaces
           the verbose `.chirpui-card .chirpui-card__body` descendant compound. */
        :scope:has(.chirpui-card__footer) .chirpui-card__body,
        :scope: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-subtle);
            background: color-mix(in srgb, var(--chirpui-surface) 90%, var(--chirpui-bg-subtle));
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            font-variant-numeric: tabular-nums;
            color: var(--chirpui-text-muted);
            overflow-wrap: anywhere;
        }

        .chirpui-card__footer-wrap:not(:empty) {
            border-top: 1px solid var(--chirpui-border-subtle);
            background: color-mix(in srgb, var(--chirpui-surface) 90%, var(--chirpui-bg-subtle));
            padding: var(--chirpui-space-card-gap) var(--chirpui-space-card-padding);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            font-variant-numeric: tabular-nums;
            color: var(--chirpui-text-muted);
            overflow-wrap: anywhere;
        }

        .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);
            background: color-mix(in srgb, var(--chirpui-surface) 90%, var(--chirpui-bg-subtle));
            border-bottom: 1px solid var(--chirpui-border-subtle);
            font-size: var(--chirpui-font-xs);
            line-height: var(--chirpui-line-height-tight);
            font-variant-numeric: tabular-nums;
            color: var(--chirpui-text-muted);
            &:empty {
                display: none;
            }
        }

        .chirpui-card__main-link {
            display: block;
            flex: 1;
            color: inherit;
            text-decoration: none;
        }

        .chirpui-card__media {
            overflow: clip;
            &:empty {
                display: none;
            }
            img,
            video {
                display: block;
                width: 100%;
                height: auto;
                aspect-ratio: var(--chirpui-video-aspect-ratio);
                object-fit: cover;
            }
        }

        /* Variants — nested &.modifier reads like a spec. */
        :scope {
            &.chirpui-card--collapsible summary {
                cursor: pointer;
                list-style: none;
                &::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--feature .chirpui-card__media,
            &.chirpui-card--media .chirpui-card__media {
                order: -1;
            }

            &.chirpui-card--horizontal {
                display: flex;
                flex-direction: row;
                .chirpui-card__media {
                    flex: 0 0 40%;
                    max-width: 12rem;
                    img,
                    video {
                        aspect-ratio: 1;
                        height: 100%;
                    }
                }
            }

            &.chirpui-card--stats {
                .chirpui-card__body {
                    text-align: center;
                }
                .chirpui-card__header {
                    border-bottom: none;
                    font-size: var(--chirpui-font-2xl);
                    font-weight: var(--chirpui-ui-font-weight-bold);
                }
            }

            &.chirpui-card--glass {
                background: color-mix(in srgb, var(--chirpui-surface) 80%, transparent);
                backdrop-filter: blur(8px);
            }

            &.chirpui-card--gradient-border {
                border: 2px solid var(--chirpui-border);
            }

            &.chirpui-card--gradient-header .chirpui-card__header {
                background: var(--chirpui-gradient-subtle);
            }
        }

        @supports (background-clip: padding-box) {
            :scope.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;
            }
        }

        @media (max-width: 36rem) {
            .chirpui-card__header [data-chirpui-role~="actions"] {
                flex-basis: 100%;
                margin-inline-start: 0;
                justify-content: flex-start;
            }
        }

        /* Interactive states. */
        :scope:not(.chirpui-card--link):hover {
            border-color: var(--chirpui-card-hover-border);
            box-shadow: var(--chirpui-elevation-card-hover);
        }

        :scope.chirpui-card--hoverable:not(.chirpui-card--link) {
            cursor: pointer;
            transition:
                transform var(--chirpui-transition),
                box-shadow var(--chirpui-transition);
        }

        @media (prefers-reduced-motion: no-preference) {
            :scope:not(.chirpui-card--link):hover {
                transform: translateY(-2px);
            }
            :scope.chirpui-card--hoverable:not(.chirpui-card--link):hover {
                transform: translateY(-2px);
                box-shadow: var(--chirpui-shadow-md);
            }
        }

        /* --link / --linked (anchor-card patterns). */
        :scope {
            &.chirpui-card--link,
            &.chirpui-card--linked {
                display: flex;
                flex-direction: column;
                height: 100%;
                transition:
                    box-shadow var(--chirpui-transition),
                    border-color var(--chirpui-transition);
            }
            &.chirpui-card--link {
                text-decoration: none;
                color: inherit;
                cursor: pointer;
            }
            &.chirpui-card--link .chirpui-card__body,
            &.chirpui-card--linked .chirpui-card__body {
                flex: 1;
            }

            &.chirpui-card--link: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);
            }

            &.chirpui-card--link:focus-visible,
            &.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,
            &.chirpui-card--linked:has(.chirpui-card__main-link:active) {
                box-shadow: var(--chirpui-elevation-card-rest);
                border-color: var(--chirpui-state-border-active);
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            :scope {
                &.chirpui-card--link,
                &.chirpui-card--linked {
                    transition:
                        box-shadow var(--chirpui-transition),
                        border-color var(--chirpui-transition),
                        transform var(--chirpui-transition);
                }
                &.chirpui-card--link:hover,
                &.chirpui-card--linked:hover,
                &.chirpui-card--linked:has(.chirpui-card__main-link:focus-visible) {
                    transform: translateY(-2px);
                }
                &.chirpui-card--link:active,
                &.chirpui-card--linked:has(.chirpui-card__main-link:active) {
                    transform: translateY(0);
                }
            }
        }
    }
}

/* === partials/046_video-card.css === */
/* ==========================================================================
   Video Card — @scope + @layer envelope.

   Upper scope boundary `.chirpui-video-card .chirpui-video-card` stops
   outer-card rules at the first nested video card. Critical here because
   the bare `:hover` rule (`:scope:hover { border-color, box-shadow }`)
   would otherwise cascade to descendant `.chirpui-video-card` instances
   and flip their borders on outer hover — same bleed pattern that the
   card pilot fixed.
   See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-video-card) to (.chirpui-video-card .chirpui-video-card) {
        :scope {
            background: var(--chirpui-surface);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius);
            overflow: clip;
            transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
        }

        :scope: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: clip;
            background: var(--chirpui-bg-subtle);
            & 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);
            &:empty {
                display: none;
            }
        }

        .chirpui-video-card__duration {
            position: absolute;
            right: var(--chirpui-spacing-xs);
            bottom: var(--chirpui-spacing-xs);
            padding: var(--chirpui-spacing-2xs) 0.35rem;
            font-size: var(--chirpui-font-xs);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            font-variant-numeric: tabular-nums;
            line-height: var(--chirpui-line-height-tight);
            background: rgba(0, 0, 0, 0.75);
            color: var(--chirpui-on-accent);
            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: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: clip;
            overflow-wrap: anywhere;
        }

        .chirpui-video-card__channel,
        .chirpui-video-card__meta {
            margin: 0;
            font-size: var(--chirpui-font-xs);
            font-variant-numeric: tabular-nums;
            line-height: var(--chirpui-line-height-tight);
            color: var(--chirpui-text-muted);
            overflow-wrap: anywhere;
        }

        .chirpui-video-card__channel-link {
            color: inherit;
            text-decoration: none;
            &:hover {
                color: var(--chirpui-accent);
                text-decoration: underline;
            }
        }
    }
}

/* === partials/047_channel-card.css === */
/* ==========================================================================
   Channel Card — @scope + @layer envelope.

   Upper scope boundary `.chirpui-channel-card .chirpui-channel-card` stops
   outer-card rules at the first nested channel card. The
   `.chirpui-channel-card__link:hover .chirpui-channel-card__name` descendant
   rule is the main bleed candidate — without the boundary, hovering the
   outer card's link would tint a nested card's name too.
   See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-channel-card) to (.chirpui-channel-card .chirpui-channel-card) {
        :scope {
            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;
            &:hover .chirpui-channel-card__name {
                color: var(--chirpui-accent);
            }
        }

        .chirpui-channel-card__info {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .chirpui-channel-card__name {
            margin: 0;
            font-size: var(--chirpui-font-base);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            overflow-wrap: anywhere;
        }

        .chirpui-channel-card__subscribers {
            margin: var(--chirpui-spacing-xs) 0 0;
            font-size: var(--chirpui-font-sm);
            font-variant-numeric: tabular-nums;
            line-height: var(--chirpui-line-height-tight);
            color: var(--chirpui-text-muted);
        }

        .chirpui-channel-card__body {
            &:empty {
                display: none;
            }
        }

        .chirpui-channel-card__actions {
            flex-shrink: 0;
        }
    }
}

/* === partials/048_video-thumbnail.css === */
@layer chirpui.component {
/* ==========================================================================
   Video Thumbnail
   ========================================================================== */

.chirpui-video-thumbnail {
    display: block;
    position: relative;
    aspect-ratio: var(--chirpui-video-aspect-ratio);
    overflow: clip;
    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: var(--chirpui-spacing-2xs) 0.35rem;
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    background: rgba(0, 0, 0, 0.75);
    color: var(--chirpui-on-accent);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-video-thumbnail__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--chirpui-error);
}

}

/* === partials/049_live-badge.css === */
@layer chirpui.component {
/* ==========================================================================
   Live Badge
   ========================================================================== */

.chirpui-live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-sm);
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    background: var(--chirpui-error);
    color: var(--chirpui-on-accent);
    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 var(--chirpui-anim-pulse) ease-in-out infinite;
}

@keyframes chirpui-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.chirpui-live-badge__viewers {
    opacity: 0.9;
}

}

/* === partials/050_playlist.css === */
@layer chirpui.component {
/* ==========================================================================
   Playlist
   ========================================================================== */

.chirpui-playlist {
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    overflow: clip;
}

.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: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.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;
    min-inline-size: 0;
    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: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-playlist-item__title {
    flex: 1;
    min-width: 0;
    line-height: var(--chirpui-line-height-tight);
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
}

.chirpui-playlist-item__duration {
    flex-shrink: 0;
    font-size: var(--chirpui-font-xs);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}
}

/* === partials/051_chapter-list.css === */
@layer chirpui.component {
/* ==========================================================================
   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: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    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: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}

.chirpui-chapter-list[open] > .chirpui-chapter-list__summary::after {
    rotate: 90deg;
}

.chirpui-chapter-list__summary-text {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.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);
    min-inline-size: 0;
    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);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}

.chirpui-chapter-item__title {
    flex: 1;
    min-width: 0;
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}
}

/* === partials/052_modal.css === */
/* ==========================================================================
   Modal (native `<dialog>`) — @scope + @layer envelope.

   `.chirpui-modal` is shared with the div-based overlay component
   (066_modal-overlay.css), so the scope root is `dialog.chirpui-modal`
   to keep these dialog-specific rules off the overlay variant. Backdrop
   is a pseudo-element on `:scope`. Upper scope boundary
   `.chirpui-modal .chirpui-modal` stops outer-modal rules at the first
   nested modal (defensive — modal-in-modal is rare but cheap to scope).
   The `.chirpui-confirm` variant lives on the same dialog as
   `.chirpui-modal` so it composes via `:scope.chirpui-confirm` inside
   the envelope.
   See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (dialog.chirpui-modal) to (.chirpui-modal .chirpui-modal) {
        /* Native <dialog>: stay hidden until showModal() is called (theme-safe) */
        :scope:not([open]) {
            display: none;
        }

        :scope {
            max-width: var(--chirpui-modal-width);
            width: 100%;
            background: var(--chirpui-surface);
            color: var(--chirpui-text, inherit);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius);
            padding: 0;
            box-shadow: var(--chirpui-elevation-overlay);
            min-width: 0;
            overflow-wrap: anywhere;
            transition: transform var(--chirpui-transition-slow) var(--chirpui-ease-spring),
                opacity var(--chirpui-transition-slow) var(--chirpui-ease-spring);
            @starting-style {
                transform: scale(0.95);
                opacity: 0;
            }
        }

        /* Top layer: ensure descendants inherit modal text color (avoids black-on-black) */
        * {
            color: inherit;
        }

        a {
            color: var(--chirpui-accent);
        }

        :scope.chirpui-modal--sm { max-width: var(--chirpui-modal-width-sm); }
        :scope.chirpui-modal--lg { max-width: var(--chirpui-modal-width-lg); }

        :scope::backdrop {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(2px);
        }

        .chirpui-modal__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--chirpui-space-control-gap);
            flex-wrap: wrap;
            padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
            border-bottom: 1px solid var(--chirpui-border);
        }

        .chirpui-modal__title {
            flex: 1 1 auto;
            min-width: 0;
            margin-block: 0;
            font-size: var(--chirpui-font-lg);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            overflow-wrap: anywhere;
        }

        .chirpui-modal__header-actions {
            display: flex;
            align-items: center;
            gap: var(--chirpui-spacing-xs);
            flex-wrap: wrap;
            max-width: 100%;
            margin-inline-start: auto;
            &:empty {
                display: none;
            }
        }

        .chirpui-modal__header > form {
            margin: 0;
            flex-shrink: 0;
        }

        .chirpui-modal__close {
            background: none;
            border: none;
            color: inherit;
            font-size: 1.5rem;
            cursor: pointer;
            line-height: 1;
            padding: 0 var(--chirpui-spacing-xs);
            border-radius: var(--chirpui-radius-sm);
            transition: background var(--chirpui-transition);
            &:hover {
                background: var(--chirpui-bg-subtle);
            }
            &:focus-visible {
                outline: var(--chirpui-state-focus-outline);
                outline-offset: var(--chirpui-state-focus-offset);
            }
        }

        .chirpui-modal__body {
            padding: var(--chirpui-spacing);
            color: inherit;
            min-width: 0;
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            overflow-wrap: anywhere;
            & code {
                color: inherit;
                background: var(--chirpui-bg-subtle);
                padding: 0.125em 0.25em;
                border-radius: var(--chirpui-radius-sm);
            }
        }

        .chirpui-modal__body > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        .chirpui-modal__body > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-spacing-sm);
        }

        .chirpui-modal__footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--chirpui-spacing-sm);
            flex-wrap: wrap;
            padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
            border-top: 1px solid var(--chirpui-border);
            color: var(--chirpui-text-muted);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            font-variant-numeric: tabular-nums;
            overflow-wrap: anywhere;
            &:empty {
                display: none;
            }
        }

        .chirpui-modal__footer > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        /* Confirm dialog — sibling class composed onto .chirpui-modal */
        .chirpui-confirm__message {
            margin: 0 0 var(--chirpui-spacing) 0;
            color: var(--chirpui-text-muted);
            &:empty {
                display: none;
            }
        }

        .chirpui-confirm__footer {
            display: flex;
            gap: var(--chirpui-spacing-sm);
            justify-content: flex-end;
        }

        :scope.chirpui-confirm--danger {
            border-left: 3px solid var(--chirpui-error);
        }

        :scope.chirpui-confirm--danger .chirpui-modal__header {
            background: color-mix(in srgb, var(--chirpui-error) 8%, var(--chirpui-surface));
        }

        :scope.chirpui-confirm--danger .chirpui-modal__title {
            color: var(--chirpui-error);
        }

        :scope.chirpui-confirm--danger .chirpui-confirm__icon {
            margin-right: 0.5em;
        }

        :scope.chirpui-confirm--danger .chirpui-btn--danger {
            background: var(--chirpui-error);
            color: var(--chirpui-on-accent);
            border-color: var(--chirpui-error);
            &:hover {
                background: color-mix(in srgb, var(--chirpui-error) 85%, black);
            }
        }
    }
}

/* === partials/053_drawer.css === */
/* ==========================================================================
   Drawer — @scope + @layer envelope.

   Upper scope boundary `.chirpui-drawer .chirpui-drawer` stops outer-drawer
   rules at the first nested drawer. Drawer is a native `<dialog>` so its
   `::backdrop` is a pseudo-element on `:scope`, not a descendant.
   See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-drawer) to (.chirpui-drawer .chirpui-drawer) {
        :scope {
            border: none;
            padding: 0;
            max-width: none;
            width: 100%;
            height: 100%;
            background: transparent;
        }

        :scope::backdrop {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(2px);
        }

        .chirpui-drawer__panel {
            position: absolute;
            top: 0;
            bottom: 0;
            width: min(24rem, 90vw);
            max-width: 24rem;
            background: var(--chirpui-surface);
            box-shadow: var(--chirpui-elevation-overlay);
            display: flex;
            flex-direction: column;
            margin: 0;
            min-width: 0;
            overflow-wrap: anywhere;
            transition: transform var(--chirpui-transition-slow) var(--chirpui-ease-spring);
        }

        :scope.chirpui-drawer--right .chirpui-drawer__panel {
            right: 0;
            margin-left: auto;
            @starting-style {
                transform: translateX(100%);
            }
        }

        :scope.chirpui-drawer--left .chirpui-drawer__panel {
            left: 0;
            margin-right: auto;
            @starting-style {
                transform: translateX(-100%);
            }
        }

        .chirpui-drawer__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--chirpui-space-control-gap);
            flex-wrap: wrap;
            padding: var(--chirpui-spacing) var(--chirpui-spacing-md);
            border-bottom: 1px solid var(--chirpui-border);
        }

        .chirpui-drawer__title {
            flex: 1 1 auto;
            min-width: 0;
            margin-block: 0;
            font-size: var(--chirpui-font-lg);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            overflow-wrap: anywhere;
        }

        .chirpui-drawer__header-actions {
            display: flex;
            align-items: center;
            gap: var(--chirpui-spacing-xs);
            flex-wrap: wrap;
            max-width: 100%;
            margin-inline-start: auto;
            &:empty {
                display: none;
            }
        }

        .chirpui-drawer__header > form {
            margin: 0;
            flex-shrink: 0;
        }

        .chirpui-drawer__close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-inline-size: var(--chirpui-control-block-size-sm);
            min-block-size: var(--chirpui-control-block-size-sm);
            background: none;
            border: none;
            color: inherit;
            font-size: 1.5rem;
            cursor: pointer;
            line-height: 1;
            padding: 0;
            border-radius: var(--chirpui-radius-sm);
            transition: background var(--chirpui-transition);
            &:hover {
                background: var(--chirpui-bg-subtle);
            }
            &:focus-visible {
                outline: var(--chirpui-state-focus-outline);
                outline-offset: var(--chirpui-state-focus-offset);
            }
        }

        .chirpui-drawer__body {
            padding: var(--chirpui-spacing-md);
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            min-width: 0;
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            overflow-wrap: anywhere;
        }

        .chirpui-drawer__body > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        .chirpui-drawer__body > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-spacing-sm);
        }
    }
}

/* === partials/054_tabs.css === */
@layer chirpui.component {
/* ==========================================================================
   Tabs
   ========================================================================== */

.chirpui-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--chirpui-border);
    min-inline-size: 0;
}

.chirpui-tab {
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    text-decoration: none;
    color: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    transition: border-color var(--chirpui-transition);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.chirpui-tab:hover {
    border-bottom-color: var(--chirpui-border);
}

.chirpui-tab:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-tab--active {
    border-bottom-color: var(--chirpui-accent);
    color: var(--chirpui-accent);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-tab--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
}

/* === partials/055_accordion.css === */
@layer chirpui.component {
/* ==========================================================================
   Accordion
   ========================================================================== */

.chirpui-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-accordion__item {
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface);
    overflow: clip;
}

.chirpui-accordion__trigger {
    cursor: pointer;
    list-style: none;
    padding: var(--chirpui-spacing) var(--chirpui-spacing-md);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    overflow-wrap: anywhere;
}

.chirpui-accordion__trigger::-webkit-details-marker {
    display: none;
}

.chirpui-accordion__trigger::marker {
    display: none;
}

.chirpui-accordion__trigger::before {
    content: "▸";
    font-size: 0.75em;
    transition: transform var(--chirpui-transition-slow) var(--chirpui-ease-spring);
}

.chirpui-accordion__item[open] .chirpui-accordion__trigger::before {
    transform: rotate(90deg);
}

.chirpui-accordion__trigger:hover {
    background: var(--chirpui-bg-subtle);
}

.chirpui-accordion__trigger:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-accordion__trigger-text {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.chirpui-accordion__trigger-actions {
    margin-inline-start: auto;
}

.chirpui-accordion__trigger-actions:empty {
    display: none;
}

.chirpui-accordion__content {
    padding: 0 var(--chirpui-spacing-md) var(--chirpui-spacing) var(--chirpui-spacing-md);
    padding-inline-start: calc(var(--chirpui-spacing-md) + 1em);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text-muted);
    overflow-wrap: anywhere;
}

.chirpui-accordion__item[open] .chirpui-accordion__content {
    animation: chirpui-accordion-content-in var(--chirpui-transition-slow) var(--chirpui-ease-spring);
}

@keyframes chirpui-accordion-content-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
}

/* === partials/056_collapse.css === */
@layer chirpui.component {
/* ==========================================================================
   Collapse
   ========================================================================== */

.chirpui-collapse {
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface);
    overflow: clip;
}

.chirpui-collapse__trigger {
    cursor: pointer;
    list-style: none;
    padding: var(--chirpui-spacing) var(--chirpui-spacing-md);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-collapse__trigger-text {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.chirpui-collapse__trigger-actions:empty {
    display: none;
}

.chirpui-collapse__trigger::-webkit-details-marker {
    display: none;
}

.chirpui-collapse__trigger::marker {
    display: none;
}

.chirpui-collapse__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-collapse[open] > .chirpui-collapse__trigger::after {
    rotate: 90deg;
}

.chirpui-collapse__trigger:hover {
    background: var(--chirpui-bg-subtle);
}

.chirpui-collapse__trigger:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-collapse__content {
    padding: var(--chirpui-spacing) var(--chirpui-spacing-md);
    border-top: 1px solid var(--chirpui-border);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-collapse[open] .chirpui-collapse__content {
    animation: chirpui-accordion-content-in var(--chirpui-transition-slow) var(--chirpui-ease-spring);
}
}

/* === partials/057_dropdown.css === */
@layer chirpui.component {
/* ==========================================================================
   Dropdown
   ========================================================================== */

.chirpui-dropdown {
    --chirpui-dropdown-offset: var(--chirpui-spacing-xs);
    --chirpui-dropdown-viewport-padding: var(--chirpui-spacing);
    position: relative;
    display: inline-block;
}

.chirpui-dropdown__trigger {
    cursor: pointer;
    list-style: none;
}

.chirpui-dropdown__header:empty,
.chirpui-dropdown__footer:empty {
    display: none;
}

.chirpui-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--chirpui-dropdown-offset));
    left: 0;
    z-index: var(--chirpui-z-dropdown);
    min-width: 10rem;
    max-inline-size: min(20rem, calc(100vw - 2 * var(--chirpui-dropdown-viewport-padding)));
    max-block-size: calc(100dvh - 2 * var(--chirpui-dropdown-viewport-padding));
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-elevation-floating);
    padding: var(--chirpui-spacing-xs) 0;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-dropdown[data-align-x="end"] .chirpui-dropdown__menu {
    right: 0;
    left: auto;
}

.chirpui-dropdown[data-align-y="top"] .chirpui-dropdown__menu {
    top: auto;
    bottom: calc(100% + var(--chirpui-dropdown-offset));
}

.chirpui-dropdown__menu a,
.chirpui-dropdown__menu button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing);
    text-decoration: none;
    color: inherit;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-dropdown__menu a:hover,
.chirpui-dropdown__menu button:hover {
    background: var(--chirpui-bg-subtle);
}

.chirpui-dropdown__menu a:focus-visible,
.chirpui-dropdown__menu button:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-dropdown__menu a[aria-disabled],
.chirpui-dropdown__menu button:disabled {
    color: var(--chirpui-text-muted);
    cursor: default;
    pointer-events: none;
}

/* Split button */
.chirpui-split-btn {
    --chirpui-split-btn-bg: var(--chirpui-surface);
    --chirpui-split-btn-bg-hover: var(--chirpui-bg-subtle);
    --chirpui-split-btn-border: var(--chirpui-border);
    --chirpui-split-btn-color: var(--chirpui-text);
    --chirpui-split-btn-divider: color-mix(in srgb, var(--chirpui-border) 70%, transparent);
    --chirpui-split-btn-shadow: var(--chirpui-shadow-sm);
    position: relative;
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    border-radius: var(--chirpui-radius);
    box-shadow: var(--chirpui-split-btn-shadow);
    isolation: isolate;
}

.chirpui-split-btn:has(.chirpui-btn--primary) {
    --chirpui-split-btn-bg: var(--chirpui-accent);
    --chirpui-split-btn-bg-hover: var(--chirpui-accent-hover);
    --chirpui-split-btn-border: var(--chirpui-accent);
    --chirpui-split-btn-color: var(--chirpui-on-accent);
    --chirpui-split-btn-divider: color-mix(in srgb, var(--chirpui-on-accent) 34%, transparent);
}

.chirpui-split-btn:has(.chirpui-btn--danger) {
    --chirpui-split-btn-bg: var(--chirpui-error);
    --chirpui-split-btn-bg-hover: color-mix(in srgb, var(--chirpui-error) 85%, black);
    --chirpui-split-btn-border: var(--chirpui-error);
    --chirpui-split-btn-color: var(--chirpui-on-accent);
    --chirpui-split-btn-divider: color-mix(in srgb, var(--chirpui-on-accent) 34%, transparent);
}

.chirpui-split-btn:has(.chirpui-btn--success) {
    --chirpui-split-btn-bg: var(--chirpui-success);
    --chirpui-split-btn-bg-hover: color-mix(in srgb, var(--chirpui-success) 85%, black);
    --chirpui-split-btn-border: var(--chirpui-success);
    --chirpui-split-btn-color: var(--chirpui-on-accent);
    --chirpui-split-btn-divider: color-mix(in srgb, var(--chirpui-on-accent) 34%, transparent);
}

.chirpui-split-btn:has(.chirpui-btn--warning) {
    --chirpui-split-btn-bg: var(--chirpui-warning);
    --chirpui-split-btn-bg-hover: color-mix(in srgb, var(--chirpui-warning) 85%, black);
    --chirpui-split-btn-border: var(--chirpui-warning);
    --chirpui-split-btn-color: var(--chirpui-on-accent);
    --chirpui-split-btn-divider: color-mix(in srgb, var(--chirpui-on-accent) 34%, transparent);
}

.chirpui-split-btn .chirpui-split-btn__primary {
    z-index: 1;
    min-block-size: var(--chirpui-control-block-size);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--chirpui-split-btn-border);
    background: var(--chirpui-split-btn-bg);
    color: var(--chirpui-split-btn-color);
    box-shadow: none;
}

.chirpui-split-btn__dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.chirpui-split-btn__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    padding: 0 var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-split-btn-border);
    border-inline-start: 1px solid var(--chirpui-split-btn-divider);
    border-radius: 0 var(--chirpui-radius) var(--chirpui-radius) 0;
    background: var(--chirpui-split-btn-bg);
    color: var(--chirpui-split-btn-color);
    cursor: pointer;
    font: inherit;
    font-size: var(--chirpui-font-xs);
    line-height: 1;
    list-style: none;
    transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
        color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}

.chirpui-split-btn .chirpui-split-btn__primary:hover:not(:disabled),
.chirpui-split-btn .chirpui-split-btn__primary:hover + .chirpui-split-btn__dropdown .chirpui-split-btn__trigger,
.chirpui-split-btn__trigger:hover {
    background: var(--chirpui-split-btn-bg-hover);
    border-color: var(--chirpui-split-btn-border);
}

.chirpui-split-btn .chirpui-split-btn__primary:focus-visible,
.chirpui-split-btn__trigger:focus-visible {
    z-index: 2;
    outline: var(--chirpui-state-focus-outline);
    outline-offset: 2px;
}

.chirpui-split-btn .chirpui-split-btn__primary:active:not(:disabled),
.chirpui-split-btn__trigger:active,
.chirpui-split-btn__trigger[aria-expanded="true"] {
    background: var(--chirpui-split-btn-bg-hover);
    box-shadow: inset 0 1px 2px color-mix(in srgb, black 20%, transparent);
}

.chirpui-split-btn__menu-header:empty,
.chirpui-split-btn__menu-footer:empty {
    display: none;
}

.chirpui-split-btn__menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--chirpui-spacing-xs);
    min-width: 10rem;
    max-inline-size: min(20rem, calc(100vw - 2 * var(--chirpui-dropdown-viewport-padding)));
    max-height: calc(100dvh - 2 * var(--chirpui-dropdown-viewport-padding));
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--chirpui-spacing-xs);
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    box-shadow: var(--chirpui-elevation-floating);
    z-index: var(--chirpui-z-popover);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
}

@media (prefers-reduced-motion: no-preference) {
    .chirpui-split-btn .chirpui-split-btn__primary:hover:not(:disabled),
    .chirpui-split-btn .chirpui-split-btn__primary:active:not(:disabled) {
        transform: none;
        box-shadow: none;
    }

    .chirpui-split-btn:hover {
        box-shadow: var(--chirpui-shadow-md);
    }
}

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-split-btn .chirpui-split-btn__primary,
    .chirpui-split-btn__trigger {
        min-block-size: var(--chirpui-control-touch-target);
    }
}

.chirpui-split-btn[data-align-x="start"] .chirpui-split-btn__menu {
    right: auto;
    left: 0;
}

.chirpui-split-btn[data-align-x="end"] .chirpui-split-btn__menu {
    right: 0;
    left: auto;
}

.chirpui-split-btn[data-align-y="top"] .chirpui-split-btn__menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-split-btn__menu a,
.chirpui-split-btn__menu button {
    display: block;
    width: 100%;
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: none;
    border: none;
    font: inherit;
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
    cursor: pointer;
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-split-btn__menu a:hover,
.chirpui-split-btn__menu button:hover {
    background: var(--chirpui-bg-subtle);
}

/* Popover */
.chirpui-popover {
    position: relative;
    display: inline-block;
}

.chirpui-popover__trigger {
    cursor: pointer;
    list-style: none;
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface);
    transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
        box-shadow var(--chirpui-transition);
}

.chirpui-popover__trigger::-webkit-details-marker {
    display: none;
}

.chirpui-popover__trigger:hover {
    background: var(--chirpui-state-surface-hover);
    border-color: var(--chirpui-state-border-hover);
}

.chirpui-popover__header:empty,
.chirpui-popover__footer:empty {
    display: none;
}

.chirpui-popover__panel {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: var(--chirpui-spacing-xs);
    min-width: 12rem;
    padding: var(--chirpui-spacing);
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    box-shadow: var(--chirpui-elevation-overlay);
    z-index: var(--chirpui-z-popover);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

/* Tag input */
.chirpui-tag-input {
    margin-bottom: var(--chirpui-spacing);
}

.chirpui-tag-input__label {
    display: block;
    margin-bottom: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-tag-input__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-sm);
    align-items: center;
}

.chirpui-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    background: var(--chirpui-bg-subtle);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    font-size: var(--chirpui-font-sm);
    font-family: var(--chirpui-ui-font-family);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    font-variant-numeric: tabular-nums;
    transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
        color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}

a.chirpui-tag {
    text-decoration: none;
    color: var(--chirpui-accent);
    border-color: color-mix(in srgb, var(--chirpui-accent) 30%, var(--chirpui-border));
    cursor: pointer;
}

a.chirpui-tag:hover {
    color: var(--chirpui-accent-hover);
    border-color: color-mix(in srgb, var(--chirpui-accent) 50%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-accent) 8%, var(--chirpui-bg-subtle));
}

a.chirpui-tag:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

a.chirpui-tag:active {
    background: color-mix(in srgb, var(--chirpui-accent) 15%, var(--chirpui-bg-subtle));
}

.chirpui-tag__remove {
    display: inline;
    margin: 0;
    padding: 0;
}

.chirpui-tag__remove-btn {
    background: none;
    border: none;
    padding: var(--chirpui-spacing-2xs);
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    border-radius: var(--chirpui-radius-sm);
    transition: color var(--chirpui-transition), background var(--chirpui-transition);
}

.chirpui-tag__remove-btn:hover {
    color: var(--chirpui-error);
    background: var(--chirpui-error-muted);
}

.chirpui-tag__remove-btn:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: 1px;
}

.chirpui-tag__remove-btn:active {
    color: var(--chirpui-on-accent);
    background: var(--chirpui-error);
}

.chirpui-tag-input__add {
    display: inline-flex;
    gap: var(--chirpui-spacing-sm);
    align-items: center;
}

.chirpui-tag-input__add-field {
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    font: inherit;
    min-width: 8rem;
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
    transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}

.chirpui-tag-input__add-field:focus {
    border-color: var(--chirpui-accent);
    box-shadow: 0 0 0 3px var(--chirpui-focus-ring);
    outline: none;
}

.chirpui-tag-input__add-field:disabled,
.chirpui-tag-input__add-field[readonly] {
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text-muted);
    cursor: not-allowed;
    border-color: var(--chirpui-border);
}

.chirpui-tag-input__add-field[readonly] {
    cursor: default;
    opacity: 1;
}

.chirpui-tag-input__add-field:disabled {
    opacity: 0.5;
}

/* Tree view */
.chirpui-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chirpui-tree__item {
    margin: 0;
}

.chirpui-tree__node {
    margin: 0;
}

.chirpui-tree__label {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-block-size: calc(var(--chirpui-spacing-xl) + var(--chirpui-spacing-2xs));
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius-sm);
    cursor: default;
}

.chirpui-tree__label--leaf {
    padding-inline-start: calc(var(--chirpui-spacing) + var(--chirpui-spacing-sm));
}

.chirpui-tree__node summary {
    list-style: none;
    cursor: pointer;
}

.chirpui-tree__node summary::-webkit-details-marker {
    display: none;
}

.chirpui-tree__node summary:hover {
    color: var(--chirpui-accent);
    background: var(--chirpui-state-surface-hover);
}

.chirpui-tree .chirpui-tree {
    padding-inline-start: var(--chirpui-spacing);
    border-inline-start: 1px solid var(--chirpui-border);
    margin-inline-start: var(--chirpui-spacing-sm);
}

.chirpui-tree--plain .chirpui-tree__label {
    display: block;
    min-block-size: 0;
    padding: var(--chirpui-spacing-xs) 0;
    border-radius: 0;
}

.chirpui-tree--plain .chirpui-tree__label--leaf {
    padding-inline-start: var(--chirpui-spacing);
}

.chirpui-tree--branch .chirpui-tree__label::before,
.chirpui-tree--explorer .chirpui-tree__label::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1rem;
    color: var(--chirpui-text-muted);
    font-family: var(--chirpui-ascii-font);
}

.chirpui-tree--branch .chirpui-tree__node > .chirpui-tree__label::before,
.chirpui-tree--explorer .chirpui-tree__node > .chirpui-tree__label::before {
    content: "▸";
}

.chirpui-tree--branch .chirpui-tree__node[open] > .chirpui-tree__label::before,
.chirpui-tree--explorer .chirpui-tree__node[open] > .chirpui-tree__label::before {
    content: "▾";
}

.chirpui-tree--branch .chirpui-tree__label--leaf::before {
    content: "•";
}

.chirpui-tree--explorer {
    padding: var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius);
    background: color-mix(in srgb, var(--chirpui-bg-subtle) 58%, transparent);
}

.chirpui-tree--explorer .chirpui-tree {
    margin-inline-start: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    padding-inline-start: var(--chirpui-spacing-sm);
    border-inline-start: 1px solid color-mix(in srgb, var(--chirpui-border) 72%, transparent);
}

.chirpui-tree--explorer .chirpui-tree__label {
    border: 1px solid transparent;
}

.chirpui-tree--explorer .chirpui-tree__label--leaf::before {
    content: "◇";
}

.chirpui-tree--explorer .chirpui-tree__label:hover {
    border-color: var(--chirpui-border-subtle);
    background: var(--chirpui-state-surface-hover);
}

/* Nav tree (docs sidebar, hierarchical nav) */
.chirpui-nav-tree {
    font-size: var(--chirpui-font-sm);
}

.chirpui-nav-tree--linked-branches .chirpui-nav-tree__list--nested {
    margin-block-start: var(--chirpui-spacing-xs);
}

.chirpui-nav-tree__header {
    margin-bottom: var(--chirpui-spacing-sm);
}

.chirpui-nav-tree__header:empty {
    display: none;
}

.chirpui-nav-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chirpui-nav-tree__list--nested {
    padding-inline-start: var(--chirpui-spacing);
    border-inline-start: 1px solid var(--chirpui-border);
    margin-inline-start: var(--chirpui-spacing-sm);
}

.chirpui-nav-tree__item {
    margin: 0;
}

.chirpui-nav-tree__item--active,
.chirpui-nav-tree__item--branch,
.chirpui-nav-tree__item--child,
.chirpui-nav-tree__item--muted,
.chirpui-nav-tree__item--open {
    margin: 0;
}

.chirpui-nav-tree__node {
    margin: 0;
}

.chirpui-nav-tree__label {
    display: block;
    cursor: pointer;
}

.chirpui-nav-tree__label summary {
    list-style: none;
}

.chirpui-nav-tree__label summary::-webkit-details-marker {
    display: none;
}

.chirpui-nav-tree__link {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-block-size: calc(var(--chirpui-spacing-xl) + var(--chirpui-spacing-2xs));
    padding: var(--chirpui-spacing-xs) 0;
    color: var(--chirpui-text);
    text-decoration: none;
}

.chirpui-nav-tree__hint {
    display: block;
}

.chirpui-nav-tree__hint .chirpui-nav-tree__link,
.chirpui-nav-tree__hint .chirpui-nav-tree__text {
    width: 100%;
}

.chirpui-nav-tree__link:hover {
    color: var(--chirpui-accent);
}

.chirpui-nav-tree__link:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-nav-tree__link--active {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    color: var(--chirpui-accent);
    background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
}

.chirpui-nav-tree__item--muted > .chirpui-nav-tree__link:not(.chirpui-nav-tree__link--active),
.chirpui-nav-tree__item--muted > .chirpui-nav-tree__hint .chirpui-nav-tree__link:not(.chirpui-nav-tree__link--active),
.chirpui-nav-tree__item--muted > .chirpui-nav-tree__hint .chirpui-nav-tree__text,
.chirpui-nav-tree__item--muted > .chirpui-nav-tree__text,
.chirpui-nav-tree__item--muted > .chirpui-nav-tree__node > .chirpui-nav-tree__label .chirpui-nav-tree__link:not(.chirpui-nav-tree__link--active),
.chirpui-nav-tree__item--muted > .chirpui-nav-tree__node > .chirpui-nav-tree__label .chirpui-nav-tree__text {
    color: var(--chirpui-text-muted);
}

.chirpui-nav-tree__link--leaf {
    padding-inline-start: var(--chirpui-spacing);
}

.chirpui-nav-tree__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    color: var(--chirpui-text-muted);
    font-family: var(--chirpui-ascii-font);
}

.chirpui-nav-tree__link--active .chirpui-nav-tree__icon {
    color: currentColor;
}

.chirpui-nav-tree__title {
    flex: 1 1 auto;
    min-width: 0;
}

.chirpui-nav-tree__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    margin-inline-start: auto;
    padding-inline: var(--chirpui-spacing-xs);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-muted-bg);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-nav-tree__text {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-block-size: calc(var(--chirpui-spacing-xl) + var(--chirpui-spacing-2xs));
    padding: var(--chirpui-spacing-xs) 0;
    color: var(--chirpui-text-muted);
}

.chirpui-nav-tree__text--leaf {
    padding-inline-start: var(--chirpui-spacing);
}

/* Calendar */
.chirpui-calendar {
    max-width: 24rem;
}

.chirpui-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--chirpui-spacing);
}

.chirpui-calendar__title {
    margin: 0;
    font-size: var(--chirpui-font-lg);
}

.chirpui-calendar__nav {
    display: flex;
    gap: var(--chirpui-spacing-sm);
}

.chirpui-calendar__nav-link {
    color: var(--chirpui-accent);
    text-decoration: none;
}

.chirpui-calendar__nav-link:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-calendar__nav-link:hover {
    text-decoration: underline;
}

.chirpui-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-xs);
    color: var(--chirpui-text-muted);
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--chirpui-spacing-xs);
}

.chirpui-calendar__day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--chirpui-spacing-xs);
    background: var(--chirpui-bg-subtle);
    border-radius: var(--chirpui-radius-sm);
    font-size: var(--chirpui-font-sm);
}

.chirpui-calendar__day--empty {
    background: transparent;
    visibility: hidden;
}

.chirpui-calendar__day-num {
    font-weight: var(--chirpui-ui-font-weight-medium);
}

.chirpui-calendar__event {
    font-size: var(--chirpui-font-xs);
    color: var(--chirpui-accent);
    text-decoration: none;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
}

/* === partials/058_toast.css === */
@layer chirpui.component {
/* ==========================================================================
   Toast
   ========================================================================== */

.chirpui-toast-container {
    position: fixed;
    top: var(--chirpui-spacing);
    right: var(--chirpui-spacing);
    z-index: var(--chirpui-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-sm);
    max-width: var(--chirpui-toast-width);
}

.chirpui-toast {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--chirpui-spacing-sm);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    box-shadow: var(--chirpui-shadow-md);
    transition: opacity var(--chirpui-transition), transform var(--chirpui-transition);
    @starting-style {
        opacity: 0;
        transform: translateY(8px);
    }
}

.chirpui-toast--info    { border-color: var(--chirpui-alert-info-border); background: var(--chirpui-alert-info-bg); }
.chirpui-toast--success { border-color: var(--chirpui-alert-success-border); background: var(--chirpui-alert-success-bg); }
.chirpui-toast--warning { border-color: var(--chirpui-alert-warning-border); background: var(--chirpui-alert-warning-bg); }
.chirpui-toast--error   { border-color: var(--chirpui-alert-error-border); background: var(--chirpui-alert-error-bg); }

.chirpui-toast__message {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chirpui-toast__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    margin-inline-start: var(--chirpui-spacing-sm);
    padding: 0;
    flex-shrink: 0;
}

.chirpui-toast__close:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}
}

/* === partials/059_table.css === */
@layer chirpui.component {
/* ==========================================================================
   Table
   ========================================================================== */

/* .chirpui-table-wrap is the scroll container — a sibling block to
   .chirpui-table, so it stays flat (outside the .chirpui-table @scope below). */
.chirpui-table-wrap {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.chirpui-table-wrap--sticky .chirpui-table__head {
    position: sticky;
    top: 0;
    z-index: var(--chirpui-z-sticky);
    background: var(--chirpui-surface);
    /* Directional seam (#200): a bottom shadow communicates that rows scroll
       UNDER the pinned header — without it the band reads as a flat wireframe
       once content slides beneath. Token-derived from --chirpui-border so it
       tracks the theme (light/dark) with no new color token. */
    box-shadow: 0 4px 6px -4px color-mix(in srgb, var(--chirpui-border) 70%, transparent);
}

/* Sticky first column (#200): the corner cell (top + inline-start intersection)
   must out-stack both sticky zones, hence the dedicated --chirpui-z-sticky-corner
   token. Pinned cells need a solid background so scrolled content does not show
   through. These rules cross .chirpui-table-wrap and .chirpui-table boundaries,
   so they live flat here rather than inside the .chirpui-table scope. */
.chirpui-table-wrap--sticky .chirpui-table--sticky-col .chirpui-table__head .chirpui-table__th:first-child {
    z-index: var(--chirpui-z-sticky-corner);
}

.chirpui-table__caption:empty {
    display: none;
}

@layer chirpui.component {
    @scope (.chirpui-table) to (.chirpui-table .chirpui-table) {
        :scope {
            width: 100%;
            min-width: 100%;
            border-collapse: collapse;
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            overflow-wrap: anywhere;
        }

        .chirpui-table__body {
            vertical-align: inherit;
        }

        .chirpui-table__th,
        .chirpui-table__td {
            box-sizing: border-box;
            padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
            text-align: left;
            border-bottom: 1px solid var(--chirpui-border);
            vertical-align: top;
        }

        .chirpui-table__th--actions,
        .chirpui-table__td--actions,
        .chirpui-table__td:has(.chirpui-row-actions__trigger) {
            width: 1%;
            white-space: normal;
            text-align: right;
        }

        .chirpui-table__td > :where(:not(script, style, template)) {
            max-inline-size: 100%;
            margin-block: 0;
        }

        .chirpui-table__td:not(.chirpui-table__td--actions):not(:has(.chirpui-row-actions__trigger))
            > :where(:not(script, style, template))
            + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-spacing-2xs);
        }

        .chirpui-table__td :where(a, code) {
            overflow-wrap: anywhere;
        }

        .chirpui-table__td--actions > :where(.chirpui-cluster, .chirpui-dropdown, .chirpui-btn, .chirpui-icon-btn),
        .chirpui-table__td:has(.chirpui-row-actions__trigger)
            > :where(.chirpui-cluster, .chirpui-dropdown, .chirpui-btn, .chirpui-icon-btn) {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: var(--chirpui-spacing-xs);
            max-inline-size: 100%;
            margin-block: 0;
        }

        .chirpui-table__th {
            font-weight: var(--chirpui-ui-font-weight-semibold);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-tight);
            color: var(--chirpui-text-muted);
        }

        /* Sort button (#200): the click target inside a sortable <th>. The
           orphaned hook is finally emitted by data_grid's grid_head_cell. */
        .chirpui-table__sort {
            display: inline-flex;
            align-items: center;
            gap: var(--chirpui-spacing-2xs);
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
        }

        .chirpui-table__sort:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }

        .chirpui-table__sort:hover {
            text-decoration: underline;
        }

        /* aria-sort drives the caret; the glyph itself is aria-hidden so the
           screen reader announces sort state once, via aria-sort only. */
        .chirpui-table__sort-indicator {
            display: inline-block;
            inline-size: 0.75em;
            color: var(--chirpui-text-muted);
            transition: color var(--chirpui-motion-fast) var(--chirpui-ease-standard);
        }

        .chirpui-table__th[aria-sort="ascending"] .chirpui-table__sort-indicator::after {
            content: "\25B2";
            color: var(--chirpui-text);
        }

        .chirpui-table__th[aria-sort="descending"] .chirpui-table__sort-indicator::after {
            content: "\25BC";
            color: var(--chirpui-text);
        }

        .chirpui-table__sort-label {
            display: inline;
        }

        /* Selection column (#200) */
        .chirpui-table__th--select,
        .chirpui-table__td--select {
            inline-size: 1%;
            white-space: nowrap;
            text-align: center;
            vertical-align: middle;
        }

        .chirpui-table__select-all,
        .chirpui-table__select-row {
            cursor: pointer;
            accent-color: var(--chirpui-accent);
            vertical-align: middle;
        }

        .chirpui-table__row--selected {
            background: var(--chirpui-state-surface-active);
        }

        /* Sticky first column (#200): pin the first cell of each row. Solid
           background prevents body content from showing through on scroll.
           Below the sticky header; the corner override (flat, above) wins.
           The inline-end shadow is the scroll seam — without it the pinned
           white column is invisible against scrolled white cells (the headline
           "premium not wireframe" gap). Token-derived from --chirpui-border so
           it tracks the theme with no new color token. */
        &.chirpui-table--sticky-col :is(.chirpui-table__th, .chirpui-table__td):first-child {
            position: sticky;
            inset-inline-start: 0;
            z-index: var(--chirpui-z-sticky-col);
            background: var(--chirpui-surface);
            box-shadow: 4px 0 6px -4px color-mix(in srgb, var(--chirpui-border) 70%, transparent);
        }

        &.chirpui-table--striped .chirpui-table__row:nth-child(even) {
            background: var(--chirpui-bg-subtle);
        }

        .chirpui-table__avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            margin-inline-end: var(--chirpui-spacing-xs);
            font-size: 0.75rem;
            background: var(--chirpui-bg-subtle);
            border-radius: var(--chirpui-radius-sm);
        }

        &.chirpui-table--compact .chirpui-table__th,
        &.chirpui-table--compact .chirpui-table__td {
            padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
            font-size: var(--chirpui-font-sm);
        }

        /* Per-column alignment utilities */
        .chirpui-table__th--left,
        .chirpui-table__td--left { text-align: left; }
        .chirpui-table__th--center,
        .chirpui-table__td--center { text-align: center; }
        .chirpui-table__th--right,
        .chirpui-table__td--right { text-align: right; }

        .chirpui-table__td--right,
        .chirpui-table__th--right {
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 40rem) {
            :scope {
                width: max-content;
                min-width: 100%;
            }

            .chirpui-table__th,
            .chirpui-table__td {
                max-width: min(18rem, 72vw);
                padding: var(--chirpui-spacing-sm);
                overflow-wrap: anywhere;
            }
        }
    }
}

/* Params table (API docs) */
@scope (.chirpui-params-table) to (.chirpui-params-table .chirpui-params-table) {
    :scope {
        display: grid;
        gap: var(--chirpui-spacing-sm);
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    :scope > :where(:not(script, style, template)) {
        margin-block: 0;
    }

    .chirpui-params-table__title {
        margin: 0;
        font-size: var(--chirpui-font-lg);
        font-weight: var(--chirpui-ui-font-weight-semibold);
        overflow-wrap: anywhere;
    }

    .chirpui-params-table__wrap {
        box-sizing: border-box;
        max-inline-size: 100%;
        min-inline-size: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .chirpui-params-table__table {
        width: 100%;
        min-width: max-content;
        border-collapse: collapse;
        font-size: var(--chirpui-font-sm);
    }

    .chirpui-params-table__th,
    .chirpui-params-table__td {
        padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
        text-align: left;
        border-bottom: 1px solid var(--chirpui-border);
        vertical-align: top;
    }

    .chirpui-params-table__th {
        font-weight: var(--chirpui-ui-font-weight-semibold);
        color: var(--chirpui-text-muted);
    }

    .chirpui-params-table__th--name,
    .chirpui-params-table__td--name {
        min-width: 8rem;
    }

    .chirpui-params-table__th--type,
    .chirpui-params-table__td--type {
        min-width: 6rem;
    }

    .chirpui-params-table__th--default,
    .chirpui-params-table__td--default {
        min-width: 5rem;
    }

    .chirpui-params-table__td--description {
        min-width: min(22rem, 72vw);
        max-width: min(36rem, 80vw);
        overflow-wrap: anywhere;
    }

    .chirpui-params-table__code {
        display: inline-block;
        max-inline-size: 100%;
        padding: 0.1em 0.3em;
        overflow-wrap: anywhere;
        border-radius: var(--chirpui-radius-sm);
        background: var(--chirpui-bg-subtle);
        font-family: ui-monospace, monospace;
        font-size: 0.9em;
        vertical-align: top;
    }

    .chirpui-params-table__code--muted {
        color: var(--chirpui-text-muted);
    }

    .chirpui-params-table__empty {
        color: var(--chirpui-text-muted);
    }
}

/* Signature (function/method signatures) */
@scope (.chirpui-signature) to (.chirpui-signature .chirpui-signature) {
    :scope {
        box-sizing: border-box;
        max-inline-size: 100%;
        min-inline-size: 0;
        margin: 0 0 var(--chirpui-spacing);
        padding: var(--chirpui-spacing);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        border-radius: var(--chirpui-radius);
        background: var(--chirpui-bg-subtle);
        font-size: var(--chirpui-font-sm);
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .chirpui-signature__code {
        display: block;
        min-inline-size: max-content;
        font-family: ui-monospace, monospace;
        white-space: pre;
    }
}

/* Index card (listing cards) */
.chirpui-index-card {
    display: block;
    padding: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}

.chirpui-index-card:hover {
    border-color: var(--chirpui-card-hover-border);
    box-shadow: var(--chirpui-card-hover-shadow);
}

.chirpui-index-card:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-index-card:active {
    box-shadow: none;
    border-color: var(--chirpui-accent);
}

.chirpui-index-card__header {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-index-card__badge {
    flex-shrink: 0;
    padding: 0.15rem 0.4rem;
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-ui-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    text-transform: uppercase;
    background: var(--chirpui-bg-subtle);
    border-radius: var(--chirpui-radius-sm);
    color: var(--chirpui-text-muted);
}

.chirpui-index-card__title {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-index-card__description {
    margin: 0;
    font-size: var(--chirpui-font-sm);
    color: var(--chirpui-text-muted);
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-selection-bar,
.chirpui-bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    background: var(--chirpui-bg-subtle);
    border-radius: var(--chirpui-radius);
    font-size: var(--chirpui-font-sm);
}

.chirpui-bulk-bar-wrapper:not(:empty) {
    margin-block-end: var(--chirpui-spacing-sm);
}

.chirpui-selection-bar__count,
.chirpui-bulk-bar__count {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    margin-inline-end: auto;
}

.chirpui-selection-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    flex-wrap: wrap;
}
}

/* === partials/060_pagination.css === */
@layer chirpui.component {
/* ==========================================================================
   Pagination
   ========================================================================== */

.chirpui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    padding: 0 var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    text-decoration: none;
    color: inherit;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    transition: background var(--chirpui-transition);
}

.chirpui-pagination__link:hover:not(.chirpui-pagination__link--disabled):not(.chirpui-pagination__link--active) {
    background: var(--chirpui-bg-subtle);
}

.chirpui-pagination__link:focus-visible:not(.chirpui-pagination__link--disabled) {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-pagination__link--active {
    color: var(--chirpui-accent);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
}

button.chirpui-pagination__link {
    background: none;
    font: inherit;
    line-height: inherit;
}

.chirpui-pagination__link--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.chirpui-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    color: var(--chirpui-text-muted);
    font-variant-numeric: tabular-nums;
}
}

/* === partials/061_alert.css === */
@layer chirpui.component {
/* ==========================================================================
   Alert
   ========================================================================== */

.chirpui-alert {
    --chirpui-alert-accent: var(--chirpui-info);
    display: flex;
    align-items: flex-start;
    gap: var(--chirpui-spacing-sm);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border: 1px solid color-mix(in srgb, var(--chirpui-alert-accent) 42%, var(--chirpui-border));
    border-inline-start-width: 0.25rem;
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-alert-info-bg);
    box-shadow: var(--chirpui-shadow-sm);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-alert--info    { --chirpui-alert-accent: var(--chirpui-info); background: var(--chirpui-alert-info-bg); }
.chirpui-alert--success { --chirpui-alert-accent: var(--chirpui-success); background: var(--chirpui-alert-success-bg); }
.chirpui-alert--warning { --chirpui-alert-accent: var(--chirpui-warning); background: var(--chirpui-alert-warning-bg); }
.chirpui-alert--error   { --chirpui-alert-accent: var(--chirpui-error); background: var(--chirpui-alert-error-bg); }
.chirpui-alert--danger  { --chirpui-alert-accent: var(--chirpui-danger); background: color-mix(in srgb, var(--chirpui-danger) 10%, transparent); }

/* Appearance axis */
.chirpui-alert--tonal {
    box-shadow: var(--chirpui-shadow-sm);
}

.chirpui-alert--outlined {
    background: transparent;
    box-shadow: none;
}

.chirpui-alert--filled {
    background: color-mix(in srgb, var(--chirpui-alert-accent) 88%, var(--chirpui-surface));
    border-color: var(--chirpui-alert-accent);
    color: var(--chirpui-on-accent);
}

.chirpui-alert--filled .chirpui-alert__icon {
    background: color-mix(in srgb, var(--chirpui-on-accent) 18%, transparent);
    color: var(--chirpui-on-accent);
}

.chirpui-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--chirpui-radius-full, 999px);
    background: color-mix(in srgb, var(--chirpui-alert-accent) 18%, transparent);
    color: var(--chirpui-alert-accent);
    font-size: 0.95em;
    line-height: 1;
    flex-shrink: 0;
}

.chirpui-alert__body {
    flex: 1;
    min-width: 0;
}

.chirpui-alert > .chirpui-alert__body + .chirpui-alert__body {
    margin-block-start: var(--chirpui-spacing-sm);
}

.chirpui-alert__title {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-alert__actions {
    margin-top: var(--chirpui-spacing-sm);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-alert__actions:empty {
    display: none;
}

.chirpui-alert__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    margin-inline-start: var(--chirpui-spacing-sm);
    padding: 0 var(--chirpui-spacing-2xs);
    color: var(--chirpui-text-muted);
}

.chirpui-alert__close:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

/* Collapsible alert (details/summary) */
.chirpui-alert[role="alert"] summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-width: 0;
}
.chirpui-alert[role="alert"] summary::-webkit-details-marker {
    display: none;
}

.chirpui-mt-sm { margin-top: var(--chirpui-spacing-sm); }
.chirpui-mt-md { margin-top: var(--chirpui-spacing-md); }
.chirpui-mb-md { margin-bottom: var(--chirpui-spacing-md); }

.chirpui-result-slot {
    margin-top: var(--chirpui-space-result-gap);
}

.chirpui-result-slot:empty {
    margin-top: 0;
}

.chirpui-result-slot--sm {
    margin-top: var(--chirpui-space-control-gap);
}

.chirpui-result-slot--sm:empty {
    margin-top: 0;
}
}

/* === partials/062_route-tabs.css === */
@layer chirpui.component {
/* ==========================================================================
   Route tabs — subsection navigation (route-backed, HTMX swap)
   ========================================================================== */

.chirpui-route-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-sm);
    border-bottom: 1px solid var(--chirpui-border);
    padding-bottom: 0;
}
.chirpui-route-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    color: var(--chirpui-text-muted);
    text-decoration: none;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    border-radius: var(--chirpui-radius-sm) var(--chirpui-radius-sm) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    background: transparent;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    transition: color var(--chirpui-transition), background var(--chirpui-transition),
        border-color var(--chirpui-transition);
}
.chirpui-route-tab:hover {
    color: var(--chirpui-text);
    background: var(--chirpui-surface-alt);
}
.chirpui-route-tab--active,
.chirpui-route-tab[aria-current="page"] {
    color: var(--chirpui-accent);
    background: var(--chirpui-primary-muted);
    border-color: var(--chirpui-border);
    border-bottom-color: var(--chirpui-bg);
    box-shadow: 0 -1px 0 0 var(--chirpui-accent);
}
.chirpui-route-tab__label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}
.chirpui-route-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    opacity: 0.85;
}
.chirpui-route-tab--active .chirpui-route-tab__icon,
.chirpui-route-tab[aria-current="page"] .chirpui-route-tab__icon {
    opacity: 1;
}
.chirpui-route-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    padding: var(--chirpui-spacing-2xs) 0.375rem;
    background: var(--chirpui-surface-alt);
    border-radius: 9999px;
    line-height: var(--chirpui-line-height-tight);
}
.chirpui-route-tab__badge--reserved {
    min-inline-size: 1.75rem;
    opacity: 0.58;
}
.chirpui-route-tab__badge--loading::before {
    content: "...";
}

@media (max-width: 40rem) {
    .chirpui-route-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin-inline: calc(-1 * var(--chirpui-spacing));
        padding-inline: var(--chirpui-spacing);
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .chirpui-route-tab {
        flex: 0 0 auto;
        min-block-size: var(--chirpui-control-touch-target);
        scroll-snap-align: start;
        white-space: nowrap;
    }
}
}

/* === partials/063_theme-toggle.css === */
@layer chirpui.component {
/* ==========================================================================
   Theme toggle
   ========================================================================== */

.chirpui-theme-toggle {
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    line-height: var(--chirpui-line-height-tight);
}
.chirpui-theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: var(--chirpui-ui-lg);
    line-height: var(--chirpui-line-height-tight);
    opacity: 0.85;
    font-family: var(--chirpui-ascii-font);
}
.chirpui-theme-toggle:hover .chirpui-theme-toggle__icon {
    opacity: 1;
}

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-theme-toggle {
        min-inline-size: var(--chirpui-control-touch-target);
        min-block-size: var(--chirpui-control-touch-target);
    }
}
}

/* === partials/064_dropdown-menu.css === */
@layer chirpui.component {
/* ==========================================================================
   Dropdown menu (items-based, JS-driven)
   ========================================================================== */

.chirpui-dropdown__trigger[data-chirpui-dropdown-trigger] {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-block-size: var(--chirpui-control-block-size);
}
.chirpui-dropdown__menu[hidden] {
    display: none;
}
.chirpui-dropdown__menu:not([hidden]) {
    display: block;
}
.chirpui-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    width: 100%;
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border: none;
    background: none;
    color: var(--chirpui-text);
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    text-align: left;
    cursor: pointer;
    border-radius: var(--chirpui-radius-sm);
    text-decoration: none;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}
.chirpui-dropdown__item:hover,
.chirpui-dropdown__item:focus {
    background: var(--chirpui-muted-bg);
}
.chirpui-dropdown__item--danger {
    color: var(--chirpui-error);
}
.chirpui-dropdown__item--danger:hover {
    background: var(--chirpui-error-muted);
}
.chirpui-dropdown__divider {
    height: 1px;
    background: var(--chirpui-border);
    margin: var(--chirpui-spacing-xs) 0;
}
.chirpui-dropdown__icon {
    flex: 0 0 auto;
    opacity: 0.8;
}
.chirpui-dropdown__caret {
    font-size: var(--chirpui-font-xs);
    line-height: 1;
    opacity: 0.7;
}
.chirpui-dropdown--split {
    display: inline-flex;
}
.chirpui-dropdown--select {
    display: inline-block;
    max-inline-size: 100%;
}
.chirpui-dropdown__split-primary {
    min-block-size: var(--chirpui-control-block-size);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.chirpui-dropdown__trigger--split {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    border: 1px solid var(--chirpui-primary);
    background: var(--chirpui-primary);
    color: var(--chirpui-on-accent);
    padding: 0 var(--chirpui-spacing-sm);
    border-top-right-radius: var(--chirpui-radius-sm);
    border-bottom-right-radius: var(--chirpui-radius-sm);
    border-left: none;
}
.chirpui-dropdown__trigger--split:hover {
    background: var(--chirpui-accent-hover);
    border-color: var(--chirpui-accent-hover);
}
.chirpui-dropdown__trigger--select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chirpui-spacing-sm);
    max-inline-size: 100%;
    min-block-size: var(--chirpui-control-block-size);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    background: var(--chirpui-surface);
}
.chirpui-dropdown__selected {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}
.chirpui-dropdown__item--select {
    justify-content: flex-start;
}
.chirpui-dropdown__item--selected {
    background: var(--chirpui-primary-muted);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}
}

/* === partials/065_tray.css === */
/* ==========================================================================
   Tray (slide-out panel) — @scope + @layer envelope.

   Upper scope boundary `.chirpui-tray .chirpui-tray` stops outer-tray rules
   at the first nested tray (defensive — tray-in-tray is unlikely but cheap to
   scope). See docs/plans/PLAN-css-scope-and-layer.md § Hardening batch 1.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-tray) to (.chirpui-tray .chirpui-tray) {
        :scope {
            position: fixed;
            inset: 0;
            z-index: var(--chirpui-z-tray);
        }

        :scope.chirpui-tray--closed {
            pointer-events: none;
        }

        :scope.chirpui-tray--open {
            pointer-events: auto;
        }

        .chirpui-tray__backdrop {
            position: absolute;
            inset: 0;
            background: var(--chirpui-smoke-bg);
            transition: opacity var(--chirpui-transition);
        }

        :scope.chirpui-tray--closed .chirpui-tray__backdrop {
            opacity: 0;
        }

        :scope.chirpui-tray--open .chirpui-tray__backdrop {
            opacity: 1;
        }

        .chirpui-tray__panel {
            position: absolute;
            top: 0;
            bottom: 0;
            width: min(90vw, 24rem);
            max-width: 24rem;
            background: var(--chirpui-surface);
            border: 1px solid var(--chirpui-border);
            box-shadow: var(--chirpui-elevation-overlay);
            display: flex;
            flex-direction: column;
            transition: transform var(--chirpui-transition);
            overflow: clip;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        :scope.chirpui-tray--right .chirpui-tray__panel {
            right: 0;
            transform: translateX(100%);
        }

        :scope.chirpui-tray--right.chirpui-tray--open .chirpui-tray__panel {
            transform: translateX(0);
        }

        :scope.chirpui-tray--left .chirpui-tray__panel {
            left: 0;
            transform: translateX(-100%);
        }

        :scope.chirpui-tray--left.chirpui-tray--open .chirpui-tray__panel {
            transform: translateX(0);
        }

        :scope.chirpui-tray--bottom .chirpui-tray__panel {
            left: 0;
            right: 0;
            top: auto;
            width: 100%;
            max-width: none;
            max-height: 70dvh;
            transform: translateY(100%);
        }

        :scope.chirpui-tray--bottom.chirpui-tray--open .chirpui-tray__panel {
            transform: translateY(0);
        }

        .chirpui-tray__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--chirpui-space-control-gap);
            padding: var(--chirpui-spacing) var(--chirpui-spacing);
            border-bottom: 1px solid var(--chirpui-border);
            flex-shrink: 0;
        }

        .chirpui-tray__title {
            flex: 1 1 auto;
            min-width: 0;
            margin-block: 0;
            font-size: var(--chirpui-font-base);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            overflow-wrap: anywhere;
        }

        .chirpui-tray__close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-inline-size: var(--chirpui-control-block-size-sm);
            min-block-size: var(--chirpui-control-block-size-sm);
            background: none;
            border: none;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            color: var(--chirpui-text-muted);
            padding: 0;
            &:hover {
                color: var(--chirpui-text);
            }
            &:focus-visible {
                outline: var(--chirpui-state-focus-outline);
                outline-offset: var(--chirpui-state-focus-offset);
            }
        }

        .chirpui-tray__body {
            flex: 1;
            overflow-y: auto;
            padding: var(--chirpui-spacing);
            min-width: 0;
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
            overflow-wrap: anywhere;
        }

        .chirpui-tray__body > :where(:not(script, style, template)) {
            margin-block: 0;
        }

        .chirpui-tray__body > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
            margin-block-start: var(--chirpui-spacing-sm);
        }
    }
}

/* === partials/066_modal-overlay.css === */
@layer chirpui.component {
/* ==========================================================================
   Modal overlay (div-based, for modal_overlay component)
   ========================================================================== */

.chirpui-modal[data-modal-id] {
    position: fixed;
    inset: 0;
    z-index: var(--chirpui-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--chirpui-spacing);
}
.chirpui-modal[data-modal-id].chirpui-modal--closed {
    pointer-events: none;
}
.chirpui-modal[data-modal-id].chirpui-modal--closed .chirpui-modal__backdrop {
    opacity: 0;
}
.chirpui-modal[data-modal-id].chirpui-modal--open .chirpui-modal__backdrop {
    opacity: 1;
}
.chirpui-modal[data-modal-id].chirpui-modal--open {
    pointer-events: auto;
}
.chirpui-modal[data-modal-id] .chirpui-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--chirpui-smoke-bg);
    transition: opacity var(--chirpui-transition);
}
.chirpui-modal[data-modal-id] .chirpui-modal__panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    max-height: 90dvh;
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    box-shadow: var(--chirpui-elevation-overlay);
    display: flex;
    flex-direction: column;
    overflow: clip;
    transition: transform var(--chirpui-transition);
}
.chirpui-modal[data-modal-id].chirpui-modal--closed .chirpui-modal__panel {
    transform: scale(0.95);
    opacity: 0;
}
.chirpui-modal[data-modal-id].chirpui-modal--open .chirpui-modal__panel {
    transform: scale(1);
    opacity: 1;
}

}

/* === partials/067_tabs-panels.css === */
@layer chirpui.component {
/* ==========================================================================
   Tabs panels (button-based)
   ========================================================================== */

.chirpui-tabs[data-chirpui-tabs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-xs);
    border-bottom: 1px solid var(--chirpui-border);
    margin-bottom: var(--chirpui-spacing);
}
.chirpui-tabs__tab {
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--chirpui-text-muted);
    font: inherit;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    cursor: pointer;
    margin-bottom: -1px;
    overflow-wrap: anywhere;
}
.chirpui-tabs__tab:hover {
    color: var(--chirpui-text);
}
.chirpui-tabs__tab--active,
.chirpui-tabs__tab[aria-selected="true"] {
    color: var(--chirpui-accent);
    border-bottom-color: var(--chirpui-accent);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-tab-panel[hidden] {
    display: none;
}
}

/* === partials/068_data-theme-support.css === */
@layer chirpui.component {
/* ==========================================================================
   data-theme support (for theme toggle)
   ========================================================================== */

[data-theme="light"] {
    color-scheme: light;
}
[data-theme="dark"] {
    color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    [data-theme="system"] {
        color-scheme: light;
    }
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        color-scheme: dark;
    }
}

}

/* === partials/069_data-style-support.css === */
@layer chirpui.component {
/* ==========================================================================
   data-style support (artistic preset axis)
   ========================================================================== */

[data-style="default"] {
    --chirpui-neu-surface: var(--chirpui-surface);
}

/* --- Neumorphic tokens (light) --- */
[data-style="neumorphic"] {
    --chirpui-neu-surface: color-mix(in srgb, var(--chirpui-bg-subtle) 88%, var(--chirpui-surface));
    --chirpui-neu-surface-alt: color-mix(in srgb, var(--chirpui-neu-surface) 82%, var(--chirpui-bg));
    --chirpui-neu-raised-sm:
        -4px -4px 10px color-mix(in srgb, white 78%, transparent),
        5px 5px 11px color-mix(in srgb, black 14%, transparent);
    --chirpui-neu-raised-md:
        -6px -6px 14px color-mix(in srgb, white 76%, transparent),
        8px 8px 16px color-mix(in srgb, black 17%, transparent);
    --chirpui-neu-raised-lg:
        -8px -8px 18px color-mix(in srgb, white 74%, transparent),
        11px 11px 22px color-mix(in srgb, black 20%, transparent);
    --chirpui-neu-raised: var(--chirpui-neu-raised-md);
    --chirpui-neu-inset:
        inset -2px -2px 4px color-mix(in srgb, white 74%, transparent),
        inset 3px 3px 7px color-mix(in srgb, black 15%, transparent);
    --chirpui-neu-pressed:
        inset -3px -3px 6px color-mix(in srgb, white 68%, transparent),
        inset 4px 4px 9px color-mix(in srgb, black 22%, transparent);
    --chirpui-neu-highlight-border: color-mix(in srgb, white 72%, var(--chirpui-border));
    --chirpui-neu-lowlight-border: color-mix(in srgb, black 26%, var(--chirpui-border));
    --chirpui-neu-chamfer: color-mix(in srgb, white 55%, transparent);

    /* Gradient tokens — eliminates repeated linear-gradient() declarations */
    --chirpui-neu-gradient-raised: linear-gradient(
        145deg,
        color-mix(in srgb, white 30%, var(--chirpui-neu-surface)),
        var(--chirpui-neu-surface-alt)
    );
    --chirpui-neu-gradient-control: linear-gradient(
        145deg,
        color-mix(in srgb, white 24%, var(--chirpui-neu-surface)),
        var(--chirpui-neu-surface-alt)
    );

    /* Semantic remap for broad component adoption */
    --chirpui-elevation-1: var(--chirpui-neu-raised-sm);
    --chirpui-elevation-2: var(--chirpui-neu-raised-md);
    --chirpui-elevation-3: var(--chirpui-neu-raised-lg);
    --chirpui-elevation-4: var(--chirpui-neu-raised-lg);
    --chirpui-elevation-card-rest: var(--chirpui-neu-raised-sm);
    --chirpui-elevation-card-hover: var(--chirpui-neu-raised-md);
    --chirpui-elevation-floating: var(--chirpui-neu-raised-md);
    --chirpui-elevation-overlay: var(--chirpui-neu-raised-lg);
    --chirpui-elevation-topbar: var(--chirpui-neu-raised-sm);

    --chirpui-state-surface-hover: color-mix(in srgb, var(--chirpui-neu-surface) 90%, var(--chirpui-bg));
    --chirpui-state-surface-active: color-mix(in srgb, var(--chirpui-neu-surface) 82%, var(--chirpui-bg));
    --chirpui-state-border-hover: var(--chirpui-neu-lowlight-border);
    --chirpui-state-border-active: var(--chirpui-neu-lowlight-border);
}

/* --- Neumorphic tokens (dark) --- */
[data-theme="dark"][data-style="neumorphic"] {
    --chirpui-neu-surface: color-mix(in srgb, var(--chirpui-surface) 88%, var(--chirpui-bg-subtle));
    --chirpui-neu-surface-alt: color-mix(in srgb, var(--chirpui-neu-surface) 76%, var(--chirpui-bg));
    --chirpui-neu-raised-sm:
        -3px -3px 8px color-mix(in srgb, white 12%, transparent),
        5px 5px 11px color-mix(in srgb, black 46%, transparent);
    --chirpui-neu-raised-md:
        -5px -5px 11px color-mix(in srgb, white 14%, transparent),
        7px 7px 15px color-mix(in srgb, black 50%, transparent);
    --chirpui-neu-raised-lg:
        -7px -7px 15px color-mix(in srgb, white 16%, transparent),
        10px 10px 20px color-mix(in srgb, black 56%, transparent);
    --chirpui-neu-raised: var(--chirpui-neu-raised-md);
    --chirpui-neu-inset:
        inset -2px -2px 5px color-mix(in srgb, white 14%, transparent),
        inset 3px 3px 8px color-mix(in srgb, black 52%, transparent);
    --chirpui-neu-pressed:
        inset -3px -3px 7px color-mix(in srgb, white 11%, transparent),
        inset 4px 4px 10px color-mix(in srgb, black 58%, transparent);
    --chirpui-neu-highlight-border: color-mix(in srgb, white 14%, var(--chirpui-border));
    --chirpui-neu-lowlight-border: color-mix(in srgb, black 36%, var(--chirpui-border));
    --chirpui-neu-gradient-raised: linear-gradient(
        145deg,
        color-mix(in srgb, white 10%, var(--chirpui-neu-surface)),
        var(--chirpui-neu-surface-alt)
    );
    --chirpui-neu-gradient-control: linear-gradient(
        145deg,
        color-mix(in srgb, white 8%, var(--chirpui-neu-surface)),
        color-mix(in srgb, var(--chirpui-neu-surface-alt) 92%, var(--chirpui-bg))
    );
    --chirpui-state-surface-hover: color-mix(in srgb, var(--chirpui-neu-surface) 92%, var(--chirpui-bg));
    --chirpui-state-surface-active: color-mix(in srgb, var(--chirpui-neu-surface) 84%, var(--chirpui-bg));
}

/* --- Raised containers (surfaces, cards, shell regions, overlays) --- */
[data-style="neumorphic"] :is(
        .chirpui-surface:not(.chirpui-surface--accent):not(.chirpui-surface--gradient-subtle):not(
                .chirpui-surface--gradient-accent
            ):not(.chirpui-surface--gradient-border):not(.chirpui-surface--gradient-mesh):not(
                .chirpui-surface--glass
            ):not(.chirpui-surface--frosted):not(.chirpui-surface--smoke):not(
                .chirpui-surface--deep
            ):not(.chirpui-surface--cornered):not(.chirpui-surface--noise-overlay):not(
                .chirpui-surface--static-overlay
            ),
        .chirpui-card:not(.chirpui-card--glass):not(.chirpui-card--gradient-border),
        .chirpui-app-shell__topbar,
        .chirpui-app-shell__sidebar,
        .chirpui-app-shell__main,
        .chirpui-dropdown__menu,
        .chirpui-popover__panel,
        .chirpui-tooltip__bubble
    ) {
    background: var(--chirpui-neu-gradient-raised);
    border: 1px solid var(--chirpui-neu-highlight-border);
    border-bottom-color: var(--chirpui-neu-lowlight-border);
    border-right-color: var(--chirpui-neu-lowlight-border);
    box-shadow: var(--chirpui-neu-raised);
}

/* Overlay panels (nested selectors can't go in top-level :is()) */
[data-style="neumorphic"] .chirpui-tray[data-tray-id] .chirpui-tray__panel,
[data-style="neumorphic"] .chirpui-modal[data-modal-id] .chirpui-modal__panel {
    background: var(--chirpui-neu-gradient-raised);
    border: 1px solid var(--chirpui-neu-highlight-border);
    border-bottom-color: var(--chirpui-neu-lowlight-border);
    border-right-color: var(--chirpui-neu-lowlight-border);
    box-shadow: var(--chirpui-neu-raised);
}

[data-style="neumorphic"] .chirpui-tooltip__bubble::after {
    background: var(--chirpui-neu-gradient-raised);
}

/* Stat uses control gradient (lighter white mix) */
[data-style="neumorphic"] .chirpui-stat {
    background: var(--chirpui-neu-gradient-control);
    border: 0;
    box-shadow: var(--chirpui-neu-raised-sm);
}

/* --- Shell region overrides --- */
[data-style="neumorphic"] .chirpui-app-shell__main {
    background: color-mix(in srgb, var(--chirpui-neu-surface-alt) 80%, var(--chirpui-bg));
    padding: calc(var(--chirpui-spacing-lg) + var(--chirpui-spacing-xs));
}

[data-style="neumorphic"] :is(.chirpui-app-shell__sidebar, .chirpui-sidebar) {
    border-right-color: transparent;
}

[data-style="neumorphic"] .chirpui-app-shell__topbar {
    border-bottom-color: transparent;
}

[data-style="neumorphic"] .chirpui-sidebar__section {
    padding: var(--chirpui-spacing) var(--chirpui-spacing);
}

[data-style="neumorphic"] .chirpui-sidebar__link {
    padding-inline: var(--chirpui-spacing);
    margin-inline-start: var(--chirpui-spacing);
    border-radius: var(--chirpui-radius-sm);
}

/* --- Card internals --- */
[data-style="neumorphic"] .chirpui-card :is(.chirpui-card__header, .chirpui-card__footer, .chirpui-card__footer-wrap) {
    border-color: color-mix(in srgb, var(--chirpui-neu-lowlight-border) 40%, transparent);
}

[data-style="neumorphic"] .chirpui-card :is(.chirpui-card__footer, .chirpui-card__footer-wrap, .chirpui-card__body) {
    background: transparent;
}

[data-style="neumorphic"] .chirpui-card__body :is(.chirpui-surface, .chirpui-card) {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--chirpui-neu-lowlight-border) 45%, transparent);
    background: color-mix(in srgb, var(--chirpui-neu-surface-alt) 94%, var(--chirpui-bg));
}

[data-style="neumorphic"] .chirpui-card__body .chirpui-stat {
    background: transparent;
    box-shadow: none;
    border: 0;
    min-height: 100%;
    justify-content: center;
}

[data-style="neumorphic"] .chirpui-card .chirpui-surface {
    border-color: var(--chirpui-neu-lowlight-border);
}

[data-style="neumorphic"] .chirpui-card .chirpui-stat {
    border: 0;
}

[data-style="neumorphic"] :is(.chirpui-card, .chirpui-surface) .chirpui-stat :is(.chirpui-card, .chirpui-surface, .chirpui-stat) {
    box-shadow: none;
}

/* Depth budget: avoid stacked raised shadows in nested containers */
[data-style="neumorphic"] :is(.chirpui-card, .chirpui-surface, .chirpui-stat) > :is(
        .chirpui-card,
        .chirpui-surface,
        .chirpui-stat
    ) {
    box-shadow: var(--chirpui-neu-inset);
    background: color-mix(in srgb, var(--chirpui-neu-surface-alt) 88%, var(--chirpui-bg));
    border-color: var(--chirpui-neu-lowlight-border);
}

/* Card-body embedded inputs */
[data-style="neumorphic"] .chirpui-card__body :is(
        textarea.chirpui-field__input,
        .chirpui-chat-input__field,
        .chirpui-tag-input__add-field
    ) {
    background: color-mix(in srgb, var(--chirpui-neu-surface-alt) 90%, var(--chirpui-bg));
    border-color: color-mix(in srgb, var(--chirpui-neu-lowlight-border) 50%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, black 18%, transparent);
}

[data-theme="dark"][data-style="neumorphic"] .chirpui-card__body :is(
        textarea.chirpui-field__input,
        .chirpui-chat-input__field,
        .chirpui-tag-input__add-field
    ) {
    background: color-mix(in srgb, var(--chirpui-neu-surface-alt) 84%, var(--chirpui-bg));
    border-color: color-mix(in srgb, var(--chirpui-neu-lowlight-border) 55%, transparent);
}

/* --- Controls and interactive elements --- */
[data-style="neumorphic"] :is(
        .chirpui-btn:not(.chirpui-btn--primary):not(.chirpui-btn--danger):not(.chirpui-btn--ghost),
        .chirpui-field__input,
        .chirpui-field__file,
        .chirpui-segmented,
        .chirpui-segmented__label,
        .chirpui-tabs__tab,
        .chirpui-sidebar__link,
        .chirpui-sidebar-toggle,
        .chirpui-popover__trigger,
        .chirpui-split-btn__trigger,
        .chirpui-tag
    ) {
    background: var(--chirpui-neu-gradient-control);
    border-color: var(--chirpui-neu-highlight-border);
    box-shadow: var(--chirpui-neu-raised-sm);
}

/* Primary/danger buttons — inset chamfer + deep shadow */
[data-style="neumorphic"] :is(
        .chirpui-btn--primary,
        .chirpui-btn--danger,
        .chirpui-split-btn__primary.chirpui-btn--primary
            + .chirpui-split-btn__dropdown
            .chirpui-split-btn__trigger
    ) {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
        0 8px 14px color-mix(in srgb, black 28%, transparent);
}

[data-theme="dark"][data-style="neumorphic"] :is(
        .chirpui-btn--primary,
        .chirpui-btn--danger,
        .chirpui-split-btn__primary.chirpui-btn--primary
            + .chirpui-split-btn__dropdown
            .chirpui-split-btn__trigger
    ) {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
        0 8px 14px color-mix(in srgb, black 55%, transparent);
}

[data-style="neumorphic"] .chirpui-btn--ghost {
    box-shadow: none;
    background: transparent;
}

/* --- Tabs --- */
[data-style="neumorphic"] .chirpui-tabs__tab {
    border: 1px solid transparent;
    border-radius: var(--chirpui-radius-sm);
    margin-bottom: 0;
}

[data-style="neumorphic"] :is(.chirpui-tabs__tab[aria-selected="true"], .chirpui-tabs__tab--active) {
    box-shadow: var(--chirpui-neu-pressed);
    border-color: var(--chirpui-neu-lowlight-border);
    border-bottom-color: var(--chirpui-neu-lowlight-border);
    color: var(--chirpui-accent);
    background: color-mix(in srgb, var(--chirpui-accent) 12%, var(--chirpui-neu-surface-alt));
}

/* --- Control hover --- */
[data-style="neumorphic"] :is(
        .chirpui-btn:not(.chirpui-btn--primary):not(.chirpui-btn--danger):not(.chirpui-btn--ghost):hover:not(:disabled),
        .chirpui-field__input:hover:not(:disabled):not([readonly]),
        .chirpui-field__file:hover:not(:disabled):not([readonly]),
        .chirpui-tabs__tab:hover,
        .chirpui-sidebar__link:hover,
        .chirpui-sidebar-toggle:hover,
        .chirpui-popover__trigger:hover,
        .chirpui-split-btn__trigger:hover,
        .chirpui-tag:hover
    ) {
    border-color: var(--chirpui-neu-lowlight-border);
    box-shadow: var(--chirpui-neu-raised-md);
}

/* --- Control active / pressed --- */
[data-style="neumorphic"] :is(
        .chirpui-btn:not(.chirpui-btn--primary):not(.chirpui-btn--danger):active:not(:disabled),
        .chirpui-btn:not(.chirpui-btn--primary):not(.chirpui-btn--danger)[aria-pressed="true"],
        .chirpui-field__input:active:not(:disabled),
        .chirpui-field__file:active:not(:disabled),
        .chirpui-tabs__tab[aria-selected="true"],
        .chirpui-sidebar__link[aria-current="page"],
        .chirpui-sidebar__link--active,
        .chirpui-sidebar-toggle:active,
        .chirpui-popover__trigger:active,
        .chirpui-split-btn__trigger:active,
        a.chirpui-tag:active
    ) {
    box-shadow: var(--chirpui-neu-pressed);
}

[data-style="neumorphic"] .chirpui-split-btn {
    box-shadow: var(--chirpui-neu-raised-sm);
}

[data-style="neumorphic"] .chirpui-split-btn .chirpui-split-btn__primary,
[data-style="neumorphic"] .chirpui-split-btn .chirpui-split-btn__trigger {
    background: var(--chirpui-split-btn-bg);
    border-color: var(--chirpui-split-btn-border);
    color: var(--chirpui-split-btn-color);
    box-shadow: none;
}

[data-style="neumorphic"] .chirpui-split-btn .chirpui-split-btn__trigger {
    border-inline-start-color: var(--chirpui-split-btn-divider);
}

[data-style="neumorphic"] .chirpui-split-btn .chirpui-split-btn__primary:hover:not(:disabled),
[data-style="neumorphic"] .chirpui-split-btn .chirpui-split-btn__trigger:hover,
[data-style="neumorphic"] .chirpui-split-btn .chirpui-split-btn__trigger[aria-expanded="true"] {
    background: var(--chirpui-split-btn-bg-hover);
    box-shadow: none;
}

/* --- Active sidebar link accent --- */
[data-style="neumorphic"] :is(.chirpui-sidebar__link--active, .chirpui-sidebar__link[aria-current="page"]) {
    background: color-mix(in srgb, var(--chirpui-accent) 16%, var(--chirpui-neu-surface-alt));
    color: var(--chirpui-accent);
    border-color: color-mix(in srgb, var(--chirpui-accent) 42%, var(--chirpui-neu-lowlight-border));
}

/* --- Tag link states --- */
[data-style="neumorphic"] a.chirpui-tag {
    background: color-mix(in srgb, var(--chirpui-accent) 9%, var(--chirpui-neu-surface-alt));
    border-color: color-mix(in srgb, var(--chirpui-accent) 35%, var(--chirpui-neu-lowlight-border));
    color: var(--chirpui-accent);
}

[data-style="neumorphic"] a.chirpui-tag:hover {
    background: color-mix(in srgb, var(--chirpui-accent) 14%, var(--chirpui-neu-surface-alt));
    border-color: color-mix(in srgb, var(--chirpui-accent) 52%, var(--chirpui-neu-lowlight-border));
}

[data-style="neumorphic"] a.chirpui-tag:active {
    background: color-mix(in srgb, var(--chirpui-accent) 18%, var(--chirpui-neu-surface-alt));
}

/* --- Toggle --- */
[data-style="neumorphic"] .chirpui-toggle-wrap .chirpui-toggle__track {
    box-shadow: var(--chirpui-neu-inset);
    border: 1px solid var(--chirpui-neu-lowlight-border);
}

[data-theme="dark"][data-style="neumorphic"] .chirpui-toggle-wrap .chirpui-toggle__track {
    box-shadow:
        inset -1px -1px 3px color-mix(in srgb, white 6%, transparent),
        inset 2px 2px 5px color-mix(in srgb, black 44%, transparent);
}

[data-style="neumorphic"] .chirpui-toggle-wrap:has(.chirpui-toggle:checked) .chirpui-toggle__track {
    box-shadow: var(--chirpui-neu-pressed);
}

/* --- Data-display depth cues --- */
[data-style="neumorphic"] :is(
        .chirpui-progress__track,
        .chirpui-bar-chart__track,
        .chirpui-donut,
        .chirpui-description-list
    ) {
    background: color-mix(in srgb, var(--chirpui-neu-surface) 80%, var(--chirpui-bg));
    border: 1px solid var(--chirpui-neu-lowlight-border);
    box-shadow: var(--chirpui-neu-inset);
}

[data-theme="dark"][data-style="neumorphic"] :is(
        .chirpui-progress__track,
        .chirpui-bar-chart__track,
        .chirpui-donut,
        .chirpui-description-list
    ) {
    border-color: color-mix(in srgb, var(--chirpui-neu-lowlight-border) 60%, transparent);
    box-shadow:
        inset -1px -1px 3px color-mix(in srgb, white 8%, transparent),
        inset 2px 2px 5px color-mix(in srgb, black 46%, transparent);
}

[data-style="neumorphic"] :is(.chirpui-progress__fill, .chirpui-bar-chart__bar) {
    box-shadow:
        inset 0 1px 0 var(--chirpui-neu-chamfer),
        0 1px 1px color-mix(in srgb, black 20%, transparent);
}

[data-theme="dark"][data-style="neumorphic"] :is(.chirpui-progress__fill, .chirpui-bar-chart__bar) {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
        0 1px 1px color-mix(in srgb, black 45%, transparent);
}

/* --- Focus + motion --- */
[data-style="neumorphic"] :is(
        .chirpui-btn,
        .chirpui-field__input,
        .chirpui-tabs__tab,
        .chirpui-sidebar__link,
        .chirpui-sidebar-toggle,
        .chirpui-tag
    ):focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    [data-style="neumorphic"] .chirpui-btn:hover:not(:disabled),
    [data-style="neumorphic"] .chirpui-btn:active:not(:disabled) {
        transform: none;
    }
}

/* end neumorphic theme */
}

/* === partials/070_form-fields.css === */
@layer chirpui.component {
/* ==========================================================================
   Form Fields
   ========================================================================== */

.chirpui-form {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-space-stack-gap);
    min-width: 0;
}

.chirpui-field {
    margin-bottom: var(--chirpui-spacing);
}

.chirpui-field--dense {
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-field--dense .chirpui-field__label {
    margin-bottom: 2px;
    font-size: var(--chirpui-font-xs);
}

.chirpui-field--dense .chirpui-field__input {
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    font-size: var(--chirpui-font-sm);
}

.chirpui-field--file,
.chirpui-field--masked,
.chirpui-field--phone,
.chirpui-field--money {
    max-width: 100%;
}

/* Appearance axis */
.chirpui-field--filled .chirpui-field__input {
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-shadow-sm);
}

.chirpui-field--tonal .chirpui-field__input {
    background: var(--chirpui-bg-subtle);
    border-color: transparent;
}

.chirpui-field--outlined .chirpui-field__input {
    background: transparent;
    border-color: var(--chirpui-border);
}

.chirpui-field--ghost .chirpui-field__input {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Tone axis. Error remains validation state via .chirpui-field--error. */
.chirpui-field--neutral .chirpui-field__input {
    border-color: var(--chirpui-border);
}

.chirpui-field--primary .chirpui-field__input {
    border-color: var(--chirpui-accent);
}

.chirpui-field--success .chirpui-field__input {
    border-color: var(--chirpui-success);
}

.chirpui-field--warning .chirpui-field__input {
    border-color: var(--chirpui-warning);
}

.chirpui-field--danger .chirpui-field__input {
    border-color: var(--chirpui-danger);
}

.chirpui-field--info .chirpui-field__input {
    border-color: var(--chirpui-info);
}

.chirpui-field--primary .chirpui-field__label,
.chirpui-field--success .chirpui-field__label,
.chirpui-field--warning .chirpui-field__label,
.chirpui-field--danger .chirpui-field__label,
.chirpui-field--info .chirpui-field__label {
    color: var(--_field-tone, currentColor);
}

.chirpui-field--primary { --_field-tone: var(--chirpui-accent); }
.chirpui-field--success { --_field-tone: var(--chirpui-success); }
.chirpui-field--warning { --_field-tone: var(--chirpui-warning); }
.chirpui-field--danger { --_field-tone: var(--chirpui-danger); }
.chirpui-field--info { --_field-tone: var(--chirpui-info); }

.chirpui-field__label {
    display: block;
    margin-bottom: var(--chirpui-spacing-xs);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
}

.chirpui-field__label--inline {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    cursor: pointer;
}

.chirpui-field__required {
    color: var(--chirpui-alert-error-border);
}

.chirpui-field__input[type="checkbox"],
.chirpui-field__input[type="radio"] {
    accent-color: var(--chirpui-accent);
}

@supports (field-sizing: content) {
    textarea.chirpui-field__input {
        field-sizing: content;
        min-height: 3lh;
    }
}

.chirpui-field__input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    font: inherit;
    line-height: var(--chirpui-line-height-normal);
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
    transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}

.chirpui-field__input:not(textarea):not([type="checkbox"]):not([type="radio"]):not([multiple]) {
    min-block-size: var(--chirpui-control-block-size);
}

select.chirpui-field__input:not([multiple]) {
    appearance: none;
    padding-inline-end: calc(var(--chirpui-spacing-xl) + var(--chirpui-spacing-xs));
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - var(--chirpui-spacing)) 50%,
        calc(100% - (var(--chirpui-spacing) - 0.35rem)) 50%;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}

select.chirpui-field__input:not([multiple]):disabled {
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
}

@media (forced-colors: active) {
    select.chirpui-field__input:not([multiple]) {
        appearance: auto;
        padding-inline-end: var(--chirpui-spacing-sm);
        background-image: none;
    }
}

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-field__input:not([type="checkbox"]):not([type="radio"]) {
        min-block-size: var(--chirpui-control-touch-target);
    }
}

.chirpui-field__input:focus {
    outline: none;
    border-color: var(--chirpui-accent);
    box-shadow: 0 0 0 3px var(--chirpui-focus-ring);
}

.chirpui-field__input:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-field__input:disabled,
.chirpui-field__input[readonly] {
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text-muted);
    cursor: not-allowed;
    border-color: var(--chirpui-border);
}

.chirpui-field__input[readonly] {
    cursor: default;
    opacity: 1;
}

.chirpui-field__input:disabled {
    opacity: 0.5;
}

.chirpui-field--error .chirpui-field__input {
    border-color: var(--chirpui-alert-error-border);
}

@keyframes chirpui-field-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: no-preference) {
    .chirpui-field--error .chirpui-field__input {
        animation: chirpui-field-shake var(--chirpui-anim-quick) ease-in-out;
    }
}

@supports selector(:user-invalid) {
    .chirpui-field__input:user-invalid {
        border-color: var(--chirpui-alert-error-border);
    }
    .chirpui-field__input:user-valid:not(:placeholder-shown) {
        border-color: var(--chirpui-alert-success-border);
    }
}

.chirpui-field__hint {
    display: block;
    margin-top: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text-muted);
}

.chirpui-field__errors:empty {
    display: none;
}

.chirpui-field__error {
    display: block;
    margin-top: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    font-weight: var(--chirpui-ui-font-weight-medium);
    color: var(--chirpui-error);
}

/* Form error summary */
.chirpui-form-error-summary {
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    margin-bottom: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-alert-error-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-alert-error-bg);
    color: var(--chirpui-error);
}

.chirpui-form-error-summary[hidden] {
    display: none;
}

.chirpui-form-error-summary__heading {
    margin: 0 0 var(--chirpui-spacing-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-size: var(--chirpui-font-sm);
}

.chirpui-form-error-summary__list {
    margin: 0;
    padding-left: var(--chirpui-spacing);
    font-size: var(--chirpui-font-sm);
}

.chirpui-form-error-summary__list a {
    color: var(--chirpui-error);
    text-decoration: underline;
}

.chirpui-field__checkbox {
    flex: 0 0 auto;
    width: auto;
}

.chirpui-field--checkbox {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    box-sizing: border-box;
    margin-bottom: var(--chirpui-spacing-sm);
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    overflow-x: clip;
    overflow-wrap: anywhere;
}

.chirpui-field--checkbox > :where(:not(script, style, template)),
.chirpui-field--toggle > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-field--checkbox .chirpui-field__label--inline,
.chirpui-field--toggle .chirpui-field__label--inline {
    align-items: flex-start;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Radio group */
.chirpui-field--radio {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    box-sizing: border-box;
    border: none;
    padding: 0;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-field--radio > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-field--radio .chirpui-field__label {
    margin-block: 0;
}

.chirpui-field__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-sm);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.chirpui-field--radio-horizontal .chirpui-field__radio-group {
    flex-direction: row;
    flex-wrap: wrap;
}

.chirpui-field__radio-option {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-width: 0;
    max-width: 100%;
    cursor: pointer;
}

.chirpui-field__radio-option .chirpui-field__input {
    flex: 0 0 auto;
    width: auto;
    display: inline-block;
}

.chirpui-field__radio-label {
    min-width: 0;
    font-weight: var(--chirpui-ui-font-weight-normal);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

/* File input */
.chirpui-field__file {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
    overflow-wrap: anywhere;
}

.chirpui-field__file::file-selector-button {
    margin-inline-end: var(--chirpui-spacing);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface-alt);
    color: var(--chirpui-text);
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    cursor: pointer;
}

.chirpui-field__file::file-selector-button:hover {
    background: var(--chirpui-bg-subtle);
}

.chirpui-field--error .chirpui-field__file {
    border-color: var(--chirpui-alert-error-border);
}

/* Date input - inherit from chirpui-field__input */
input[type="date"].chirpui-field__input {
    min-height: 2.5rem;
}

/* Star rating — CSS-only interactive star picker
   Uses reverse DOM order + flex-direction: row-reverse so the ~ sibling
   selector fills all stars up to the hovered/checked one. */
.chirpui-star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-2xs);
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.chirpui-star-rating__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.chirpui-star-rating__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: var(--chirpui-control-block-size-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    cursor: pointer;
    font-size: var(--chirpui-font-2xl);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-border);
    transition: color var(--chirpui-transition), transform var(--chirpui-transition);
    user-select: none;
}

.chirpui-star-rating__label:hover {
    transform: scale(1.15);
}

.chirpui-star-rating__input:checked ~ .chirpui-star-rating__label {
    color: var(--chirpui-warning);
}

.chirpui-star-rating:hover .chirpui-star-rating__label {
    color: var(--chirpui-border);
}

.chirpui-star-rating .chirpui-star-rating__label:hover,
.chirpui-star-rating .chirpui-star-rating__label:hover ~ .chirpui-star-rating__label {
    color: var(--chirpui-warning);
}

.chirpui-star-rating__input:focus-visible + .chirpui-star-rating__label {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: var(--chirpui-state-focus-offset);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-star-rating--sm .chirpui-star-rating__label { font-size: var(--chirpui-font-lg); }
.chirpui-star-rating--lg .chirpui-star-rating__label {
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    font-size: var(--chirpui-prose-3xl);
}

/* Thumbs up/down — binary sentiment radio pair */
.chirpui-thumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.chirpui-thumbs__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.chirpui-thumbs__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: var(--chirpui-control-block-size-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    cursor: pointer;
    font-size: var(--chirpui-font-2xl);
    line-height: var(--chirpui-line-height-tight);
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter var(--chirpui-transition), opacity var(--chirpui-transition), transform var(--chirpui-transition);
    user-select: none;
}

.chirpui-thumbs__label:hover {
    filter: grayscale(0);
    opacity: 0.8;
    transform: scale(1.15);
}

.chirpui-thumbs__input:checked + .chirpui-thumbs__label {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

.chirpui-thumbs__input:focus-visible + .chirpui-thumbs__label {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: var(--chirpui-state-focus-offset);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-thumbs--sm .chirpui-thumbs__label { font-size: var(--chirpui-font-lg); }
.chirpui-thumbs--lg .chirpui-thumbs__label {
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    font-size: var(--chirpui-prose-3xl);
}

/* Segmented control — connected button-group radio selector (form field).
   Scoped to the legacy form-field structure (direct-child radio + label) so the
   bordered container styling does NOT leak onto the newer `segmented_control()`
   pill component (segmented_control.html), which wraps options in
   `.chirpui-segmented__option` and shares the `.chirpui-segmented` block class.
   Without this scope the 1px border below pushed the pill control to 42px,
   breaking the 40px shared control-height contract (#230). */
.chirpui-segmented:has(> .chirpui-segmented__input) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    overflow: clip;
    background: var(--chirpui-bg);
}

.chirpui-segmented__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.chirpui-segmented > .chirpui-segmented__label {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    cursor: pointer;
    padding: 0.375rem 0.875rem;
    font-size: var(--chirpui-prose-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text);
    border-left: 1px solid var(--chirpui-border);
    transition: background var(--chirpui-transition), color var(--chirpui-transition);
    user-select: none;
    text-align: center;
    overflow-wrap: anywhere;
}

.chirpui-segmented > .chirpui-segmented__label:first-of-type {
    border-left: 0;
}

.chirpui-segmented > .chirpui-segmented__label:hover {
    background: var(--chirpui-bg-subtle);
}

.chirpui-segmented > .chirpui-segmented__input:checked + .chirpui-segmented__label {
    background: var(--chirpui-accent);
    color: var(--chirpui-on-accent);
    border-left-color: var(--chirpui-accent);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-segmented > .chirpui-segmented__input:checked + .chirpui-segmented__label + .chirpui-segmented__input + .chirpui-segmented__label {
    border-left-color: var(--chirpui-accent);
}

.chirpui-segmented > .chirpui-segmented__input:focus-visible + .chirpui-segmented__label {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: -2px;
}

.chirpui-segmented--sm > .chirpui-segmented__label {
    padding: 0.25rem 0.625rem;
    font-size: var(--chirpui-prose-xs);
}

/* Number scale — horizontal numbered radio row (NPS-style) */
.chirpui-number-scale {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.chirpui-number-scale__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.chirpui-number-scale__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    font-size: var(--chirpui-prose-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-muted);
    background: var(--chirpui-bg);
    border: 1px solid var(--chirpui-border);
    transition: background var(--chirpui-transition), color var(--chirpui-transition),
                border-color var(--chirpui-transition), transform var(--chirpui-transition);
    user-select: none;
}

.chirpui-number-scale__label:first-of-type {
    border-radius: var(--chirpui-radius) 0 0 var(--chirpui-radius);
}

.chirpui-number-scale__label:last-of-type {
    border-radius: 0 var(--chirpui-radius) var(--chirpui-radius) 0;
}

.chirpui-number-scale__label:hover {
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text);
}

.chirpui-number-scale__input:checked + .chirpui-number-scale__label {
    background: var(--chirpui-accent);
    color: var(--chirpui-on-accent);
    border-color: var(--chirpui-accent);
    transform: scale(1.08);
    z-index: 1;
}

.chirpui-number-scale__input:focus-visible + .chirpui-number-scale__label {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: var(--chirpui-state-focus-offset);
    z-index: 2;
}

.chirpui-number-scale__labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--chirpui-spacing-2xs);
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

/* Sortable list — drag-to-reorder container.
   Alpine wiring (x-data, @dragstart, etc.) is left to the consumer;
   ChirpUI provides the visual structure and drag affordances. */
@scope (.chirpui-sortable) to (.chirpui-sortable .chirpui-sortable) {
    :scope {
        display: flex;
        flex-direction: column;
        gap: 2px;
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow-wrap: anywhere;
    }

    .chirpui-sortable__item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding: 0.625rem 0.75rem;
        overflow-wrap: anywhere;
        border: 1px solid var(--chirpui-border);
        border-radius: var(--chirpui-radius-sm);
        background: var(--chirpui-bg);
        cursor: grab;
        transition:
            box-shadow var(--chirpui-transition),
            opacity var(--chirpui-transition),
            border-color var(--chirpui-transition);
        user-select: none;
    }

    .chirpui-sortable__item > :where(:not(script, style, template)) {
        margin: 0;
    }

    .chirpui-sortable__item:hover {
        box-shadow: var(--chirpui-shadow-sm);
    }

    .chirpui-sortable__item:active {
        cursor: grabbing;
    }

    .chirpui-sortable__item--dragging {
        opacity: 0.4;
    }

    .chirpui-sortable__item--over {
        border-top: 2px solid var(--chirpui-accent);
        padding-top: calc(0.625rem - 1px);
    }

    .chirpui-sortable__handle {
        flex: 0 0 auto;
        color: var(--chirpui-muted);
        font-size: var(--chirpui-font-base);
        line-height: var(--chirpui-line-height-tight);
        cursor: grab;
    }

    .chirpui-sortable__handle:active {
        cursor: grabbing;
    }

    .chirpui-sortable__content {
        flex: 999 1 12rem;
        min-width: 0;
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow-wrap: anywhere;
    }

    .chirpui-sortable__content > :where(:not(script, style, template)) {
        margin-block: 0;
    }

    .chirpui-sortable__remove {
        flex: 0 1 auto;
        margin-left: auto;
        padding: 0.25rem 0.375rem;
        color: var(--chirpui-muted);
        border: 1px solid transparent;
        border-radius: var(--chirpui-radius-sm);
        background: none;
        cursor: pointer;
        font-size: var(--chirpui-font-base);
        line-height: var(--chirpui-line-height-tight);
        transition:
            color var(--chirpui-transition),
            border-color var(--chirpui-transition);
    }

    .chirpui-sortable__remove:hover {
        color: var(--chirpui-error);
        border-color: var(--chirpui-error);
    }

    .chirpui-sortable__remove:focus-visible {
        outline: 2px solid var(--chirpui-focus-ring);
        outline-offset: var(--chirpui-state-focus-offset);
    }
}

/* Fragment island — HTMX-safe mutation region */
.chirpui-fragment-island {
    display: block;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.chirpui-fragment-island > :where(:not(script, style, template)) {
    max-inline-size: 100%;
    margin-block: 0;
}

.chirpui-fragment-island > :where(:not(script, style, template)) + :where(:not(script, style, template)) {
    margin-block-start: var(--chirpui-spacing-sm);
}

.chirpui-fragment-island > .chirpui-fragment-island:empty {
    display: none;
    margin-block-start: 0;
}

.chirpui-island-root {
    display: block;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.chirpui-island-fallback {
    display: grid;
    gap: var(--chirpui-spacing-sm);
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.chirpui-island-fallback > :where(:not(script, style, template)) {
    max-inline-size: 100%;
    margin-block: 0;
}

/* DnD primitives — row and board variants */
@scope (.chirpui-dnd) to (.chirpui-dnd .chirpui-dnd) {
    :scope {
        display: flex;
        gap: var(--chirpui-spacing-xs);
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow-wrap: anywhere;
    }

    :scope.chirpui-dnd--row {
        flex-direction: column;
        gap: 2px;
    }

    :scope.chirpui-dnd--board {
        flex-direction: row;
        gap: var(--chirpui-spacing-md);
        max-inline-size: 100%;
        padding-bottom: var(--chirpui-spacing-sm);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .chirpui-dnd__item {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding: 0.625rem 0.75rem;
        overflow-wrap: anywhere;
        border: 1px solid var(--chirpui-border);
        border-radius: var(--chirpui-radius-sm);
        background: var(--chirpui-bg);
        cursor: grab;
        transition:
            transform var(--chirpui-dnd-transition),
            box-shadow var(--chirpui-dnd-transition),
            opacity var(--chirpui-dnd-drag-transition),
            border-color var(--chirpui-dnd-transition);
        user-select: none;
    }

    .chirpui-dnd__item > :where(:not(script, style, template)) {
        margin: 0;
    }

    .chirpui-dnd__item:hover {
        box-shadow: var(--chirpui-shadow-sm);
    }

    .chirpui-dnd__item:active {
        cursor: grabbing;
    }

    .chirpui-dnd__item--dragging {
        opacity: var(--chirpui-dnd-drag-opacity);
        transform: scale(var(--chirpui-dnd-lift-scale))
            translateY(var(--chirpui-dnd-lift-offset-y));
        box-shadow: var(--chirpui-dnd-lift-shadow);
    }

    .chirpui-dnd__item--over {
        border-top: var(--chirpui-dnd-drop-indicator-width) solid
            var(--chirpui-dnd-drop-indicator-color);
        padding-top: calc(0.625rem - var(--chirpui-dnd-drop-indicator-width));
    }

    .chirpui-dnd__handle {
        flex: 0 0 auto;
        color: var(--chirpui-muted);
        font-size: var(--chirpui-font-base);
        line-height: var(--chirpui-line-height-tight);
        cursor: grab;
    }

    .chirpui-dnd__handle:active {
        cursor: grabbing;
    }

    .chirpui-dnd__handle:focus-visible {
        outline: 2px solid var(--chirpui-focus-ring);
        outline-offset: var(--chirpui-state-focus-offset);
    }

    .chirpui-dnd__drop-indicator {
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: var(--chirpui-dnd-drop-indicator-width);
        border-radius: var(--chirpui-radius-sm);
        background: var(--chirpui-dnd-drop-indicator-color);
        opacity: 0;
        transition: opacity var(--chirpui-dnd-transition);
        pointer-events: none;
    }

    .chirpui-dnd__item--over .chirpui-dnd__drop-indicator {
        opacity: 1;
    }

    .chirpui-dnd__column {
        display: flex;
        flex: 0 0 min(18rem, 100%);
        flex-direction: column;
        gap: var(--chirpui-spacing-sm);
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding: var(--chirpui-spacing);
        border: 1px solid var(--chirpui-border);
        border-radius: var(--chirpui-radius);
        background: var(--chirpui-bg-subtle);
    }

    .chirpui-dnd__column > :where(:not(script, style, template)) {
        margin-block: 0;
    }

    .chirpui-dnd__column-header {
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-font-sm);
        font-weight: var(--chirpui-ui-font-weight-semibold);
        overflow-wrap: anywhere;
    }

    .chirpui-dnd__column-body {
        display: flex;
        flex-direction: column;
        gap: var(--chirpui-spacing-sm);
        min-height: 4rem;
        min-inline-size: 0;
        max-inline-size: 100%;
        border-radius: var(--chirpui-radius-sm);
        transition: background var(--chirpui-dnd-transition);
    }

    .chirpui-dnd__column-body--over {
        background: color-mix(in srgb, var(--chirpui-accent) 8%, transparent);
    }

    .chirpui-dnd__card {
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding: var(--chirpui-spacing);
        overflow-wrap: anywhere;
        border: 1px solid var(--chirpui-border);
        border-radius: var(--chirpui-radius-sm);
        background: var(--chirpui-bg);
        cursor: grab;
        transition:
            box-shadow var(--chirpui-dnd-transition),
            opacity var(--chirpui-dnd-drag-transition);
        user-select: none;
    }

    .chirpui-dnd__card > :where(:not(script, style, template)) {
        margin-block: 0;
    }

    .chirpui-dnd__card:hover {
        box-shadow: var(--chirpui-shadow-sm);
    }

    .chirpui-dnd__card:active {
        cursor: grabbing;
    }

    .chirpui-dnd__card--dragging {
        opacity: var(--chirpui-dnd-drag-opacity);
        box-shadow: var(--chirpui-dnd-lift-shadow);
    }

    .chirpui-dnd__column-body--over .chirpui-dnd__card {
        border-color: var(--chirpui-dnd-drop-indicator-color);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chirpui-dnd__item,
    .chirpui-dnd__card {
        transition: none;
    }

    .chirpui-dnd__item--dragging {
        transform: none;
    }
}

/* Range slider */
.chirpui-field--range {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    box-sizing: border-box;
    margin-bottom: var(--chirpui-spacing);
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-field--range > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-field__range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    flex-wrap: wrap;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.chirpui-field__range-header > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-field__range-value {
    flex: 0 0 auto;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}

.chirpui-field__range {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 0.5rem;
    margin: 0;
    accent-color: var(--chirpui-accent);
    cursor: pointer;
}

.chirpui-field__range:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-field--error .chirpui-field__range {
    accent-color: var(--chirpui-error);
}

/* Input group (prefix/suffix) */
.chirpui-field--input-group {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    box-sizing: border-box;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-field--input-group > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-input-group {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    overflow: clip;
}

.chirpui-input-group__prefix,
.chirpui-input-group__suffix {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    max-inline-size: min(40%, 16rem);
    min-width: 0;
    padding: var(--chirpui-spacing-sm);
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    overflow-wrap: anywhere;
}

.chirpui-input-group__prefix:empty,
.chirpui-input-group__suffix:empty {
    display: none;
}

.chirpui-input-group__input {
    flex: 1 1 8rem;
    min-width: 0;
    border: none;
    padding: var(--chirpui-spacing-sm);
    font: inherit;
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
}

.chirpui-input-group__input:focus {
    outline: none;
}

.chirpui-input-group__input:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: -2px;
}

.chirpui-input-group__input:disabled,
.chirpui-input-group__input[readonly] {
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text-muted);
    cursor: not-allowed;
}

.chirpui-input-group__input[readonly] {
    cursor: default;
    opacity: 1;
}

.chirpui-input-group__input:disabled {
    opacity: 0.5;
}

.chirpui-field--error .chirpui-input-group {
    border-color: var(--chirpui-alert-error-border);
}

/* Search bar — input + optional button/icon. Input flexes; button stays compact. */
.chirpui-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    box-sizing: border-box;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-search-bar > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-search-bar__inner {
    display: flex;
    align-items: stretch;
    gap: var(--chirpui-spacing-sm);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.chirpui-search-bar__input {
    flex: 999 1 14rem;
    min-width: 0;
    padding: var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    font: inherit;
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
    transition: border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
}

.chirpui-search-bar__input:focus {
    outline: none;
    border-color: var(--chirpui-accent);
    box-shadow: 0 0 0 3px var(--chirpui-focus-ring);
}

.chirpui-search-bar__input:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-search-bar--with-icon .chirpui-search-bar__inner {
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    overflow: clip;
}

.chirpui-search-bar--with-icon .chirpui-search-bar__icon {
    display: flex;
    align-items: center;
    padding: 0 var(--chirpui-spacing-sm);
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
}

.chirpui-search-bar--with-icon .chirpui-search-bar__input {
    border: none;
    border-radius: 0;
}

.chirpui-search-bar__btn {
    flex: 0 1 auto;
    white-space: nowrap;
}

.chirpui-field--error .chirpui-search-bar__input {
    border-color: var(--chirpui-alert-error-border);
}

.chirpui-field--error.chirpui-search-bar--with-icon .chirpui-search-bar__inner {
    border-color: var(--chirpui-alert-error-border);
}

@media (max-width: 32rem) {
    .chirpui-search-bar--with-button .chirpui-search-bar__inner {
        flex-wrap: wrap;
    }

    .chirpui-search-bar--with-button .chirpui-search-bar__btn {
        justify-content: center;
        inline-size: 100%;
    }
}

/* Multi-select */
.chirpui-field__input--multi {
    min-height: 8rem;
}

/* Toggle (switch-style checkbox) */
.chirpui-field--toggle {
    margin-bottom: var(--chirpui-spacing-sm);
}

.chirpui-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    cursor: pointer;
}

.chirpui-toggle__track {
    display: inline-block;
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--chirpui-border);
    position: relative;
    flex-shrink: 0;
    transition: background var(--chirpui-transition);
}

.chirpui-toggle__track {
    transition: background var(--chirpui-transition), transform var(--chirpui-transition);
}

.chirpui-toggle__track::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 0.125rem;
    left: 0.125rem;
    border-radius: 50%;
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-shadow-sm);
    transition: transform var(--chirpui-transition-slow) var(--chirpui-ease-spring);
}

.chirpui-toggle-wrap:has(.chirpui-toggle:checked) .chirpui-toggle__track {
    background: var(--chirpui-accent);
}

.chirpui-toggle-wrap:has(.chirpui-toggle:checked) .chirpui-toggle__track::after {
    transform: translateX(1.25rem);
}

.chirpui-toggle-wrap:has(.chirpui-toggle:active) .chirpui-toggle__track {
    transform: scale(0.98);
}

.chirpui-toggle-wrap:has(.chirpui-toggle:focus-visible) .chirpui-toggle__track {
    box-shadow: 0 0 0 2px var(--chirpui-focus-ring);
}

.chirpui-toggle-wrap:has(.chirpui-toggle:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.chirpui-toggle__label {
    font-size: var(--chirpui-font-sm);
}

/* Toggle: size variants */
.chirpui-toggle-wrap--sm .chirpui-toggle__track { width: 1.75rem; height: 0.875rem; }
.chirpui-toggle-wrap--sm .chirpui-toggle__track::after { width: 0.625rem; height: 0.625rem; }
.chirpui-toggle-wrap--sm:has(.chirpui-toggle:checked) .chirpui-toggle__track::after { transform: translateX(0.875rem); }
.chirpui-toggle-wrap--lg .chirpui-toggle__track { width: 3.25rem; height: 1.625rem; }
.chirpui-toggle-wrap--lg .chirpui-toggle__track::after { width: 1.375rem; height: 1.375rem; }
.chirpui-toggle-wrap--lg:has(.chirpui-toggle:checked) .chirpui-toggle__track::after { transform: translateX(1.625rem); }

/* Toggle: color variants */
.chirpui-toggle-wrap--success:has(.chirpui-toggle:checked) .chirpui-toggle__track { background: var(--chirpui-success); }
.chirpui-toggle-wrap--danger:has(.chirpui-toggle:checked) .chirpui-toggle__track { background: var(--chirpui-error); }
.chirpui-toggle-wrap--accent:has(.chirpui-toggle:checked) .chirpui-toggle__track { background: var(--chirpui-accent); }

/* Toggle: label inside track */
.chirpui-toggle__track-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5rem;
    font-weight: var(--chirpui-ui-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: opacity var(--chirpui-motion-fast);
}
.chirpui-toggle__track-label--on { left: 0.35rem; color: var(--chirpui-on-accent); opacity: 0; }
.chirpui-toggle__track-label--off { right: 0.35rem; color: var(--chirpui-text-muted); opacity: 1; }
.chirpui-toggle-wrap:has(.chirpui-toggle:checked) .chirpui-toggle__track-label--on { opacity: 1; }
.chirpui-toggle-wrap:has(.chirpui-toggle:checked) .chirpui-toggle__track-label--off { opacity: 0; }

.chirpui-form-actions {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    margin-top: var(--chirpui-spacing);
}

.chirpui-form-actions--end {
    justify-content: flex-end;
}

.chirpui-form > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-form > .chirpui-form-actions {
    margin-block-start: 0;
}

.chirpui-fieldset {
    min-width: 0;
    padding: var(--chirpui-spacing);
    margin: 0 0 var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-fieldset__legend {
    padding: 0 0.5em;
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-fieldset > :where(:not(legend, script, style, template)) {
    margin-block: 0;
}

.chirpui-fieldset
    > :where(:not(legend, script, style, template))
    + :where(:not(legend, script, style, template)) {
    margin-block-start: var(--chirpui-space-stack-gap);
}

.chirpui-key-value-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--chirpui-spacing-md);
}

.chirpui-key-value-form__key,
.chirpui-key-value-form__value {
    flex: 1;
    min-width: 10rem;
    margin-bottom: 0;
}

.chirpui-key-value-form__value {
    min-width: 12rem;
}

/* Match input and button heights for clean alignment */
.chirpui-key-value-form__row .chirpui-field__input {
    height: 2.25rem;
    box-sizing: border-box;
}

.chirpui-key-value-form__submit {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
}

.chirpui-key-value-form__submit .chirpui-btn {
    height: 2.25rem;
    box-sizing: border-box;
}

@media (max-width: 40rem) {
    .chirpui-key-value-form__row {
        flex-direction: column;
        align-items: stretch;
    }
}
}

/* === partials/071_button.css === */
@layer chirpui.component {
/* ==========================================================================
   Button
   ========================================================================== */

/* Explicit cursor for button/a — overrides browser default (cursor: default on button) */
button.chirpui-btn,
a.chirpui-btn {
    cursor: pointer;
}

.chirpui-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--chirpui-spacing-xs);
    min-block-size: var(--chirpui-control-block-size);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    text-decoration: none;
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
    cursor: pointer;
    box-shadow: var(--chirpui-shadow-sm);
    transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
        color var(--chirpui-transition), transform var(--chirpui-transition),
        box-shadow var(--chirpui-transition);
}

.chirpui-btn__label,
.chirpui-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.chirpui-btn:hover:not(:disabled) {
    background: var(--chirpui-bg-subtle);
    border-color: var(--chirpui-border);
}

.chirpui-btn:active:not(:disabled) {
    background: var(--chirpui-border);
}

.chirpui-btn:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Appearance axis */
.chirpui-btn--filled {
    box-shadow: var(--chirpui-shadow-sm);
}

.chirpui-btn--tonal {
    background: var(--chirpui-bg-subtle);
    border-color: transparent;
    box-shadow: none;
}

.chirpui-btn--outlined {
    background: transparent;
    border-color: var(--chirpui-border);
    box-shadow: none;
}

/* Tone axis */
.chirpui-btn--neutral {
    background: var(--chirpui-surface);
    border-color: var(--chirpui-border);
    color: var(--chirpui-text);
}

/* Primary variant */
.chirpui-btn--primary {
    background: var(--chirpui-accent);
    border-color: var(--chirpui-accent);
    color: var(--chirpui-on-accent);
}

.chirpui-btn--primary:hover:not(:disabled) {
    background: var(--chirpui-accent-hover);
    border-color: var(--chirpui-accent-hover);
}

.chirpui-btn--primary:active:not(:disabled) {
    background: var(--chirpui-accent-hover);
    border-color: var(--chirpui-accent-hover);
}

/* Secondary variant */
.chirpui-btn--secondary {
    background: var(--chirpui-bg-subtle);
    border-color: var(--chirpui-border);
}

.chirpui-btn--secondary:hover:not(:disabled) {
    background: var(--chirpui-border);
}

.chirpui-btn--secondary:active:not(:disabled) {
    background: var(--chirpui-border);
}

/* Ghost variant — outline style, minimal fill */
.chirpui-btn--ghost {
    background: transparent;
    border-color: var(--chirpui-border);
    box-shadow: none;
    color: var(--chirpui-text);
}

.chirpui-btn--ghost:hover:not(:disabled) {
    background: var(--chirpui-bg-subtle);
    border-color: var(--chirpui-border);
}

.chirpui-btn--ghost:active:not(:disabled) {
    background: var(--chirpui-border);
}

/* Danger variant */
.chirpui-btn--danger {
    background: var(--chirpui-danger);
    border-color: var(--chirpui-danger);
    color: var(--chirpui-on-accent);
}

.chirpui-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--chirpui-danger) 85%, black);
    border-color: color-mix(in srgb, var(--chirpui-danger) 85%, black);
}

.chirpui-btn--danger:active:not(:disabled) {
    background: color-mix(in srgb, var(--chirpui-danger) 75%, black);
    border-color: color-mix(in srgb, var(--chirpui-danger) 75%, black);
}

/* Success variant */
.chirpui-btn--success {
    background: var(--chirpui-success);
    border-color: var(--chirpui-success);
    color: var(--chirpui-on-accent);
}

.chirpui-btn--success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--chirpui-success) 85%, black);
    border-color: color-mix(in srgb, var(--chirpui-success) 85%, black);
}

.chirpui-btn--success:active:not(:disabled) {
    background: color-mix(in srgb, var(--chirpui-success) 75%, black);
    border-color: color-mix(in srgb, var(--chirpui-success) 75%, black);
}

/* Warning variant */
.chirpui-btn--warning {
    background: var(--chirpui-warning);
    border-color: var(--chirpui-warning);
    color: var(--chirpui-on-accent);
}

.chirpui-btn--warning:hover:not(:disabled) {
    background: color-mix(in srgb, var(--chirpui-warning) 85%, black);
    border-color: color-mix(in srgb, var(--chirpui-warning) 85%, black);
}

.chirpui-btn--warning:active:not(:disabled) {
    background: color-mix(in srgb, var(--chirpui-warning) 75%, black);
    border-color: color-mix(in srgb, var(--chirpui-warning) 75%, black);
}

.chirpui-btn--outlined.chirpui-btn--primary {
    background: transparent;
    color: var(--chirpui-accent);
}

.chirpui-btn--outlined.chirpui-btn--secondary,
.chirpui-btn--outlined.chirpui-btn--neutral {
    background: transparent;
    color: var(--chirpui-text);
}

.chirpui-btn--outlined.chirpui-btn--success {
    background: transparent;
    color: var(--chirpui-success);
}

.chirpui-btn--outlined.chirpui-btn--warning {
    background: transparent;
    color: var(--chirpui-warning);
}

.chirpui-btn--outlined.chirpui-btn--danger {
    background: transparent;
    color: var(--chirpui-danger);
}

/* Small button — compact for search bars, toolbars */
.chirpui-btn--sm {
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    font-size: var(--chirpui-font-xs);
}

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-btn {
        min-block-size: var(--chirpui-control-touch-target);
    }
}

.chirpui-btn-group {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
}
.chirpui-btn-group--end { justify-content: flex-end; }
.chirpui-btn-group--between { justify-content: space-between; }
.chirpui-btn-group--center { justify-content: center; }
.chirpui-btn-group--stretch .chirpui-btn { flex: 1; }

/* Actions bar — semantic wrapper for form/dialog/card button groups.
   Use in modal footers, card footers, form buttons, confirmation dialogs. */
.chirpui-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--chirpui-spacing-sm);
    padding: var(--chirpui-spacing-sm) 0;
}
.chirpui-actions--start { justify-content: flex-start; }
.chirpui-actions--center { justify-content: center; }
.chirpui-actions--between { justify-content: space-between; }
.chirpui-actions--stretch .chirpui-btn { flex: 1; }
.chirpui-actions--stacked {
    flex-direction: column;
    align-items: stretch;
}
.chirpui-actions--bordered {
    border-top: 1px solid var(--chirpui-border);
    padding-top: var(--chirpui-spacing);
    margin-top: var(--chirpui-spacing);
}

/* Hover lift and active press — only when motion is preferred */
@media (prefers-reduced-motion: no-preference) {
    .chirpui-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--chirpui-shadow-md);
    }

    .chirpui-btn:active:not(:disabled) {
        transition: none;
        transform: scale(0.98) translateY(0);
        box-shadow: var(--chirpui-shadow-sm);
    }

    .chirpui-btn--ghost:hover:not(:disabled) {
        box-shadow: none;
    }

    .chirpui-btn--ghost:active:not(:disabled) {
        box-shadow: none;
    }
}

/* Loading state — use with loading=true or htmx (adds htmx-request to trigger) */
.chirpui-btn--loading,
.chirpui-btn.htmx-request {
    cursor: wait;
    pointer-events: none;
}

.chirpui-btn__icon {
    font-size: 1em;
    line-height: 1;
}

.chirpui-btn__label {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    transition: opacity var(--chirpui-transition);
}

.chirpui-btn__spinner {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.chirpui-btn--loading .chirpui-btn__icon,
.chirpui-btn--loading .chirpui-btn__label,
.chirpui-btn.htmx-request .chirpui-btn__icon,
.chirpui-btn.htmx-request .chirpui-btn__label {
    opacity: 0;
}

.chirpui-btn--loading .chirpui-btn__spinner,
.chirpui-btn.htmx-request .chirpui-btn__spinner {
    display: inline-flex;
}
}

/* === partials/072_badge.css === */
/* ==========================================================================
   Badge — @scope + @layer envelope.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-badge) to (.chirpui-badge .chirpui-badge) {
        :scope {
            display: inline-flex;
            align-items: center;
            gap: var(--chirpui-spacing-xs);
            max-width: 100%;
            min-block-size: 1.5rem;
            min-width: 0;
            justify-content: center;
            padding: 0.1875rem 0.55rem;
            border-radius: 999px;
            font-family: var(--chirpui-ui-font-family);
            font-size: var(--chirpui-ui-sm);
            font-weight: var(--chirpui-ui-font-weight-medium);
            font-variant-numeric: tabular-nums;
            line-height: 1.1;
            border: 1px solid;
            text-decoration: none;
            vertical-align: middle;
            transition: background var(--chirpui-transition), color var(--chirpui-transition),
                border-color var(--chirpui-transition), box-shadow var(--chirpui-transition);
        }

        :scope:is(a) {
            cursor: pointer;
            box-shadow: var(--chirpui-shadow-sm);
            border-width: 1.5px;
        }

        :scope:is(a):hover,
        :scope:is(a):focus {
            text-decoration: none;
        }

        :scope:is(a):focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }

        @media (prefers-reduced-motion: no-preference) {
            :scope:is(a) {
                transition: background var(--chirpui-transition), color var(--chirpui-transition),
                    border-color var(--chirpui-transition), box-shadow var(--chirpui-transition),
                    transform var(--chirpui-transition);
            }

            :scope:is(a):hover {
                transform: translateY(-1px);
                box-shadow: var(--chirpui-shadow-sm);
            }

            :scope:is(a):active {
                transition: none;
                transform: translateY(0);
                box-shadow: none;
            }
        }

        .chirpui-badge__icon {
            font-size: 1em;
            line-height: 1;
        }

        .chirpui-badge__text {
            line-height: 1;
            min-width: 0;
            overflow-wrap: anywhere;
            text-wrap: balance;
        }

        /* Appearance axis */
        :scope.chirpui-badge--tonal {
            box-shadow: none;
        }

        :scope.chirpui-badge--outlined {
            background: transparent;
        }

        :scope.chirpui-badge--filled {
            box-shadow: none;
        }

        :scope.chirpui-badge--neutral {
            background: var(--chirpui-muted-bg);
            color: var(--chirpui-text-muted);
            border-color: var(--chirpui-border);
        }

        :scope.chirpui-badge--primary {
            background: var(--chirpui-primary-muted);
            color: color-mix(in srgb, var(--chirpui-primary) 84%, var(--chirpui-text));
            border-color: color-mix(in srgb, var(--chirpui-primary) 40%, var(--chirpui-border));
        }

        :scope:is(a).chirpui-badge--primary:hover {
            background: color-mix(in srgb, var(--chirpui-primary) 25%, var(--chirpui-primary-muted));
            color: color-mix(in srgb, var(--chirpui-primary) var(--chirpui-shade-hover), black);
        }

        :scope:is(a).chirpui-badge--primary:active {
            background: color-mix(in srgb, var(--chirpui-primary) 35%, var(--chirpui-primary-muted));
        }

        :scope.chirpui-badge--success {
            background: var(--chirpui-success-muted);
            color: color-mix(in srgb, var(--chirpui-success) 84%, var(--chirpui-text));
            border-color: color-mix(in srgb, var(--chirpui-success) 40%, var(--chirpui-border));
        }

        :scope:is(a).chirpui-badge--success:hover {
            background: color-mix(in srgb, var(--chirpui-success) 25%, var(--chirpui-success-muted));
            color: color-mix(in srgb, var(--chirpui-success) var(--chirpui-shade-hover), black);
        }

        :scope:is(a).chirpui-badge--success:active {
            background: color-mix(in srgb, var(--chirpui-success) 35%, var(--chirpui-success-muted));
        }

        :scope.chirpui-badge--warning {
            background: var(--chirpui-warning-muted);
            color: color-mix(in srgb, var(--chirpui-warning) 84%, var(--chirpui-text));
            border-color: color-mix(in srgb, var(--chirpui-warning) 40%, var(--chirpui-border));
        }

        :scope:is(a).chirpui-badge--warning:hover {
            background: color-mix(in srgb, var(--chirpui-warning) 25%, var(--chirpui-warning-muted));
            color: color-mix(in srgb, var(--chirpui-warning) var(--chirpui-shade-hover), black);
        }

        :scope:is(a).chirpui-badge--warning:active {
            background: color-mix(in srgb, var(--chirpui-warning) 35%, var(--chirpui-warning-muted));
        }

        :scope.chirpui-badge--error {
            background: var(--chirpui-error-muted);
            color: color-mix(in srgb, var(--chirpui-error) 84%, var(--chirpui-text));
            border-color: color-mix(in srgb, var(--chirpui-error) 40%, var(--chirpui-border));
        }

        :scope.chirpui-badge--danger {
            background: color-mix(in srgb, var(--chirpui-danger) 12%, transparent);
            color: color-mix(in srgb, var(--chirpui-danger) 84%, var(--chirpui-text));
            border-color: color-mix(in srgb, var(--chirpui-danger) 40%, var(--chirpui-border));
        }

        :scope:is(a).chirpui-badge--error:hover {
            background: color-mix(in srgb, var(--chirpui-error) 25%, var(--chirpui-error-muted));
            color: color-mix(in srgb, var(--chirpui-error) var(--chirpui-shade-hover), black);
        }

        :scope:is(a).chirpui-badge--error:active {
            background: color-mix(in srgb, var(--chirpui-error) 35%, var(--chirpui-error-muted));
        }

        :scope.chirpui-badge--muted {
            background: var(--chirpui-muted-bg);
            color: var(--chirpui-text-muted);
            border-color: var(--chirpui-border);
        }

        :scope:is(a).chirpui-badge--muted:hover {
            background: var(--chirpui-border);
            color: var(--chirpui-text);
        }

        :scope:is(a).chirpui-badge--muted:active {
            background: color-mix(in srgb, var(--chirpui-border) 80%, black);
        }

        :scope.chirpui-badge--info {
            background: var(--chirpui-alert-info-bg);
            color: color-mix(in srgb, var(--chirpui-info) 84%, var(--chirpui-text));
            border-color: color-mix(in srgb, var(--chirpui-info) 40%, var(--chirpui-alert-info-border));
        }

        :scope:is(a).chirpui-badge--info:hover {
            background: color-mix(in srgb, var(--chirpui-info) 20%, var(--chirpui-alert-info-bg));
            color: color-mix(in srgb, var(--chirpui-info) var(--chirpui-shade-hover), black);
        }

        :scope:is(a).chirpui-badge--info:active {
            background: color-mix(in srgb, var(--chirpui-info) 30%, var(--chirpui-alert-info-bg));
        }

        :scope.chirpui-badge--outlined.chirpui-badge--primary,
        :scope.chirpui-badge--outlined.chirpui-badge--success,
        :scope.chirpui-badge--outlined.chirpui-badge--warning,
        :scope.chirpui-badge--outlined.chirpui-badge--danger,
        :scope.chirpui-badge--outlined.chirpui-badge--info,
        :scope.chirpui-badge--outlined.chirpui-badge--neutral {
            background: transparent;
        }

        :scope.chirpui-badge--filled.chirpui-badge--primary {
            background: var(--chirpui-primary);
            color: var(--chirpui-on-accent);
        }

        :scope.chirpui-badge--filled.chirpui-badge--success {
            background: var(--chirpui-success);
            color: var(--chirpui-on-accent);
        }

        :scope.chirpui-badge--filled.chirpui-badge--warning {
            background: var(--chirpui-warning);
            color: var(--chirpui-on-accent);
        }

        :scope.chirpui-badge--filled.chirpui-badge--danger {
            background: var(--chirpui-danger);
            color: var(--chirpui-on-accent);
        }

        :scope.chirpui-badge--filled.chirpui-badge--info {
            background: var(--chirpui-info);
            color: var(--chirpui-on-accent);
        }

        :scope.chirpui-badge--filled.chirpui-badge--neutral {
            background: var(--chirpui-text-muted);
            color: var(--chirpui-bg);
        }

        /* Custom color (scoped --chirpui-badge-color) */
        :scope.chirpui-badge--custom {
            --_bg-mix: light-dark(12%, 18%);
            background: color-mix(in srgb, var(--chirpui-badge-color) var(--_bg-mix), transparent);
            color: var(--chirpui-badge-color);
            border-color: color-mix(in srgb, var(--chirpui-badge-color) 40%, transparent);
        }

        :scope.chirpui-badge--custom-solid {
            background: var(--chirpui-badge-color);
            color: var(--chirpui-badge-text, white);
            border-color: var(--chirpui-badge-color);
        }

        :scope:is(a).chirpui-badge--custom:hover {
            background: color-mix(
                in srgb,
                var(--chirpui-badge-color) light-dark(18%, 24%),
                transparent
            );
        }

        :scope:is(a).chirpui-badge--custom-solid:hover {
            filter: brightness(1.05);
        }
    }

    /* filter_chips.html — filter_group row (not filter_bar.html form toolbar) */
    .chirpui-filter-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--chirpui-spacing-sm);
    }
}

/* === partials/073_spinner.css === */
@layer chirpui.component {
/* ==========================================================================
   Spinner
   ========================================================================== */

.chirpui-spinner {
    display: inline-block;
    line-height: var(--chirpui-line-height-tight);
    font-size: var(--chirpui-font-base);
}

.chirpui-spinner--sm { font-size: var(--chirpui-font-xs); }
.chirpui-spinner--md { font-size: var(--chirpui-font-base); }
.chirpui-spinner--lg { font-size: var(--chirpui-font-xl); }

.chirpui-spinner__mote {
    display: inline-block;
    animation: chirpui-mote-pulse 0.9s ease-in-out infinite;
}

@keyframes chirpui-mote-pulse {
    0%, 100% {
        opacity: 0.3;
        scale: 0.8;
    }
    33% {
        opacity: 0.7;
        scale: 1;
    }
    66% {
        opacity: 1;
        scale: 1.1;
    }
}

.chirpui-spinner-thinking {
    display: inline-block;
    line-height: var(--chirpui-line-height-tight);
    font-size: var(--chirpui-font-base);
}

.chirpui-spinner-thinking--sm { font-size: var(--chirpui-font-xs); }
.chirpui-spinner-thinking--md { font-size: var(--chirpui-font-base); }
.chirpui-spinner-thinking--lg { font-size: var(--chirpui-font-xl); }

.chirpui-spinner-thinking__char {
    display: inline-block;
    transform-origin: 50% 52%;
    animation: chirpui-spiral-spin var(--chirpui-anim-pace) steps(4) infinite;
}

@keyframes chirpui-spiral-spin {
    to {
        transform: rotate(1turn);
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
.chirpui-spinner__mote,
.chirpui-spinner-thinking__char {
        animation: none;
        opacity: 1;
        scale: 1;
    }
}
}

/* === partials/074_ascii-icons.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Icons — Unicode symbols as primary icons
   ========================================================================== */

/* ASCII/symbol glyphs — monospace for consistent ○●◐ sizing across fonts */
.chirpui-ascii {
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    font-family: var(--chirpui-ascii-font);
}

.chirpui-ascii--sm { font-size: 0.75rem; }
.chirpui-ascii--md { font-size: 1rem; }
.chirpui-ascii--lg { font-size: 1.5rem; }
.chirpui-ascii--xl { font-size: 2rem; }

.chirpui-ascii__char {
    display: inline-block;
}

/* Rotate: 4 overlapping chars, cycle opacity */
.chirpui-ascii--rotate {
    position: relative;
    width: 1em;
    height: 1em;
    text-align: center;
}

.chirpui-ascii--rotate .chirpui-ascii__char {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: chirpui-ascii-rotate-cycle var(--chirpui-anim-breath) steps(1) infinite;
}

.chirpui-ascii--rotate .chirpui-ascii__char--1 { animation-delay: 0s; }
.chirpui-ascii--rotate .chirpui-ascii__char--2 { animation-delay: -0.6s; }
.chirpui-ascii--rotate .chirpui-ascii__char--3 { animation-delay: -0.4s; }
.chirpui-ascii--rotate .chirpui-ascii__char--4 { animation-delay: -0.2s; }

@keyframes chirpui-ascii-rotate-cycle {
    0%, 24% { opacity: 1; }
    25%, 100% { opacity: 0; }
}

/* Blink */
.chirpui-ascii--blink .chirpui-ascii__char {
    animation: chirpui-ascii-blink var(--chirpui-anim-breath) step-end infinite;
}

@keyframes chirpui-ascii-blink {
    50% { opacity: 0; }
}

/* Pulse — opacity + scale */
.chirpui-ascii--pulse .chirpui-ascii__char {
    animation: chirpui-ascii-pulse 1s ease-in-out infinite;
}

@keyframes chirpui-ascii-pulse {
    0%, 100% { opacity: 0.6; scale: 0.9; }
    50% { opacity: 1; scale: 1.1; }
}

/* Shrink — scale down and back */
.chirpui-ascii--shrink .chirpui-ascii__char {
    animation: chirpui-ascii-shrink 1.2s ease-in-out infinite;
}

@keyframes chirpui-ascii-shrink {
    0%, 100% { scale: 1; }
    50% { scale: 0.6; }
}

/* Grow — scale up and back */
.chirpui-ascii--grow .chirpui-ascii__char {
    animation: chirpui-ascii-grow 1.2s ease-in-out infinite;
}

@keyframes chirpui-ascii-grow {
    0%, 100% { scale: 1; }
    50% { scale: 1.4; }
}

/* Spin — full rotation */
.chirpui-ascii--spin .chirpui-ascii__char {
    animation: chirpui-ascii-spin 1s linear infinite;
}

@keyframes chirpui-ascii-spin {
    to { rotate: 360deg; }
}

/* Bounce — translateY */
.chirpui-ascii--bounce .chirpui-ascii__char {
    animation: chirpui-ascii-bounce var(--chirpui-anim-pace) ease-in-out infinite;
}

@keyframes chirpui-ascii-bounce {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -0.25em; }
}

/* Throb — opacity only, gentle */
.chirpui-ascii--throb .chirpui-ascii__char {
    animation: chirpui-ascii-throb var(--chirpui-anim-pulse) ease-in-out infinite;
}

@keyframes chirpui-ascii-throb {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Wiggle — small rotation wobble */
.chirpui-ascii--wiggle .chirpui-ascii__char {
    animation: chirpui-ascii-wiggle 0.5s ease-in-out infinite;
}

@keyframes chirpui-ascii-wiggle {
    0%, 100% { rotate: 0deg; }
    25% { rotate: -12deg; }
    75% { rotate: 12deg; }
}

/* Glow — text-shadow pulse */
.chirpui-ascii--glow .chirpui-ascii__char {
    animation: chirpui-ascii-glow var(--chirpui-anim-pulse) ease-in-out infinite;
}

@keyframes chirpui-ascii-glow {
    0%, 100% {
        filter: drop-shadow(0 0 2px currentColor);
        opacity: 0.8;
    }
    50% {
        filter: drop-shadow(0 0 8px currentColor);
        opacity: 1;
    }
}

/* Accessibility: Reduced motion for ASCII icons */
@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii--blink .chirpui-ascii__char,
    .chirpui-ascii--pulse .chirpui-ascii__char,
    .chirpui-ascii--shrink .chirpui-ascii__char,
    .chirpui-ascii--grow .chirpui-ascii__char,
    .chirpui-ascii--spin .chirpui-ascii__char,
    .chirpui-ascii--bounce .chirpui-ascii__char,
    .chirpui-ascii--throb .chirpui-ascii__char,
    .chirpui-ascii--wiggle .chirpui-ascii__char,
    .chirpui-ascii--glow .chirpui-ascii__char,
    .chirpui-ascii--rotate .chirpui-ascii__char {
        animation: none;
        opacity: 1;
        scale: 1;
        rotate: 0;
        translate: 0 0;
        filter: none;
    }
}

}

/* === partials/075_skeleton.css === */
@layer chirpui.component {
/* ==========================================================================
   Skeleton
   ========================================================================== */

.chirpui-skeleton {
    display: inline-block;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--chirpui-bg-subtle) 92%, var(--chirpui-surface)) 25%,
        color-mix(in srgb, var(--chirpui-border) 52%, var(--chirpui-bg-subtle)) 50%,
        color-mix(in srgb, var(--chirpui-bg-subtle) 92%, var(--chirpui-surface)) 75%
    );
    background-size: 200% 100%;
    animation: chirpui-skeleton-shimmer calc(var(--chirpui-anim-pulse) * 1.45) ease-in-out infinite;
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-skeleton--avatar {
    width: var(--chirpui-avatar-size-md);
    height: var(--chirpui-avatar-size-md);
    border-radius: 50%;
}

.chirpui-skeleton--card {
    display: grid;
    gap: var(--chirpui-spacing-sm);
    width: 100%;
    min-height: 14rem;
    padding: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius);
    background: color-mix(in srgb, var(--chirpui-bg-subtle) 54%, transparent);
    animation: none;
}

.chirpui-skeleton--card-img {
    width: 100%;
    height: 0;
    padding-bottom: 38%;
    border-radius: var(--chirpui-radius-sm);
    opacity: 0.72;
}

.chirpui-skeleton--card-line {
    display: block;
    height: 0.8em;
    width: 100%;
    opacity: 0.72;
}

.chirpui-skeleton--card-line:nth-of-type(2) {
    width: 72%;
    height: 0.95em;
}

.chirpui-skeleton--card-line:nth-of-type(3) {
    width: 88%;
}

.chirpui-skeleton--card-line:last-child {
    width: 54%;
}

.chirpui-skeleton--text {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius);
    background: color-mix(in srgb, var(--chirpui-bg-subtle) 40%, transparent);
    animation: none;
}

.chirpui-skeleton__line {
    display: block;
    height: 0.75em;
    width: 92%;
}

.chirpui-skeleton__line:nth-child(2) {
    width: 100%;
}

.chirpui-skeleton__line:last-child {
    width: 68%;
}

@keyframes chirpui-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-skeleton {
        animation: none;
        background: var(--chirpui-bg-subtle);
    }
}

/* suspense */
.chirpui-suspense-slot {
    min-height: 2rem;
}

.chirpui-suspense-group {
    display: contents;
}
}

/* === partials/076_infinite-scroll.css === */
@layer chirpui.component {
/* ==========================================================================
   Infinite Scroll
   ========================================================================== */

.chirpui-infinite-scroll__loading {
    opacity: 0;
    pointer-events: none;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
    transition: opacity var(--chirpui-transition);
}

.chirpui-infinite-scroll__loading.htmx-request {
    opacity: 1;
}

.chirpui-infinite-scroll__loading--skeleton {
    padding: var(--chirpui-spacing);
}
}

/* === partials/077_reveal-on-scroll.css === */
@layer chirpui.component {
/* ==========================================================================
   Reveal on Scroll (Alpine Intersect)
   ========================================================================== */

.chirpui-reveal-on-scroll {
    /* min-height: 1px set inline so Intersection Observer has a valid target */
}

}

/* === partials/078_empty-state.css === */
@layer chirpui.component {
/* ==========================================================================
   Empty State
   ========================================================================== */

.chirpui-empty-state {
    text-align: center;
    padding: var(--chirpui-spacing) calc(var(--chirpui-spacing) * 2);
    color: var(--chirpui-text-muted);
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-empty-state__icon,
.chirpui-empty-state__illustration {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--chirpui-spacing);
    opacity: 0.6;
}

.chirpui-empty-state__title {
    margin: 0 0 var(--chirpui-spacing-sm) 0;
    font-size: var(--chirpui-font-xl);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    text-wrap: balance;
}

.chirpui-empty-state__code {
    margin-bottom: var(--chirpui-spacing-sm);
}

.chirpui-empty-state__code code {
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    background: var(--chirpui-bg-subtle);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-empty-state__search-hint {
    margin: var(--chirpui-spacing-sm) 0 0;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
}

.chirpui-empty-state__suggestions {
    margin: var(--chirpui-spacing-sm) 0 0;
    padding-inline-start: 1.25rem;
    text-align: left;
}

.chirpui-empty-state__body {
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    max-inline-size: var(--chirpui-measure-sm);
    margin-inline: auto;
}

.chirpui-empty-state__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--chirpui-spacing);
}

.chirpui-empty-state__action.chirpui-btn,
.chirpui-empty-state__action .chirpui-btn {
    line-height: 1;
}

.chirpui-empty-state__action:empty {
    display: none;
}

.chirpui-empty-panel-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.chirpui-empty-panel-state--compact {
    padding: var(--chirpui-spacing-md);
}

.chirpui-empty-panel-state--compact .chirpui-empty-state__icon,
.chirpui-empty-panel-state--compact .chirpui-empty-state__illustration {
    font-size: var(--chirpui-empty-panel-state-icon-size);
    margin-bottom: var(--chirpui-spacing-sm);
}

.chirpui-empty-panel-state--compact .chirpui-empty-state__title {
    font-size: var(--chirpui-ui-base);
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-empty-panel-state--compact .chirpui-empty-state__body {
    max-width: var(--chirpui-measure-sm);
    margin: 0 auto;
}

.chirpui-empty-panel-state--compact .chirpui-empty-state__action {
    margin-top: var(--chirpui-spacing-sm);
}
}

/* === partials/079_progress-bar.css === */
@layer chirpui.component {
/* ==========================================================================
   Progress Bar
   ========================================================================== */

.chirpui-progress-bar {
    position: relative;
    width: 100%;
    display: grid;
    align-items: center;
}

.chirpui-progress-bar--sm { height: 0.25rem; }
.chirpui-progress-bar--md { height: 0.5rem; }
.chirpui-progress-bar--lg { height: 1rem; }

.chirpui-progress-bar__track {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    background: var(--chirpui-bg-subtle);
    border-radius: var(--chirpui-radius-sm);
    overflow: clip;
}

.chirpui-progress-bar__fill {
    height: 100%;
    background: currentColor;
    transition: width var(--chirpui-motion-slow) var(--chirpui-ease-standard);
    border-radius: var(--chirpui-radius-sm);
}

/* Progress bar variants */
.chirpui-progress-bar--gold .chirpui-progress-bar__fill {
    background: var(--chirpui-accent-dim, var(--chirpui-accent));
}

.chirpui-progress-bar--radiant .chirpui-progress-bar__fill {
    background: linear-gradient(
        90deg,
        var(--chirpui-accent-dim, var(--chirpui-accent)),
        var(--chirpui-accent-bright, var(--chirpui-accent))
    );
}

.chirpui-progress-bar--success .chirpui-progress-bar__fill {
    background: var(--chirpui-success);
}

.chirpui-progress-bar--watched .chirpui-progress-bar__fill {
    background: var(--chirpui-error);
}

.chirpui-progress-bar--info .chirpui-progress-bar__fill {
    background: var(--chirpui-info);
}

.chirpui-progress-bar--warning .chirpui-progress-bar__fill {
    background: var(--chirpui-warning);
}

.chirpui-progress-bar--error .chirpui-progress-bar__fill {
    background: var(--chirpui-error);
}

.chirpui-progress-bar--custom .chirpui-progress-bar__fill {
    background: var(--chirpui-progress-color);
}

.chirpui-progress-bar__label {
    grid-area: 1 / 1;
    z-index: 1;
    justify-self: center;
    max-width: calc(100% - var(--chirpui-spacing-sm));
    padding-inline: var(--chirpui-spacing-xs);
    border-radius: var(--chirpui-radius-full, 999px);
    background: color-mix(in srgb, var(--chirpui-bg) 72%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--chirpui-border) 60%, transparent);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    text-align: center;
    color: var(--chirpui-text);
    pointer-events: none;
    white-space: nowrap;
}
}

/* === partials/080_bar-chart.css === */
@layer chirpui.component {
/* ==========================================================================
   Bar Chart (CSS-only horizontal bars)
   ========================================================================== */

.chirpui-bar-chart {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-sm);
}

.chirpui-bar-chart--sm .chirpui-bar-chart__track { height: 0.25rem; }
.chirpui-bar-chart--md .chirpui-bar-chart__track { height: 0.5rem; }
.chirpui-bar-chart--lg .chirpui-bar-chart__track { height: 0.75rem; }

.chirpui-bar-chart__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4rem, 3fr) auto;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-inline-size: 0;
}

.chirpui-bar-chart__label {
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chirpui-bar-chart__label-link {
    color: inherit;
    text-decoration: none;
}

.chirpui-bar-chart__label-link:hover {
    color: var(--chirpui-accent);
    text-decoration: underline;
}

.chirpui-bar-chart__track {
    width: 100%;
    background: var(--chirpui-bg-subtle);
    border-radius: var(--chirpui-radius-sm);
    overflow: clip;
}

.chirpui-bar-chart__bar {
    height: 100%;
    min-width: 2px;
    transition: width var(--chirpui-motion-slow) var(--chirpui-ease-standard);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-bar-chart--gold .chirpui-bar-chart__bar {
    background: var(--chirpui-accent-dim, var(--chirpui-accent));
}

.chirpui-bar-chart--radiant .chirpui-bar-chart__bar {
    background: linear-gradient(
        90deg,
        var(--chirpui-accent-dim, var(--chirpui-accent)),
        var(--chirpui-accent-bright, var(--chirpui-accent))
    );
}

.chirpui-bar-chart--success .chirpui-bar-chart__bar {
    background: var(--chirpui-success);
}

.chirpui-bar-chart--muted .chirpui-bar-chart__bar {
    background: var(--chirpui-text-muted);
}

.chirpui-bar-chart__value {
    font-size: var(--chirpui-font-sm);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    min-width: 2ch;
    text-align: right;
}
}

/* === partials/081_donut-chart.css === */
@layer chirpui.component {
/* ==========================================================================
   Donut Chart (CSS-only conic gradient)
   ========================================================================== */

.chirpui-donut {
    position: relative;
    width: var(--chirpui-donut-size, 4rem);
    height: var(--chirpui-donut-size, 4rem);
    border-radius: 50%;
}

.chirpui-donut--sm { --chirpui-donut-size: 2.5rem; }
.chirpui-donut--md { --chirpui-donut-size: 4rem; }
.chirpui-donut--lg { --chirpui-donut-size: 6rem; }

.chirpui-donut__ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--chirpui-donut-fill, var(--chirpui-accent)) 0deg,
        var(--chirpui-donut-fill, var(--chirpui-accent)) calc(var(--chirpui-donut-pct, 0) * 3.6deg),
        var(--chirpui-bg-subtle) calc(var(--chirpui-donut-pct, 0) * 3.6deg),
        var(--chirpui-bg-subtle) 360deg
    );
}

.chirpui-donut__center {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: var(--chirpui-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--chirpui-text);
    line-height: var(--chirpui-line-height-tight);
    text-align: center;
    text-shadow:
        0 1px 2px var(--chirpui-surface),
        0 0 0.55rem var(--chirpui-surface);
}

.chirpui-donut__value {
    display: block;
    max-width: 85%;
    overflow-wrap: anywhere;
}

.chirpui-donut__caption {
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-normal);
    color: var(--chirpui-text-muted);
    line-height: var(--chirpui-line-height-tight);
    max-width: 85%;
    overflow-wrap: anywhere;
}

.chirpui-donut--gold .chirpui-donut__ring {
    --chirpui-donut-fill: var(--chirpui-accent-dim, var(--chirpui-accent));
}

.chirpui-donut--success .chirpui-donut__ring {
    --chirpui-donut-fill: var(--chirpui-success);
}

.chirpui-donut--muted .chirpui-donut__ring {
    --chirpui-donut-fill: var(--chirpui-text-muted);
}
}

/* === partials/082_status-indicator.css === */
@layer chirpui.component {
/* ==========================================================================
   Status Indicator
   ========================================================================== */

.chirpui-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--chirpui-radius-sm);
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    font-variant-numeric: tabular-nums;
    transition: background var(--chirpui-transition), color var(--chirpui-transition);
}

.chirpui-status-indicator__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.chirpui-status-indicator__icon {
    font-size: 1em;
    line-height: 1;
}

.chirpui-status-indicator__label {
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

/* Status variants - minimal styling, override with themes */
.chirpui-status-indicator--default {
    background: var(--chirpui-muted-bg);
    color: var(--chirpui-muted);
}

.chirpui-status-indicator--success {
    background: var(--chirpui-success-muted);
    color: var(--chirpui-success);
}

.chirpui-status-indicator--warning {
    background: var(--chirpui-warning-muted);
    color: var(--chirpui-warning);
}

.chirpui-status-indicator--error {
    background: var(--chirpui-error-muted);
    color: var(--chirpui-error);
}

.chirpui-status-indicator--info {
    background: var(--chirpui-alert-info-bg);
    color: var(--chirpui-info);
}

.chirpui-status-indicator--primary {
    background: var(--chirpui-primary-muted);
    color: var(--chirpui-primary);
}

.chirpui-status-indicator--custom {
    --_bg-mix: light-dark(14%, 20%);
    background: color-mix(in srgb, var(--chirpui-status-color) var(--_bg-mix), transparent);
    color: var(--chirpui-status-color);
}

.chirpui-status-indicator--custom .chirpui-status-indicator__dot {
    background: var(--chirpui-status-color);
}

/* Pulsing animation */
.chirpui-status-indicator--pulse .chirpui-status-indicator__dot {
    animation: chirpui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes chirpui-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-status-indicator--pulse .chirpui-status-indicator__dot {
        animation: none;
    }
}

/* Status indicator: surface-aware — boost dot visibility on non-default surfaces */
.chirpui-status-indicator--on-muted .chirpui-status-indicator__dot {
    box-shadow: 0 0 0 2px var(--chirpui-surface);
}
.chirpui-status-indicator--on-accent .chirpui-status-indicator__dot {
    box-shadow: 0 0 0 2px var(--chirpui-surface);
}
}

/* === partials/083_app-shell.css === */
@layer chirpui.component {
/* ==========================================================================
   App Shell
   ========================================================================== */
/* Root cause (9650266): grid + flex layout needs min-size 0 on flex/grid
   children to allow shrinking; topbar needs nowrap + topbar-end needs flex
   layout; breadcrumbs in topbar must not wrap or topbar grows vertically. */

:root {
    --chirpui-shell-offset-top: 0px;
}

html {
    scroll-padding-top: var(--chirpui-shell-offset-top);
}


.chirpui-app-shell {
    display: grid;
    grid-template-columns: var(--chirpui-sidebar-width, 16rem) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "topbar topbar" "sidebar main";
    min-height: 100dvh;
}

/* Route-context rail: an optional secondary region whose content swaps with the
   current route via an OOB fragment targeting #chirpui-context-rail. Region
   contract only — the app author still composes the shell. See
   docs/decisions/application-chrome-posture.md and docs/LAYOUT.md. */
.chirpui-app-shell--has-context-rail {
    grid-template-columns: var(--chirpui-sidebar-width, 16rem) minmax(0, 1fr) var(--chirpui-context-rail-width, 20rem);
    grid-template-areas: "topbar topbar topbar" "sidebar main context";
}

.chirpui-app-shell__context-rail {
    grid-area: context;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: sticky;
    top: var(--chirpui-shell-offset-top);
    max-block-size: calc(100dvh - var(--chirpui-shell-offset-top));
    padding: var(--chirpui-spacing-lg);
    border-left: 1px solid var(--chirpui-border);
    background: var(--chirpui-surface);
}

.chirpui-app-shell__context-rail--muted {
    background: var(--chirpui-surface-muted, var(--chirpui-surface));
}

.chirpui-app-shell :where([id]) {
    scroll-margin-top: calc(var(--chirpui-shell-offset-top) + var(--chirpui-spacing-sm));
}

.chirpui-app-shell__topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--chirpui-spacing);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border-bottom: 1px solid var(--chirpui-border);
    background: var(--chirpui-surface);
    position: sticky;
    top: 0;
    z-index: var(--chirpui-z-sticky);
    flex-shrink: 0;
    box-shadow: var(--chirpui-elevation-topbar);
    transition: box-shadow var(--chirpui-transition);
}

.chirpui-app-shell__topbar--glass {
    background: var(--chirpui-surface);
    border-color: var(--chirpui-border);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .chirpui-app-shell__topbar--glass {
        background: var(--chirpui-glass-bg);
        border-color: var(--chirpui-glass-border);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.chirpui-app-shell__topbar--gradient {
    background: var(--chirpui-gradient-subtle);
}

.chirpui-app-shell__brand {
    display: inline-flex;
    align-items: center;
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-size: var(--chirpui-font-lg);
    color: var(--chirpui-text);
    text-decoration: none;
    flex-shrink: 0;
}

.chirpui-app-shell__topbar-start {
    flex-shrink: 0;
}

/* The leading zone is always rendered for entry-point markup parity (#220), but
   an empty wrapper is still a flex item — the topbar's `gap` would push the
   brand right by one spacing unit on a default shell with no leading affordance.
   Collapse it when it holds no element child so the brand keeps its pre-#220
   position. `:has(> *)` keys off element children, so it ignores the macro
   path's whitespace text nodes that defeat `:empty`. */
.chirpui-app-shell__topbar-start:not(:has(> *)) {
    display: none;
}

.chirpui-app-shell__topbar-center {
    flex: 1;
    min-width: 0;
    overflow: clip;
}

.chirpui-app-shell__topbar-end {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
}

.chirpui-app-shell__shell-actions {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: calc(var(--chirpui-font-xs) * 1.25 + 2 * var(--chirpui-spacing-xs) + 2px);
}

.chirpui-shell-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-shell-actions__group {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-shell-action-form {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    margin: 0;
}

/* Keep breadcrumbs single-line in topbar to prevent topbar height growth */
.chirpui-app-shell__topbar-center .chirpui-breadcrumbs__list {
    flex-wrap: nowrap;
    overflow: clip;
}

.chirpui-app-shell__topbar-center .chirpui-breadcrumbs__item {
    flex-shrink: 0;
}

.chirpui-app-shell__topbar-center .chirpui-breadcrumbs__item:last-child {
    flex-shrink: 1;
    min-width: 0;
}

.chirpui-app-shell__topbar-center .chirpui-breadcrumbs__item:last-child .chirpui-breadcrumbs__link,
.chirpui-app-shell__topbar-center .chirpui-breadcrumbs__item:last-child .chirpui-breadcrumbs__current {
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.chirpui-app-shell__sidebar {
    grid-area: sidebar;
    position: sticky;
    top: var(--chirpui-shell-offset-top);
    align-self: start;
    min-height: 0;
    max-height: calc(100dvh - var(--chirpui-shell-offset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--chirpui-border);
}

.chirpui-app-shell__sidebar--muted {
    background: var(--chirpui-bg-subtle);
}

.chirpui-app-shell__sidebar--glass {
    background: var(--chirpui-surface);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .chirpui-app-shell__sidebar--glass {
        background: var(--chirpui-glass-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.chirpui-app-shell__sidebar .chirpui-sidebar {
    width: auto;
    border-right: none;
}

.chirpui-app-shell__sidebar-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: pointer;
    z-index: var(--chirpui-z-popover);
    user-select: none;
}

.chirpui-app-shell__sidebar-resize::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--chirpui-border);
    opacity: 0.6;
}

.chirpui-app-shell__sidebar-resize:hover::before,
.chirpui-app-shell__sidebar-resize:active::before {
    background: var(--chirpui-accent);
    opacity: 1;
}

.chirpui-app-shell__sidebar-resize:hover {
    background: color-mix(in srgb, var(--chirpui-accent) 10%, transparent);
}

/* Sidebar collapsed (icon-only) */
.chirpui-app-shell--sidebar-collapsed {
    --chirpui-sidebar-width: var(--chirpui-sidebar-collapsed-width, 4rem);
}

.chirpui-app-shell--sidebar-collapsible {
    transition: grid-template-columns var(--chirpui-transition);
}

.chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__label,
.chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__section-title {
    overflow: clip;
    width: 0;
    opacity: 0;
    white-space: nowrap;
}

.chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__link {
    justify-content: center;
    padding-inline: var(--chirpui-spacing-sm);
    margin-inline: var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius-sm);
}

.chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__icon {
    margin-inline-end: 0;
    min-width: 0;
    width: 1.25em;
    justify-content: center;
}

.chirpui-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--chirpui-spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--chirpui-radius-sm);
    color: var(--chirpui-text-muted);
    cursor: pointer;
    font-size: var(--chirpui-font-sm);
    transition: color var(--chirpui-transition), background var(--chirpui-transition),
        box-shadow var(--chirpui-transition), transform var(--chirpui-transition);
}

.chirpui-sidebar-toggle:hover {
    color: var(--chirpui-text);
    background: var(--chirpui-state-surface-hover);
    box-shadow: var(--chirpui-elevation-1);
}

.chirpui-sidebar-toggle:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-sidebar-toggle:active {
    transform: translateY(1px);
}

.chirpui-sidebar-toggle__icon {
    font-family: var(--chirpui-ascii-font);
}

.chirpui-sidebar-toggle[aria-expanded="false"] .chirpui-sidebar-toggle__icon {
    transform: rotate(180deg);
}

.chirpui-app-shell__main {
    grid-area: main;
    position: relative;
    min-height: 0;
    min-width: 0;
    overflow-x: clip;
    padding: var(--chirpui-spacing-lg);
}

/* Full-height main: flex column so #page-content can flex:1; inner panels own scroll.
   Opt in via {% block main_shell_class %}chirpui-app-shell__main--fill{% end %} on app_shell_layout. */
.chirpui-app-shell__main--fill {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--chirpui-shell-offset-top));
    overflow: clip;
    padding: 0;
}

.chirpui-app-shell__main--fill #page-content {
    flex: 1;
    min-height: 0;
    gap: 0;
}

/* Optional: single root wrapper inside #page-content that should fill (chat, maps). */
.chirpui-app-shell__main--fill #page-content > .chirpui-page-fill {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.chirpui-app-shell__main--fill::before {
    top: var(--chirpui-shell-offset-top);
    margin-inline: 0;
}

/* Navigation loading indicator — thin accent bar at the top of #main.
   Appears automatically via HTMX's .htmx-request class on the swap target.
   Slow cubic-bezier creep gives the illusion of real progress. */
.chirpui-app-shell__main::before {
    content: "";
    position: sticky;
    top: var(--chirpui-shell-offset-top);
    left: 0;
    right: 0;
    display: block;
    height: 2px;
    margin-inline: calc(-1 * var(--chirpui-spacing-lg));
    margin-bottom: calc(-2px);
    background: var(--chirpui-accent);
    transform: scaleX(0);
    transform-origin: left;
    z-index: var(--chirpui-z-dropdown);
    pointer-events: none;
    /* If a page sets display:grid on main, don't claim an auto-placed slot. */
    grid-column: 1 / -1;
    grid-row: 1;
}

.chirpui-app-shell__main.htmx-request::before {
    transform: scaleX(0.7);
    transition: transform var(--chirpui-motion-loading) var(--chirpui-ease-decel);
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-app-shell__main.htmx-request::before {
        transform: scaleX(1);
        transition: none;
    }
}

/* nav_progress — standalone page-level progress bar.
   Sits fixed at viewport top, animates on body.htmx-request.
   Use when not inside app_shell (which has its own built-in bar). */
.chirpui-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: var(--chirpui-z-command-palette);
    pointer-events: none;
    overflow: clip;
}

.chirpui-nav-progress::after {
    content: "";
    display: block;
    height: 100%;
    background: var(--chirpui-accent);
    transform: scaleX(0);
    transform-origin: left;
}

body.htmx-request .chirpui-nav-progress::after {
    transform: scaleX(0.7);
    transition: transform var(--chirpui-motion-loading) var(--chirpui-ease-decel);
}

@media (prefers-reduced-motion: reduce) {
    body.htmx-request .chirpui-nav-progress::after {
        transform: scaleX(1);
        transition: none;
    }
}

/* Fragment targets — vertical spacing. Tabs topmost; title/actions/content below. */
#page-root {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-lg);
    /* Newlines/indentation can leave a whitespace-only text node as the first flex child; it still
       gets a line-height strut (~1 line) under headers. Collapse the strut; restore type on children. */
    font-size: 0;
}

#page-root > * {
    font-size: var(--chirpui-font-base);
}

#page-content {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-md);
}

/* Below ~72rem the context rail leaves the side track and stacks under main —
   still in flow and reachable. The overlay/slide-over form is a follow-up (#196). */
@media (max-width: 72rem) {
    .chirpui-app-shell--has-context-rail {
        grid-template-columns: var(--chirpui-sidebar-width, 16rem) minmax(0, 1fr);
        /* Content-height rows packed at the top so the stacked rail follows main
           directly (not pushed below a full-viewport main, and not stretched by
           the grid's default align-content: stretch). Leftover space sits below. */
        grid-template-rows: auto auto auto;
        align-content: start;
        grid-template-areas:
            "topbar topbar"
            "sidebar main"
            "context context";
    }

    .chirpui-app-shell__context-rail {
        position: static;
        max-block-size: none;
        border-left: 0;
        border-top: 1px solid var(--chirpui-border);
    }
}

@media (max-width: 48rem) {
    .chirpui-app-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "sidebar"
            "main";
    }

    .chirpui-app-shell--has-context-rail {
        grid-template-rows: auto auto auto auto;
        align-content: start;
        grid-template-areas:
            "topbar"
            "sidebar"
            "main"
            "context";
    }

    .chirpui-app-shell__topbar {
        flex-wrap: wrap;
        gap: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
        padding: var(--chirpui-spacing-sm);
    }

    .chirpui-app-shell__topbar :where(a, button, select, input) {
        min-block-size: var(--chirpui-control-touch-target);
    }

    .chirpui-app-shell__brand {
        max-inline-size: min(16rem, 58vw);
        min-width: 0;
        overflow: clip;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chirpui-app-shell__topbar-center {
        order: 3;
        flex: 1 1 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .chirpui-app-shell__topbar-end {
        flex: 1 1 auto;
        justify-content: flex-end;
        min-width: 0;
    }

    .chirpui-app-shell__sidebar {
        position: sticky;
        top: var(--chirpui-shell-offset-top);
        max-block-size: var(--chirpui-sidebar-mobile-max-block-size);
        overflow-x: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: 0;
        border-bottom: 1px solid var(--chirpui-border);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar {
        width: max-content;
        min-width: 100%;
        padding: 0;
        border-right: 0;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__header,
    .chirpui-app-shell__sidebar .chirpui-sidebar__footer,
    .chirpui-app-shell__sidebar .chirpui-sidebar__section-title {
        display: none;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__nav {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__section {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        padding: var(--chirpui-spacing-xs);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--chirpui-spacing-xs);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links :where(div, nav, ul, ol),
    .chirpui-app-shell__sidebar .chirpui-nav-tree__list {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--chirpui-spacing-xs);
        margin: 0;
        padding: 0;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links :where(ul, ol),
    .chirpui-app-shell__sidebar .chirpui-nav-tree__list {
        list-style: none;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links > *,
    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links :where(div, nav, ul, ol) > *,
    .chirpui-app-shell__sidebar .chirpui-nav-tree__item {
        flex: 0 0 auto;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links :where(div) {
        border: 0;
        margin: 0;
        min-width: 0;
        padding: 0;
    }

    .chirpui-app-shell__sidebar :where(.chirpui-sidebar__link, .chirpui-nav-tree__link) {
        flex: 0 0 auto;
        margin-inline-start: 0;
        min-block-size: var(--chirpui-control-touch-target);
        border-radius: var(--chirpui-radius-sm);
        white-space: nowrap;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar__badge {
        margin-inline-start: var(--chirpui-spacing-xs);
    }

    .chirpui-app-shell__sidebar-resize {
        display: none;
    }

    .chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__label,
    .chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__section-title {
        width: auto;
        opacity: 1;
        overflow: visible;
    }

    .chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__link {
        justify-content: flex-start;
        margin-inline: 0;
    }

    .chirpui-app-shell--sidebar-collapsed .chirpui-sidebar__icon {
        margin-inline-end: var(--chirpui-spacing-sm);
        min-width: 1.25em;
        width: auto;
    }

    .chirpui-app-shell__main {
        padding: var(--chirpui-spacing);
    }

    .chirpui-app-shell__main::before {
        margin-inline: calc(-1 * var(--chirpui-spacing));
    }
}

#page-content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-md);
}

/* ==========================================================================
   Mobile shell drawers (#196) — opt-in via app_shell(nav_drawer=true)
   --------------------------------------------------------------------------
   Below the single-column breakpoint, a topbar toggle turns an in-grid shell
   region (the sidebar, and — with context_rail — the rail) into an accessible
   off-canvas slide-over. The open/close/focus-trap/ESC/scrim/scroll-lock
   behavior is vanilla JS in shell_runtime_script() (no Alpine dependency);
   these rules are the presentation half. Every hook below is hidden until the
   breakpoint and gated on .chirpui-app-shell--nav-drawer, so a shell that does
   not opt in is completely unaffected (the legacy horizontal-strip fallback
   still applies). The +1 root-class specificity reliably overrides the
   unprefixed ≤48rem strip selectors above.
   ========================================================================== */

.chirpui-app-shell__nav-toggle,
.chirpui-app-shell__rail-toggle {
    display: none; /* shown only below the breakpoint — see media block */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-inline-size: var(--chirpui-control-touch-target);
    min-block-size: var(--chirpui-control-touch-target);
    padding: var(--chirpui-spacing-sm);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--chirpui-radius-sm);
    color: var(--chirpui-text-muted);
    cursor: pointer;
    transition: color var(--chirpui-transition), background var(--chirpui-transition),
        border-color var(--chirpui-transition);
}

.chirpui-app-shell__rail-toggle {
    gap: var(--chirpui-spacing-xs);
    font-size: var(--chirpui-font-sm);
    /* Resting border so the text trigger reads as a button next to the hamburger glyph. */
    border-color: var(--chirpui-border);
    background: var(--chirpui-surface);
}

.chirpui-app-shell__nav-toggle:hover,
.chirpui-app-shell__rail-toggle:hover {
    color: var(--chirpui-text);
    background: var(--chirpui-state-surface-hover);
}

.chirpui-app-shell__nav-toggle:focus-visible,
.chirpui-app-shell__rail-toggle:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

/* CSS-drawn hamburger glyph — no icon-registry dependency, inherits currentColor. */
.chirpui-app-shell__nav-toggle-bars,
.chirpui-app-shell__nav-toggle-bars::before,
.chirpui-app-shell__nav-toggle-bars::after {
    display: block;
    inline-size: 1.125rem;
    block-size: 2px;
    border-radius: 1px;
    background: currentColor;
}

.chirpui-app-shell__nav-toggle-bars {
    position: relative;
}

.chirpui-app-shell__nav-toggle-bars::before,
.chirpui-app-shell__nav-toggle-bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.chirpui-app-shell__nav-toggle-bars::before {
    inset-block-start: -6px;
}

.chirpui-app-shell__nav-toggle-bars::after {
    inset-block-start: 6px;
}

/* Shared scrim — dims the shell while a drawer is open (toggled via [hidden] by JS). */
.chirpui-app-shell__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--chirpui-z-tray) - 1);
    border: 0;
    background: var(--chirpui-smoke-bg);
}

/* Drawer chrome (head + close) — only rendered/visible in drawer mode. */
.chirpui-app-shell__drawer-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--chirpui-spacing-sm);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border-bottom: 1px solid var(--chirpui-border);
}

.chirpui-app-shell__drawer-title {
    margin: 0;
    font-size: var(--chirpui-font-base);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-app-shell__drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Touch-target parity with the topbar toggles — this is a primary phone control. */
    min-inline-size: var(--chirpui-control-touch-target);
    min-block-size: var(--chirpui-control-touch-target);
    padding: 0;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    cursor: pointer;
}

.chirpui-app-shell__drawer-close:hover {
    color: var(--chirpui-text);
}

.chirpui-app-shell__drawer-close:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

/* Floating close — injected by shell_runtime_script() into a headless drawer
   (the route-context rail) so it always carries an on-screen dismiss control
   without baking a head into the OOB-swapped rail content. */
.chirpui-app-shell__drawer-close--floating {
    position: absolute;
    inset-block-start: var(--chirpui-spacing-sm);
    inset-inline-end: var(--chirpui-spacing-sm);
    z-index: 1;
    border-radius: var(--chirpui-radius-sm);
    background: var(--chirpui-surface);
}

@media (min-width: 48rem) {
    /* Defensive: a scrim can never be active above the breakpoint. */
    .chirpui-app-shell__scrim {
        display: none;
    }
}

@media (max-width: 48rem) {
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__nav-toggle {
        display: inline-flex;
    }

    .chirpui-app-shell--nav-drawer.chirpui-app-shell--has-context-rail .chirpui-app-shell__rail-toggle {
        display: inline-flex;
    }

    .chirpui-app-shell--nav-drawer [data-chirpui-shell-drawer] .chirpui-app-shell__drawer-head {
        display: flex;
    }

    /* Sidebar + rail become off-canvas slide-overs. visibility:hidden keeps the
       closed panel out of the tab order and a11y tree; the visibility delay on
       the closed state lets the slide-out finish before it is removed. */
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar,
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__context-rail {
        position: fixed;
        inset-block: 0;
        z-index: var(--chirpui-z-tray);
        inline-size: min(86vw, 20rem);
        max-block-size: 100dvh;
        margin: 0;
        border: 0;
        background: var(--chirpui-surface);
        box-shadow: var(--chirpui-elevation-overlay);
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        transition: transform var(--chirpui-transition),
            visibility 0s linear var(--chirpui-motion-base);
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar {
        inset-inline-start: 0;
        transform: translateX(-100%);
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__context-rail {
        inset-inline-end: 0;
        border-top: 0;
        transform: translateX(100%);
    }

    .chirpui-app-shell--nav-drawer [data-chirpui-shell-drawer].chirpui-app-shell__drawer--open {
        transform: none;
        visibility: visible;
        transition: transform var(--chirpui-transition), visibility 0s;
    }

    /* Restore the in-drawer sidebar to its vertical desktop layout (undo the
       ≤48rem horizontal strip). Values mirror 029_sidebar.css / 065 base. */
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar {
        width: auto;
        min-width: 0;
        padding: var(--chirpui-spacing) 0;
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--chirpui-sidebar-section-gap);
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__section {
        display: block;
        padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-sm);
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__section-links,
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__section-links :where(div, nav, ul, ol),
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-nav-tree__list {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: var(--chirpui-sidebar-link-gap);
        margin-top: var(--chirpui-spacing-xs);
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__header,
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__footer,
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar .chirpui-sidebar__section-title {
        display: block;
    }

    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar :where(.chirpui-sidebar__link, .chirpui-nav-tree__link) {
        white-space: normal;
    }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
    /* The global motion cap zeroes transition-duration but not -delay, so the
       closed panel would otherwise linger (visibility:visible) in the a11y tree
       for the ~150ms slide-out window. Snap it shut instead. */
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__sidebar,
    .chirpui-app-shell--nav-drawer .chirpui-app-shell__context-rail {
        transition-delay: 0s;
    }
}
}

/* === partials/084_app-shell-sidebar.css === */
@layer chirpui.component {
/* ==========================================================================
   Sidebar — section links container
   ========================================================================== */

.chirpui-sidebar__section-links {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-sidebar-link-gap);
    margin-top: var(--chirpui-spacing-xs);
}

.chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section > summary {
    cursor: default;
}

.chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section > summary::after {
    display: none;
}

@media (max-width: 48rem) {
    .chirpui-app-shell__sidebar .chirpui-sidebar__section-links {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        margin-top: 0;
    }

    .chirpui-app-shell__sidebar:has(.chirpui-sidebar--responsive-dropdowns) {
        max-block-size: none;
        overflow: visible;
        z-index: var(--chirpui-z-sticky);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns {
        width: 100%;
        min-width: 0;
        padding: var(--chirpui-spacing-xs);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__nav {
        position: relative;
        flex-wrap: wrap;
        gap: var(--chirpui-spacing-xs);
        overflow: visible;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section {
        position: relative;
        display: block;
        flex: 0 0 auto;
        padding: 0;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section-title {
        display: inline-flex;
        align-items: center;
        gap: var(--chirpui-spacing-xs);
        min-block-size: var(--chirpui-control-touch-target);
        padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
        margin: 0;
        border: 1px solid var(--chirpui-border-subtle);
        border-radius: var(--chirpui-radius-sm);
        background: var(--chirpui-surface);
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-font-sm);
        line-height: var(--chirpui-line-height-tight);
        text-transform: none;
        letter-spacing: 0;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section > summary {
        cursor: pointer;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section:has(.chirpui-sidebar__link--active) > .chirpui-sidebar__section-title {
        color: var(--chirpui-sidebar-active-color);
        border-color: color-mix(in srgb, var(--chirpui-accent) 45%, var(--chirpui-border));
        background: var(--chirpui-sidebar-active-bg);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section[open] > .chirpui-sidebar__section-title {
        color: var(--chirpui-text);
        border-color: var(--chirpui-border);
        background: var(--chirpui-muted-bg);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section > summary::after {
        content: "\25BE";
        display: inline-block;
        margin-inline-start: var(--chirpui-spacing-xs);
        rotate: none;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section[open] > summary::after {
        rotate: 180deg;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section-links {
        position: absolute;
        inset-block-start: calc(100% + var(--chirpui-spacing-xs));
        inset-inline-start: 0;
        display: grid;
        min-inline-size: min(16rem, calc(100vw - (2 * var(--chirpui-spacing))));
        max-inline-size: calc(100vw - (2 * var(--chirpui-spacing)));
        padding: var(--chirpui-spacing-xs);
        border: 1px solid var(--chirpui-border);
        border-radius: var(--chirpui-radius);
        background: var(--chirpui-surface);
        box-shadow: var(--chirpui-shadow-lg);
        z-index: var(--chirpui-z-dropdown);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section:nth-last-child(-n + 2) .chirpui-sidebar__section-links {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-sidebar__section-links :where(div, nav, ul, ol),
    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns .chirpui-nav-tree__list {
        display: grid;
        gap: var(--chirpui-sidebar-link-gap);
    }

    .chirpui-app-shell__sidebar .chirpui-sidebar--responsive-dropdowns :where(.chirpui-sidebar__link, .chirpui-nav-tree__link) {
        width: 100%;
        border-radius: var(--chirpui-radius-sm);
        white-space: normal;
    }
}

/* Collapsible section (details/summary) */
.chirpui-sidebar__section > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
}

.chirpui-sidebar__section > summary::-webkit-details-marker {
    display: none;
}

.chirpui-sidebar__section > summary::after {
    content: "\25B8";
    display: inline-block;
    transition: rotate var(--chirpui-transition);
    margin-inline-start: auto;
    font-size: var(--chirpui-font-xs);
    line-height: 1;
    color: var(--chirpui-text-muted);
}

.chirpui-sidebar__section[open] > summary::after {
    rotate: 90deg;
}
}

/* === partials/085_command-palette.css === */
@layer chirpui.component {
/* ==========================================================================
   Command Palette
   ========================================================================== */

.chirpui-command-palette {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 40rem;
    width: 90vw;
    margin: 10vh auto auto;
    border-radius: var(--chirpui-radius-lg);
    overflow: clip;
}

.chirpui-command-palette::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.chirpui-command-palette__inner {
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    font-family: var(--chirpui-ui-font-family);
    overflow: clip;
}

.chirpui-command-palette__input {
    width: 100%;
    padding: var(--chirpui-spacing) var(--chirpui-spacing-lg);
    border: none;
    border-bottom: 1px solid var(--chirpui-border);
    background: transparent;
    font-size: var(--chirpui-font-lg);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    outline: none;
    font-family: inherit;
}

.chirpui-command-palette__input::placeholder {
    color: var(--chirpui-text-muted);
}

.chirpui-command-palette__results {
    max-height: 20rem;
    overflow-y: auto;
    padding: var(--chirpui-spacing-sm) 0;
}

.chirpui-command-palette__results:empty {
    display: none;
}

.chirpui-command-palette__group-title {
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-lg);
}

.chirpui-command-palette__item {
    display: block;
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-lg);
    color: var(--chirpui-text);
    text-decoration: none;
    line-height: var(--chirpui-line-height-normal);
    transition: background var(--chirpui-transition);
    overflow-wrap: anywhere;
}

.chirpui-command-palette__item:hover,
.chirpui-command-palette__item--active {
    background: var(--chirpui-bg-subtle);
}

.chirpui-command-palette__item:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-command-palette__item-label {
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-command-palette__item-hint {
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text-muted);
}

.chirpui-command-palette__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-sm);
    background: transparent;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    cursor: pointer;
    transition: color var(--chirpui-transition), border-color var(--chirpui-transition);
    font-family: inherit;
}

.chirpui-command-palette-trigger--md {
    min-block-size: var(--chirpui-control-block-size);
}

.chirpui-command-palette-trigger--sm {
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-sm);
    font-size: var(--chirpui-font-xs);
}

.chirpui-command-palette__trigger:hover {
    color: var(--chirpui-text);
    border-color: var(--chirpui-text-muted);
}

.chirpui-command-palette__trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1em;
    block-size: 1em;
}

.chirpui-command-palette__trigger-label {
    min-inline-size: 0;
}

.chirpui-command-palette__kbd {
    font-size: var(--chirpui-font-xs);
    padding: 0.1em 0.4em;
    border-radius: var(--chirpui-radius-xs, 3px);
    background: var(--chirpui-bg-subtle);
    border: 1px solid var(--chirpui-border);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
}
}

/* === partials/086_utility-inline-grouping-and-measures.css === */
@layer chirpui.utility {
/* ==========================================================================
   Utility: Inline grouping and measures
   ========================================================================== */

.chirpui-flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-space-cluster-gap);
    align-items: center;
}

.chirpui-flow--sm { gap: var(--chirpui-spacing-sm); }
.chirpui-flow--md { gap: var(--chirpui-spacing-md); }
.chirpui-flow--lg { gap: var(--chirpui-spacing-lg); }

.chirpui-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-space-inline-gap);
    flex-wrap: nowrap;
}

.chirpui-measure-sm { max-width: var(--chirpui-measure-sm); }
.chirpui-measure-md { max-width: var(--chirpui-measure-md); }
.chirpui-measure-lg { max-width: var(--chirpui-measure-lg); }

.chirpui-placeholder-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-space-control-gap);
    color: var(--chirpui-text-muted);
}

.chirpui-list-reset {
    margin: 0;
    padding-inline-start: 1.25rem;
}

}

/* === partials/087_utility-auto-fill-grid.css === */
@layer chirpui.utility {
/* ==========================================================================
   Utility: Auto-fill grid (for tag filters, etc.)
   ========================================================================== */

.chirpui-grid--auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--chirpui-spacing-sm);
}

.chirpui-grid--auto-fill .chirpui-badge {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

}

/* === partials/088_inner-shell-sections.css === */
@layer chirpui.component {
/* ==========================================================================
   Inner shell sections (nested layouts: forum > subforum > thread)
   ========================================================================== */

.chirpui-shell-section {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-md);
    min-height: 0;
}
.chirpui-shell-section__nav {
    flex-shrink: 0;
}
.chirpui-shell-section__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}


}

/* === partials/089_effects-foundation.css === */
@layer chirpui.component {
/* ==========================================================================
   Effects Foundation — @property, @keyframes, reduced-motion
   ========================================================================== */

/* CSS Houdini custom properties for animatable values */
@property --chirpui-beam-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --chirpui-num {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

/* --- Shimmer: translating gradient highlight --- */
@keyframes chirpui-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- Ripple: radial scale-out for click feedback --- */
@keyframes chirpui-ripple-expand {
    0% { transform: scale(0); opacity: 0.6; }
    100% { transform: scale(4); opacity: 0; }
}

/* --- Border beam: conic gradient rotation --- */
@keyframes chirpui-border-beam-rotate {
    0% { --chirpui-beam-angle: 0deg; }
    100% { --chirpui-beam-angle: 360deg; }
}

/* --- Pulse ring: expanding ring that fades --- */
@keyframes chirpui-pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* --- Float: gentle vertical bob --- */
@keyframes chirpui-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* --- Count up: CSS counter increment via @property --- */
@keyframes chirpui-count-up {
    from { --chirpui-num: 0; }
}

/* --- Meteor: diagonal streak --- */
@keyframes chirpui-meteor {
    0% { transform: rotate(215deg) translateX(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: rotate(215deg) translateX(-600px); opacity: 0; }
}

/* --- Marquee: infinite horizontal scroll --- */
@keyframes chirpui-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Gradient text: visible background travel --- */
@keyframes chirpui-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Text reveal: clip-path wipe --- */
@keyframes chirpui-text-reveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* --- Spotlight rotate: radial gradient rotation --- */
@keyframes chirpui-spotlight-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Typewriter: step-based text reveal with cursor --- */
@keyframes chirpui-typewriter {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes chirpui-blink-caret {
    0%, 100% { border-color: transparent; }
    50% { border-color: currentColor; }
}

/* --- Glitch: offset pseudo-element distortion --- */
@keyframes chirpui-glitch {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 40% 0); transform: translate(-2px, 1px); }
    40% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
    60% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 2px); }
    80% { clip-path: inset(50% 0 20% 0); transform: translate(1px, -2px); }
}
@keyframes chirpui-glitch-alt {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -1px); }
    40% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(40% 0 30% 0); transform: translate(1px, -1px); }
    80% { clip-path: inset(70% 0 5% 0); transform: translate(-1px, 1px); }
}

/* --- Neon: pulsing glow flicker --- */
@keyframes chirpui-neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.6; }
}
@keyframes chirpui-neon-pulse {
    0%, 100% { text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor; }
    50% { text-shadow: 0 0 4px currentColor, 0 0 20px currentColor, 0 0 40px currentColor, 0 0 60px currentColor; }
}

/* --- Aurora: drifting gradient blobs --- */
@keyframes chirpui-aurora-drift-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(30%, -20%) rotate(90deg) scale(1.1); }
    50% { transform: translate(-20%, 30%) rotate(180deg) scale(0.9); }
    75% { transform: translate(20%, -10%) rotate(270deg) scale(1.05); }
}
@keyframes chirpui-aurora-drift-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-30%, 20%) rotate(120deg) scale(1.15); }
    66% { transform: translate(20%, -30%) rotate(240deg) scale(0.85); }
}

/* --- Symbol Rain: cascading ASCII characters --- */
@keyframes chirpui-symbol-rain-fall {
    0% { transform: translateY(-100%) rotate(0deg); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(calc(100vh + 2rem)) rotate(45deg); opacity: 0; }
}

/* --- Holy Light: ascending divine sparkles with parallax --- */
@keyframes chirpui-holy-rise-far {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    15% { opacity: 0.3; }
    85% { opacity: 0.3; }
    100% { transform: translateY(-120px) scale(0.6); opacity: 0; }
}
@keyframes chirpui-holy-rise-mid {
    0% { transform: translateY(0) scale(0.85); opacity: 0; }
    15% { opacity: 0.6; }
    50% { opacity: 0.8; }
    85% { opacity: 0.5; }
    100% { transform: translateY(-200px) scale(0.85); opacity: 0; }
}
@keyframes chirpui-holy-rise-near {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.9; }
    50% { opacity: 1; }
    90% { opacity: 0.7; }
    100% { transform: translateY(-300px) scale(1); opacity: 0; }
}
@keyframes chirpui-holy-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px var(--chirpui-holy-color)) brightness(1); }
    50% { filter: drop-shadow(0 0 8px var(--chirpui-holy-color)) brightness(1.3); }
}

/* --- Rune Field: drifting mystical symbols with parallax --- */
@keyframes chirpui-rune-drift-far {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(8px, -6px) rotate(5deg); }
    50% { transform: translate(-4px, -12px) rotate(-3deg); }
    75% { transform: translate(6px, -4px) rotate(2deg); }
}
@keyframes chirpui-rune-drift-mid {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-12px, 8px) rotate(-8deg); }
    50% { transform: translate(10px, -15px) rotate(5deg); }
    75% { transform: translate(-6px, 6px) rotate(-3deg); }
}
@keyframes chirpui-rune-drift-near {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15px, -10px) rotate(10deg); }
    50% { transform: translate(-8px, -20px) rotate(-6deg); }
    75% { transform: translate(10px, -5px) rotate(4deg); }
}
@keyframes chirpui-rune-pulse {
    0%, 100% { opacity: var(--chirpui-rune-opacity, 0.4); }
    50% { opacity: calc(var(--chirpui-rune-opacity, 0.4) + 0.15); }
}

/* --- ASCII Skeleton: wave opacity for character fills --- */
@keyframes chirpui-ascii-skeleton-wave {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.6; }
}

/* --- ASCII Momentum: physics-like spin with accel/decel --- */
@keyframes chirpui-ascii-momentum {
    0%   { transform: rotate(0deg); }
    8%   { transform: rotate(45deg); }      /* fast start */
    20%  { transform: rotate(180deg); }     /* peak speed */
    35%  { transform: rotate(340deg); }     /* still fast */
    50%  { transform: rotate(420deg); }     /* slowing */
    65%  { transform: rotate(460deg); }     /* decelerating */
    78%  { transform: rotate(480deg); }     /* crawling */
    88%  { transform: rotate(490deg); }     /* almost stopped */
    95%  { transform: rotate(495deg); }     /* barely moving */
    100% { transform: rotate(720deg); }     /* sudden burst again */
}
@keyframes chirpui-ascii-momentum-reverse {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(-60deg); }
    25%  { transform: rotate(-200deg); }
    40%  { transform: rotate(-310deg); }
    55%  { transform: rotate(-370deg); }
    70%  { transform: rotate(-395deg); }
    82%  { transform: rotate(-400deg); }
    92%  { transform: rotate(-402deg); }
    100% { transform: rotate(-720deg); }
}
@keyframes chirpui-ascii-momentum-drift {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(90deg); }
    30%  { transform: rotate(95deg); }      /* pause/drift */
    45%  { transform: rotate(270deg); }     /* burst */
    60%  { transform: rotate(275deg); }     /* pause */
    75%  { transform: rotate(360deg); }
    85%  { transform: rotate(362deg); }     /* almost still */
    100% { transform: rotate(720deg); }     /* final burst */
}

/* --- ASCII Spinner: stepped visibility keyframes --- */
@keyframes chirpui-ascii-spinner-10 {
    0%, 9%   { opacity: 1; }
    10%, 100% { opacity: 0; }
}
@keyframes chirpui-ascii-spinner-8 {
    0%, 11.5%  { opacity: 1; }
    12.5%, 100% { opacity: 0; }
}
@keyframes chirpui-ascii-spinner-5 {
    0%, 19%  { opacity: 1; }
    20%, 100% { opacity: 0; }
}
@keyframes chirpui-ascii-spinner-4 {
    0%, 24%  { opacity: 1; }
    25%, 100% { opacity: 0; }
}

/* --- Constellation: twinkling starfield with gentle drift --- */
@keyframes chirpui-star-twinkle {
    0%, 100% { opacity: var(--chirpui-star-base-opacity, 0.3); transform: scale(1); }
    50% { opacity: calc(var(--chirpui-star-base-opacity, 0.3) + 0.5); transform: scale(1.3); }
}
@keyframes chirpui-star-drift {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(3px, -2px); }
    66% { transform: translate(-2px, 3px); }
}

/* --- Sparkle: star pop-in/pop-out --- */
@keyframes chirpui-sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* --- Confetti: falling pieces --- */
@keyframes chirpui-confetti-fall {
    0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes chirpui-confetti-sway {
    0%, 100% { translate: 0 0; }
    50% { translate: 30px 0; }
}

/* --- Orbit: circular rotation --- */
@keyframes chirpui-orbit {
    0% { transform: rotate(0deg) translateX(var(--chirpui-orbit-radius, 60px)) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(var(--chirpui-orbit-radius, 60px)) rotate(-360deg); }
}

/* --- Wobble: micro-interaction utilities --- */
@keyframes chirpui-wobble {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-12px) rotate(-5deg); }
    30% { transform: translateX(10px) rotate(3deg); }
    45% { transform: translateX(-6px) rotate(-3deg); }
    60% { transform: translateX(4px) rotate(2deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
}
@keyframes chirpui-jello {
    0%, 100% { transform: skewX(0deg) skewY(0deg); }
    11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
    33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
}
@keyframes chirpui-rubber-band {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
}
@keyframes chirpui-bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Reduced motion: disable all new effect animations --- */
@media (prefers-reduced-motion: reduce) {
    .chirpui-shimmer-btn__shimmer,
    .chirpui-ripple-btn__ripple,
    .chirpui-border-beam__beam,
    .chirpui-notification-dot__ping,
    .chirpui-marquee__track,
    .chirpui-meteor__streak,
    .chirpui-text-reveal,
    .chirpui-number-ticker__value,
    .chirpui-animated-counter__value,
    .chirpui-particle-bg__dot,
    .chirpui-glow-card__glow,
    .chirpui-spotlight-card__spotlight,
    .chirpui-dock__item,
    .chirpui-typewriter__text,
    .chirpui-glitch,
    .chirpui-glitch::before,
    .chirpui-glitch::after,
    .chirpui-neon,
    .chirpui-aurora__blob,
    .chirpui-sparkle__star,
    .chirpui-confetti__piece,
    .chirpui-orbit__item,
    .chirpui-wobble,
    .chirpui-jello,
    .chirpui-rubber-band,
    .chirpui-bounce-in,
    .chirpui-symbol-rain__drop,
    .chirpui-holy-light__mote,
    .chirpui-rune-field__rune,
    .chirpui-constellation__star,
    .chirpui-ascii-border--spin .chirpui-ascii-border__corner,
    .chirpui-ascii-divider--spin .chirpui-ascii-divider__glyph,
    .chirpui-ascii-divider--spin-reverse .chirpui-ascii-divider__glyph,
    .chirpui-ascii-divider--spin-drift .chirpui-ascii-divider__glyph,
    .chirpui-ascii-spinner__char,
    .chirpui-ascii-skeleton,
    .chirpui-ascii-skeleton__fill,
    .chirpui-ascii-skeleton__line,
    .chirpui-gradient-text--animated,
    .chirpui-accordion__content,
    .chirpui-collapse__content {
        animation: none !important;
        transition: none !important;
    }
    dialog.chirpui-modal,
    .chirpui-modal,
    .chirpui-modal[data-modal-id] .chirpui-modal__panel,
    .chirpui-toast {
        transition: none !important;
    }
    .chirpui-text-reveal { clip-path: none; }
    .chirpui-number-ticker__value { --chirpui-num: var(--chirpui-num-target, 0); }
    .chirpui-typewriter__text { width: 100%; border-color: transparent; }
}

}

/* === partials/090_shimmer-button.css === */
@layer chirpui.component {
/* ==========================================================================
   Shimmer Button
   ========================================================================== */

.chirpui-shimmer-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-md);
    font-size: var(--chirpui-ui-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    overflow: clip;
    cursor: pointer;
    transition: background var(--chirpui-transition);
}
.chirpui-shimmer-btn:hover { background: var(--chirpui-surface-alt); }
.chirpui-shimmer-btn__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--chirpui-shimmer-from),
        var(--chirpui-shimmer-via),
        var(--chirpui-shimmer-to)
    );
    animation: chirpui-shimmer 2s var(--chirpui-ease-standard) infinite;
    pointer-events: none;
}
.chirpui-shimmer-btn--primary {
    background: var(--chirpui-accent);
    color: var(--chirpui-bg);
    border-color: var(--chirpui-accent);
}
.chirpui-shimmer-btn--primary:hover { background: var(--chirpui-accent-hover); }
.chirpui-shimmer-btn--sm { padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-sm); font-size: var(--chirpui-ui-xs); }
.chirpui-shimmer-btn--lg { padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-lg); font-size: var(--chirpui-ui-base); }

}

/* === partials/091_ripple-button.css === */
@layer chirpui.component {
/* ==========================================================================
   Ripple Button
   ========================================================================== */

.chirpui-ripple-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-md);
    font-size: var(--chirpui-ui-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    overflow: clip;
    cursor: pointer;
    transition: background var(--chirpui-transition);
}
.chirpui-ripple-btn:hover { background: var(--chirpui-surface-alt); }
.chirpui-ripple-btn__ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--chirpui-ripple-color);
    transform: scale(0);
    animation: chirpui-ripple-expand var(--chirpui-motion-extra-slow) var(--chirpui-ease-decel) forwards;
    pointer-events: none;
}
.chirpui-ripple-btn--primary {
    background: var(--chirpui-accent);
    color: var(--chirpui-bg);
    border-color: var(--chirpui-accent);
}
.chirpui-ripple-btn--primary:hover { background: var(--chirpui-accent-hover); }
.chirpui-ripple-btn--sm { padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-sm); font-size: var(--chirpui-ui-xs); }
.chirpui-ripple-btn--lg { padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-lg); font-size: var(--chirpui-ui-base); }

}

/* === partials/092_border-beam.css === */
@layer chirpui.component {
/* ==========================================================================
   Border Beam
   ========================================================================== */

.chirpui-border-beam {
    position: relative;
    overflow: clip;
    border-radius: var(--chirpui-radius);
    padding: 1px;
}
.chirpui-border-beam__beam {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from var(--chirpui-beam-angle, 0deg), transparent 60%, var(--chirpui-beam-color) 80%, transparent 100%);
    animation: chirpui-border-beam-rotate var(--chirpui-motion-crawl) linear infinite;
    pointer-events: none;
    z-index: 0;
}
.chirpui-border-beam__content {
    position: relative;
    background: var(--chirpui-surface);
    border-radius: calc(var(--chirpui-radius) - 1px);
    z-index: 1;
}
.chirpui-border-beam--accent .chirpui-border-beam__beam { --chirpui-beam-color: var(--chirpui-accent); }
.chirpui-border-beam--success .chirpui-border-beam__beam { --chirpui-beam-color: var(--chirpui-success); }
.chirpui-border-beam--warning .chirpui-border-beam__beam { --chirpui-beam-color: var(--chirpui-warning); }


}

/* === partials/093_notification-dot.css === */
@layer chirpui.component {
/* ==========================================================================
   Notification Dot
   ========================================================================== */

.chirpui-notification-dot {
    position: relative;
    display: inline-flex;
}
.chirpui-notification-dot__dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chirpui-error);
    z-index: 1;
}
.chirpui-notification-dot__ping {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chirpui-error);
    animation: chirpui-pulse-ring var(--chirpui-anim-pulse) var(--chirpui-ease-decel) infinite;
    z-index: 0;
}
.chirpui-notification-dot--success .chirpui-notification-dot__dot,
.chirpui-notification-dot--success .chirpui-notification-dot__ping { background: var(--chirpui-success); }
.chirpui-notification-dot--warning .chirpui-notification-dot__dot,
.chirpui-notification-dot--warning .chirpui-notification-dot__ping { background: var(--chirpui-warning); }
.chirpui-notification-dot--sm .chirpui-notification-dot__dot,
.chirpui-notification-dot--sm .chirpui-notification-dot__ping { width: 6px; height: 6px; top: -1px; right: -1px; }
.chirpui-notification-dot--lg .chirpui-notification-dot__dot,
.chirpui-notification-dot--lg .chirpui-notification-dot__ping { width: 12px; height: 12px; top: -3px; right: -3px; }

.chirpui-notification-dot--count .chirpui-notification-dot__dot,
.chirpui-notification-dot--count .chirpui-notification-dot__ping {
    top: -0.65rem;
    right: -0.65rem;
    width: auto;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--chirpui-radius-full, 9999px);
}

.chirpui-notification-dot--count .chirpui-notification-dot__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--chirpui-bg) 55%, currentColor 45%);
    color: var(--chirpui-on-accent);
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px color-mix(in srgb, black 18%, transparent);
}

.chirpui-notification-dot--count.chirpui-notification-dot--warning .chirpui-notification-dot__dot {
    color: var(--chirpui-on-warning, #1a1a1a);
}

/* counter_badge */
.chirpui-counter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--chirpui-radius-full, 9999px);
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-ui-xs);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-feature-settings: "tnum";
    line-height: 1;
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text);
}

.chirpui-counter-badge[hidden] {
    display: none;
}

.chirpui-counter-badge--warning {
    background: var(--chirpui-warning);
    color: var(--chirpui-on-warning, #1a1a1a);
}

.chirpui-counter-badge--danger {
    background: var(--chirpui-error);
    color: var(--chirpui-on-accent);
}
}

/* === partials/094_number-ticker.css === */
@layer chirpui.component {
/* ==========================================================================
   Number Ticker
   ========================================================================== */

.chirpui-number-ticker {
    display: inline-block;
    line-height: var(--chirpui-line-height-tight);
}
.chirpui-number-ticker__value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    counter-reset: chirpui-num var(--chirpui-num);
    animation: chirpui-count-up var(--chirpui-anim-pulse) var(--chirpui-ease-decel) forwards;
}
.chirpui-number-ticker__value::after {
    content: counter(chirpui-num);
}
.chirpui-number-ticker--mono { font-family: var(--chirpui-font-mono, ui-monospace, monospace); }
.chirpui-number-ticker--sm { font-size: var(--chirpui-ui-sm); }
.chirpui-number-ticker--md { font-size: var(--chirpui-ui-base); }
.chirpui-number-ticker--lg { font-size: var(--chirpui-ui-lg); }
.chirpui-number-ticker--xl { font-size: var(--chirpui-prose-2xl); }

}

/* === partials/095_marquee.css === */
@layer chirpui.component {
/* ==========================================================================
   Marquee
   ========================================================================== */

.chirpui-marquee {
    overflow: clip;
    position: relative;
    width: 100%;
    color: inherit;
    isolation: isolate;
    --chirpui-marquee-edge-bg: var(--chirpui-surface, var(--chirpui-bg));
}
.chirpui-marquee__track {
    display: flex;
    gap: var(--chirpui-spacing-lg);
    width: max-content;
    animation: chirpui-marquee var(--chirpui-anim-ambient) linear infinite;
}
.chirpui-marquee--reverse .chirpui-marquee__track {
    animation-direction: reverse;
}
.chirpui-marquee--fast .chirpui-marquee__track { animation-duration: 10s; }
.chirpui-marquee--slow .chirpui-marquee__track { animation-duration: 40s; }
.chirpui-marquee:hover .chirpui-marquee__track {
    animation-play-state: paused;
}
.chirpui-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4rem;
    z-index: 1;
    pointer-events: none;
}
.chirpui-marquee__fade--start {
    left: 0;
    background: linear-gradient(to right, var(--chirpui-marquee-edge-bg), transparent);
}
.chirpui-marquee__fade--end {
    right: 0;
    background: linear-gradient(to left, var(--chirpui-marquee-edge-bg), transparent);
}

}

/* === partials/096_meteor-effect.css === */
@layer chirpui.component {
/* ==========================================================================
   Meteor Effect
   ========================================================================== */

.chirpui-meteor {
    position: relative;
    overflow: clip;
}
.chirpui-meteor__streak {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, var(--chirpui-beam-color), transparent);
    border-radius: 999px;
    animation: chirpui-meteor var(--chirpui-anim-cycle) linear infinite;
    opacity: 0;
}
.chirpui-meteor__streak:nth-child(2) { animation-delay: 0.8s; left: 30%; height: 60px; }
.chirpui-meteor__streak:nth-child(3) { animation-delay: 1.6s; left: 70%; height: 100px; }
.chirpui-meteor__streak:nth-child(4) { animation-delay: 2.4s; left: 15%; height: 50px; }
.chirpui-meteor--accent .chirpui-meteor__streak { --chirpui-beam-color: var(--chirpui-accent); }
.chirpui-meteor--muted .chirpui-meteor__streak { --chirpui-beam-color: var(--chirpui-text-muted); }


}

/* === partials/097_text-reveal.css === */
@layer chirpui.component {
/* ==========================================================================
   Text Reveal
   ========================================================================== */

.chirpui-text-reveal {
    animation: chirpui-text-reveal var(--chirpui-anim-breath) var(--chirpui-ease-decel) forwards;
    clip-path: inset(0 100% 0 0);
}
.chirpui-text-reveal--gradient {
    background: linear-gradient(90deg, var(--chirpui-accent), var(--chirpui-accent-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


}

/* === partials/098_display-text.css === */
@layer chirpui.component {
/* ==========================================================================
   Display Text — large hero/landing headings
   ========================================================================== */

.chirpui-display {
    font-size: var(--chirpui-prose-6xl);
    letter-spacing: var(--chirpui-display-letter-spacing);
    line-height: var(--chirpui-line-height-tight);
    font-weight: var(--chirpui-prose-font-weight-bold);
}
.chirpui-display--xl {
    font-size: var(--chirpui-prose-7xl);
}


}

/* === partials/099_gradient-text.css === */
@layer chirpui.component {
/* ==========================================================================
   Gradient Text
   ========================================================================== */

.chirpui-gradient-text {
    background: linear-gradient(135deg, var(--chirpui-accent), var(--chirpui-accent-bright), var(--chirpui-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
    background-size: 180% 180%;
}
.chirpui-gradient-text--secondary {
    background: linear-gradient(135deg, var(--chirpui-accent), var(--chirpui-accent-secondary));
}
.chirpui-gradient-text--rainbow {
    background: linear-gradient(135deg, var(--chirpui-accent), var(--chirpui-accent-secondary), var(--chirpui-accent-bright));
}
.chirpui-gradient-text--animated {
    background-size: 320% 320%;
    animation: chirpui-gradient-shift var(--chirpui-anim-cycle) ease infinite;
}

}

/* === partials/100_glow-card.css === */
@layer chirpui.component {
/* ==========================================================================
   Glow Card
   ========================================================================== */

.chirpui-glow-card {
    position: relative;
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-lg);
    overflow: clip;
    padding: var(--chirpui-spacing-md);
}
.chirpui-glow-card__glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--chirpui-motion-slow) var(--chirpui-ease-standard);
    background: radial-gradient(
        circle at var(--chirpui-mouse-x, 50%) var(--chirpui-mouse-y, 50%),
        var(--chirpui-glow-color),
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}
.chirpui-glow-card:hover .chirpui-glow-card__glow { opacity: 1; }
.chirpui-glow-card__content {
    position: relative;
    z-index: 1;
}
.chirpui-glow-card--accent { --chirpui-glow-color: color-mix(in srgb, var(--chirpui-accent) 30%, transparent); }
.chirpui-glow-card--muted { --chirpui-glow-color: color-mix(in srgb, var(--chirpui-text-muted) 20%, transparent); }


}

/* === partials/101_spotlight-card.css === */
@layer chirpui.component {
/* ==========================================================================
   Spotlight Card
   ========================================================================== */

.chirpui-spotlight-card {
    position: relative;
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-lg);
    overflow: clip;
    padding: var(--chirpui-spacing-md);
}
.chirpui-spotlight-card__spotlight {
    position: absolute;
    /* Force square so the rotation stays circular, not rectangular */
    width: 200%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: radial-gradient(circle at 50% 50%, var(--chirpui-glow-color), transparent 50%);
    animation: chirpui-spotlight-rotate var(--chirpui-anim-drift) linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}
.chirpui-spotlight-card__content {
    position: relative;
    z-index: 1;
}
.chirpui-spotlight-card--accent .chirpui-spotlight-card__spotlight {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--chirpui-accent) 40%, transparent), transparent 50%);
}


}

/* === partials/102_particle-background.css === */
@layer chirpui.component {
/* ==========================================================================
   Particle Background
   ========================================================================== */

.chirpui-particle-bg {
    position: relative;
    overflow: clip;
}
.chirpui-particle-bg__canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.chirpui-particle-bg__dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--chirpui-glow-color);
    opacity: 0.5;
    animation: chirpui-float 4s var(--chirpui-ease-standard) infinite;
}
.chirpui-particle-bg__dot:nth-child(2) { animation-delay: 0.5s; animation-duration: 5s; }
.chirpui-particle-bg__dot:nth-child(3) { animation-delay: 1.0s; animation-duration: 3.5s; }
.chirpui-particle-bg__dot:nth-child(4) { animation-delay: 1.5s; animation-duration: 4.5s; }
.chirpui-particle-bg__dot:nth-child(5) { animation-delay: 2.0s; animation-duration: 6s; }
.chirpui-particle-bg__dot:nth-child(6) { animation-delay: 2.5s; animation-duration: 3s; }
.chirpui-particle-bg__dot:nth-child(7) { animation-delay: 3.0s; animation-duration: 5.5s; }
.chirpui-particle-bg__dot:nth-child(8) { animation-delay: 3.5s; animation-duration: 4s; }
.chirpui-particle-bg__content {
    position: relative;
    z-index: 1;
}
.chirpui-particle-bg--accent .chirpui-particle-bg__dot { background: var(--chirpui-accent); }
.chirpui-particle-bg--muted .chirpui-particle-bg__dot { background: var(--chirpui-text-muted); opacity: 0.3; }


}

/* === partials/103_animated-counter.css === */
@layer chirpui.component {
/* ==========================================================================
   Animated Counter
   ========================================================================== */

.chirpui-animated-counter {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-2xs);
}
.chirpui-animated-counter__value {
    font-size: var(--chirpui-prose-2xl);
    font-weight: var(--chirpui-ui-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    counter-reset: chirpui-num var(--chirpui-num);
    animation: chirpui-count-up 1.8s var(--chirpui-ease-decel) forwards;
}
.chirpui-animated-counter__value::after {
    content: counter(chirpui-num);
}
.chirpui-animated-counter__prefix::after {
    content: attr(data-prefix);
}
.chirpui-animated-counter__label {
    font-size: var(--chirpui-ui-sm);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    overflow-wrap: anywhere;
}
.chirpui-animated-counter--mono .chirpui-animated-counter__value {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

}

/* === partials/104_pulsing-button.css === */
@layer chirpui.component {
/* ==========================================================================
   Pulsing Button
   ========================================================================== */

.chirpui-pulsing-btn {
    --chirpui-pulsing-btn-bg: var(--chirpui-surface);
    --chirpui-pulsing-btn-bg-hover: var(--chirpui-bg-subtle);
    --chirpui-pulsing-btn-color: var(--chirpui-text);
    --chirpui-pulsing-btn-ring: color-mix(in srgb, var(--chirpui-border) 70%, transparent);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-md);
    font-size: var(--chirpui-ui-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-pulsing-btn-color);
    background: var(--chirpui-pulsing-btn-bg);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    cursor: pointer;
    transition: background var(--chirpui-transition), border-color var(--chirpui-transition),
        color var(--chirpui-transition);
}
.chirpui-pulsing-btn:hover { background: var(--chirpui-pulsing-btn-bg-hover); }
.chirpui-pulsing-btn__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--chirpui-pulsing-btn-ring);
    animation: chirpui-pulse-ring 2s var(--chirpui-ease-decel) infinite;
    z-index: -1;
}

.chirpui-pulsing-btn--primary {
    --chirpui-pulsing-btn-bg: var(--chirpui-accent);
    --chirpui-pulsing-btn-bg-hover: var(--chirpui-accent-hover);
    --chirpui-pulsing-btn-color: var(--chirpui-on-accent);
    --chirpui-pulsing-btn-ring: var(--chirpui-accent);
    border-color: var(--chirpui-accent);
}

.chirpui-pulsing-btn--success {
    --chirpui-pulsing-btn-bg: var(--chirpui-success);
    --chirpui-pulsing-btn-bg-hover: color-mix(in srgb, var(--chirpui-success) 86%, black);
    --chirpui-pulsing-btn-color: var(--chirpui-on-accent);
    --chirpui-pulsing-btn-ring: var(--chirpui-success);
    border-color: var(--chirpui-success);
}

.chirpui-pulsing-btn--danger {
    --chirpui-pulsing-btn-bg: var(--chirpui-error);
    --chirpui-pulsing-btn-bg-hover: color-mix(in srgb, var(--chirpui-error) 86%, black);
    --chirpui-pulsing-btn-color: var(--chirpui-on-accent);
    --chirpui-pulsing-btn-ring: var(--chirpui-error);
    border-color: var(--chirpui-error);
}
}

/* === partials/105_bento-grid.css === */
@layer chirpui.component {
/* ==========================================================================
   Bento Grid
   ========================================================================== */

.chirpui-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--chirpui-spacing-md);
}
.chirpui-bento__item {
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-lg);
    padding: var(--chirpui-spacing-md);
    min-height: 120px;
}
.chirpui-bento__item--span-2 { grid-column: span 2; }
.chirpui-bento__item--span-row { grid-row: span 2; }
.chirpui-bento__item--span-full { grid-column: 1 / -1; }
@media (max-width: 48rem) {
    .chirpui-bento { grid-template-columns: 1fr; }
    .chirpui-bento__item--span-2 { grid-column: span 1; }
}


}

/* === partials/106_floating-dock.css === */
@layer chirpui.component {
/* ==========================================================================
   Floating Dock
   ========================================================================== */

.chirpui-dock {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-md);
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-2xl);
    box-shadow: var(--chirpui-shadow-lg);
}
.chirpui-dock__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--chirpui-radius);
    color: var(--chirpui-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--chirpui-motion-fast) var(--chirpui-ease-spring),
                color var(--chirpui-motion-fast);
}
.chirpui-dock__item:hover {
    transform: scale(1.4) translateY(-8px);
    color: var(--chirpui-text);
}
.chirpui-dock__item--active {
    color: var(--chirpui-accent);
}
.chirpui-dock__indicator {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--chirpui-accent);
}
.chirpui-dock--glass {
    background: color-mix(in srgb, var(--chirpui-surface) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.chirpui-dock--sm .chirpui-dock__item { width: 32px; height: 32px; }
.chirpui-dock--lg .chirpui-dock__item { width: 48px; height: 48px; }

}

/* === partials/107_animated-stat-card.css === */
@layer chirpui.component {
/* ==========================================================================
   Animated Stat Card (composite)
   ========================================================================== */

.chirpui-animated-stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-md);
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius-lg);
}
.chirpui-animated-stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-2xs);
    font-size: var(--chirpui-ui-xs);
    font-weight: var(--chirpui-ui-font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
}
.chirpui-animated-stat-card__trend--up { color: var(--chirpui-success); }
.chirpui-animated-stat-card__trend--down { color: var(--chirpui-error); }

}

/* === partials/108_hero-effects.css === */
@layer chirpui.component {
/* ==========================================================================
   Hero Effects (composite wrapper)
   ========================================================================== */

.chirpui-hero-effects {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--chirpui-spacing-2xl) var(--chirpui-spacing-lg);
}


}

/* === partials/109_marquee-item.css === */
@layer chirpui.component {
/* ==========================================================================
   Marquee Item
   ========================================================================== */

.chirpui-marquee__item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 var(--chirpui-spacing-sm);
    font-size: var(--chirpui-ui-sm);
    color: color-mix(in srgb, currentColor 76%, transparent);
}

}

/* === partials/110_tooltip.css === */
@layer chirpui.component {
/* ==========================================================================
   Tooltip (enhanced with bubble + arrow)
   ========================================================================== */

.chirpui-tooltip {
    position: relative;
    display: inline-flex;
}

.chirpui-tooltip--block {
    display: block;
}

.chirpui-tooltip__bubble {
    position: absolute;
    z-index: var(--chirpui-tooltip-z);
    box-sizing: border-box;
    /* Shrink-to-fit uses the narrow tooltip anchor as the containing block; without
       max-content, used width collapses to ~trigger width despite max-width. */
    width: max-content;
    max-width: var(--chirpui-tooltip-max-width);
    padding: var(--chirpui-tooltip-padding);
    border: var(--chirpui-tooltip-border);
    border-radius: var(--chirpui-tooltip-radius);
    background: var(--chirpui-tooltip-bg);
    color: var(--chirpui-tooltip-fg);
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-tooltip-font-size);
    font-weight: var(--chirpui-tooltip-font-weight);
    line-height: var(--chirpui-tooltip-line-height);
    text-align: center;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    box-shadow: var(--chirpui-tooltip-shadow);
    transition:
        opacity var(--chirpui-motion-fast) var(--chirpui-ease-decel),
        transform var(--chirpui-motion-fast) var(--chirpui-ease-decel);
}
.chirpui-tooltip__bubble::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    background: var(--chirpui-tooltip-bg);
    transform: rotate(45deg);
}
/* Ensure tooltip bubbles escape overflow:hidden ancestors */
.chirpui-tooltip { overflow: visible; }
.chirpui-tooltip:hover .chirpui-tooltip__bubble,
.chirpui-tooltip:focus-within .chirpui-tooltip__bubble {
    opacity: 1;
    transform: scale(1);
}

/* Tooltip positions */
.chirpui-tooltip--top .chirpui-tooltip__bubble {
    bottom: calc(100% + var(--chirpui-tooltip-gap));
    left: 50%;
    transform: translateX(-50%) scale(0.95);
}
.chirpui-tooltip--top:hover .chirpui-tooltip__bubble,
.chirpui-tooltip--top:focus-within .chirpui-tooltip__bubble {
    transform: translateX(-50%) scale(1);
}
.chirpui-tooltip--top .chirpui-tooltip__bubble::after {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}

.chirpui-tooltip--bottom .chirpui-tooltip__bubble {
    top: calc(100% + var(--chirpui-tooltip-gap));
    left: 50%;
    transform: translateX(-50%) scale(0.95);
}
.chirpui-tooltip--bottom:hover .chirpui-tooltip__bubble,
.chirpui-tooltip--bottom:focus-within .chirpui-tooltip__bubble {
    transform: translateX(-50%) scale(1);
}
.chirpui-tooltip--bottom .chirpui-tooltip__bubble::after {
    top: -3px;
    left: 50%;
    margin-left: -3px;
}

.chirpui-tooltip--left .chirpui-tooltip__bubble {
    right: calc(100% + var(--chirpui-tooltip-gap));
    top: 50%;
    transform: translateY(-50%) scale(0.95);
}
.chirpui-tooltip--left:hover .chirpui-tooltip__bubble,
.chirpui-tooltip--left:focus-within .chirpui-tooltip__bubble {
    transform: translateY(-50%) scale(1);
}
.chirpui-tooltip--left .chirpui-tooltip__bubble::after {
    right: -3px;
    top: 50%;
    margin-top: -3px;
}

.chirpui-tooltip--right .chirpui-tooltip__bubble {
    left: calc(100% + var(--chirpui-tooltip-gap));
    top: 50%;
    transform: translateY(-50%) scale(0.95);
}
.chirpui-tooltip--right:hover .chirpui-tooltip__bubble,
.chirpui-tooltip--right:focus-within .chirpui-tooltip__bubble {
    transform: translateY(-50%) scale(1);
}
.chirpui-tooltip--right .chirpui-tooltip__bubble::after {
    left: -3px;
    top: 50%;
    margin-top: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-tooltip__bubble {
        transition: none;
    }
}
}

/* === partials/111_icon-button.css === */
@layer chirpui.component {
/* ==========================================================================
   Icon Button
   ========================================================================== */

.chirpui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--chirpui-control-block-size);
    block-size: var(--chirpui-control-block-size);
    border-radius: var(--chirpui-radius);
    border: 1px solid var(--chirpui-border);
    background: var(--chirpui-surface);
    color: var(--chirpui-text-muted);
    cursor: pointer;
    transition: background var(--chirpui-transition), color var(--chirpui-transition);
    text-decoration: none;
    font-size: var(--chirpui-ui-sm);
    line-height: var(--chirpui-line-height-tight);
    flex-shrink: 0;
}
.chirpui-icon-btn:hover { background: var(--chirpui-surface-alt); color: var(--chirpui-text); }
.chirpui-icon-btn:focus-visible { box-shadow: 0 0 0 2px var(--chirpui-focus-ring); outline: none; }
.chirpui-icon-btn:disabled, .chirpui-icon-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Icon button variants */
.chirpui-icon-btn--primary { background: var(--chirpui-accent); color: var(--chirpui-bg); border-color: var(--chirpui-accent); }
.chirpui-icon-btn--primary:hover { background: var(--chirpui-accent-hover); }
.chirpui-icon-btn--ghost { background: transparent; border-color: transparent; }
.chirpui-icon-btn--ghost:hover { background: var(--chirpui-surface-alt); }
.chirpui-icon-btn--danger { background: transparent; border-color: transparent; color: var(--chirpui-error); }
.chirpui-icon-btn--danger:hover { background: var(--chirpui-error-muted); }

/* Icon button sizes */
.chirpui-icon-btn--sm {
    inline-size: var(--chirpui-control-block-size-sm);
    block-size: var(--chirpui-control-block-size-sm);
    font-size: var(--chirpui-ui-xs);
}
.chirpui-icon-btn--lg {
    inline-size: calc(var(--chirpui-control-block-size) + var(--chirpui-spacing-xs));
    block-size: calc(var(--chirpui-control-block-size) + var(--chirpui-spacing-xs));
    font-size: var(--chirpui-ui-base);
}

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-icon-btn,
    .chirpui-icon-btn--sm {
        inline-size: var(--chirpui-control-touch-target);
        block-size: var(--chirpui-control-touch-target);
    }
}
}

/* === partials/112_segmented-control.css === */
@layer chirpui.component {
/* ==========================================================================
   Segmented Control
   ========================================================================== */

.chirpui-segmented {
    --_chirpui-segmented-block-size: var(--chirpui-control-block-size);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: var(--_chirpui-segmented-block-size);
    background: var(--chirpui-surface-alt);
    border-radius: var(--chirpui-radius);
    padding: var(--chirpui-spacing-2xs);
    gap: var(--chirpui-spacing-2xs);
    overflow-wrap: anywhere;
}
.chirpui-segmented__option {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: var(--chirpui-spacing-2xs);
    min-inline-size: 0;
    max-inline-size: 100%;
    /* Option fills the wrapper's content box: block-size token minus the
       wrapper's 2xs block padding on both sides, so option + padding == the
       control-height token exactly (the segmented control has no border). */
    min-block-size: calc(var(--_chirpui-segmented-block-size) - 2 * var(--chirpui-spacing-2xs));
    padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-sm);
    font-size: var(--chirpui-ui-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text-muted);
    border-radius: calc(var(--chirpui-radius) - 2px);
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background var(--chirpui-transition), color var(--chirpui-transition),
                box-shadow var(--chirpui-transition);
    user-select: none;
}
.chirpui-segmented__option:hover { color: var(--chirpui-text); }
.chirpui-segmented__option:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}
.chirpui-segmented__option--active,
.chirpui-segmented__option:has(input:checked) {
    background: var(--chirpui-surface);
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    box-shadow: var(--chirpui-shadow-sm);
}
.chirpui-segmented__icon {
    font-size: var(--chirpui-ui-sm);
    line-height: 1;
}
.chirpui-segmented__label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* Segmented sizes */
.chirpui-segmented--sm {
    --_chirpui-segmented-block-size: var(--chirpui-control-block-size-sm);
}
.chirpui-segmented--sm .chirpui-segmented__option { padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-xs); font-size: var(--chirpui-ui-xs); }
.chirpui-segmented--lg {
    --_chirpui-segmented-block-size: calc(var(--chirpui-control-block-size) + var(--chirpui-spacing-xs));
}
.chirpui-segmented--lg .chirpui-segmented__option { padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-md); font-size: var(--chirpui-ui-base); }

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-segmented,
    .chirpui-segmented--sm {
        --_chirpui-segmented-block-size: var(--chirpui-control-touch-target);
    }
}
}

/* === partials/113_split-panel.css === */
@layer chirpui.component {
/* ==========================================================================
   Split Panel
   ========================================================================== */

.chirpui-split-panel {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: clip;
}
.chirpui-split-panel--vertical { flex-direction: column; }
.chirpui-split-panel__pane {
    overflow: auto;
    min-width: 0;
    min-height: 0;
}
.chirpui-split-panel__pane--second {
    flex: 1;
}
.chirpui-split-panel__handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chirpui-surface-alt);
    transition: background var(--chirpui-motion-fast);
    cursor: col-resize;
    width: 6px;
}
.chirpui-split-panel--vertical .chirpui-split-panel__handle {
    cursor: row-resize;
    width: auto;
    height: 6px;
}
.chirpui-split-panel__handle:hover { background: var(--chirpui-border); }
.chirpui-split-panel--dragging .chirpui-split-panel__handle { background: var(--chirpui-accent); }
.chirpui-split-panel__handle-grip {
    width: 2px;
    height: 20px;
    border-radius: 1px;
    background: var(--chirpui-text-muted);
    opacity: 0.5;
}
.chirpui-split-panel--vertical .chirpui-split-panel__handle-grip {
    width: 20px;
    height: 2px;
}
.chirpui-split-panel--dragging { user-select: none; }


}

/* === partials/114_typewriter.css === */
@layer chirpui.component {
/* ==========================================================================
   Typewriter — step-based text reveal with blinking cursor
   ========================================================================== */

.chirpui-typewriter {
    display: inline-block;
}
.chirpui-typewriter__text {
    display: inline-block;
    overflow: clip;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    width: 0;
    animation:
        chirpui-typewriter var(--chirpui-typewriter-duration, 2s) steps(var(--chirpui-typewriter-steps, 30), end) forwards,
        chirpui-blink-caret 0.75s step-end infinite;
}
.chirpui-typewriter--no-cursor .chirpui-typewriter__text {
    border-right: none;
}
.chirpui-typewriter--delay-1 .chirpui-typewriter__text { animation-delay: 0.5s; }
.chirpui-typewriter--delay-2 .chirpui-typewriter__text { animation-delay: 1s; }
.chirpui-typewriter--delay-3 .chirpui-typewriter__text { animation-delay: 1.5s; }
.chirpui-typewriter--fast .chirpui-typewriter__text { --chirpui-typewriter-duration: 1s; }
.chirpui-typewriter--slow .chirpui-typewriter__text { --chirpui-typewriter-duration: 4s; }


}

/* === partials/115_glitch-text.css === */
@layer chirpui.component {
/* ==========================================================================
   Glitch Text — RGB-split distortion effect
   ========================================================================== */

.chirpui-glitch {
    position: relative;
    display: inline-block;
    font-weight: var(--chirpui-ui-font-weight-bold);
    color: var(--chirpui-text);
}
.chirpui-glitch::before,
.chirpui-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.chirpui-glitch::before {
    color: #0ff;
    animation: chirpui-glitch var(--chirpui-anim-cycle) infinite linear alternate-reverse;
    mix-blend-mode: difference;
}
.chirpui-glitch::after {
    color: #f0f;
    animation: chirpui-glitch-alt 2s infinite linear alternate-reverse;
    mix-blend-mode: difference;
}
.chirpui-glitch--subtle::before { opacity: 0.5; }
.chirpui-glitch--subtle::after { opacity: 0.5; }
.chirpui-glitch--intense::before,
.chirpui-glitch--intense::after {
    filter: blur(0.5px);
}
.chirpui-glitch--intense::before { animation-duration: 1.5s; }
.chirpui-glitch--intense::after { animation-duration: 1s; }


}

/* === partials/116_neon-text.css === */
@layer chirpui.component {
/* ==========================================================================
   Neon Text — layered text-shadow glow
   ========================================================================== */

.chirpui-neon {
    display: inline-block;
    font-weight: var(--chirpui-ui-font-weight-bold);
    color: var(--chirpui-on-accent);
    text-shadow:
        0 0 4px currentColor,
        0 0 11px currentColor,
        0 0 19px currentColor,
        0 0 40px var(--chirpui-neon-color, #0ff),
        0 0 80px var(--chirpui-neon-color, #0ff),
        0 0 90px var(--chirpui-neon-color, #0ff);
}
.chirpui-neon--cyan { --chirpui-neon-color: #0ff; }
.chirpui-neon--magenta { --chirpui-neon-color: #f0f; }
.chirpui-neon--green { --chirpui-neon-color: #0f0; }
.chirpui-neon--orange { --chirpui-neon-color: #f80; }
.chirpui-neon--blue { --chirpui-neon-color: #08f; }
.chirpui-neon--red { --chirpui-neon-color: #f22; }
.chirpui-neon--flicker {
    animation: chirpui-neon-flicker 4s infinite;
}
.chirpui-neon--pulse {
    animation: chirpui-neon-pulse 2s ease-in-out infinite;
}


}

/* === partials/117_aurora-background.css === */
@layer chirpui.component {
/* ==========================================================================
   Aurora Background — drifting gradient blobs
   ========================================================================== */

.chirpui-aurora {
    position: relative;
    overflow: clip;
    isolation: isolate;
}
.chirpui-aurora__blobs {
    position: absolute;
    inset: -50%;
    z-index: -1;
    filter: blur(80px);
    opacity: 0.5;
}
.chirpui-aurora__blob {
    position: absolute;
    border-radius: 50%;
    width: 50%;
    height: 50%;
}
.chirpui-aurora__blob:nth-child(1) {
    top: 10%;
    left: 20%;
    background: var(--chirpui-aurora-1, color-mix(in srgb, var(--chirpui-accent) 60%, #0ff));
    animation: chirpui-aurora-drift-1 15s ease-in-out infinite;
}
.chirpui-aurora__blob:nth-child(2) {
    top: 40%;
    left: 50%;
    background: var(--chirpui-aurora-2, color-mix(in srgb, var(--chirpui-accent) 60%, #f0f));
    animation: chirpui-aurora-drift-2 var(--chirpui-anim-ambient) ease-in-out infinite;
}
.chirpui-aurora__blob:nth-child(3) {
    top: 60%;
    left: 10%;
    background: var(--chirpui-aurora-3, color-mix(in srgb, var(--chirpui-accent) 40%, #0f0));
    animation: chirpui-aurora-drift-1 25s ease-in-out infinite reverse;
}
.chirpui-aurora--intense .chirpui-aurora__blobs { opacity: 0.7; filter: blur(60px); }
.chirpui-aurora--subtle .chirpui-aurora__blobs { opacity: 0.25; filter: blur(120px); }
.chirpui-aurora__content {
    position: relative;
    z-index: 1;
}


}

/* === partials/118_scanline-overlay.css === */
@layer chirpui.component {
/* ==========================================================================
   Scanline Overlay — CRT/retro line effect
   ========================================================================== */

.chirpui-scanline {
    position: relative;
    overflow: clip;
}
.chirpui-scanline::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(180, 220, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 35%, rgba(0, 0, 0, 0.16));
    pointer-events: none;
    z-index: 1;
}
.chirpui-scanline::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.07) 0,
            rgba(255, 255, 255, 0.07) 1px,
            rgba(0, 0, 0, 0.08) 1px,
            rgba(0, 0, 0, 0.08) 3px,
            transparent 3px,
            transparent 5px
        );
    pointer-events: none;
    z-index: 1;
}
.chirpui-scanline--heavy::after {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.1) 0,
            rgba(255, 255, 255, 0.1) 1px,
            rgba(0, 0, 0, 0.18) 1px,
            rgba(0, 0, 0, 0.18) 4px,
            transparent 4px,
            transparent 7px
        );
}
.chirpui-scanline--crt::after {
    background:
        linear-gradient(
            90deg,
            rgba(255, 60, 60, 0.05),
            rgba(80, 255, 120, 0.04),
            rgba(80, 160, 255, 0.05)
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0.08) 1px,
            rgba(0, 0, 0, 0.16) 1px,
            rgba(0, 0, 0, 0.16) 4px,
            transparent 4px,
            transparent 6px
        );
    mix-blend-mode: screen;
}
.chirpui-scanline--crt {
    border-radius: var(--chirpui-radius-lg);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.15);
}

}

/* === partials/119_grain-overlay.css === */
@layer chirpui.component {
/* ==========================================================================
   Grain Overlay — film grain texture
   ========================================================================== */

.chirpui-grain {
    position: relative;
    overflow: clip;
}
.chirpui-grain::after {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.47' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-position: 0 0, 37px 19px;
    background-size: 97px 89px, 173px 149px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.chirpui-grain--heavy::after { opacity: 0.36; }
.chirpui-grain--subtle::after { opacity: 0.1; }
.chirpui-grain--dot::after {
    background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
    background-size: 4px 4px;
    opacity: 0.04;
    mix-blend-mode: multiply;
}
.chirpui-grain--animated::after {
    animation: chirpui-grain-shift 0.35s steps(2) infinite;
}

@keyframes chirpui-grain-shift {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-2%, 1%, 0); }
    50% { transform: translate3d(1%, -2%, 0); }
    75% { transform: translate3d(2%, 2%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
}

/* === partials/120_svg-pattern-tiles.css === */
@layer chirpui.component {
/* ==========================================================================
   SVG pattern tiles — mini assets + overlay utilities (layer under content)
   Serve chirp_ui.static_path() so chirpui.css and patterns/*.svg share a base URL.
   ========================================================================== */

.chirpui-texture {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.chirpui-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: repeat;
    background-image: var(--chirpui-texture-image);
    background-size: var(--chirpui-texture-size, 16px 16px);
    background-position: 0 0;
    opacity: var(--chirpui-texture-opacity, 0.14);
    mix-blend-mode: var(--chirpui-texture-blend, multiply);
}

/* Element children stack above the texture; wrap loose text in a span (text nodes ignore z-index). */
.chirpui-texture > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .chirpui-texture::after {
    mix-blend-mode: var(--chirpui-texture-blend-dark, soft-light);
    opacity: calc(var(--chirpui-texture-opacity, 0.14) * 0.85);
}

.chirpui-texture--checker {
    --chirpui-texture-image: var(--chirpui-pattern-checker);
    --chirpui-texture-size: 8px 8px;
}

.chirpui-texture--dots-sm {
    --chirpui-texture-image: var(--chirpui-pattern-dots-sm);
    --chirpui-texture-size: 10px 10px;
}

.chirpui-texture--dots-md {
    --chirpui-texture-image: var(--chirpui-pattern-dots-md);
    --chirpui-texture-size: 18px 18px;
}

.chirpui-texture--grid {
    --chirpui-texture-image: var(--chirpui-pattern-grid);
    --chirpui-texture-size: 20px 20px;
}

.chirpui-texture--diag {
    --chirpui-texture-image: var(--chirpui-pattern-diag);
    --chirpui-texture-size: 12px 12px;
}

.chirpui-texture--crosshatch {
    --chirpui-texture-image: var(--chirpui-pattern-crosshatch);
    --chirpui-texture-size: 10px 10px;
}

.chirpui-texture--weave {
    --chirpui-texture-image: var(--chirpui-pattern-weave);
    --chirpui-texture-size: 24px 42px;
}

.chirpui-texture--hex {
    --chirpui-texture-image: var(--chirpui-pattern-hex);
    --chirpui-texture-size: 28px 48px;
}

.chirpui-texture--noise-fine {
    --chirpui-texture-image: var(--chirpui-pattern-noise-fine);
    --chirpui-texture-size: 128px 128px;
    --chirpui-texture-blend: overlay;
    --chirpui-texture-blend-dark: overlay;
}

.chirpui-texture--noise-coarse {
    --chirpui-texture-image: var(--chirpui-pattern-noise-coarse);
    --chirpui-texture-size: 160px 160px;
    --chirpui-texture-blend: overlay;
    --chirpui-texture-blend-dark: overlay;
}


}

/* === partials/121_css-only-bg-patterns.css === */
@layer chirpui.component {
/* ==========================================================================
   CSS-only bg patterns — gradient tiles (no SVG); ink follows --chirpui-bg-pattern-*
   Pair with chirpui-surface--*, elevation tokens, or SVG .chirpui-texture on another layer.
   ========================================================================== */

.chirpui-bg-pattern {
    --_ink: var(--chirpui-bg-pattern-ink);
    --_base: var(--chirpui-bg-pattern-base);
    background-color: var(--_base);
}

.chirpui-bg-pattern--dots-sm {
    background-color: var(--chirpui-bg-pattern-base);
    background-image: radial-gradient(
        circle at 1px 1px,
        color-mix(in oklab, var(--chirpui-bg-pattern-ink) 85%, transparent) 1px,
        transparent 0
    );
    background-size: 14px 14px;
}

.chirpui-bg-pattern--dots-md {
    background-color: var(--chirpui-bg-pattern-base);
    background-image: radial-gradient(
        circle at 2px 2px,
        color-mix(in oklab, var(--chirpui-bg-pattern-ink) 80%, transparent) 1.5px,
        transparent 0
    );
    background-size: 22px 22px;
}

.chirpui-bg-pattern--grid {
    background-color: var(--chirpui-bg-pattern-base);
    background-image:
        linear-gradient(color-mix(in oklab, var(--chirpui-bg-pattern-ink) 55%, transparent) 1px, transparent 1px),
        linear-gradient(
            90deg,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 55%, transparent) 1px,
            transparent 1px
        );
    background-size: 20px 20px;
}

.chirpui-bg-pattern--diag {
    background-color: var(--chirpui-bg-pattern-base);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        color-mix(in oklab, var(--chirpui-bg-pattern-ink) 45%, transparent) 8px,
        color-mix(in oklab, var(--chirpui-bg-pattern-ink) 45%, transparent) 9px
    );
}

.chirpui-bg-pattern--crosshatch {
    background-color: var(--chirpui-bg-pattern-base);
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 35%, transparent) 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 35%, transparent) 7px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 35%, transparent) 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 35%, transparent) 7px
        );
}

.chirpui-bg-pattern--weave {
    background-color: var(--chirpui-bg-pattern-base);
    background-image:
        linear-gradient(
            30deg,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 25%, transparent) 12%,
            transparent 12.5%
        ),
        linear-gradient(
            150deg,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 22%, transparent) 12%,
            transparent 12.5%
        );
    background-size: 24px 42px;
}

.chirpui-bg-pattern--accent-dots {
    background-color: var(--chirpui-bg-pattern-base);
    background-image: radial-gradient(
        circle at 1px 1px,
        color-mix(in oklab, var(--chirpui-bg-pattern-ink-accent) 75%, transparent) 1px,
        transparent 0
    );
    background-size: 16px 16px;
}


}

/* === partials/122_band.css === */
@layer chirpui.component {
/* ==========================================================================
   Band — section chrome + optional dot/grid overlay (::after). Use with gradients.
   ========================================================================== */

.chirpui-band {
    position: relative;
    overflow: clip;
    border-radius: var(--chirpui-radius-xl);
}

.chirpui-band--pattern-dots::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.38;
    background-image: radial-gradient(
        circle at 1px 1px,
        color-mix(in oklab, var(--chirpui-bg-pattern-ink) 90%, transparent) 1px,
        transparent 0
    );
    background-size: 14px 14px;
    mix-blend-mode: multiply;
}

.chirpui-band--pattern-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(color-mix(in oklab, var(--chirpui-bg-pattern-ink) 60%, transparent) 1px, transparent 1px),
        linear-gradient(
            90deg,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 60%, transparent) 1px,
            transparent 1px
        );
    background-size: 18px 18px;
    mix-blend-mode: multiply;
}

[data-theme="dark"] .chirpui-band--pattern-dots::after,
[data-theme="dark"] .chirpui-band--pattern-grid::after {
    opacity: 0.22;
    mix-blend-mode: soft-light;
}

.chirpui-band--pattern-dots > *,
.chirpui-band--pattern-grid > * {
    position: relative;
    z-index: 1;
}


}

/* === partials/123_page-ambient.css === */
@layer chirpui.component {
/* ==========================================================================
   Page ambient — mesh + SVG noise; first child inside .chirpui-ambient-root
   ========================================================================== */

.chirpui-ambient-root {
    position: relative;
    isolation: isolate;
    /* Column flex so in-flow siblings are flex items: z-index applies without position:relative,
       which would override position:sticky on headers/topbars. */
    display: flex;
    flex-direction: column;
}

.chirpui-ambient-root > :not(.chirpui-ambient) {
    z-index: 1;
}

.chirpui-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 90% 55% at 50% -25%,
            color-mix(in oklab, var(--chirpui-accent) 16%, transparent),
            transparent 58%
        ),
        radial-gradient(
            ellipse 45% 30% at 95% 15%,
            color-mix(in oklab, var(--chirpui-accent-secondary) 12%, transparent),
            transparent 52%
        ),
        radial-gradient(
            ellipse 40% 28% at 5% 55%,
            color-mix(in oklab, var(--chirpui-primary) 10%, transparent),
            transparent 48%
        ),
        radial-gradient(
            ellipse 70% 45% at 50% 100%,
            color-mix(in oklab, var(--chirpui-border) 25%, transparent),
            transparent 55%
        );
}

.chirpui-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.65'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

[data-theme="dark"] .chirpui-ambient::after {
    opacity: 0.14;
    mix-blend-mode: soft-light;
}


}

/* === partials/124_surface-overlays.css === */
@layer chirpui.component {
/* ==========================================================================
   Surface overlays — noise / static scan
   Do not combine with chirpui-surface--cornered (both use ::before/::after).
   ========================================================================== */

.chirpui-surface--noise-overlay,
.chirpui-surface--static-overlay {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.chirpui-surface--noise-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

[data-theme="dark"] .chirpui-surface--noise-overlay::after {
    opacity: 0.22;
    mix-blend-mode: soft-light;
}

.chirpui-surface--static-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 40%, transparent) 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 40%, transparent) 7px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 38%, transparent) 6px,
            color-mix(in oklab, var(--chirpui-bg-pattern-ink) 38%, transparent) 7px
        );
}

.chirpui-surface--noise-overlay > *,
.chirpui-surface--static-overlay > * {
    position: relative;
    z-index: 1;
}


}

/* === partials/125_orbit.css === */
@layer chirpui.component {
/* ==========================================================================
   Orbit — items rotating around a center
   ========================================================================== */

.chirpui-orbit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--chirpui-orbit-size, 200px);
    height: var(--chirpui-orbit-size, 200px);
}
.chirpui-orbit__center {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chirpui-orbit__ring {
    position: absolute;
    inset: 0;
    border: 1px dashed var(--chirpui-border);
    border-radius: 50%;
}
.chirpui-orbit__item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--chirpui-surface);
    border: 1px solid var(--chirpui-border);
    font-size: var(--chirpui-font-sm);
    animation: chirpui-orbit var(--chirpui-orbit-duration, 12s) linear infinite;
    pointer-events: none;
    --chirpui-orbit-radius: calc(var(--chirpui-orbit-size, 200px) / 2 - 12px);
}
.chirpui-orbit__item:nth-child(1) { animation-delay: 0s; }
.chirpui-orbit__item:nth-child(2) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.25); }
.chirpui-orbit__item:nth-child(3) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.5); }
.chirpui-orbit__item:nth-child(4) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.75); }
.chirpui-orbit__item:nth-child(5) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.2); }
.chirpui-orbit__item:nth-child(6) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.4); }
.chirpui-orbit__item:nth-child(7) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.6); }
.chirpui-orbit__item:nth-child(8) { animation-delay: calc(var(--chirpui-orbit-duration, 12s) * -0.8); }
.chirpui-orbit--sm { --chirpui-orbit-size: 120px; }
.chirpui-orbit--lg { --chirpui-orbit-size: 300px; }
.chirpui-orbit--xl { --chirpui-orbit-size: 400px; }
.chirpui-orbit--fast { --chirpui-orbit-duration: 6s; }
.chirpui-orbit--slow { --chirpui-orbit-duration: 20s; }
.chirpui-orbit--reverse .chirpui-orbit__item { animation-direction: reverse; }


}

/* === partials/126_sparkle.css === */
@layer chirpui.component {
/* ==========================================================================
   Sparkle — staggered star twinkles
   ========================================================================== */

.chirpui-sparkle {
    position: relative;
    display: inline-block;
}
.chirpui-sparkle__star {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 2;
    animation: chirpui-sparkle var(--chirpui-sparkle-duration, var(--chirpui-anim-pulse)) ease-in-out infinite;
}
.chirpui-sparkle__star::before,
.chirpui-sparkle__star::after {
    content: "";
    position: absolute;
    background: var(--chirpui-sparkle-color, var(--chirpui-accent));
    border-radius: 2px;
}
.chirpui-sparkle__star::before {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}
.chirpui-sparkle__star::after {
    height: 100%;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
}
.chirpui-sparkle__star:nth-child(1) { top: 0; left: 10%; animation-delay: 0s; }
.chirpui-sparkle__star:nth-child(2) { top: 20%; right: 5%; animation-delay: 0.4s; }
.chirpui-sparkle__star:nth-child(3) { bottom: 10%; left: 30%; animation-delay: 0.8s; }
.chirpui-sparkle__star:nth-child(4) { top: 40%; left: 60%; animation-delay: 1.2s; }
.chirpui-sparkle__star:nth-child(5) { bottom: 30%; right: 15%; animation-delay: 0.2s; }
.chirpui-sparkle__star:nth-child(6) { top: 5%; left: 70%; animation-delay: 0.6s; }
.chirpui-sparkle--gold { --chirpui-sparkle-color: #ffd700; }
.chirpui-sparkle--white { --chirpui-sparkle-color: #fff; }
.chirpui-sparkle--rainbow .chirpui-sparkle__star:nth-child(1) { --chirpui-sparkle-color: #f44; }
.chirpui-sparkle--rainbow .chirpui-sparkle__star:nth-child(2) { --chirpui-sparkle-color: #fa0; }
.chirpui-sparkle--rainbow .chirpui-sparkle__star:nth-child(3) { --chirpui-sparkle-color: #0c0; }
.chirpui-sparkle--rainbow .chirpui-sparkle__star:nth-child(4) { --chirpui-sparkle-color: #0cf; }
.chirpui-sparkle--rainbow .chirpui-sparkle__star:nth-child(5) { --chirpui-sparkle-color: #c0f; }
.chirpui-sparkle--rainbow .chirpui-sparkle__star:nth-child(6) { --chirpui-sparkle-color: #f0c; }


}

/* === partials/127_confetti.css === */
@layer chirpui.component {
/* ==========================================================================
   Confetti — Alpine-triggered celebration burst
   ========================================================================== */

.chirpui-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--chirpui-z-celebration);
    overflow: clip;
}
.chirpui-confetti__piece {
    position: absolute;
    top: -10%;
    width: 10px;
    height: 10px;
    opacity: 0;
}
.chirpui-confetti__piece--active {
    animation:
        chirpui-confetti-fall var(--chirpui-confetti-duration, 3s) ease-in forwards,
        chirpui-confetti-sway var(--chirpui-confetti-sway, 1.5s) ease-in-out infinite;
}
.chirpui-confetti__piece--square { border-radius: 0; }
.chirpui-confetti__piece--circle { border-radius: 50%; }
.chirpui-confetti__piece--strip {
    width: 4px;
    height: 14px;
    border-radius: 2px;
}


}

/* === partials/128_wobble-jello-rubber-band.css === */
@layer chirpui.component {
/* ==========================================================================
   Wobble/Jello/Rubber-band — micro-interaction utilities
   ========================================================================== */

.chirpui-wobble,
.chirpui-jello,
.chirpui-rubber-band,
.chirpui-bounce-in,
.chirpui-hover-wobble,
.chirpui-hover-jello,
.chirpui-hover-rubber {
    display: inline-block;
    transform-origin: center;
    will-change: transform;
}

.chirpui-wobble { animation: chirpui-wobble 1s ease-in-out; }
.chirpui-jello { animation: chirpui-jello 1s ease-in-out; }
.chirpui-rubber-band { animation: chirpui-rubber-band 1s ease-in-out; }
.chirpui-bounce-in { animation: chirpui-bounce-in 0.6s ease-out both; }

/* Hover-triggered variants */
.chirpui-hover-wobble:hover { animation: chirpui-wobble 1s ease-in-out; }
.chirpui-hover-jello:hover { animation: chirpui-jello 1s ease-in-out; }
.chirpui-hover-rubber:hover { animation: chirpui-rubber-band 1s ease-in-out; }

/* Click-triggered (via :active or Alpine) */
.chirpui-click-wobble:active { animation: chirpui-wobble 0.6s ease-in-out; }
.chirpui-click-jello:active { animation: chirpui-jello 0.6s ease-in-out; }

}

/* === partials/129_symbol-rain.css === */
@layer chirpui.component {
/* ==========================================================================
   Symbol Rain — cascading ASCII characters
   ========================================================================== */

.chirpui-symbol-rain {
    position: relative;
    overflow: clip;
}
.chirpui-symbol-rain__canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.chirpui-symbol-rain__drop {
    position: absolute;
    top: 0;
    font-family: var(--chirpui-ascii-font);
    font-size: 0.875rem;
    color: var(--chirpui-symbol-rain-color, var(--chirpui-accent));
    opacity: 0;
    animation: chirpui-symbol-rain-fall var(--chirpui-symbol-rain-speed, 4s) linear infinite;
}
.chirpui-symbol-rain__drop:nth-child(1) { animation-delay: 0s; animation-duration: 3.5s; }
.chirpui-symbol-rain__drop:nth-child(2) { animation-delay: 0.7s; animation-duration: 4.2s; font-size: 0.75rem; }
.chirpui-symbol-rain__drop:nth-child(3) { animation-delay: 1.3s; animation-duration: 3.8s; }
.chirpui-symbol-rain__drop:nth-child(4) { animation-delay: 2.0s; animation-duration: 5s; font-size: 1rem; }
.chirpui-symbol-rain__drop:nth-child(5) { animation-delay: 0.4s; animation-duration: 4.5s; font-size: 0.675rem; }
.chirpui-symbol-rain__drop:nth-child(6) { animation-delay: 1.8s; animation-duration: 3.2s; }
.chirpui-symbol-rain__content {
    position: relative;
    z-index: 1;
}
.chirpui-symbol-rain--accent .chirpui-symbol-rain__drop { --chirpui-symbol-rain-color: var(--chirpui-accent); }
.chirpui-symbol-rain--gold .chirpui-symbol-rain__drop { --chirpui-symbol-rain-color: #ffd700; }
.chirpui-symbol-rain--muted .chirpui-symbol-rain__drop { --chirpui-symbol-rain-color: var(--chirpui-text-muted); opacity: 0.4; }


}

/* === partials/130_holy-light.css === */
@layer chirpui.component {
/* ==========================================================================
   Holy Light — divine ascending sparkles with parallax
   ========================================================================== */

.chirpui-holy-light {
    position: relative;
    overflow: clip;
    --chirpui-holy-color: #ffd700;
}
.chirpui-holy-light__layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.chirpui-holy-light__layer {
    position: absolute;
    inset: 0;
}
.chirpui-holy-light__mote {
    position: absolute;
    font-family: var(--chirpui-ascii-font);
    color: var(--chirpui-holy-color);
    opacity: 0;
}

/* Far layer — small, slow, faint */
.chirpui-holy-light__layer--far .chirpui-holy-light__mote {
    font-size: 0.5rem;
    animation:
        chirpui-holy-rise-far 8s ease-in-out infinite,
        chirpui-holy-glow-pulse 3s ease-in-out infinite;
}
.chirpui-holy-light__layer--far .chirpui-holy-light__mote:nth-child(2) { animation-delay: 1.5s; }
.chirpui-holy-light__layer--far .chirpui-holy-light__mote:nth-child(3) { animation-delay: 3s; }
.chirpui-holy-light__layer--far .chirpui-holy-light__mote:nth-child(4) { animation-delay: 4.5s; }
.chirpui-holy-light__layer--far .chirpui-holy-light__mote:nth-child(5) { animation-delay: 6s; }

/* Mid layer — medium, moderate speed */
.chirpui-holy-light__layer--mid .chirpui-holy-light__mote {
    font-size: 0.875rem;
    animation:
        chirpui-holy-rise-mid 6s ease-in-out infinite,
        chirpui-holy-glow-pulse 2.5s ease-in-out infinite;
}
.chirpui-holy-light__layer--mid .chirpui-holy-light__mote:nth-child(2) { animation-delay: 1.2s; }
.chirpui-holy-light__layer--mid .chirpui-holy-light__mote:nth-child(3) { animation-delay: 2.4s; }
.chirpui-holy-light__layer--mid .chirpui-holy-light__mote:nth-child(4) { animation-delay: 3.6s; }
.chirpui-holy-light__layer--mid .chirpui-holy-light__mote:nth-child(5) { animation-delay: 4.8s; }

/* Near layer — large, fast, bright */
.chirpui-holy-light__layer--near .chirpui-holy-light__mote {
    font-size: 1.25rem;
    animation:
        chirpui-holy-rise-near 4.5s ease-in-out infinite,
        chirpui-holy-glow-pulse 2s ease-in-out infinite;
}
.chirpui-holy-light__layer--near .chirpui-holy-light__mote:nth-child(2) { animation-delay: 1s; }
.chirpui-holy-light__layer--near .chirpui-holy-light__mote:nth-child(3) { animation-delay: 2.2s; }
.chirpui-holy-light__layer--near .chirpui-holy-light__mote:nth-child(4) { animation-delay: 3.4s; }

.chirpui-holy-light__content {
    position: relative;
    z-index: 1;
}

/* Variants */
.chirpui-holy-light--gold { --chirpui-holy-color: #ffd700; }
.chirpui-holy-light--silver { --chirpui-holy-color: #c0c0c0; }
.chirpui-holy-light--holy { --chirpui-holy-color: #fffacd; }

/* Intensity */
.chirpui-holy-light--intense .chirpui-holy-light__mote { filter: drop-shadow(0 0 6px var(--chirpui-holy-color)); }
.chirpui-holy-light--subtle .chirpui-holy-light__layer--near .chirpui-holy-light__mote { font-size: 0.875rem; }
.chirpui-holy-light--subtle .chirpui-holy-light__layer--mid .chirpui-holy-light__mote { font-size: 0.625rem; }


}

/* === partials/131_rune-field.css === */
@layer chirpui.component {
/* ==========================================================================
   Rune Field — mystical drifting symbols with parallax
   ========================================================================== */

.chirpui-rune-field {
    position: relative;
    overflow: clip;
    --chirpui-rune-color: var(--chirpui-accent);
    --chirpui-rune-opacity: 0.4;
}
.chirpui-rune-field__layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.chirpui-rune-field__layer {
    position: absolute;
    inset: 0;
}
.chirpui-rune-field__rune {
    position: absolute;
    font-family: var(--chirpui-ascii-font);
    color: var(--chirpui-rune-color);
}

/* Far layer — tiny, slow drift, very faint */
.chirpui-rune-field__layer--far .chirpui-rune-field__rune {
    font-size: 0.625rem;
    --chirpui-rune-opacity: 0.2;
    animation:
        chirpui-rune-drift-far 20s ease-in-out infinite,
        chirpui-rune-pulse 4s ease-in-out infinite;
}
.chirpui-rune-field__layer--far .chirpui-rune-field__rune:nth-child(2) { animation-delay: 3s; }
.chirpui-rune-field__layer--far .chirpui-rune-field__rune:nth-child(3) { animation-delay: 6s; }
.chirpui-rune-field__layer--far .chirpui-rune-field__rune:nth-child(4) { animation-delay: 9s; }
.chirpui-rune-field__layer--far .chirpui-rune-field__rune:nth-child(5) { animation-delay: 12s; }
.chirpui-rune-field__layer--far .chirpui-rune-field__rune:nth-child(6) { animation-delay: 15s; }

/* Mid layer — medium, moderate drift */
.chirpui-rune-field__layer--mid .chirpui-rune-field__rune {
    font-size: 1rem;
    --chirpui-rune-opacity: 0.35;
    animation:
        chirpui-rune-drift-mid 14s ease-in-out infinite,
        chirpui-rune-pulse 3s ease-in-out infinite;
}
.chirpui-rune-field__layer--mid .chirpui-rune-field__rune:nth-child(2) { animation-delay: 2.5s; }
.chirpui-rune-field__layer--mid .chirpui-rune-field__rune:nth-child(3) { animation-delay: 5s; }
.chirpui-rune-field__layer--mid .chirpui-rune-field__rune:nth-child(4) { animation-delay: 7.5s; }
.chirpui-rune-field__layer--mid .chirpui-rune-field__rune:nth-child(5) { animation-delay: 10s; }

/* Near layer — large, visible, pronounced drift */
.chirpui-rune-field__layer--near .chirpui-rune-field__rune {
    font-size: 1.5rem;
    --chirpui-rune-opacity: 0.5;
    animation:
        chirpui-rune-drift-near 10s ease-in-out infinite,
        chirpui-rune-pulse 2.5s ease-in-out infinite;
}
.chirpui-rune-field__layer--near .chirpui-rune-field__rune:nth-child(2) { animation-delay: 2s; }
.chirpui-rune-field__layer--near .chirpui-rune-field__rune:nth-child(3) { animation-delay: 4.5s; }
.chirpui-rune-field__layer--near .chirpui-rune-field__rune:nth-child(4) { animation-delay: 7s; }

.chirpui-rune-field__content {
    position: relative;
    z-index: 1;
}

/* Variants */
.chirpui-rune-field--arcane { --chirpui-rune-color: #a855f7; }
.chirpui-rune-field--frost { --chirpui-rune-color: #67e8f9; }
.chirpui-rune-field--ember { --chirpui-rune-color: #fb923c; }


}

/* === partials/132_constellation.css === */
@layer chirpui.component {
/* ==========================================================================
   Constellation — twinkling ASCII starfield
   ========================================================================== */

.chirpui-constellation {
    position: relative;
    overflow: clip;
    --chirpui-star-color: var(--chirpui-text);
    --chirpui-star-base-opacity: 0.3;
}
.chirpui-constellation__field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.chirpui-constellation__star {
    position: absolute;
    font-family: var(--chirpui-ascii-font);
    font-size: 0.75rem;
    color: var(--chirpui-star-color);
    opacity: var(--chirpui-star-base-opacity);
    animation:
        chirpui-star-twinkle var(--chirpui-star-twinkle-speed, 3s) ease-in-out infinite,
        chirpui-star-drift 12s ease-in-out infinite;
}
.chirpui-constellation__star:nth-child(2) { animation-delay: 0.5s; font-size: 0.5rem; }
.chirpui-constellation__star:nth-child(3) { animation-delay: 1.2s; font-size: 0.875rem; }
.chirpui-constellation__star:nth-child(4) { animation-delay: 0.3s; }
.chirpui-constellation__star:nth-child(5) { animation-delay: 1.8s; font-size: 0.625rem; }
.chirpui-constellation__star:nth-child(6) { animation-delay: 0.9s; font-size: 1rem; }
.chirpui-constellation__star:nth-child(7) { animation-delay: 2.1s; font-size: 0.5rem; }
.chirpui-constellation__star:nth-child(8) { animation-delay: 1.5s; }
.chirpui-constellation__star:nth-child(9) { animation-delay: 0.6s; font-size: 0.875rem; }
.chirpui-constellation__star:nth-child(10) { animation-delay: 2.4s; font-size: 0.625rem; }
.chirpui-constellation__star:nth-child(11) { animation-delay: 1.1s; }
.chirpui-constellation__star:nth-child(12) { animation-delay: 0.2s; font-size: 1rem; }
.chirpui-constellation__star:nth-child(13) { animation-delay: 1.7s; font-size: 0.5rem; }
.chirpui-constellation__star:nth-child(14) { animation-delay: 2.8s; font-size: 0.875rem; }
.chirpui-constellation__star:nth-child(15) { animation-delay: 0.8s; }
.chirpui-constellation__star:nth-child(16) { animation-delay: 2.0s; font-size: 0.625rem; }
.chirpui-constellation__content {
    position: relative;
    z-index: 1;
}

/* Variants */
.chirpui-constellation--warm { --chirpui-star-color: #fbbf24; }
.chirpui-constellation--cool { --chirpui-star-color: #67e8f9; }
.chirpui-constellation--mono { --chirpui-star-color: var(--chirpui-text-muted); }

/* Density */
.chirpui-constellation--dense { --chirpui-star-base-opacity: 0.4; --chirpui-star-twinkle-speed: 2s; }
.chirpui-constellation--sparse { --chirpui-star-base-opacity: 0.2; --chirpui-star-twinkle-speed: 5s; }


}

/* === partials/133_ascii-border.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Border — box-drawing character frame
   ========================================================================== */

.chirpui-ascii-border {
    --chirpui-ascii-border-color: var(--chirpui-text-muted);
    font-family: var(--chirpui-ascii-font);
    display: inline-block;
    overflow: clip;
    min-width: 0;
}
.chirpui-ascii-border__top,
.chirpui-ascii-border__bottom {
    display: flex;
    color: var(--chirpui-ascii-border-color);
    line-height: 1;
    user-select: none;
}
.chirpui-ascii-border__corner {
    flex-shrink: 0;
}
.chirpui-ascii-border__line {
    flex: 1;
    overflow: clip;
    white-space: nowrap;
    position: relative;
}
/* Fill the horizontal line with the box-drawing character via repeating background */
.chirpui-ascii-border__top .chirpui-ascii-border__line::after,
.chirpui-ascii-border__bottom .chirpui-ascii-border__line::after {
    content: "────────────────────────────────────────────────────────────────────────────────";
    position: absolute;
    inset: 0;
    overflow: clip;
    color: var(--chirpui-ascii-border-color);
}
.chirpui-ascii-border--double .chirpui-ascii-border__top .chirpui-ascii-border__line::after,
.chirpui-ascii-border--double .chirpui-ascii-border__bottom .chirpui-ascii-border__line::after {
    content: "════════════════════════════════════════════════════════════════════════════════";
}
.chirpui-ascii-border--heavy .chirpui-ascii-border__top .chirpui-ascii-border__line::after,
.chirpui-ascii-border--heavy .chirpui-ascii-border__bottom .chirpui-ascii-border__line::after {
    content: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━";
}
/* When a glyph is present in the top line, the glyph content takes precedence over the fill */
.chirpui-ascii-border__top .chirpui-ascii-border__line:not(:empty)::after {
    content: none;
}
.chirpui-ascii-border__mid {
    display: flex;
}
.chirpui-ascii-border__side {
    color: var(--chirpui-ascii-border-color);
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}
.chirpui-ascii-border__content {
    flex: 1;
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
}

/* Momentum spin for border corners */
.chirpui-ascii-border--spin .chirpui-ascii-border__corner {
    display: inline-block;
    animation: chirpui-ascii-momentum 6s cubic-bezier(0.2, 0, 0.1, 1) infinite;
}
.chirpui-ascii-border--spin .chirpui-ascii-border__top .chirpui-ascii-border__corner:nth-child(1) {
    animation-name: chirpui-ascii-momentum;
    animation-duration: 5s;
}
.chirpui-ascii-border--spin .chirpui-ascii-border__top .chirpui-ascii-border__corner:nth-child(3) {
    animation-name: chirpui-ascii-momentum-reverse;
    animation-duration: 7s;
}
.chirpui-ascii-border--spin .chirpui-ascii-border__bottom .chirpui-ascii-border__corner:nth-child(1) {
    animation-name: chirpui-ascii-momentum-drift;
    animation-duration: var(--chirpui-anim-drift);
}
.chirpui-ascii-border--spin .chirpui-ascii-border__bottom .chirpui-ascii-border__corner:nth-child(3) {
    animation-name: chirpui-ascii-momentum;
    animation-duration: 6.5s;
}


}

/* === partials/134_ascii-divider.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Divider — glyph-centered horizontal separator
   ========================================================================== */

.chirpui-ascii-divider {
    /* Grid: two fr tracks + auto glyph column — reliable full width and centering vs flex+::before. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: var(--chirpui-spacing) 0;
    font-family: var(--chirpui-ascii-font);
    color: var(--chirpui-text-muted);
    user-select: none;
}
.chirpui-ascii-divider::before,
.chirpui-ascii-divider::after {
    content: "────────────────────────────────────────";
    min-width: 0;
    overflow: clip;
    white-space: nowrap;
    max-height: 1.2em;
    color: var(--chirpui-text-muted);
    opacity: 0.5;
}
/* Anchor repeated line to the glyph so clipping shows the join, not the far outer edge. */
.chirpui-ascii-divider::before {
    text-align: end;
}
.chirpui-ascii-divider::after {
    text-align: start;
}
.chirpui-ascii-divider__glyph {
    justify-self: center;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Variant: double line */
.chirpui-ascii-divider--double::before,
.chirpui-ascii-divider--double::after {
    content: "════════════════════════════════════════";
}

/* Variant: heavy line */
.chirpui-ascii-divider--heavy::before,
.chirpui-ascii-divider--heavy::after {
    content: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━";
}

/* Variant: dots */
.chirpui-ascii-divider--dots::before,
.chirpui-ascii-divider--dots::after {
    content: "· · · · · · · · · · · · · · · · · · · · ";
}

/* Momentum spin for the glyph */
.chirpui-ascii-divider--spin .chirpui-ascii-divider__glyph {
    display: inline-block;
    animation: chirpui-ascii-momentum 6s cubic-bezier(0.2, 0, 0.1, 1) infinite;
}
.chirpui-ascii-divider--spin-reverse .chirpui-ascii-divider__glyph {
    display: inline-block;
    animation: chirpui-ascii-momentum-reverse 7s cubic-bezier(0.2, 0, 0.1, 1) infinite;
}
.chirpui-ascii-divider--spin-drift .chirpui-ascii-divider__glyph {
    display: inline-block;
    animation: chirpui-ascii-momentum-drift var(--chirpui-anim-drift) cubic-bezier(0.3, 0, 0.1, 1) infinite;
}


}

/* === partials/135_ascii-sparkline.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Sparkline — inline block-character data visualization
   ========================================================================== */

.chirpui-ascii-sparkline {
    font-family: var(--chirpui-ascii-font);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--chirpui-text);
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    vertical-align: middle;
}
.chirpui-ascii-sparkline__bar {
    display: inline-block;
    line-height: 1;
}

/* Variants */
.chirpui-ascii-sparkline--accent { color: var(--chirpui-accent); }
.chirpui-ascii-sparkline--muted { color: var(--chirpui-text-muted); }
.chirpui-ascii-sparkline--gradient .chirpui-ascii-sparkline__bar {
    background: linear-gradient(to top, var(--chirpui-accent), var(--chirpui-accent-bright, var(--chirpui-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


}

/* === partials/136_ascii-progress.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Progress — terminal-style progress bar
   ========================================================================== */

.chirpui-ascii-progress {
    font-family: var(--chirpui-ascii-font);
    font-size: 0.875rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    color: var(--chirpui-text);
}
.chirpui-ascii-progress__label {
    color: var(--chirpui-text-muted);
    flex-shrink: 0;
}
.chirpui-ascii-progress__track {
    letter-spacing: 0;
    white-space: nowrap;
}
.chirpui-ascii-progress__filled {
    color: var(--chirpui-ascii-progress-fill, var(--chirpui-accent));
}
.chirpui-ascii-progress__empty {
    color: var(--chirpui-text-muted);
    opacity: 0.4;
}
.chirpui-ascii-progress__value {
    color: var(--chirpui-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Variants */
.chirpui-ascii-progress--accent { --chirpui-ascii-progress-fill: var(--chirpui-accent); }
.chirpui-ascii-progress--success { --chirpui-ascii-progress-fill: var(--chirpui-success); }
.chirpui-ascii-progress--warning { --chirpui-ascii-progress-fill: var(--chirpui-warning); }

}

/* === partials/137_ascii-empty.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Empty — zero-data empty state
   ========================================================================== */

.chirpui-ascii-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--chirpui-spacing-xl) var(--chirpui-spacing);
    gap: var(--chirpui-spacing-xs);
}
.chirpui-ascii-empty__glyph {
    font-family: var(--chirpui-ascii-font);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    opacity: 0.5;
    margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-ascii-empty__heading {
    font-family: var(--chirpui-ascii-font);
    font-size: 0.875rem;
    font-weight: var(--chirpui-ui-font-weight-medium, 500);
    color: var(--chirpui-text);
    margin: 0;
}
.chirpui-ascii-empty__desc {
    font-size: 0.82rem;
    color: var(--chirpui-text-muted);
    margin: 0;
    max-width: 30ch;
}
.chirpui-ascii-empty__action {
    margin-top: var(--chirpui-spacing-sm);
}
.chirpui-ascii-empty__action:empty {
    display: none;
}

/* Variants */
.chirpui-ascii-empty--muted .chirpui-ascii-empty__glyph { color: var(--chirpui-text-muted); opacity: 0.3; }
.chirpui-ascii-empty--accent .chirpui-ascii-empty__glyph { color: var(--chirpui-accent); opacity: 0.6; }

}

/* === partials/138_ascii-spinner.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Spinner
   ========================================================================== */

.chirpui-ascii-spinner {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    font-family: var(--chirpui-ascii-font);
}

.chirpui-ascii-spinner__chars {
    position: relative;
    display: inline-block;
}

.chirpui-ascii-spinner--sm .chirpui-ascii-spinner__chars { width: 0.75rem; height: 0.75rem; font-size: 0.75rem; }
.chirpui-ascii-spinner--md .chirpui-ascii-spinner__chars { width: 1rem; height: 1rem; font-size: 1rem; }
.chirpui-ascii-spinner--lg .chirpui-ascii-spinner__chars { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }

.chirpui-ascii-spinner__char {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.chirpui-ascii-spinner__label {
    color: var(--chirpui-fg-muted, inherit);
}

/* Braille: 10 frames */
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char {
    animation: chirpui-ascii-spinner-10 1s steps(1) infinite;
}
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(1)  { animation-delay: 0s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(2)  { animation-delay: -0.9s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(3)  { animation-delay: -0.8s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(4)  { animation-delay: -0.7s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(5)  { animation-delay: -0.6s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(6)  { animation-delay: -0.5s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(7)  { animation-delay: -0.4s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(8)  { animation-delay: -0.3s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(9)  { animation-delay: -0.2s; }
.chirpui-ascii-spinner--braille .chirpui-ascii-spinner__char:nth-child(10) { animation-delay: -0.1s; }

/* Box: 4 frames */
.chirpui-ascii-spinner--box .chirpui-ascii-spinner__char {
    animation: chirpui-ascii-spinner-4 var(--chirpui-anim-breath) steps(1) infinite;
}
.chirpui-ascii-spinner--box .chirpui-ascii-spinner__char:nth-child(1) { animation-delay: 0s; }
.chirpui-ascii-spinner--box .chirpui-ascii-spinner__char:nth-child(2) { animation-delay: -0.6s; }
.chirpui-ascii-spinner--box .chirpui-ascii-spinner__char:nth-child(3) { animation-delay: -0.4s; }
.chirpui-ascii-spinner--box .chirpui-ascii-spinner__char:nth-child(4) { animation-delay: -0.2s; }

/* Dots: 8 frames */
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char {
    animation: chirpui-ascii-spinner-8 var(--chirpui-anim-breath) steps(1) infinite;
}
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(1) { animation-delay: 0s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(2) { animation-delay: -0.7s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(3) { animation-delay: -0.6s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(4) { animation-delay: -0.5s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(5) { animation-delay: -0.4s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(6) { animation-delay: -0.3s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(7) { animation-delay: -0.2s; }
.chirpui-ascii-spinner--dots .chirpui-ascii-spinner__char:nth-child(8) { animation-delay: -0.1s; }

/* Arrows: 8 frames */
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char {
    animation: chirpui-ascii-spinner-8 var(--chirpui-anim-breath) steps(1) infinite;
}
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(1) { animation-delay: 0s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(2) { animation-delay: -0.7s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(3) { animation-delay: -0.6s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(4) { animation-delay: -0.5s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(5) { animation-delay: -0.4s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(6) { animation-delay: -0.3s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(7) { animation-delay: -0.2s; }
.chirpui-ascii-spinner--arrows .chirpui-ascii-spinner__char:nth-child(8) { animation-delay: -0.1s; }

/* Blocks: 4 frames */
.chirpui-ascii-spinner--blocks .chirpui-ascii-spinner__char {
    animation: chirpui-ascii-spinner-4 var(--chirpui-anim-breath) steps(1) infinite;
}
.chirpui-ascii-spinner--blocks .chirpui-ascii-spinner__char:nth-child(1) { animation-delay: 0s; }
.chirpui-ascii-spinner--blocks .chirpui-ascii-spinner__char:nth-child(2) { animation-delay: -0.6s; }
.chirpui-ascii-spinner--blocks .chirpui-ascii-spinner__char:nth-child(3) { animation-delay: -0.4s; }
.chirpui-ascii-spinner--blocks .chirpui-ascii-spinner__char:nth-child(4) { animation-delay: -0.2s; }

@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-spinner__char {
        animation: none;
        opacity: 0;
    }

    .chirpui-ascii-spinner__char:first-child {
        opacity: 1;
    }
}
}

/* === partials/139_ascii-badge.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Badge
   ========================================================================== */

.chirpui-ascii-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-family: var(--chirpui-ascii-font);
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--chirpui-text);
}
.chirpui-ascii-badge__open,
.chirpui-ascii-badge__close {
    color: var(--chirpui-text-muted);
    opacity: 0.6;
}
.chirpui-ascii-badge__glyph {
    color: var(--chirpui-ascii-badge-color, var(--chirpui-text));
}
.chirpui-ascii-badge__text {
    color: var(--chirpui-ascii-badge-color, var(--chirpui-text));
}

/* Variants */
.chirpui-ascii-badge--success { --chirpui-ascii-badge-color: var(--chirpui-success); }
.chirpui-ascii-badge--warning { --chirpui-ascii-badge-color: var(--chirpui-warning); }
.chirpui-ascii-badge--error { --chirpui-ascii-badge-color: var(--chirpui-error); }
.chirpui-ascii-badge--accent { --chirpui-ascii-badge-color: var(--chirpui-accent); }
.chirpui-ascii-badge--muted { --chirpui-ascii-badge-color: var(--chirpui-text-muted); }


}

/* === partials/140_ascii-glyph-fill.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Glyph Fill — hover/active micro-moments
   Swap between hollow and filled glyphs on interaction.

   Usage:
       <span class="chirpui-ascii-fill" data-hollow="◇" data-filled="◆">◇</span>
       <span class="chirpui-ascii-fill" data-hollow="☆" data-filled="★">☆</span>
       <span class="chirpui-ascii-fill" data-hollow="○" data-filled="●">○</span>

   Or as utility classes on a parent (swaps all .chirpui-ascii-fill children):
       <button class="chirpui-ascii-fill-hover">
           <span class="chirpui-ascii-fill" ...>◇</span> Settings
       </button>
   ========================================================================== */

.chirpui-ascii-fill {
    font-family: var(--chirpui-ascii-font);
    display: inline-block;
    transition: transform var(--chirpui-motion-fast) var(--chirpui-ease-spring);
    cursor: default;
}

/* Self-hover: the glyph itself is hovered */
.chirpui-ascii-fill:hover {
    transform: scale(1.15);
}

/* Parent-triggered hover: parent has .chirpui-ascii-fill-hover */
.chirpui-ascii-fill-hover:hover .chirpui-ascii-fill {
    transform: scale(1.15);
}

/* Active/press: slight shrink for tactile feel */
.chirpui-ascii-fill:active,
.chirpui-ascii-fill-hover:active .chirpui-ascii-fill {
    transform: scale(0.9);
    transition-duration: var(--chirpui-motion-fast);
}


}

/* === partials/141_ascii-error-page.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Error Page — stylized error states with ASCII art
   ========================================================================== */

.chirpui-ascii-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--chirpui-spacing-2xl) var(--chirpui-spacing);
    gap: var(--chirpui-spacing-xs);
    min-height: 40vh;
}
.chirpui-ascii-error__art {
    font-family: var(--chirpui-ascii-font);
    font-size: 0.875rem;
    font-variant-ligatures: none;
    line-height: 1.15;
    color: var(--chirpui-text-muted);
    opacity: 0.6;
    margin: 0 0 var(--chirpui-spacing);
    white-space: pre;
    text-align: left;
    tab-size: 2;
    user-select: none;
}
.chirpui-ascii-error__code {
    font-family: var(--chirpui-ascii-font);
    font-size: 3rem;
    font-weight: var(--chirpui-ui-font-weight-bold, 700);
    line-height: 1;
    color: var(--chirpui-text);
    letter-spacing: 0.1em;
}
.chirpui-ascii-error__heading {
    font-family: var(--chirpui-ascii-font);
    font-size: 1rem;
    font-weight: var(--chirpui-ui-font-weight-medium, 500);
    color: var(--chirpui-text);
    margin: var(--chirpui-spacing-xs) 0 0;
}
.chirpui-ascii-error__desc {
    font-size: 0.82rem;
    color: var(--chirpui-text-muted);
    margin: var(--chirpui-spacing-xs) 0 0;
    max-width: 40ch;
}
.chirpui-ascii-error__action {
    margin-top: var(--chirpui-spacing);
}
.chirpui-ascii-error__action:empty {
    display: none;
}

}

/* === partials/142_ascii-skeleton.css === */
@layer chirpui.component {
/* ==========================================================================
   ASCII Skeleton — character-based loading placeholder
   ========================================================================== */

.chirpui-ascii-skeleton {
    display: inline-block;
    font-family: var(--chirpui-ascii-font);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--chirpui-text-muted);
    overflow: clip;
    border-radius: var(--chirpui-radius-sm);
    letter-spacing: 0.05em;
}
.chirpui-ascii-skeleton__fill,
.chirpui-ascii-skeleton__line {
    display: block;
    overflow: clip;
    white-space: nowrap;
    max-height: 1.4em;
    animation: chirpui-ascii-skeleton-wave 2s ease-in-out infinite;
}

/* Stagger wave across lines */
.chirpui-ascii-skeleton__line:nth-child(2) { animation-delay: 0.15s; }
.chirpui-ascii-skeleton__line:nth-child(3) { animation-delay: 0.3s; }
.chirpui-ascii-skeleton__line:nth-child(4) { animation-delay: 0.45s; }
.chirpui-ascii-skeleton__line:nth-child(5) { animation-delay: 0.6s; }
.chirpui-ascii-skeleton__line:nth-child(6) { animation-delay: 0.75s; }

/* Header line inside card skeleton */
.chirpui-ascii-skeleton__line--header {
    font-size: 0.875rem;
    margin-bottom: var(--chirpui-spacing-xs);
    font-weight: var(--chirpui-ui-font-weight-medium, 500);
}

/* Text variant */
.chirpui-ascii-skeleton--text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}
.chirpui-ascii-skeleton--text .chirpui-ascii-skeleton__line:last-child {
    max-width: 75%;
}

/* Card variant */
.chirpui-ascii-skeleton--card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
}
.chirpui-ascii-skeleton--card .chirpui-ascii-skeleton__line:last-child {
    max-width: 60%;
}

/* Avatar variant */
.chirpui-ascii-skeleton--avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--chirpui-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.chirpui-ascii-skeleton--avatar .chirpui-ascii-skeleton__fill {
    animation: chirpui-ascii-skeleton-wave 2s ease-in-out infinite;
}

/* Heading variant */
.chirpui-ascii-skeleton--heading {
    display: block;
    font-size: 1rem;
    width: 60%;
}
.chirpui-ascii-skeleton--heading .chirpui-ascii-skeleton__fill {
    font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-skeleton__fill,
    .chirpui-ascii-skeleton__line {
        animation: none;
    }
}
}

/* === partials/143_ascii-toggle.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Toggle — box-drawing switch with Unicode knob
   OFF:  ╶───○     ON:  ●───╴
   ================================================================ */
.chirpui-ascii-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    min-block-size: var(--chirpui-control-block-size);
    cursor: pointer;
    user-select: none;
}

.chirpui-ascii-toggle__track {
    display: inline-flex;
    align-items: center;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 1rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    transition: color var(--chirpui-transition);
    pointer-events: none;
}

.chirpui-ascii-toggle__rail {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 3.5em;
    height: 1.4em;
    overflow: clip;
}

/* The rail draws the track characters via pseudo-elements */
.chirpui-ascii-toggle__rail::before {
    content: "╶";
    position: absolute;
    left: 0;
    pointer-events: none;
    transition: opacity var(--chirpui-transition);
}
.chirpui-ascii-toggle__rail::after {
    content: "╴";
    position: absolute;
    right: 0;
    pointer-events: none;
    transition: opacity var(--chirpui-transition);
}

/* The knob — ○ when off, ● when on */
.chirpui-ascii-toggle__knob {
    position: absolute;
    left: 0;
    transition: left var(--chirpui-transition-slow) var(--chirpui-ease-spring),
                color var(--chirpui-transition);
    z-index: 1;
    pointer-events: none;
}
.chirpui-ascii-toggle__knob::before {
    content: "○";
    font-size: 1.15em;
}

/* Checked state */
.chirpui-ascii-toggle:has(.chirpui-ascii-toggle__input:checked) .chirpui-ascii-toggle__track {
    color: var(--chirpui-accent);
}
.chirpui-ascii-toggle:has(.chirpui-ascii-toggle__input:checked) .chirpui-ascii-toggle__knob {
    left: calc(100% - 1em);
}
.chirpui-ascii-toggle:has(.chirpui-ascii-toggle__input:checked) .chirpui-ascii-toggle__knob::before {
    content: "●";
}

/* Focus ring */
.chirpui-ascii-toggle:has(.chirpui-ascii-toggle__input:focus-visible) .chirpui-ascii-toggle__rail {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Active press feedback */
.chirpui-ascii-toggle:has(.chirpui-ascii-toggle__input:active) .chirpui-ascii-toggle__knob::before {
    content: "◉";
}

/* Label */
.chirpui-ascii-toggle__label {
    font-size: var(--chirpui-font-sm);
    color: var(--chirpui-text);
}

/* Disabled */
.chirpui-ascii-toggle--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Size variants --- */
.chirpui-ascii-toggle--sm { min-block-size: var(--chirpui-control-block-size-sm); }
.chirpui-ascii-toggle--sm .chirpui-ascii-toggle__track { font-size: 0.75rem; }
.chirpui-ascii-toggle--sm .chirpui-ascii-toggle__rail { width: 2.8em; height: 1.2em; }
.chirpui-ascii-toggle--sm .chirpui-ascii-toggle__label { font-size: var(--chirpui-font-xs, 0.7rem); }

.chirpui-ascii-toggle--lg {
    min-block-size: calc(var(--chirpui-control-block-size) + var(--chirpui-spacing-xs));
}
.chirpui-ascii-toggle--lg .chirpui-ascii-toggle__track { font-size: 1.35rem; }
.chirpui-ascii-toggle--lg .chirpui-ascii-toggle__rail { width: 4em; height: 1.6em; }

/* --- Color variants --- */
.chirpui-ascii-toggle--success:has(.chirpui-ascii-toggle__input:checked) .chirpui-ascii-toggle__track {
    color: var(--chirpui-success);
}
.chirpui-ascii-toggle--danger:has(.chirpui-ascii-toggle__input:checked) .chirpui-ascii-toggle__track {
    color: var(--chirpui-error);
}
.chirpui-ascii-toggle--accent:has(.chirpui-ascii-toggle__input:checked) .chirpui-ascii-toggle__track {
    color: var(--chirpui-accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-toggle__knob {
        transition: none;
    }
}

@media (max-width: 48rem), (pointer: coarse) {
    .chirpui-ascii-toggle--sm {
        min-block-size: var(--chirpui-control-touch-target);
    }
}
}

/* === partials/144_ascii-switch.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Switch — vertical breaker toggle with block characters
   ┌───┐        ┌───┐
   │░░░│  OFF   │███│  ON
   │░░░│        │███│
   │███│        │░░░│
   │███│        │░░░│
   └───┘        └───┘
   ================================================================ */
.chirpui-ascii-switch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    cursor: pointer;
    user-select: none;
}

.chirpui-ascii-switch__body {
    display: flex;
    flex-direction: column;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 0.85rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    transition: color var(--chirpui-transition);
    pointer-events: none;
}

/* Top and bottom caps: box-drawing corners + horizontal line */
.chirpui-ascii-switch__cap {
    display: block;
    white-space: pre;
    text-align: center;
}
.chirpui-ascii-switch__cap--top::before { content: "┌───┐"; }
.chirpui-ascii-switch__cap--bottom::before { content: "└───┘"; }

/* The slot contains rows of block characters */
.chirpui-ascii-switch__slot {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: clip;
    height: 4.2em;
}

/* The lever is the sliding element — 4 rows of characters, 2 filled + 2 empty.
   We slide it up (ON) or down (OFF). */
.chirpui-ascii-switch__lever {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform var(--chirpui-transition-slow) var(--chirpui-ease-spring);
    transform: translateY(0);
}

/* 4 rows via pseudo + generated content on the lever */
.chirpui-ascii-switch__lever::before,
.chirpui-ascii-switch__lever::after {
    display: block;
    white-space: pre;
    text-align: center;
}

/* Bottom 2 rows = filled blocks, Top 2 rows = light shade */
.chirpui-ascii-switch__lever::before {
    content: "│░░░│\A│░░░│";
    opacity: 0.4;
}
.chirpui-ascii-switch__lever::after {
    content: "│███│\A│███│";
}

/* OFF state — lever is down (default), blocks at bottom */
/* (default position, no transform needed) */

/* ON state — lever slides up, blocks move to top */
.chirpui-ascii-switch:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-switch__lever {
    transform: translateY(-50%);
}

/* Color on checked */
.chirpui-ascii-switch:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-switch__body {
    color: var(--chirpui-accent);
}

/* Active press — brief squish */
.chirpui-ascii-switch:has(.chirpui-ascii-switch__input:active) .chirpui-ascii-switch__body {
    transform: scaleY(0.95);
    transition: transform var(--chirpui-motion-fast);
}

/* Focus ring */
.chirpui-ascii-switch:has(.chirpui-ascii-switch__input:focus-visible) .chirpui-ascii-switch__body {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

.chirpui-ascii-switch__label {
    font-size: var(--chirpui-font-xs, 0.7rem);
    color: var(--chirpui-text-muted);
    text-align: center;
    transition: color var(--chirpui-transition);
}
.chirpui-ascii-switch:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-switch__label {
    color: var(--chirpui-text);
}

/* Disabled */
.chirpui-ascii-switch--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Size variants --- */
.chirpui-ascii-switch--sm .chirpui-ascii-switch__body { font-size: 0.65rem; }
.chirpui-ascii-switch--sm .chirpui-ascii-switch__slot { height: 3.2em; }

.chirpui-ascii-switch--lg .chirpui-ascii-switch__body { font-size: 1.15rem; }
.chirpui-ascii-switch--lg .chirpui-ascii-switch__slot { height: 5.2em; }

/* --- Color variants --- */
.chirpui-ascii-switch--success:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-switch__body {
    color: var(--chirpui-success);
}
.chirpui-ascii-switch--danger:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-switch__body {
    color: var(--chirpui-error);
}
.chirpui-ascii-switch--accent:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-switch__body {
    color: var(--chirpui-accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-switch__lever {
        transition: none;
    }
}
}

/* === partials/145_ascii-breaker-panel.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Breaker Panel — framed set of switches
   ================================================================ */

.chirpui-ascii-breaker-panel {
    display: inline-block;
}

.chirpui-ascii-breaker-panel .chirpui-ascii-border {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chirpui-ascii-breaker-panel__title {
    text-align: center;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.65rem);
    font-weight: var(--chirpui-ui-font-weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
}

.chirpui-ascii-breaker-panel__divider {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    text-align: center;
    color: var(--chirpui-text-muted);
    font-size: 0.75rem;
    line-height: 1;
    overflow: clip;
    white-space: nowrap;
    opacity: 0.5;
}
.chirpui-ascii-breaker-panel__divider::before {
    content: "────────────────────────────────────────";
    display: block;
    overflow: clip;
}

.chirpui-ascii-breaker-panel__master {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
}

.chirpui-ascii-breaker-panel__switches {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.chirpui-ascii-breaker-panel__breaker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.chirpui-ascii-breaker-panel__status {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chirpui-text-muted);
    opacity: 0.45;
}

.chirpui-ascii-breaker-panel__breaker:has(.chirpui-ascii-switch__input:checked) .chirpui-ascii-breaker-panel__status {
    color: var(--chirpui-success);
    opacity: 1;
}

.chirpui-ascii-breaker-panel__breaker:has(.chirpui-ascii-switch__input:not(:checked)) .chirpui-ascii-indicator--blink {
    animation: none;
}

/* Compact size */
.chirpui-ascii-breaker-panel--sm .chirpui-ascii-border {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
}
.chirpui-ascii-breaker-panel--sm .chirpui-ascii-breaker-panel__switches {
    gap: 0.6rem;
}
}

/* === partials/146_ascii-indicator-light.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Indicator Light — blinking mainframe LEDs
   ================================================================ */

@keyframes chirpui-indicator-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes chirpui-indicator-blink-fast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}

.chirpui-ascii-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-ascii-indicator__light {
    font-size: 1rem;
    line-height: 1;
    text-shadow: 0 0 4px currentColor;
}

.chirpui-ascii-indicator__label {
    font-size: var(--chirpui-font-xs, 0.65rem);
    color: var(--chirpui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Color variants */
.chirpui-ascii-indicator--success .chirpui-ascii-indicator__light { color: var(--chirpui-success); }
.chirpui-ascii-indicator--warning .chirpui-ascii-indicator__light { color: var(--chirpui-warning, #e6a700); }
.chirpui-ascii-indicator--error .chirpui-ascii-indicator__light { color: var(--chirpui-error); }
.chirpui-ascii-indicator--muted .chirpui-ascii-indicator__light { color: var(--chirpui-text-muted); text-shadow: none; }
.chirpui-ascii-indicator--accent .chirpui-ascii-indicator__light { color: var(--chirpui-accent); }

/* Blink */
.chirpui-ascii-indicator--blink .chirpui-ascii-indicator__light {
    animation: chirpui-indicator-blink 2s ease-in-out infinite;
}
.chirpui-ascii-indicator--blink-fast .chirpui-ascii-indicator__light {
    animation: chirpui-indicator-blink-fast var(--chirpui-anim-pace) ease-in-out infinite;
}

/* Row layout */
.chirpui-ascii-indicator-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-indicator--blink .chirpui-ascii-indicator__light,
    .chirpui-ascii-indicator--blink-fast .chirpui-ascii-indicator__light {
        animation: none;
    }
}

}

/* === partials/147_ascii-tile-button.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Tile Button — square mainframe pushbuttons
   ================================================================ */

@keyframes chirpui-tile-glow {
    0%, 100% { box-shadow: 0 0 3px currentColor, inset 0 0 3px currentColor; }
    50% { box-shadow: 0 0 8px currentColor, inset 0 0 6px currentColor; }
}

.chirpui-ascii-tile-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    cursor: pointer;
    user-select: none;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

.chirpui-ascii-tile-btn__face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--chirpui-border);
    border-radius: 3px;
    background: var(--chirpui-surface);
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 1rem;
    color: var(--chirpui-text-muted);
    transition: background var(--chirpui-transition),
                border-color var(--chirpui-transition),
                color var(--chirpui-transition),
                box-shadow var(--chirpui-transition),
                transform var(--chirpui-motion-fast);
}

.chirpui-ascii-tile-btn__glyph {
    line-height: 1;
}

.chirpui-ascii-tile-btn__label {
    font-size: var(--chirpui-font-xs, 0.6rem);
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    color: var(--chirpui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Hover */
.chirpui-ascii-tile-btn:hover .chirpui-ascii-tile-btn__face {
    border-color: var(--chirpui-text-muted);
    background: var(--chirpui-bg-subtle);
}

/* Active press — push in */
.chirpui-ascii-tile-btn:active .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn:has(.chirpui-ascii-tile-btn__input:active) .chirpui-ascii-tile-btn__face {
    transform: scale(0.9);
    background: var(--chirpui-accent);
    border-color: var(--chirpui-accent);
    color: var(--chirpui-surface);
}

/* Focus */
.chirpui-ascii-tile-btn:focus-visible .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn:has(.chirpui-ascii-tile-btn__input:focus-visible) .chirpui-ascii-tile-btn__face {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 2px;
}

/* Lit state (checkbox checked OR .chirpui-ascii-tile-btn--lit) */
.chirpui-ascii-tile-btn--lit .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn:has(.chirpui-ascii-tile-btn__input:checked) .chirpui-ascii-tile-btn__face {
    background: var(--chirpui-accent);
    border-color: var(--chirpui-accent);
    color: var(--chirpui-surface);
    box-shadow: 0 0 6px var(--chirpui-accent);
    animation: chirpui-tile-glow var(--chirpui-anim-cycle) ease-in-out infinite;
}

/* Color variants — change the "lit" color */
.chirpui-ascii-tile-btn--success:has(.chirpui-ascii-tile-btn__input:checked) .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn--success.chirpui-ascii-tile-btn--lit .chirpui-ascii-tile-btn__face {
    background: var(--chirpui-success); border-color: var(--chirpui-success);
    box-shadow: 0 0 6px var(--chirpui-success);
}
.chirpui-ascii-tile-btn--warning:has(.chirpui-ascii-tile-btn__input:checked) .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn--warning.chirpui-ascii-tile-btn--lit .chirpui-ascii-tile-btn__face {
    background: var(--chirpui-warning, #e6a700); border-color: var(--chirpui-warning, #e6a700);
    box-shadow: 0 0 6px var(--chirpui-warning, #e6a700);
}
.chirpui-ascii-tile-btn--danger:has(.chirpui-ascii-tile-btn__input:checked) .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn--danger.chirpui-ascii-tile-btn--lit .chirpui-ascii-tile-btn__face {
    background: var(--chirpui-error); border-color: var(--chirpui-error);
    box-shadow: 0 0 6px var(--chirpui-error);
}
.chirpui-ascii-tile-btn--accent:has(.chirpui-ascii-tile-btn__input:checked) .chirpui-ascii-tile-btn__face,
.chirpui-ascii-tile-btn--accent.chirpui-ascii-tile-btn--lit .chirpui-ascii-tile-btn__face {
    background: var(--chirpui-accent); border-color: var(--chirpui-accent);
    box-shadow: 0 0 6px var(--chirpui-accent);
}

/* Disabled */
.chirpui-ascii-tile-btn--disabled,
.chirpui-ascii-tile-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Grid layout */
.chirpui-ascii-tile-grid {
    display: grid;
    grid-template-columns: repeat(var(--_tile-cols, 4), auto);
    gap: 0.5rem;
    justify-content: start;
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-tile-btn--lit .chirpui-ascii-tile-btn__face,
    .chirpui-ascii-tile-btn:has(.chirpui-ascii-tile-btn__input:checked) .chirpui-ascii-tile-btn__face {
        animation: none;
    }
}

}

/* === partials/148_ascii-knob.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Knob — rotary dial selector
   ================================================================ */

.chirpui-ascii-knob {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-ascii-knob__legend {
    font-size: var(--chirpui-font-xs, 0.65rem);
    color: var(--chirpui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--chirpui-spacing-xs);
}

.chirpui-ascii-knob__dial {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    font-size: 0.85rem;
    color: var(--chirpui-text-muted);
    transition: color var(--chirpui-transition);
}

.chirpui-ascii-knob__frame {
    display: block;
    white-space: pre;
}

.chirpui-ascii-knob__positions {
    display: flex;
    gap: 0;
}

.chirpui-ascii-knob__position {
    cursor: pointer;
    user-select: none;
}

.chirpui-ascii-knob__notch {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.35em;
    transition: color var(--chirpui-transition);
    color: var(--chirpui-text-muted);
    pointer-events: none;
}

.chirpui-ascii-knob__tick {
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.5;
}

.chirpui-ascii-knob__value {
    font-size: var(--chirpui-font-xs, 0.65rem);
    white-space: nowrap;
}

/* Selected position */
.chirpui-ascii-knob__position:has(.chirpui-ascii-knob__input:checked) .chirpui-ascii-knob__notch {
    color: var(--chirpui-accent);
}
.chirpui-ascii-knob__position:has(.chirpui-ascii-knob__input:checked) .chirpui-ascii-knob__tick {
    opacity: 1;
    font-weight: var(--chirpui-ui-font-weight-bold);
}

/* Hover */
.chirpui-ascii-knob__position:hover .chirpui-ascii-knob__notch {
    color: var(--chirpui-text);
}

/* Focus */
.chirpui-ascii-knob__position:has(.chirpui-ascii-knob__input:focus-visible) .chirpui-ascii-knob__notch {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 1px;
    border-radius: 2px;
}

/* Accent variant */
.chirpui-ascii-knob--accent .chirpui-ascii-knob__position:has(.chirpui-ascii-knob__input:checked) .chirpui-ascii-knob__notch {
    color: var(--chirpui-accent);
}

/* When any position is checked, light up the dial */
.chirpui-ascii-knob:has(.chirpui-ascii-knob__input:checked) .chirpui-ascii-knob__dial {
    color: var(--chirpui-text);
}
}

/* === partials/149_ascii-fader.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Fader — vertical mixing-board slider
   ================================================================ */

.chirpui-ascii-fader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-ascii-fader__track {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    font-size: 0.85rem;
    color: var(--chirpui-text-muted);
}

.chirpui-ascii-fader__cap {
    display: block;
    white-space: pre;
}

.chirpui-ascii-fader__segment {
    display: block;
    white-space: pre;
    transition: color var(--chirpui-transition);
}

.chirpui-ascii-fader__segment--filled {
    color: var(--chirpui-accent);
    text-shadow: 0 0 4px currentColor;
}

.chirpui-ascii-fader__label {
    font-size: var(--chirpui-font-xs, 0.6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
}

.chirpui-ascii-fader__value {
    font-size: var(--chirpui-font-xs, 0.6rem);
    color: var(--chirpui-text-muted);
    min-width: 2em;
    text-align: center;
}

/* Range input (keyboard-accessible) — visually hidden but focusable */
.chirpui-ascii-fader__input {}

.chirpui-ascii-fader:has(.chirpui-ascii-fader__input:focus-visible) .chirpui-ascii-fader__track {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Color variants */
.chirpui-ascii-fader--success .chirpui-ascii-fader__segment--filled { color: var(--chirpui-success); }
.chirpui-ascii-fader--warning .chirpui-ascii-fader__segment--filled { color: var(--chirpui-warning, #e6a700); }
.chirpui-ascii-fader--danger .chirpui-ascii-fader__segment--filled { color: var(--chirpui-error); }
.chirpui-ascii-fader--accent .chirpui-ascii-fader__segment--filled { color: var(--chirpui-accent); }

/* Fader bank */
.chirpui-ascii-fader-bank {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.chirpui-ascii-fader-bank__title {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
}
.chirpui-ascii-fader-bank__faders {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}
}

/* === partials/150_ascii-vu-meter.css === */
@layer chirpui.component {
/* ================================================================
   ASCII VU Meter — horizontal bouncing level bars
   ================================================================ */

@keyframes chirpui-vu-bounce {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.85; }
    60% { opacity: 1; }
    80% { opacity: 0.9; }
}

.chirpui-ascii-vu {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
    line-height: 1;
}

.chirpui-ascii-vu__label {
    font-size: var(--chirpui-font-xs, 0.6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
    min-width: 2.5em;
    text-align: right;
}

.chirpui-ascii-vu__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.chirpui-ascii-vu__bracket {
    color: var(--chirpui-text-muted);
    opacity: 0.5;
}

.chirpui-ascii-vu__cell {
    color: var(--chirpui-text-muted);
    opacity: 0.3;
    transition: color var(--chirpui-transition), opacity var(--chirpui-transition);
}

.chirpui-ascii-vu__cell--filled {
    color: var(--chirpui-success);
    opacity: 1;
    text-shadow: 0 0 2px currentColor;
}

.chirpui-ascii-vu__cell--hot {
    color: var(--chirpui-error);
    text-shadow: 0 0 4px currentColor;
}

.chirpui-ascii-vu__cell--peak {
    color: var(--chirpui-error);
    text-shadow: 0 0 6px currentColor;
    font-weight: var(--chirpui-ui-font-weight-bold);
}

.chirpui-ascii-vu__readout {
    font-size: var(--chirpui-font-xs, 0.6rem);
    color: var(--chirpui-text-muted);
    min-width: 3em;
}

/* Animate variant */
.chirpui-ascii-vu--animate .chirpui-ascii-vu__cell--filled {
    animation: chirpui-vu-bounce var(--chirpui-anim-pulse) ease-in-out infinite;
}
.chirpui-ascii-vu--animate .chirpui-ascii-vu__cell--filled:nth-child(odd) {
    animation-delay: 0.1s;
}

/* Color variants */
.chirpui-ascii-vu--accent .chirpui-ascii-vu__cell--filled { color: var(--chirpui-accent); }
.chirpui-ascii-vu--accent .chirpui-ascii-vu__cell--hot { color: var(--chirpui-accent); }
.chirpui-ascii-vu--success .chirpui-ascii-vu__cell--filled { color: var(--chirpui-success); }
.chirpui-ascii-vu--warning .chirpui-ascii-vu__cell--filled { color: var(--chirpui-warning, #e6a700); }
.chirpui-ascii-vu--warning .chirpui-ascii-vu__cell--hot { color: var(--chirpui-error); }

/* Stack layout */
.chirpui-ascii-vu-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}
.chirpui-ascii-vu-stack__title {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-vu--animate .chirpui-ascii-vu__cell--filled {
        animation: none;
    }
}

}

/* === partials/151_ascii-7-segment-display.css === */
@layer chirpui.component {
/* ================================================================
   ASCII 7-Segment Display — retro LCD readout
   ================================================================ */

.chirpui-ascii-7seg {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-ascii-7seg__label {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.6rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
}

.chirpui-ascii-7seg__display {
    display: inline-flex;
    align-items: center;
    background: var(--chirpui-bg-subtle);
    border: 1px solid var(--chirpui-border);
    border-radius: 3px;
    padding: 0.3em 0.15em;
    gap: 0;
}

.chirpui-ascii-7seg__frame {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 0.6em;
    color: var(--chirpui-text-muted);
    opacity: 0.3;
    padding: 0 0.1em;
}

.chirpui-ascii-7seg__digit {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 1.6rem;
    font-weight: var(--chirpui-ui-font-weight-bold);
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 0 0.06em;
    color: var(--chirpui-text);
    text-shadow: 0 0 6px currentColor;
}

/* Colon and period are narrower */
.chirpui-ascii-7seg__digit[data-char=":"],
.chirpui-ascii-7seg__digit[data-char="."] {
    letter-spacing: 0;
    padding: 0;
    font-size: 1.4rem;
}

/* Dash is muted */
.chirpui-ascii-7seg__digit[data-char="-"] {
    opacity: 0.5;
}

/* Color variants */
.chirpui-ascii-7seg--accent .chirpui-ascii-7seg__digit { color: var(--chirpui-accent); }
.chirpui-ascii-7seg--success .chirpui-ascii-7seg__digit { color: var(--chirpui-success); }
.chirpui-ascii-7seg--warning .chirpui-ascii-7seg__digit { color: var(--chirpui-warning, #e6a700); }
.chirpui-ascii-7seg--error .chirpui-ascii-7seg__digit { color: var(--chirpui-error); }

}

/* === partials/152_ascii-checkbox.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Checkbox — ☐/☑ ballot-style checkboxes
   ================================================================ */

.chirpui-ascii-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    user-select: none;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-ascii-checkbox__box {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    transition: color var(--chirpui-transition);
    pointer-events: none;
}
.chirpui-ascii-checkbox__box::before {
    content: "☐";
}

.chirpui-ascii-checkbox:has(.chirpui-ascii-checkbox__input:checked) .chirpui-ascii-checkbox__box {
    color: var(--chirpui-accent);
}
.chirpui-ascii-checkbox:has(.chirpui-ascii-checkbox__input:checked) .chirpui-ascii-checkbox__box::before {
    content: "☑";
}

/* Active press */
.chirpui-ascii-checkbox:has(.chirpui-ascii-checkbox__input:active) .chirpui-ascii-checkbox__box::before {
    content: "☒";
}

.chirpui-ascii-checkbox__label {
    font-size: var(--chirpui-font-sm);
    color: var(--chirpui-text);
}

/* Focus */
.chirpui-ascii-checkbox:has(.chirpui-ascii-checkbox__input:focus-visible) .chirpui-ascii-checkbox__box {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Disabled */
.chirpui-ascii-checkbox--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variants */
.chirpui-ascii-checkbox--accent:has(.chirpui-ascii-checkbox__input:checked) .chirpui-ascii-checkbox__box { color: var(--chirpui-accent); }
.chirpui-ascii-checkbox--success:has(.chirpui-ascii-checkbox__input:checked) .chirpui-ascii-checkbox__box { color: var(--chirpui-success); }
.chirpui-ascii-checkbox--danger:has(.chirpui-ascii-checkbox__input:checked) .chirpui-ascii-checkbox__box { color: var(--chirpui-error); }

/* Group */
.chirpui-ascii-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    border: none;
    padding: 0;
    margin: 0;
}
.chirpui-ascii-checkbox-group__legend {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.65rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
    margin-bottom: 0.35em;
}
}

/* === partials/153_ascii-radio.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Radio — (○)/(●) dial-style selectors
   ================================================================ */

.chirpui-ascii-radio {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    user-select: none;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-ascii-radio__dot {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    transition: color var(--chirpui-transition);
    pointer-events: none;
}
.chirpui-ascii-radio__dot::before {
    content: "○";
}

.chirpui-ascii-radio:has(.chirpui-ascii-radio__input:checked) .chirpui-ascii-radio__dot {
    color: var(--chirpui-accent);
}
.chirpui-ascii-radio:has(.chirpui-ascii-radio__input:checked) .chirpui-ascii-radio__dot::before {
    content: "●";
}

/* Active */
.chirpui-ascii-radio:has(.chirpui-ascii-radio__input:active) .chirpui-ascii-radio__dot::before {
    content: "◉";
}

.chirpui-ascii-radio__label {
    font-size: var(--chirpui-font-sm);
    color: var(--chirpui-text);
}

/* Focus */
.chirpui-ascii-radio:has(.chirpui-ascii-radio__input:focus-visible) .chirpui-ascii-radio__dot {
    outline: 2px solid var(--chirpui-focus-ring);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Disabled */
.chirpui-ascii-radio--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Group */
.chirpui-ascii-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    border: none;
    padding: 0;
    margin: 0;
}
.chirpui-ascii-radio-group--horizontal {
    flex-direction: row;
    gap: 1.25em;
}
.chirpui-ascii-radio-group__legend {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.65rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
    margin-bottom: 0.35em;
}

/* Accent variant */
.chirpui-ascii-radio-group--accent .chirpui-ascii-radio:has(.chirpui-ascii-radio__input:checked) .chirpui-ascii-radio__dot {
    color: var(--chirpui-accent);
}
}

/* === partials/154_ascii-stepper.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Stepper — pipeline/wizard progress
   [✓]───[✓]───[●]───[○]───[○]
   ================================================================ */

.chirpui-ascii-stepper {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-ascii-stepper__track {
    display: flex;
    align-items: flex-start;
}

.chirpui-ascii-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
}

.chirpui-ascii-stepper__node {
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--chirpui-text-muted);
    transition: color var(--chirpui-transition);
}

.chirpui-ascii-stepper__label {
    font-size: var(--chirpui-font-xs, 0.6rem);
    color: var(--chirpui-text-muted);
    white-space: nowrap;
    transition: color var(--chirpui-transition);
}

.chirpui-ascii-stepper__connector {
    font-size: 0.85rem;
    line-height: 1;
    color: var(--chirpui-text-muted);
    opacity: 0.4;
    padding-top: 0;
    align-self: center;
    margin-top: -0.25em;
}

/* Complete step */
.chirpui-ascii-stepper__step--complete .chirpui-ascii-stepper__node {
    color: var(--chirpui-success);
}
.chirpui-ascii-stepper__step--complete .chirpui-ascii-stepper__label {
    color: var(--chirpui-text);
}
.chirpui-ascii-stepper__connector--complete {
    color: var(--chirpui-success);
    opacity: 0.8;
}

/* Active step */
.chirpui-ascii-stepper__step--active .chirpui-ascii-stepper__node {
    color: var(--chirpui-accent);
    text-shadow: 0 0 4px currentColor;
}
.chirpui-ascii-stepper__step--active .chirpui-ascii-stepper__label {
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

/* Pending step — stays muted (default) */

/* Variants */
.chirpui-ascii-stepper--accent .chirpui-ascii-stepper__step--complete .chirpui-ascii-stepper__node { color: var(--chirpui-accent); }
.chirpui-ascii-stepper--accent .chirpui-ascii-stepper__connector--complete { color: var(--chirpui-accent); }
.chirpui-ascii-stepper--success .chirpui-ascii-stepper__step--active .chirpui-ascii-stepper__node { color: var(--chirpui-success); }

}

/* === partials/155_ascii-split-flap-display.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Split-Flap Display — Solari board / departure board
   ================================================================ */

@keyframes chirpui-split-flap-flip {
    0% {
        transform: scaleY(0.1) translateY(-40%);
        opacity: 0;
    }
    30% {
        transform: scaleY(1.05);
        opacity: 1;
    }
    50% {
        transform: scaleY(0.97);
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.chirpui-split-flap {
    display: inline-flex;
    gap: 2px;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-split-flap__char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1em;
    height: 1.6em;
    background: var(--chirpui-bg-subtle);
    border: 1px solid var(--chirpui-border);
    border-radius: 2px;
    font-size: 0.95rem;
    font-weight: var(--chirpui-ui-font-weight-bold);
    letter-spacing: 0;
    color: var(--chirpui-text);
    position: relative;
    overflow: clip;
}

/* Center split line — the mechanical gap */
.chirpui-split-flap__char::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--chirpui-border);
    opacity: 0.6;
    pointer-events: none;
}

/* Flip animation */
.chirpui-split-flap--animate .chirpui-split-flap__char {
    animation: chirpui-split-flap-flip var(--chirpui-anim-quick) ease-out both;
}

/* Amber variant — classic departure board */
.chirpui-split-flap--amber .chirpui-split-flap__char {
    background: #1a1400;
    border-color: #3a3000;
    color: #ffb300;
    text-shadow: 0 0 4px #ffb30066;
}
.chirpui-split-flap--amber .chirpui-split-flap__char::after {
    background: #3a3000;
}

/* Green variant — retro terminal */
.chirpui-split-flap--green .chirpui-split-flap__char {
    background: #001a00;
    border-color: #003a00;
    color: #33ff33;
    text-shadow: 0 0 4px #33ff3366;
}
.chirpui-split-flap--green .chirpui-split-flap__char::after {
    background: #003a00;
}

/* Row in a board */
.chirpui-split-flap-row {
    display: flex;
    gap: 1.5rem;
    padding: 0.35rem 0;
}

/* Board container */
.chirpui-split-flap-board {
    display: inline-flex;
    flex-direction: column;
    background: var(--chirpui-bg-subtle);
    border: 2px solid var(--chirpui-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    gap: 0;
}

.chirpui-split-flap-board__title {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs, 0.6rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--chirpui-text-muted);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--chirpui-border);
    margin-bottom: 0.25rem;
}

.chirpui-split-flap-board__body {
    display: flex;
    flex-direction: column;
}

/* Board color variants */
.chirpui-split-flap-board--amber {
    background: #0d0a00;
    border-color: #3a3000;
}
.chirpui-split-flap-board--amber .chirpui-split-flap-board__title {
    color: #ffb30088;
    border-color: #3a3000;
}
.chirpui-split-flap-board--amber .chirpui-split-flap__char {
    background: #1a1400;
    border-color: #3a3000;
    color: #ffb300;
    text-shadow: 0 0 4px #ffb30066;
}
.chirpui-split-flap-board--amber .chirpui-split-flap__char::after {
    background: #3a3000;
}

.chirpui-split-flap-board--green {
    background: #000d00;
    border-color: #003a00;
}
.chirpui-split-flap-board--green .chirpui-split-flap-board__title {
    color: #33ff3388;
    border-color: #003a00;
}
.chirpui-split-flap-board--green .chirpui-split-flap__char {
    background: #001a00;
    border-color: #003a00;
    color: #33ff33;
    text-shadow: 0 0 4px #33ff3366;
}
.chirpui-split-flap-board--green .chirpui-split-flap__char::after {
    background: #003a00;
}

/* Divider between rows */
.chirpui-split-flap-row + .chirpui-split-flap-row {
    border-top: 1px solid var(--chirpui-border);
}
.chirpui-split-flap-board--amber .chirpui-split-flap-row + .chirpui-split-flap-row {
    border-color: #3a3000;
}
.chirpui-split-flap-board--green .chirpui-split-flap-row + .chirpui-split-flap-row {
    border-color: #003a00;
}

@media (prefers-reduced-motion: reduce) {
    .chirpui-split-flap--animate .chirpui-split-flap__char {
        animation: none;
    }
}

}

/* === partials/156_ascii-ticker.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Ticker — scrolling text banner
   ================================================================ */

@keyframes chirpui-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.chirpui-ascii-ticker {
    display: flex;
    align-items: center;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
    overflow: clip;
    max-width: 100%;
}

.chirpui-ascii-ticker__bracket {
    color: var(--chirpui-text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

.chirpui-ascii-ticker__track {
    overflow: clip;
    flex: 1;
    min-width: 0;
}

.chirpui-ascii-ticker__text {
    display: inline-block;
    white-space: nowrap;
    animation: chirpui-ticker-scroll var(--chirpui-anim-ambient) linear infinite;
    color: var(--chirpui-text);
}

/* Speeds */
.chirpui-ascii-ticker--slow .chirpui-ascii-ticker__text { animation-duration: 35s; }
.chirpui-ascii-ticker--fast .chirpui-ascii-ticker__text { animation-duration: 10s; }

/* Variants */
.chirpui-ascii-ticker--accent .chirpui-ascii-ticker__text { color: var(--chirpui-accent); }
.chirpui-ascii-ticker--success .chirpui-ascii-ticker__text { color: var(--chirpui-success); }
.chirpui-ascii-ticker--warning .chirpui-ascii-ticker__text { color: var(--chirpui-warning, #e6a700); }
.chirpui-ascii-ticker--error .chirpui-ascii-ticker__text { color: var(--chirpui-error); }

@media (prefers-reduced-motion: reduce) {
    .chirpui-ascii-ticker__text {
        animation: none;
    }
}

}

/* === partials/157_ascii-table.css === */
@layer chirpui.component {
/* ================================================================
   ASCII Table — box-drawing character borders
   ================================================================ */

/* Character maps per variant (via CSS custom properties) */
.chirpui-ascii-table--single {
    --_at-tl: "┌"; --_at-tr: "┐"; --_at-bl: "└"; --_at-br: "┘";
    --_at-h: "─"; --_at-v: "│";
    --_at-mt: "┬"; --_at-mb: "┴"; --_at-ml: "├"; --_at-mr: "┤"; --_at-x: "┼";
    --_at-mh: "─";
}
.chirpui-ascii-table--double {
    --_at-tl: "╔"; --_at-tr: "╗"; --_at-bl: "╚"; --_at-br: "╝";
    --_at-h: "═"; --_at-v: "║";
    --_at-mt: "╦"; --_at-mb: "╩"; --_at-ml: "╠"; --_at-mr: "╣"; --_at-x: "╬";
    --_at-mh: "═";
}
.chirpui-ascii-table--heavy {
    --_at-tl: "┏"; --_at-tr: "┓"; --_at-bl: "┗"; --_at-br: "┛";
    --_at-h: "━"; --_at-v: "┃";
    --_at-mt: "┳"; --_at-mb: "┻"; --_at-ml: "┣"; --_at-mr: "┫"; --_at-x: "╋";
    --_at-mh: "━";
}
.chirpui-ascii-table--rounded {
    --_at-tl: "╭"; --_at-tr: "╮"; --_at-bl: "╰"; --_at-br: "╯";
    --_at-h: "─"; --_at-v: "│";
    --_at-mt: "┬"; --_at-mb: "┴"; --_at-ml: "├"; --_at-mr: "┤"; --_at-x: "┼";
    --_at-mh: "─";
}

.chirpui-ascii-table {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-sm);
    line-height: 1.5;
    color: var(--chirpui-text);
    display: inline-block;
    max-width: 100%;
}

/* Border lines — built from repeating characters */
.chirpui-ascii-table__border {
    white-space: nowrap;
    overflow: clip;
    color: var(--chirpui-text-muted);
    user-select: none;
}
.chirpui-ascii-table__border--top::before,
.chirpui-ascii-table__border--mid::before,
.chirpui-ascii-table__border--bottom::before {
    display: block;
    overflow: clip;
}
.chirpui-ascii-table__border--top::before {
    content: "┌────────────────────────────────────────────────────────────────────────────────────────────────────┐";
}
.chirpui-ascii-table__border--mid::before {
    content: "├────────────────────────────────────────────────────────────────────────────────────────────────────┤";
}
.chirpui-ascii-table__border--bottom::before {
    content: "└────────────────────────────────────────────────────────────────────────────────────────────────────┘";
}

/* Double variant overrides */
.chirpui-ascii-table--double .chirpui-ascii-table__border--top::before {
    content: "╔════════════════════════════════════════════════════════════════════════════════════════════════════╗";
}
.chirpui-ascii-table--double .chirpui-ascii-table__border--mid::before {
    content: "╠════════════════════════════════════════════════════════════════════════════════════════════════════╣";
}
.chirpui-ascii-table--double .chirpui-ascii-table__border--bottom::before {
    content: "╚════════════════════════════════════════════════════════════════════════════════════════════════════╝";
}

/* Heavy variant overrides */
.chirpui-ascii-table--heavy .chirpui-ascii-table__border--top::before {
    content: "┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓";
}
.chirpui-ascii-table--heavy .chirpui-ascii-table__border--mid::before {
    content: "┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫";
}
.chirpui-ascii-table--heavy .chirpui-ascii-table__border--bottom::before {
    content: "┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛";
}

/* Rounded variant overrides */
.chirpui-ascii-table--rounded .chirpui-ascii-table__border--top::before {
    content: "╭────────────────────────────────────────────────────────────────────────────────────────────────────╮";
}
.chirpui-ascii-table--rounded .chirpui-ascii-table__border--bottom::before {
    content: "╰────────────────────────────────────────────────────────────────────────────────────────────────────╯";
}

/* Rows */
.chirpui-ascii-table__row {
    display: flex;
    gap: 0;
    transition: background var(--chirpui-transition);
}
.chirpui-ascii-table__row::before,
.chirpui-ascii-table__row::after {
    content: "│";
    color: var(--chirpui-text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.chirpui-ascii-table--double .chirpui-ascii-table__row::before,
.chirpui-ascii-table--double .chirpui-ascii-table__row::after {
    content: "║";
}
.chirpui-ascii-table--heavy .chirpui-ascii-table__row::before,
.chirpui-ascii-table--heavy .chirpui-ascii-table__row::after {
    content: "┃";
}

/* Cells */
.chirpui-ascii-table__th,
.chirpui-ascii-table__td {
    flex: 1;
    padding: 0.15em 1em;
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chirpui-ascii-table__th {
    font-weight: var(--chirpui-ui-font-weight-semibold);
    color: var(--chirpui-text);
}

.chirpui-ascii-table__td {
    color: var(--chirpui-text);
}

/* Cell alignment */
.chirpui-ascii-table__cell--left { text-align: left; }
.chirpui-ascii-table__cell--center { text-align: center; }
.chirpui-ascii-table__cell--right { text-align: right; }

/* Row hover */
.chirpui-ascii-table__body .chirpui-ascii-table__row:hover {
    background: var(--chirpui-bg-subtle);
}

/* Striped rows */
.chirpui-ascii-table--striped .chirpui-ascii-table__body .chirpui-ascii-table__row:nth-child(even) {
    background: var(--chirpui-bg-subtle);
}

/* Compact */
.chirpui-ascii-table--compact .chirpui-ascii-table__th,
.chirpui-ascii-table--compact .chirpui-ascii-table__td {
    padding: 0 0.75em;
}

/* Sticky header */
.chirpui-ascii-table--sticky .chirpui-ascii-table__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--chirpui-surface);
}

}

/* === partials/158_row-component-enhancements.css === */
@layer chirpui.component {
/* ================================================================
   Row component enhancements
   ================================================================ */

/* --- Table: row hover --- */
.chirpui-table__row {
    transition: background var(--chirpui-transition);
}
.chirpui-table__row:hover {
    background: var(--chirpui-bg-subtle);
}

/* --- Table: cell truncation utility --- */
.chirpui-table__td--truncate {
    max-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Table: monospace cells (for IDs, hashes, paths) --- */
.chirpui-table__td--mono {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    font-size: var(--chirpui-font-sm);
}

/* --- Table: empty state --- */
.chirpui-table__empty {
    text-align: center;
    padding: var(--chirpui-spacing-lg) var(--chirpui-spacing);
    color: var(--chirpui-text-muted);
    font-style: italic;
}

/* --- Description list: row hover + dividers --- */
.chirpui-dl--hoverable .chirpui-dl__row {
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius-sm);
    transition: background var(--chirpui-transition);
}
.chirpui-dl--hoverable .chirpui-dl__row:hover {
    background: var(--chirpui-bg-subtle);
}

.chirpui-dl--divided .chirpui-dl__row {
    padding-bottom: var(--chirpui-spacing-sm);
    border-bottom: 1px solid var(--chirpui-border);
}
.chirpui-dl--divided .chirpui-dl__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- Description list: icon slot --- */
.chirpui-dl__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    flex-shrink: 0;
    color: var(--chirpui-text-muted);
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
}

.chirpui-dl__term-group {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

/* --- Config row: hover + dividers --- */
.chirpui-config-row-list--hoverable .chirpui-config-row:hover > * {
    background: var(--chirpui-bg-subtle);
}
.chirpui-config-row-list--hoverable .chirpui-config-row > * {
    transition: background var(--chirpui-transition);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
}

.chirpui-config-row-list--divided {
    row-gap: 0;
}
.chirpui-config-row-list--divided .chirpui-config-row > *:first-child {
    border-bottom: 1px solid var(--chirpui-border);
    padding-bottom: var(--chirpui-spacing-sm);
}
.chirpui-config-row-list--divided .chirpui-config-row > *:last-child {
    border-bottom: 1px solid var(--chirpui-border);
    padding-bottom: var(--chirpui-spacing-sm);
}
.chirpui-config-row-list--divided .chirpui-config-row:last-child > * {
    border-bottom: none;
}

/* --- Settings row: hover + dividers --- */
.chirpui-settings-row-list--hoverable .chirpui-settings-row:hover > * {
    background: var(--chirpui-bg-subtle);
}
.chirpui-settings-row-list--hoverable .chirpui-settings-row > * {
    transition: background var(--chirpui-transition);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
}

.chirpui-settings-row-list--divided {
    row-gap: 0;
}
.chirpui-settings-row-list--divided .chirpui-settings-row > *:first-child {
    border-bottom: 1px solid var(--chirpui-border);
    padding-bottom: var(--chirpui-spacing-sm);
}
.chirpui-settings-row-list--divided .chirpui-settings-row > *:nth-child(2) {
    border-bottom: 1px solid var(--chirpui-border);
    padding-bottom: var(--chirpui-spacing-sm);
}
.chirpui-settings-row-list--divided .chirpui-settings-row > *:last-child {
    border-bottom: 1px solid var(--chirpui-border);
    padding-bottom: var(--chirpui-spacing-sm);
}
.chirpui-settings-row-list--divided .chirpui-settings-row:last-child > * {
    border-bottom: none;
}

/* --- Shared: relaxed density --- */
.chirpui-dl--relaxed .chirpui-dl__row {
    margin-bottom: var(--chirpui-spacing);
}
.chirpui-config-row-list--relaxed {
    row-gap: var(--chirpui-spacing);
}
.chirpui-settings-row-list--relaxed {
    row-gap: var(--chirpui-spacing);
}

/* Settings row: surface/card-aware — adapt hover bg on non-default contexts */
.chirpui-settings-row-list--on-muted.chirpui-settings-row-list--hoverable .chirpui-settings-row:hover > * {
    background: var(--chirpui-surface);
}
.chirpui-settings-row-list--on-accent.chirpui-settings-row-list--hoverable .chirpui-settings-row:hover > * {
    background: color-mix(in srgb, var(--chirpui-surface) 80%, transparent);
}

/* ===== ascii_card ===== */
.chirpui-ascii-card {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    color: var(--chirpui-text);
}
.chirpui-ascii-card--single {}
.chirpui-ascii-card--double {}
.chirpui-ascii-card--rounded {}
.chirpui-ascii-card--heavy {}
.chirpui-ascii-card__top,
.chirpui-ascii-card__bottom,
.chirpui-ascii-card__divider {
    display: flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    overflow: clip;
}
.chirpui-ascii-card__corner {
    flex-shrink: 0;
}
.chirpui-ascii-card__line {
    flex: 1 1 auto;
    overflow: clip;
}
.chirpui-ascii-card__body {
    display: flex;
}
.chirpui-ascii-card__side {
    flex-shrink: 0;
    line-height: 1;
}
.chirpui-ascii-card__content {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--chirpui-spacing-xs, 0.25rem) var(--chirpui-spacing-sm, 0.5rem);
}

/* ===== ascii_tabs ===== */
.chirpui-ascii-tabs {
    display: flex;
    gap: 0;
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    border-bottom: 1px solid var(--chirpui-border, currentColor);
}
.chirpui-ascii-tabs--accent {}
.chirpui-ascii-tab {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: var(--chirpui-spacing-xs, 0.25rem) var(--chirpui-spacing-sm, 0.5rem);
    text-decoration: none;
    color: var(--chirpui-text-muted);
    cursor: pointer;
}
.chirpui-ascii-tab--active {
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    border-bottom: 2px solid currentColor;
}
.chirpui-ascii-tab__bracket {
    opacity: 0.5;
}
.chirpui-ascii-tab__label {}

/* ===== ascii_modal ===== */
.chirpui-ascii-modal {
    font-family: var(--chirpui-font-mono, ui-monospace, monospace);
    border: none;
    padding: 0;
    color: var(--chirpui-text);
    background: var(--chirpui-surface, Canvas);
    max-width: min(90vw, 40rem);
}
.chirpui-ascii-modal--single {}
.chirpui-ascii-modal--double {}
.chirpui-ascii-modal--heavy {}
.chirpui-ascii-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.chirpui-ascii-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--chirpui-spacing-xs, 0.25rem) var(--chirpui-spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--chirpui-border, currentColor);
}
.chirpui-ascii-modal__title {
    font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-ascii-modal__close {
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0 0.25rem;
}
.chirpui-ascii-modal__body {
    padding: var(--chirpui-spacing-sm, 0.5rem);
}
.chirpui-ascii-modal-trigger {
    cursor: pointer;
}

/* ===== site_shell ===== */
.chirpui-site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    isolation: isolate;
    overflow-x: clip;
    background: var(--chirpui-site-shell-bg, var(--chirpui-bg));
}
.chirpui-site-shell__main {
    flex: 1;
    min-width: 0;
    isolation: isolate;
}

/* ===== site_header ===== */
.chirpui-site-header {
    border-bottom: 1px solid var(--chirpui-site-header-border, var(--chirpui-border));
    background: var(--chirpui-site-header-bg, var(--chirpui-surface));
}
.chirpui-site-header--sticky {
    position: sticky;
    top: 0;
    z-index: var(--chirpui-z-sticky);
}
.chirpui-site-header--sticky ~ * :where([id]) {
    scroll-margin-top: calc(var(--chirpui-site-header-height, 3.5rem) + var(--chirpui-spacing-sm));
}
.chirpui-site-header--glass {
    background: var(--chirpui-site-header-bg, var(--chirpui-surface));
}
@supports (background: color-mix(in oklab, red 50%, transparent)) {
    .chirpui-site-header--glass {
        background: color-mix(in oklab, var(--chirpui-site-header-bg, var(--chirpui-surface)) 78%, transparent);
        backdrop-filter: blur(var(--chirpui-site-header-blur, 20px)) saturate(1.35);
        -webkit-backdrop-filter: blur(var(--chirpui-site-header-blur, 20px)) saturate(1.35);
    }
}
.chirpui-site-header--solid {
    background: var(--chirpui-site-header-bg, var(--chirpui-surface));
}
.chirpui-site-header--transparent {
    background: transparent;
    border-bottom-color: transparent;
}
.chirpui-site-header__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--chirpui-site-header-max-width, none);
    margin: 0 auto;
    padding: var(--chirpui-spacing-sm) var(--chirpui-site-header-padding-inline, var(--chirpui-spacing));
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing);
    min-height: var(--chirpui-site-header-height, auto);
}
.chirpui-site-header__inner--center-brand {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--chirpui-spacing);
}
.chirpui-site-header__inner--center-brand .chirpui-site-header__brand {
    grid-column: 2;
    justify-self: center;
}
.chirpui-site-header__inner--center-brand .chirpui-site-header__nav {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
}
.chirpui-site-header__inner--center-brand .chirpui-site-header__nav-end {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
}
.chirpui-site-header__inner--center-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--chirpui-spacing);
}
.chirpui-site-header__inner--center-nav .chirpui-site-header__nav {
    justify-self: center;
}
.chirpui-site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    text-decoration: none;
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-size: var(--chirpui-font-lg);
    flex-shrink: 0;
}
.chirpui-site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    flex-wrap: wrap;
}
.chirpui-site-header__nav-end {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}
.chirpui-site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    margin-left: auto;
    flex-shrink: 0;
}
.chirpui-site-header__inner--center-brand .chirpui-site-header__tools,
.chirpui-site-header__inner--center-nav .chirpui-site-header__tools {
    margin-left: 0;
}

.chirpui-site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius);
    text-decoration: none;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
    white-space: nowrap;
    transition: color var(--chirpui-motion-fast), background var(--chirpui-motion-fast);
}
.chirpui-site-nav__link:hover {
    color: var(--chirpui-text);
    background: color-mix(in srgb, var(--chirpui-text) 6%, transparent);
}
.chirpui-site-nav__link--active {
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}
.chirpui-site-nav__link--external::after {
    content: "↗";
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    opacity: 0.5;
    margin-left: 0.15em;
}
.chirpui-site-nav__glyph {
    font-family: var(--chirpui-mono-font-family, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    opacity: 0.45;
}

@media (max-width: 48rem) {
    .chirpui-site-header__inner,
    .chirpui-site-header__inner--center-brand,
    .chirpui-site-header__inner--center-nav {
        display: flex;
        flex-wrap: wrap;
        row-gap: var(--chirpui-spacing-xs);
    }
    .chirpui-site-header__nav {
        order: 10;
        width: 100%;
    }
}

/* ===== site_footer ===== */
.chirpui-site-footer {
    position: relative;
    margin-top: auto;
    border-top: 1px solid var(--chirpui-site-footer-border, var(--chirpui-border));
    background: var(--chirpui-site-footer-bg, var(--chirpui-bg-subtle));
}

.chirpui-site-footer__grid {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--chirpui-site-footer-max-width, none);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 2.75rem) var(--chirpui-site-footer-padding-inline, var(--chirpui-spacing)) 1.25rem;
    display: grid;
    grid-template-columns: minmax(14rem, 1.5fr) repeat(var(--chirpui-site-footer-columns, 3), minmax(9rem, 1fr));
    gap: 2rem 2.25rem;
    align-items: start;
}
.chirpui-site-footer--centered .chirpui-site-footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--chirpui-spacing-lg);
}
.chirpui-site-footer--simple .chirpui-site-footer__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chirpui-spacing);
    padding-block: var(--chirpui-spacing);
}

@media (max-width: 56rem) {
    .chirpui-site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 36rem) {
    .chirpui-site-footer__grid {
        grid-template-columns: 1fr;
    }
}

.chirpui-site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-sm);
}
.chirpui-site-footer__column {}
.chirpui-site-footer__column-title {
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chirpui-text);
    margin-bottom: var(--chirpui-spacing-sm);
}
.chirpui-site-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-xs);
}
.chirpui-site-footer--centered .chirpui-site-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--chirpui-spacing-sm);
}
.chirpui-site-footer__link {
    text-decoration: none;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    transition: color var(--chirpui-motion-fast);
}
.chirpui-site-footer__link:hover {
    color: var(--chirpui-text);
}
.chirpui-site-footer__link-glyph {
    font-family: var(--chirpui-mono-font-family, ui-monospace, monospace);
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    opacity: 0.45;
    margin-right: 0.25em;
}
.chirpui-site-footer__link--external::after {
    content: "↗";
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    opacity: 0.5;
    margin-left: 0.25em;
}
.chirpui-site-footer__rule {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing);
    padding-inline: var(--chirpui-site-footer-padding-inline, var(--chirpui-spacing));
    max-width: var(--chirpui-site-footer-max-width, none);
    margin: 0 auto;
    color: var(--chirpui-text-muted);
    opacity: 0.4;
}
.chirpui-site-footer__rule-line {
    flex: 1;
    height: 1px;
    background: var(--chirpui-border);
}
.chirpui-site-footer__colophon {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--chirpui-site-footer-max-width, none);
    margin: 0 auto;
    padding: var(--chirpui-spacing-sm) var(--chirpui-site-footer-padding-inline, var(--chirpui-spacing));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-sm);
    font-size: var(--chirpui-font-xs);
    color: var(--chirpui-text-muted);
}
.chirpui-site-footer--centered .chirpui-site-footer__colophon {
    justify-content: center;
    text-align: center;
}

/* ===== band ===== */
.chirpui-band--inset {
    margin-inline: var(--chirpui-band-breakout, calc(-1 * var(--chirpui-spacing)));
    padding: var(--chirpui-band-padding, var(--chirpui-spacing-lg));
    border-radius: var(--chirpui-band-radius, var(--chirpui-radius-lg));
    border: 1px solid var(--chirpui-band-border, var(--chirpui-border));
    background: var(--chirpui-band-bg, var(--chirpui-bg-subtle));
}
.chirpui-band--bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: var(--chirpui-band-padding, var(--chirpui-spacing-lg)) var(--chirpui-spacing);
    background: var(--chirpui-band-bg, var(--chirpui-bg-subtle));
}
@supports (width: 100dvw) {
    .chirpui-band--bleed {
        width: 100dvw;
        margin-left: -50dvw;
        margin-right: -50dvw;
    }
}
.chirpui-band--contained {
    padding: var(--chirpui-band-padding, var(--chirpui-spacing-lg));
    background: var(--chirpui-band-bg, var(--chirpui-bg-subtle));
    border-radius: var(--chirpui-band-radius, var(--chirpui-radius-lg));
}
.chirpui-band--elevated {
    box-shadow: var(--chirpui-shadow-md);
}
.chirpui-band--accent {
    --chirpui-band-bg: color-mix(in srgb, var(--chirpui-accent) 8%, var(--chirpui-bg-subtle));
    --chirpui-band-border: color-mix(in srgb, var(--chirpui-accent) 20%, var(--chirpui-border));
}
.chirpui-band--glass {
    --chirpui-band-bg: color-mix(in oklab, var(--chirpui-surface) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.chirpui-band--gradient {
    --chirpui-band-bg: var(--chirpui-gradient-subtle, var(--chirpui-bg-subtle));
}

/* ===== feature_section ===== */
.chirpui-feature-section {
    display: grid;
    gap: var(--chirpui-feature-section-gap, var(--chirpui-spacing-xl, 2.5rem));
    align-items: center;
}
.chirpui-feature-section--split {
    grid-template-columns: var(--chirpui-feature-section-columns, 1.2fr 1fr);
}
.chirpui-feature-section--balanced {
    grid-template-columns: 1fr 1fr;
}
.chirpui-feature-section--media-dominant {
    grid-template-columns: var(--chirpui-feature-section-columns, 2fr 3fr);
}
.chirpui-feature-section--stacked {
    grid-template-columns: 1fr;
}
.chirpui-feature-section--reverse .chirpui-feature-section__copy {
    order: 2;
}
.chirpui-feature-section--reverse .chirpui-feature-section__media {
    order: 1;
}
@media (max-width: 48rem) {
    .chirpui-feature-section--split,
    .chirpui-feature-section--balanced,
    .chirpui-feature-section--media-dominant {
        grid-template-columns: 1fr;
    }
    .chirpui-feature-section--reverse .chirpui-feature-section__copy {
        order: unset;
    }
    .chirpui-feature-section--reverse .chirpui-feature-section__media {
        order: unset;
    }
}
.chirpui-feature-section__copy {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing);
}
.chirpui-feature-section__eyebrow {
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chirpui-accent);
}
.chirpui-feature-section__title {
    font-size: var(--chirpui-prose-2xl);
    font-weight: var(--chirpui-ui-font-weight-bold);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    overflow-wrap: anywhere;
}
.chirpui-feature-section__body {
    color: var(--chirpui-text-muted);
    line-height: var(--chirpui-line-height-relaxed);
    overflow-wrap: anywhere;
}
.chirpui-feature-section__actions {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    flex-wrap: wrap;
}
.chirpui-feature-section__media {
    position: relative;
    min-width: 0;
}
.chirpui-feature-section__halo {
    position: absolute;
    inset: -12% -10% -28% -10%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--chirpui-feature-halo-color, var(--chirpui-accent)) var(--chirpui-feature-halo-size, 18%), transparent) 0%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}
.chirpui-feature-section__media > :not(.chirpui-feature-section__halo) {
    position: relative;
    z-index: 1;
}
.chirpui-feature-section--halo {
    position: relative;
}
.chirpui-feature-section--muted {
    padding: var(--chirpui-spacing-lg);
    border-radius: var(--chirpui-radius-lg);
    background: var(--chirpui-bg-subtle);
}
.chirpui-feature-stack {
    display: flex;
    flex-direction: column;
    gap: var(--chirpui-spacing-2xl, 3rem);
}

/* ===== bento extensions ===== */
.chirpui-surface--bento {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--chirpui-motion-fast), box-shadow var(--chirpui-motion-fast);
}
.chirpui-surface--bento:hover {
    transform: translateY(var(--chirpui-bento-hover-lift, -2px));
    box-shadow: var(--chirpui-shadow-md);
}
.chirpui-surface__eyebrow {
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chirpui-accent);
}
.chirpui-surface__title {
    font-size: var(--chirpui-font-lg);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    color: var(--chirpui-text);
    overflow-wrap: anywhere;
}
.chirpui-surface__lede {
    font-size: var(--chirpui-font-base);
    color: var(--chirpui-text-muted);
    line-height: var(--chirpui-line-height-relaxed);
    overflow-wrap: anywhere;
}
.chirpui-surface__body {
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    color: var(--chirpui-text-muted);
    overflow-wrap: anywhere;
}
.chirpui-frame--bento {
    --chirpui-frame-gap: var(--chirpui-bento-gap, var(--chirpui-spacing));
}
.chirpui-frame--bento > * {
    min-height: var(--chirpui-bento-tile-min-height, 10rem);
}
.chirpui-block--wide {
    grid-column: span 2;
}
.chirpui-block--tall {
    grid-row: span 2;
}
@media (max-width: 48rem) {
    .chirpui-block--wide {
        grid-column: span 1;
    }
}
}

/* === partials/159_resource-card.css === */
/* ==========================================================================
   Resource card — @scope + @layer envelope.

   Thin wrapper used inside resource index grids. The scope boundary keeps
   future resource-card descendants from leaking into nested resource cards as
   this wrapper grows beyond height/description reset.
   See docs/plans/PLAN-css-scope-and-layer.md § Migration status.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-resource-card) to (.chirpui-resource-card .chirpui-resource-card) {
        :scope {
            height: 100%;
            min-inline-size: 0;
            max-inline-size: 100%;
            overflow-wrap: anywhere;
        }

        :scope .chirpui-card__header {
            align-items: flex-start;
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        :scope .chirpui-card__body {
            display: grid;
            gap: var(--chirpui-spacing-sm);
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        :scope .chirpui-card__top-meta,
        :scope .chirpui-card__header-content,
        :scope .chirpui-card__body,
        :scope .chirpui-card__footer-wrap {
            min-inline-size: 0;
        }

        :scope .chirpui-card__body > :where(:not(script, style, template)),
        :scope .chirpui-card__footer-wrap > :where(:not(script, style, template)),
        :scope .chirpui-card__top-meta > :where(:not(script, style, template)) {
            min-inline-size: 0;
            max-inline-size: 100%;
            margin-block: 0;
            overflow-wrap: anywhere;
        }

        .chirpui-resource-card__description {
            margin: 0;
            color: var(--chirpui-text-muted);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-relaxed);
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        :scope .chirpui-card__footer-wrap:not(:empty) {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--chirpui-spacing-sm);
            min-inline-size: 0;
            max-inline-size: 100%;
        }
    }
}

/* === partials/160_resource-index.css === */
@layer chirpui.component {
/* ==========================================================================
   Resource index — composite layout (search + filters + results).
   ========================================================================== */

.chirpui-resource-index {
    width: 100%;
    min-width: 0;
    font-size: var(--chirpui-font-base);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-resource-index > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-resource-index__search,
.chirpui-resource-index__filters,
.chirpui-resource-index__results {
    width: 100%;
    min-width: 0;
}

.chirpui-resource-index__results {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chirpui-resource-index__results > :where(:not(script, style, template)) {
    margin-block: 0;
}

.chirpui-resource-index__results > .chirpui-fragment-island {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chirpui-resource-index__results.chirpui-grid > .chirpui-fragment-island {
    grid-column: 1 / -1;
}
}

/* === partials/161_navigation-metadata-authoring.css === */
/* Primary navigation */
@layer chirpui.component {
@scope (.chirpui-primary-nav) to (.chirpui-primary-nav .chirpui-primary-nav) {
.chirpui-primary-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-primary-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border-radius: var(--chirpui-radius-sm);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    text-decoration: none;
}

.chirpui-primary-nav__link:hover {
    background: var(--chirpui-state-surface-hover);
    color: var(--chirpui-text);
}

.chirpui-primary-nav__link:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

.chirpui-primary-nav__link--active {
    background: color-mix(in srgb, var(--chirpui-accent) 14%, transparent);
    color: var(--chirpui-text);
}

.chirpui-primary-nav__link--disabled {
    opacity: 0.64;
}

.chirpui-primary-nav__label {
    min-width: 0;
}

.chirpui-primary-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    padding-inline: var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chirpui-accent) 18%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-primary-nav__badge--reserved {
    min-inline-size: 1.75rem;
    opacity: 0.58;
}

.chirpui-primary-nav__badge--loading::before {
    content: "...";
}

.chirpui-primary-nav__divider {
    display: inline-block;
    inline-size: 1px;
    block-size: var(--chirpui-control-block-size-sm);
    margin-inline: var(--chirpui-spacing-xs);
    background: var(--chirpui-border);
}

@media (max-width: 40rem) {
    .chirpui-primary-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-block-end: var(--chirpui-spacing-2xs);
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .chirpui-primary-nav__link,
    .chirpui-primary-nav__divider {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .chirpui-primary-nav__link {
        min-block-size: var(--chirpui-control-touch-target);
    }
}
}
}

/* Inline metadata */
@layer chirpui.component {
@scope (.chirpui-inline-counter) to (.chirpui-inline-counter .chirpui-inline-counter) {
.chirpui-inline-counter {
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-inline-size: 0;
    max-inline-size: 100%;
    min-height: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-inline-counter__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    block-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-accent) 10%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-xs);
    font-weight: var(--chirpui-ui-font-weight-bold);
    flex: 0 0 auto;
}

.chirpui-inline-counter__value {
    min-inline-size: 0;
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    overflow-wrap: anywhere;
}

.chirpui-inline-counter__label {
    min-inline-size: 0;
    color: var(--chirpui-text-muted);
    overflow-wrap: anywhere;
}
}
}

@layer chirpui.component {
@scope (.chirpui-latest-line) to (.chirpui-latest-line .chirpui-latest-line) {
.chirpui-latest-line {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-block-start: var(--chirpui-spacing-sm);
    border-block-start: 1px solid var(--chirpui-border-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
}

.chirpui-latest-line > :where(:not(script, style, template)) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: 0;
}

.chirpui-latest-line__label {
    flex: 0 0 auto;
    color: var(--chirpui-text-muted);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-latest-line__label::after {
    content: ":";
}

.chirpui-latest-line__title,
.chirpui-latest-line__meta a {
    color: var(--chirpui-link);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.chirpui-latest-line__title:hover,
.chirpui-latest-line__meta a:hover {
    color: var(--chirpui-link-hover);
}

.chirpui-latest-line__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--chirpui-spacing-xs);
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--chirpui-text-muted);
}

.chirpui-latest-line__tooltip {
    display: inline-flex;
    min-inline-size: 0;
    max-inline-size: 100%;
    vertical-align: baseline;
}
}
}

/* Chips */
@layer chirpui.component {
@scope (.chirpui-chip-group) to (.chirpui-chip-group .chirpui-chip-group) {
.chirpui-chip-group {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-inline-size: 0;
    max-inline-size: 100%;
}

.chirpui-chip-group > :where(:not(script, style, template)) {
    margin-block: 0;
}
}
}

@layer chirpui.component {
@scope (.chirpui-chip) to (.chirpui-chip .chirpui-chip) {
.chirpui-chip {
    --chirpui-chip-color: var(--chirpui-accent);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--chirpui-spacing-2xs);
    min-inline-size: 0;
    max-inline-size: 100%;
    min-height: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chirpui-chip-color) 7%, var(--chirpui-bg-subtle));
    color: color-mix(in srgb, var(--chirpui-text) 84%, var(--chirpui-text-muted));
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.chirpui-chip:hover,
.chirpui-chip--selected {
    border-color: color-mix(in srgb, var(--chirpui-chip-color) 70%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-chip-color) 14%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
}

.chirpui-chip--muted {
    --chirpui-chip-color: var(--chirpui-text-muted);
}

.chirpui-chip--custom {
    border-color: color-mix(in srgb, var(--chirpui-chip-color) 42%, var(--chirpui-border));
}

a.chirpui-chip:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}
}
}

/* Rendered user content */
@layer chirpui.component {
@scope (.chirpui-rendered-content) to (.chirpui-rendered-content .chirpui-rendered-content) {
.chirpui-rendered-content {
    color: var(--chirpui-text);
    font-size: var(--chirpui-font-lg);
    line-height: var(--chirpui-line-height-relaxed);
    max-width: 68ch;
}

.chirpui-rendered-content--compact {
    font-size: var(--chirpui-font-base);
}

.chirpui-rendered-content p,
.chirpui-rendered-content blockquote,
.chirpui-rendered-content pre {
    margin: 0;
}

.chirpui-rendered-content p + p,
.chirpui-rendered-content blockquote + p,
.chirpui-rendered-content p + blockquote,
.chirpui-rendered-content blockquote + blockquote {
    margin-block-start: var(--chirpui-spacing);
}

.chirpui-rendered-content blockquote {
    padding: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    border-inline-start: 3px solid var(--chirpui-accent);
    background: color-mix(in srgb, var(--chirpui-accent) 7%, transparent);
    color: var(--chirpui-text-muted);
}

.chirpui-rendered-content pre {
    overflow-x: auto;
    padding: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius);
    background: color-mix(in srgb, var(--chirpui-accent) 5%, var(--chirpui-bg-subtle));
    font-family: var(--chirpui-mono-font-family);
    font-size: var(--chirpui-font-sm);
    white-space: pre-wrap;
}

.chirpui-rendered-content strong {
    color: var(--chirpui-text);
    font-weight: var(--chirpui-ui-font-weight-semibold);
}

.chirpui-rendered-content :where(a, code) {
    overflow-wrap: anywhere;
}

.chirpui-rendered-content :where(img, video, iframe, embed, object) {
    max-inline-size: 100%;
}

.chirpui-rendered-content :where(img, video) {
    block-size: auto;
}
}
}

/* Composer shell */
@layer chirpui.component {
@scope (.chirpui-composer-shell) to (.chirpui-composer-shell .chirpui-composer-shell) {
.chirpui-composer-shell {
    display: grid;
    gap: var(--chirpui-spacing-md);
}

.chirpui-composer-shell__header,
.chirpui-composer-shell__identity,
.chirpui-composer-shell__fields,
.chirpui-composer-shell__toolbar,
.chirpui-composer-shell__body,
.chirpui-composer-shell__preview,
.chirpui-composer-shell__footer,
.chirpui-composer-shell__status,
.chirpui-composer-shell__actions {
    min-width: 0;
}

.chirpui-composer-shell__header:empty,
.chirpui-composer-shell__identity:empty,
.chirpui-composer-shell__fields:empty,
.chirpui-composer-shell__toolbar:empty,
.chirpui-composer-shell__body:empty,
.chirpui-composer-shell__preview:empty,
.chirpui-composer-shell__status:empty,
.chirpui-composer-shell__actions:empty {
    display: none;
}

.chirpui-composer-shell__identity {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    padding: var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius);
    background: color-mix(in srgb, var(--chirpui-accent) 6%, var(--chirpui-bg-subtle));
}

.chirpui-composer-shell__fields {
    display: grid;
    gap: var(--chirpui-spacing);
}

.chirpui-composer-shell__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
}

.chirpui-composer-shell__preview {
    min-height: 8rem;
    padding: var(--chirpui-spacing);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius);
    background: color-mix(in srgb, var(--chirpui-accent) 5%, var(--chirpui-bg-subtle));
}

.chirpui-composer-shell__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    justify-content: space-between;
}

.chirpui-composer-shell__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-sm);
    justify-content: flex-end;
}
}
}

/* Token input */
@layer chirpui.component {
@scope (.chirpui-token-input) to (.chirpui-token-input .chirpui-token-input) {
.chirpui-token-input {
    display: grid;
    gap: var(--chirpui-spacing-xs);
    position: relative;
}

.chirpui-token-input__label {
    color: var(--chirpui-text);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
}

.chirpui-token-input__control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    min-height: calc(var(--chirpui-spacing-2xl) + var(--chirpui-spacing-xs));
    padding: var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    background: var(--chirpui-surface);
    cursor: text;
}

.chirpui-token-input__control:focus-within {
    border-color: var(--chirpui-focus-ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chirpui-focus-ring) 22%, transparent);
}

.chirpui-token-input__input {
    flex: 1 1 10rem;
    min-width: 8rem;
    padding: var(--chirpui-spacing-xs);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--chirpui-text);
    font: inherit;
}

.chirpui-token-input__token {
    display: inline-flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid color-mix(in srgb, var(--chirpui-accent) 42%, var(--chirpui-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--chirpui-accent) 16%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-token-input__token-label {
    min-width: 0;
}

.chirpui-token-input__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    block-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--chirpui-text-muted);
    cursor: pointer;
    font-family: var(--chirpui-ui-font-family);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-token-input__remove:hover {
    background: color-mix(in srgb, var(--chirpui-accent) 18%, transparent);
    color: var(--chirpui-text);
}

.chirpui-token-input__list {
    display: grid;
    gap: var(--chirpui-spacing-xs);
    position: absolute;
    z-index: var(--chirpui-z-dropdown);
    inset-block-start: calc(100% + var(--chirpui-spacing-xs));
    inset-inline: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--chirpui-spacing-xs);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-shadow-md);
}

.chirpui-token-input__list:empty {
    display: none;
}

.chirpui-token-input__result {
    display: grid;
    gap: var(--chirpui-spacing-xs);
    width: 100%;
    padding: var(--chirpui-spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--chirpui-radius-sm);
    background: transparent;
    color: var(--chirpui-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.chirpui-token-input__result:hover,
.chirpui-token-input__result--active {
    border-color: var(--chirpui-border-subtle);
    background: color-mix(in srgb, var(--chirpui-accent) 9%, var(--chirpui-bg-subtle));
}

.chirpui-token-input__result-label,
.chirpui-token-input__result-meta {
    display: block;
}

.chirpui-token-input__result-meta {
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
}
}
}

@layer chirpui.component {
@scope (.chirpui-avatar-stack) to (.chirpui-avatar-stack .chirpui-avatar-stack) {
.chirpui-avatar-stack__link {
    display: inline-flex;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

.chirpui-avatar-stack__link:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}
}
}

/* === partials/162_logo-cloud.css === */
/* ==========================================================================
   Logo Cloud
   ========================================================================== */

@layer chirpui.component {
@scope (.chirpui-logo-cloud) to (.chirpui-logo-cloud .chirpui-logo-cloud) {
    :scope {
        --chirpui-logo-cloud-gap: var(--chirpui-spacing-lg);
        --chirpui-logo-cloud-item-min: 8rem;
        --chirpui-logo-cloud-image-height: 2rem;
        --chirpui-logo-cloud-opacity: 0.72;
        display: block;
    }

    :scope .chirpui-logo-cloud__track {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--chirpui-logo-cloud-item-min)), 1fr));
        align-items: center;
        gap: var(--chirpui-logo-cloud-gap);
    }

    :scope .chirpui-logo-cloud__item {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--chirpui-space-control-gap);
        color: var(--chirpui-text-muted);
        text-align: center;
        text-decoration: none;
    }

    :scope .chirpui-logo-cloud__link {
        border-radius: var(--chirpui-radius-sm);
    }

    :scope .chirpui-logo-cloud__link:focus-visible {
        outline: var(--chirpui-state-focus-outline);
        outline-offset: var(--chirpui-state-focus-offset);
    }

    :scope .chirpui-logo-cloud__img {
        display: block;
        max-inline-size: 100%;
        block-size: var(--chirpui-logo-cloud-image-height);
        object-fit: contain;
        opacity: var(--chirpui-logo-cloud-opacity);
    }

    :scope .chirpui-logo-cloud__name {
        overflow-wrap: anywhere;
        font-size: var(--chirpui-ui-sm);
        font-weight: var(--chirpui-ui-font-weight-semibold);
        line-height: var(--chirpui-line-height-tight);
        color: var(--chirpui-text-muted);
    }

    :scope.chirpui-logo-cloud--monochrome .chirpui-logo-cloud__img {
        filter: grayscale(1);
    }

    :scope .chirpui-logo-cloud__link:hover .chirpui-logo-cloud__img,
    :scope .chirpui-logo-cloud__link:focus-visible .chirpui-logo-cloud__img {
        opacity: 1;
        filter: none;
    }
}
}

/* === partials/163_story-card.css === */
/* ==========================================================================
   Story Card
   ========================================================================== */

@layer chirpui.component {
@scope (.chirpui-story-card) to (.chirpui-story-card .chirpui-story-card) {
    :scope {
        --chirpui-story-card-gap: var(--chirpui-spacing);
        --chirpui-story-card-padding: var(--chirpui-spacing-lg);
        --chirpui-story-card-logo-size: 2.25rem;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--chirpui-story-card-gap);
        min-block-size: 100%;
        padding: var(--chirpui-story-card-padding);
        border: 1px solid var(--chirpui-border);
        border-radius: var(--chirpui-radius-lg);
        background: var(--chirpui-surface);
        color: var(--chirpui-text);
        text-decoration: none;
    }

    :scope.chirpui-story-card--link {
        transition:
            border-color var(--chirpui-duration-fast) var(--chirpui-easing-standard),
            box-shadow var(--chirpui-duration-fast) var(--chirpui-easing-standard),
            translate var(--chirpui-duration-fast) var(--chirpui-easing-standard);
    }

    :scope.chirpui-story-card--link:hover {
        border-color: var(--chirpui-accent);
        box-shadow: var(--chirpui-shadow-md);
        translate: 0 calc(-1 * var(--chirpui-space-3xs));
    }

    :scope.chirpui-story-card--link:focus-visible {
        outline: var(--chirpui-state-focus-outline);
        outline-offset: var(--chirpui-state-focus-offset);
    }

    :scope .chirpui-story-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--chirpui-spacing);
    }

    :scope .chirpui-story-card__logo {
        min-inline-size: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
        font-weight: var(--chirpui-ui-font-weight-semibold);
    }

    :scope .chirpui-story-card__logo-img {
        display: block;
        max-inline-size: 100%;
        block-size: var(--chirpui-story-card-logo-size);
        object-fit: contain;
    }

    :scope .chirpui-story-card__metric {
        flex: 0 0 auto;
        color: var(--chirpui-accent);
        font-size: var(--chirpui-ui-lg);
        font-weight: var(--chirpui-ui-font-weight-semibold);
        font-variant-numeric: tabular-nums;
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-story-card__body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: var(--chirpui-spacing-xs);
        min-width: 0;
    }

    :scope .chirpui-story-card__customer {
        margin: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
        font-weight: var(--chirpui-ui-font-weight-semibold);
    }

    :scope .chirpui-story-card__outcome {
        margin: 0;
        color: var(--chirpui-text);
        font-size: var(--chirpui-ui-lg);
        font-weight: var(--chirpui-ui-font-weight-semibold);
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-story-card__summary {
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
        line-height: var(--chirpui-line-height-normal);
    }

    :scope .chirpui-story-card__summary :where(p) {
        margin: 0;
    }

    :scope .chirpui-story-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--chirpui-spacing-sm);
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
        line-height: var(--chirpui-line-height-normal);
    }

    :scope .chirpui-story-card__cta {
        color: var(--chirpui-accent);
        font-weight: var(--chirpui-ui-font-weight-semibold);
    }
}
}

/* === partials/164_cta-band.css === */
/* ==========================================================================
   CTA Band
   ========================================================================== */

@layer chirpui.component {
@scope (.chirpui-cta-band) to (.chirpui-cta-band .chirpui-cta-band) {
    :scope {
        --chirpui-cta-band-gap: var(--chirpui-spacing-xl);
        --chirpui-cta-band-copy-gap: var(--chirpui-spacing-sm);
    }

    :scope .chirpui-cta-band__inner {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--chirpui-cta-band-gap);
    }

    :scope .chirpui-cta-band__copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--chirpui-cta-band-copy-gap);
    }

    :scope .chirpui-cta-band__title {
        margin: 0;
        max-inline-size: 14ch;
        color: var(--chirpui-text);
        font-size: var(--chirpui-prose-3xl);
        font-weight: var(--chirpui-ui-font-weight-semibold);
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-cta-band__body {
        max-inline-size: 58ch;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-base);
        line-height: var(--chirpui-line-height-relaxed);
    }

    :scope .chirpui-cta-band__body :where(p) {
        margin: 0;
    }

    :scope .chirpui-cta-band__actions {
        min-width: 0;
    }

    @media (max-width: 48rem) {
        :scope .chirpui-cta-band__inner {
            grid-template-columns: 1fr;
        }
    }
}
}

/* === partials/165_pattern-assets.css === */
/* ==========================================================================
   Official pattern assets
   ========================================================================== */

@layer chirpui.component {
@scope (.chirpui-lifecycle-showcase) to (.chirpui-lifecycle-showcase .chirpui-lifecycle-showcase) {
    :scope {
        display: block;
        min-width: 0;
    }
}

@scope (.chirpui-detail-header) to (.chirpui-detail-header .chirpui-detail-header) {
    :scope {
        display: block;
        min-width: 0;
    }

    :scope .chirpui-detail-header__layout {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
        gap: var(--chirpui-spacing-lg);
        align-items: start;
    }

    :scope .chirpui-detail-header__media {
        min-width: 0;
        max-inline-size: 12rem;
    }

    :scope .chirpui-detail-header__media:empty,
    :scope .chirpui-detail-header__badges:empty,
    :scope .chirpui-detail-header__meta:empty,
    :scope .chirpui-detail-header__actions:empty,
    :scope .chirpui-detail-header__aside:empty {
        display: none;
    }

    :scope .chirpui-detail-header__body {
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing-sm);
    }

    :scope .chirpui-detail-header__eyebrow {
        margin: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-xs);
        font-weight: var(--chirpui-font-weight-semibold);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    :scope .chirpui-detail-header__title {
        margin: 0;
        color: var(--chirpui-text);
        font-size: var(--chirpui-prose-3xl);
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-detail-header__summary {
        max-inline-size: 68ch;
        margin: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-base);
    }

    :scope .chirpui-detail-header__badges,
    :scope .chirpui-detail-header__meta,
    :scope .chirpui-detail-header__actions {
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--chirpui-spacing-xs);
    }

    :scope .chirpui-detail-header__meta {
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }

    :scope .chirpui-detail-header__aside {
        min-width: min(100%, 14rem);
    }

    @media (max-width: 48rem) {
        :scope .chirpui-detail-header__layout {
            grid-template-columns: 1fr;
        }

        :scope .chirpui-detail-header__media,
        :scope .chirpui-detail-header__aside {
            max-inline-size: none;
        }
    }
}

@scope (.chirpui-facet-chip) to (.chirpui-facet-chip .chirpui-facet-chip) {
    :scope {
        --chirpui-facet-chip-color: var(--chirpui-accent);
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: var(--chirpui-spacing-2xs);
        min-height: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
        padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
        border: 1px solid var(--chirpui-border-subtle);
        border-radius: 999px;
        background: color-mix(in srgb, var(--chirpui-facet-chip-color) 7%, var(--chirpui-bg-subtle));
        color: color-mix(in srgb, var(--chirpui-text) 84%, var(--chirpui-text-muted));
        font-size: var(--chirpui-font-xs);
        line-height: var(--chirpui-line-height-tight);
        overflow-wrap: anywhere;
        text-decoration: none;
    }

    a:scope:hover,
    :scope.chirpui-facet-chip--selected {
        border-color: color-mix(in srgb, var(--chirpui-facet-chip-color) 70%, var(--chirpui-border));
        background: color-mix(in srgb, var(--chirpui-facet-chip-color) 14%, var(--chirpui-bg-subtle));
        color: var(--chirpui-text);
    }

    :scope.chirpui-facet-chip--muted {
        --chirpui-facet-chip-color: var(--chirpui-text-muted);
    }

    :scope.chirpui-facet-chip--custom {
        border-color: color-mix(in srgb, var(--chirpui-facet-chip-color) 42%, var(--chirpui-border));
    }

    :scope.chirpui-facet-chip--removable {
        border-start-end-radius: var(--chirpui-radius-sm);
        border-end-end-radius: var(--chirpui-radius-sm);
    }

    :scope .chirpui-facet-chip__label {
        min-width: 0;
    }

    :scope .chirpui-facet-chip__count {
        color: var(--chirpui-text-muted);
        font-variant-numeric: tabular-nums;
    }

    :scope:focus-visible {
        outline: var(--chirpui-state-focus-outline);
        outline-offset: var(--chirpui-state-focus-offset);
    }
}

.chirpui-facet-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    min-height: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    margin-inline-start: calc(var(--chirpui-spacing-2xs) * -1);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-sm) 999px 999px var(--chirpui-radius-sm);
    background: var(--chirpui-bg-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-ui-sm);
    line-height: 1;
    text-decoration: none;
}

.chirpui-facet-chip__remove:hover {
    color: var(--chirpui-text);
}

.chirpui-facet-chip__remove:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

@scope (.chirpui-thread-reader-layout) to (.chirpui-thread-reader-layout .chirpui-thread-reader-layout) {
    :scope {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 2fr) minmax(12rem, 0.85fr);
        grid-template-areas:
            "header header header"
            "nav posts attention"
            "nav composer attention";
        gap: var(--chirpui-spacing-lg);
        align-items: start;
    }

    :scope .chirpui-thread-reader-layout__header {
        grid-area: header;
        min-width: 0;
    }

    :scope .chirpui-thread-reader-layout__nav {
        grid-area: nav;
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing-sm);
        position: sticky;
        inset-block-start: var(--chirpui-spacing);
    }

    :scope .chirpui-thread-reader-layout__nav:empty,
    :scope .chirpui-thread-reader-layout__attention-nav:empty,
    :scope .chirpui-thread-reader-layout__composer:empty {
        display: none;
    }

    :scope .chirpui-thread-reader-layout__nav-title {
        margin: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-xs);
        font-weight: var(--chirpui-font-weight-semibold);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    :scope .chirpui-thread-reader-layout__nav-list {
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing-xs);
    }

    :scope .chirpui-thread-reader-layout__nav-link {
        min-width: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
        overflow-wrap: anywhere;
        text-decoration: none;
    }

    :scope .chirpui-thread-reader-layout__nav-link:focus-visible {
        outline: var(--chirpui-state-focus-outline);
        outline-offset: var(--chirpui-state-focus-offset);
    }

    :scope .chirpui-thread-reader-layout__posts {
        grid-area: posts;
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing);
    }

    :scope .chirpui-thread-reader-layout__attention-nav {
        grid-area: attention;
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing);
    }

    :scope .chirpui-thread-reader-layout__composer {
        grid-area: composer;
        min-width: 0;
    }

    @media (max-width: 64rem) {
        :scope {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "header"
                "nav"
                "posts"
                "attention"
                "composer";
        }

        :scope .chirpui-thread-reader-layout__nav {
            position: static;
        }
    }
}

@scope (.chirpui-title-card) to (.chirpui-title-card .chirpui-title-card) {
    :scope {
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing);
        align-content: start;
    }

    :scope .chirpui-title-card__artwork {
        inline-size: 100%;
    }

    :scope .chirpui-title-card__body {
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing-sm);
    }

    :scope .chirpui-title-card__meta-row {
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--chirpui-spacing-xs);
    }

    :scope .chirpui-title-card__meta {
        min-width: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }

    :scope .chirpui-title-card__title {
        margin: 0;
        color: var(--chirpui-text);
        font-size: var(--chirpui-ui-lg);
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-title-card__title a {
        color: inherit;
        text-decoration: none;
    }

    :scope .chirpui-title-card__title a:focus-visible {
        outline: var(--chirpui-state-focus-outline);
        outline-offset: var(--chirpui-state-focus-offset);
    }

    :scope .chirpui-title-card__summary {
        margin: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }

    :scope .chirpui-title-card__actions {
        min-width: 0;
    }
}

@scope (.chirpui-catalog-rail) to (.chirpui-catalog-rail .chirpui-catalog-rail) {
    :scope {
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing);
    }

    :scope .chirpui-catalog-rail__header {
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        justify-content: space-between;
        gap: var(--chirpui-spacing-sm) var(--chirpui-spacing);
    }

    :scope .chirpui-catalog-rail__title {
        margin: 0;
        color: var(--chirpui-text);
        font-size: var(--chirpui-ui-lg);
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-catalog-rail__subtitle {
        margin: var(--chirpui-spacing-2xs) 0 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }

    :scope .chirpui-catalog-rail__actions {
        min-width: 0;
        margin-inline-start: auto;
    }

    @media (max-width: 40rem) {
        :scope .chirpui-catalog-rail__header {
            align-items: start;
            flex-direction: column;
        }
    }
}

@scope (.chirpui-media-hero-shelf) to (.chirpui-media-hero-shelf .chirpui-media-hero-shelf) {
    :scope {
        display: block;
        min-width: 0;
    }
}

@scope (.chirpui-live-event-card) to (.chirpui-live-event-card .chirpui-live-event-card) {
    :scope {
        min-width: 0;
        display: block;
    }

    :scope .chirpui-live-event-card__media-object {
        min-width: 0;
    }

    :scope .chirpui-live-event-card__title {
        margin: 0;
        color: var(--chirpui-text);
        font-size: var(--chirpui-ui-base);
        line-height: var(--chirpui-line-height-tight);
    }

    :scope .chirpui-live-event-card__time,
    :scope .chirpui-live-event-card__restriction {
        margin: 0;
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }
}

@scope (.chirpui-watch-companion-layout) to (.chirpui-watch-companion-layout .chirpui-watch-companion-layout) {
    :scope {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(min(100%, 20rem), 1fr);
        gap: var(--chirpui-spacing-lg);
        align-items: start;
    }

    :scope .chirpui-watch-companion-layout__player,
    :scope .chirpui-watch-companion-layout__companion {
        min-width: 0;
    }

    @media (max-width: 48rem) {
        :scope {
            grid-template-columns: 1fr;
        }
    }
}

@scope (.chirpui-topic-card) to (.chirpui-topic-card .chirpui-topic-card) {
    :scope {
        min-width: 0;
    }

    :scope .chirpui-topic-card__footer {
        min-width: 0;
        display: grid;
        gap: var(--chirpui-spacing-xs);
    }

    :scope .chirpui-topic-card__counts {
        display: flex;
        flex-wrap: wrap;
        gap: var(--chirpui-spacing-sm);
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }

    :scope .chirpui-topic-card__latest {
        min-width: 0;
        color: var(--chirpui-accent);
        font-size: var(--chirpui-ui-sm);
        overflow-wrap: anywhere;
        text-decoration: none;
    }

    :scope .chirpui-topic-card__latest:focus-visible {
        outline: var(--chirpui-state-focus-outline);
        outline-offset: var(--chirpui-state-focus-offset);
    }
}

@scope (.chirpui-answer-card) to (.chirpui-answer-card .chirpui-answer-card) {
    :scope {
        min-width: 0;
    }

    :scope .chirpui-answer-card__body {
        min-width: 0;
    }
}

@scope (.chirpui-moderation-queue-item) to (.chirpui-moderation-queue-item .chirpui-moderation-queue-item) {
    :scope {
        min-width: 0;
    }

    :scope .chirpui-moderation-queue-item__footer {
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--chirpui-spacing-sm);
    }

    :scope .chirpui-moderation-queue-item__actor {
        color: var(--chirpui-text-muted);
        font-size: var(--chirpui-ui-sm);
    }
}
}

/* === partials/166_dense-navigation-primitives.css === */
@layer chirpui.component {
@scope (.chirpui-scope-switcher) to (.chirpui-scope-switcher .chirpui-scope-switcher) {
.chirpui-scope-switcher {
    display: inline-flex;
    min-inline-size: 0;
}

.chirpui-scope-switcher .chirpui-dropdown {
    min-inline-size: 0;
}
}

@scope (.chirpui-saved-view-strip) to (.chirpui-saved-view-strip .chirpui-saved-view-strip) {
.chirpui-saved-view-strip {
    display: flex;
    align-items: center;
    gap: var(--chirpui-spacing-xs);
    max-inline-size: 100%;
    overflow-x: auto;
    padding-block: var(--chirpui-spacing-xs);
    scroll-padding-inline: var(--chirpui-spacing-sm);
}

.chirpui-saved-view-strip > :where(.chirpui-chip, a) {
    flex: 0 0 auto;
}

.chirpui-saved-view-strip > a:not(.chirpui-chip) {
    display: inline-flex;
    align-items: center;
    min-block-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chirpui-accent) 7%, var(--chirpui-bg-subtle));
    color: color-mix(in srgb, var(--chirpui-text) 84%, var(--chirpui-text-muted));
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    text-decoration: none;
}

.chirpui-saved-view-strip > a:not(.chirpui-chip):hover {
    border-color: color-mix(in srgb, var(--chirpui-accent) 70%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-accent) 14%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
}
}

/* Dense shortcut strips must never fall back to raw underlined anchors. */
.chirpui-saved-view-strip .chirpui-chip,
.chirpui-chip-group .chirpui-chip {
    --chirpui-chip-color: var(--chirpui-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-inline-size: 18rem;
    min-block-size: var(--chirpui-control-block-size-sm);
    padding-block: var(--chirpui-spacing-xs);
    padding-inline: var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chirpui-chip-color) 8%, var(--chirpui-bg-subtle));
    color: color-mix(in srgb, var(--chirpui-text) 88%, var(--chirpui-text-muted));
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chirpui-saved-view-strip a.chirpui-chip:hover,
.chirpui-chip-group a.chirpui-chip:hover,
.chirpui-saved-view-strip .chirpui-chip--selected,
.chirpui-chip-group .chirpui-chip--selected {
    border-color: color-mix(in srgb, var(--chirpui-chip-color) 70%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-chip-color) 16%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
}

.chirpui-saved-view-strip a.chirpui-chip:focus-visible,
.chirpui-chip-group a.chirpui-chip:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

@scope (.chirpui-nav-link) to (.chirpui-nav-link .chirpui-nav-link) {
.chirpui-nav-link {
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    min-block-size: calc(var(--chirpui-spacing) + var(--chirpui-spacing-xs));
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-accent) 6%, var(--chirpui-bg-subtle));
    color: var(--chirpui-accent);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    text-decoration: none;
}

.chirpui-nav-link:hover {
    border-color: color-mix(in srgb, var(--chirpui-accent) 62%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-accent) 13%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
}
}

.chirpui-nav-link {
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    min-block-size: var(--chirpui-control-block-size-sm);
    padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-accent) 6%, var(--chirpui-bg-subtle));
    color: var(--chirpui-accent);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-tight);
    text-decoration: none;
}

.chirpui-nav-link:hover {
    border-color: color-mix(in srgb, var(--chirpui-accent) 62%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-accent) 13%, var(--chirpui-bg-subtle));
    color: var(--chirpui-text);
}
}

/* === partials/167_workspace-primitives.css === */
@layer chirpui.component {
:where(.chirpui-filter-rail, .chirpui-metric-strip, .chirpui-result-collection, .chirpui-result-card, .chirpui-inspector-panel) {
    --chirpui-rhythm-attached: var(--chirpui-spacing-2xs);
    --chirpui-rhythm-group: var(--chirpui-spacing-xs);
    --chirpui-rhythm-stack: var(--chirpui-spacing);
    --chirpui-rhythm-separated: var(--chirpui-spacing-sm);
    --chirpui-rhythm-inset: var(--chirpui-spacing);
}

@scope (.chirpui-filter-rail) to (.chirpui-filter-rail .chirpui-filter-rail) {
:scope {
    min-inline-size: 0;
}

.chirpui-filter-rail__list {
    display: grid;
    gap: var(--chirpui-rhythm-group);
}

.chirpui-filter-rail__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    padding: var(--chirpui-rhythm-group);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-bg-subtle) 82%, var(--chirpui-surface));
    color: var(--chirpui-text);
    text-decoration: none;
}

.chirpui-filter-rail__item:hover,
.chirpui-filter-rail__item.is-active {
    border-color: color-mix(in srgb, var(--chirpui-accent) 60%, var(--chirpui-border));
    background: color-mix(in srgb, var(--chirpui-accent) 10%, var(--chirpui-surface));
}

.chirpui-filter-rail__item:focus-visible {
    outline: var(--chirpui-state-focus-outline);
    outline-offset: var(--chirpui-state-focus-offset);
}

:scope[data-chirpui-pressure~="compress"],
.chirpui-filter-rail__item[data-chirpui-pressure~="compress"] {
    max-inline-size: 100%;
}

.chirpui-filter-rail__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size-sm);
    min-block-size: var(--chirpui-control-block-size-sm);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-accent) 12%, transparent);
    color: var(--chirpui-accent);
    font-size: var(--chirpui-font-xs);
    line-height: 1;
}

.chirpui-filter-rail__body {
    display: grid;
    gap: var(--chirpui-rhythm-attached);
    min-inline-size: 0;
}

.chirpui-filter-rail__label,
.chirpui-filter-rail__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chirpui-filter-rail__label {
    font-size: var(--chirpui-font-sm);
    font-weight: var(--chirpui-ui-font-weight-medium);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-filter-rail__meta,
.chirpui-filter-rail__count {
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-filter-rail__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: calc(var(--chirpui-spacing-lg) + var(--chirpui-spacing-2xs));
    min-block-size: calc(var(--chirpui-spacing-lg) + var(--chirpui-spacing-2xs));
    padding-inline: var(--chirpui-spacing-xs);
    border-radius: 999px;
    background: var(--chirpui-bg-subtle);
    font-variant-numeric: tabular-nums;
}
}

@scope (.chirpui-metric-strip) to (.chirpui-metric-strip .chirpui-metric-strip) {
:scope {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
}

.chirpui-metric-strip__item {
    display: grid;
    gap: var(--chirpui-rhythm-attached);
    min-inline-size: 7rem;
    padding: var(--chirpui-rhythm-group);
    border: 1px solid var(--chirpui-border-subtle);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-surface) 88%, var(--chirpui-bg-subtle));
}

.chirpui-metric-strip__value {
    font-size: var(--chirpui-font-lg);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--chirpui-line-height-tight);
}

.chirpui-metric-strip__label {
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-xs);
    line-height: var(--chirpui-line-height-tight);
}
}

@scope (.chirpui-result-collection) to (.chirpui-result-collection .chirpui-result-collection) {
:scope {
    display: grid;
    gap: var(--chirpui-rhythm-stack);
    min-inline-size: 0;
}

:scope[data-chirpui-pressure~="flex"] {
    inline-size: 100%;
}

.chirpui-result-collection__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    max-inline-size: 100%;
}

.chirpui-result-collection__title {
    margin: 0;
    min-inline-size: 0;
    font-size: var(--chirpui-font-lg);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
}

.chirpui-result-collection__meta {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-inline-start: auto;
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    overflow-wrap: anywhere;
}

.chirpui-result-collection__meta:empty {
    display: none;
}

.chirpui-result-collection__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--chirpui-rhythm-stack);
    min-inline-size: 0;
}
}

@scope (.chirpui-result-card) to (.chirpui-result-card .chirpui-result-card) {
:scope {
    display: grid;
    gap: var(--chirpui-rhythm-stack);
    min-inline-size: 0;
    padding: var(--chirpui-rhythm-inset);
    border: 1px solid var(--chirpui-border);
    border-radius: var(--chirpui-radius);
    background: var(--chirpui-surface);
    box-shadow: var(--chirpui-elevation-card-rest);
}

.chirpui-result-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-rhythm-group);
    align-items: start;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.chirpui-result-card__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--chirpui-control-block-size);
    min-block-size: var(--chirpui-control-block-size);
    border-radius: var(--chirpui-radius-sm);
    background: color-mix(in srgb, var(--chirpui-accent) 12%, transparent);
    color: var(--chirpui-accent);
    font-size: var(--chirpui-font-sm);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chirpui-result-card__mark:empty {
    display: none;
}

.chirpui-result-card__copy {
    flex: 999 1 12rem;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: clip;
}

.chirpui-result-card__copy[data-chirpui-pressure~="flex"] {
    overflow-wrap: anywhere;
}

.chirpui-result-card__copy > :where(:not(script, style, template)) {
    min-inline-size: 0;
    margin-block: 0;
}

.chirpui-result-card__title,
.chirpui-result-card__subtitle {
    margin: 0;
}

.chirpui-result-card__title {
    font-size: var(--chirpui-font-base);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chirpui-result-card__subtitle {
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chirpui-result-card__actions {
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-inline-start: auto;
    overflow-wrap: anywhere;
}

.chirpui-result-card__actions > :where(:not(script, style, template)) {
    margin: 0;
}

.chirpui-result-card__actions:empty {
    display: none;
}

.chirpui-result-card__body {
    display: grid;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-result-card__body > :where(:not(script, style, template)) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: 0;
}

.chirpui-result-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-rhythm-group);
    align-items: center;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-block-start: var(--chirpui-rhythm-separated);
    border-block-start: 1px solid var(--chirpui-border-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-result-card__footer > :where(:not(script, style, template)) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: 0;
    overflow-wrap: anywhere;
}

.chirpui-result-card__footer:empty {
    display: none;
}
}

@scope (.chirpui-inspector-panel) to (.chirpui-inspector-panel .chirpui-inspector-panel) {
:scope {
    display: grid;
    gap: var(--chirpui-rhythm-stack);
    min-inline-size: 0;
    padding: var(--chirpui-rhythm-inset);
}

:scope[data-chirpui-pressure~="compress"] {
    max-inline-size: 100%;
}

.chirpui-inspector-panel__header {
    display: flex;
    gap: var(--chirpui-rhythm-group);
    align-items: start;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.chirpui-inspector-panel__copy {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: clip;
    overflow-wrap: anywhere;
}

.chirpui-inspector-panel__copy > :where(:not(script, style, template)) {
    min-inline-size: 0;
    margin-block: 0;
}

.chirpui-inspector-panel__title,
.chirpui-inspector-panel__subtitle {
    margin: 0;
}

.chirpui-inspector-panel__title {
    font-size: var(--chirpui-font-base);
    font-weight: var(--chirpui-ui-font-weight-semibold);
    line-height: var(--chirpui-line-height-tight);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chirpui-inspector-panel__subtitle {
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chirpui-inspector-panel__actions {
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-inline-start: auto;
    overflow-wrap: anywhere;
}

.chirpui-inspector-panel__actions > :where(:not(script, style, template)) {
    margin: 0;
}

.chirpui-inspector-panel__actions:empty {
    display: none;
}

.chirpui-inspector-panel__body {
    display: grid;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-inspector-panel__body > :where(:not(script, style, template)) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: 0;
}

.chirpui-inspector-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chirpui-rhythm-group);
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-block-start: var(--chirpui-rhythm-separated);
    border-block-start: 1px solid var(--chirpui-border-subtle);
    color: var(--chirpui-text-muted);
    font-size: var(--chirpui-font-sm);
    line-height: var(--chirpui-line-height-normal);
    overflow-wrap: anywhere;
}

.chirpui-inspector-panel__footer > :where(:not(script, style, template)) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: 0;
    overflow-wrap: anywhere;
}

.chirpui-inspector-panel__footer:empty {
    display: none;
}
}

@media (max-width: 36rem) {
    .chirpui-result-card__actions {
        justify-content: start;
        margin-inline-start: 0;
    }
}
}

/* === partials/168_maturity-primitives.css === */
/* Maturity primitives — small expected UI-library primitives. */
@layer chirpui.component {
  @scope (.chirpui-kbd) {
    :scope {
      display: inline-flex;
      align-items: center;
      gap: var(--chirpui-spacing-2xs);
      min-block-size: 1.5rem;
      padding: 0.125rem 0.375rem;
      border: 1px solid var(--chirpui-border);
      border-radius: var(--chirpui-radius-sm);
      background: var(--chirpui-surface-alt);
      color: var(--chirpui-text);
      font-family: var(--chirpui-code-font-family);
      font-size: var(--chirpui-ui-xs);
      font-weight: var(--chirpui-ui-font-weight-medium);
      line-height: 1;
      white-space: nowrap;
      box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--chirpui-border) 70%, transparent);
    }

    :scope(.chirpui-kbd--sm) {
      min-block-size: 1.25rem;
      padding-inline: 0.3rem;
      font-size: calc(var(--chirpui-ui-xs) * 0.92);
    }

    :scope(.chirpui-kbd--lg) {
      min-block-size: 1.85rem;
      padding-inline: 0.5rem;
      font-size: var(--chirpui-ui-sm);
    }

    .chirpui-kbd__key + .chirpui-kbd__key::before {
      content: "+";
      margin-inline-end: var(--chirpui-spacing-2xs);
      color: var(--chirpui-text-muted);
      font-weight: var(--chirpui-ui-font-weight-normal);
    }
  }

  @scope (.chirpui-separator) {
    :scope {
      display: flex;
      align-items: center;
      gap: var(--chirpui-spacing-sm);
      border: 0;
      color: var(--chirpui-text-muted);
      font-size: var(--chirpui-ui-xs);
      line-height: 1;
    }

    :scope(.chirpui-separator--horizontal) {
      inline-size: 100%;
    }

    :scope(.chirpui-separator--decorative) {
      pointer-events: none;
    }

    :scope::before,
    :scope::after {
      content: "";
      flex: 1 1 auto;
      min-inline-size: 0;
      border-block-start: 1px solid var(--chirpui-border);
    }

    :scope(.chirpui-separator--vertical) {
      align-self: stretch;
      inline-size: 1px;
      min-block-size: 1.5rem;
      background: var(--chirpui-border);
    }

    :scope(.chirpui-separator--vertical)::before,
    :scope(.chirpui-separator--vertical)::after {
      content: none;
    }

    .chirpui-separator__label {
      flex: 0 0 auto;
      color: var(--chirpui-text-muted);
      font-family: var(--chirpui-ui-font-family);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
  }

  @scope (.chirpui-aspect-ratio) {
    :scope {
      position: relative;
      display: block;
      inline-size: 100%;
      overflow: hidden;
      border-radius: inherit;
      aspect-ratio: var(--chirpui-aspect-ratio, 16 / 9);
    }

    .chirpui-aspect-ratio__inner {
      position: absolute;
      inset: 0;
      min-inline-size: 0;
      min-block-size: 0;
    }

    .chirpui-aspect-ratio__inner > :where(img, video, canvas, iframe, embed, object) {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  @scope (.chirpui-label) {
    :scope {
      display: inline-flex;
      align-items: baseline;
      gap: var(--chirpui-spacing-xs);
      color: var(--chirpui-text);
      font-size: var(--chirpui-ui-sm);
      font-weight: var(--chirpui-ui-font-weight-medium);
      line-height: var(--chirpui-line-height-tight);
    }

    .chirpui-label__text {
      min-inline-size: 0;
    }

    .chirpui-label__required {
      color: var(--chirpui-error);
    }

    .chirpui-label__hint {
      color: var(--chirpui-text-muted);
      font-size: var(--chirpui-ui-xs);
      font-weight: var(--chirpui-ui-font-weight-normal);
    }
  }

  @scope (.chirpui-toggle-group) {
    :scope {
      display: inline-flex;
      align-items: stretch;
      gap: 0;
      min-inline-size: 0;
      border: 1px solid var(--chirpui-border);
      border-radius: var(--chirpui-radius);
      background: var(--chirpui-surface);
      padding: 0.125rem;
    }

    :scope(.chirpui-toggle-group--vertical) {
      flex-direction: column;
    }

    :scope(.chirpui-toggle-group--horizontal) {
      flex-direction: row;
    }

    :scope(.chirpui-toggle-group--single),
    :scope(.chirpui-toggle-group--multiple) {
      isolation: isolate;
    }

    :scope(.chirpui-toggle-group--outline) {
      background: transparent;
    }

    .chirpui-toggle-group__item {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--chirpui-spacing-xs);
      min-block-size: var(--chirpui-control-block-size-sm);
      min-inline-size: 2.25rem;
      padding: 0.375rem 0.65rem;
      border-radius: calc(var(--chirpui-radius) - 0.125rem);
      color: var(--chirpui-text-muted);
      cursor: pointer;
      font-size: var(--chirpui-ui-sm);
      font-weight: var(--chirpui-ui-font-weight-medium);
      line-height: 1;
      user-select: none;
      transition:
        background var(--chirpui-transition),
        color var(--chirpui-transition),
        box-shadow var(--chirpui-transition);
    }

    .chirpui-toggle-group__item:hover {
      color: var(--chirpui-text);
      background: color-mix(in srgb, var(--chirpui-accent) 8%, transparent);
    }

    .chirpui-toggle-group__item:has(.chirpui-toggle-group__input:focus-visible) {
      outline: 2px solid var(--chirpui-focus-ring);
      outline-offset: 2px;
    }

    .chirpui-toggle-group__item--pressed,
    .chirpui-toggle-group__item:has(.chirpui-toggle-group__input:checked) {
      color: var(--chirpui-text);
      background: var(--chirpui-surface-alt);
      box-shadow: var(--chirpui-shadow-xs);
    }

    .chirpui-toggle-group__item--disabled,
    .chirpui-toggle-group__item:has(.chirpui-toggle-group__input:disabled) {
      cursor: not-allowed;
      opacity: 0.52;
    }

    .chirpui-toggle-group__icon {
      display: inline-grid;
      place-items: center;
      inline-size: 1em;
      block-size: 1em;
    }

    .chirpui-toggle-group__label {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }

    :scope(.chirpui-toggle-group--sm) .chirpui-toggle-group__item {
      min-block-size: 1.65rem;
      padding: 0.25rem 0.45rem;
      font-size: var(--chirpui-ui-xs);
    }

    :scope(.chirpui-toggle-group--lg) .chirpui-toggle-group__item {
      min-block-size: var(--chirpui-control-block-size);
      padding: 0.5rem 0.8rem;
      font-size: var(--chirpui-ui-base);
    }
  }

  @scope (.chirpui-slider) {
    :scope {
      display: grid;
      gap: var(--chirpui-spacing-xs);
      min-inline-size: 0;
      color: var(--chirpui-text);
    }

    :scope(.chirpui-slider--disabled) {
      opacity: 0.58;
    }

    .chirpui-slider__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--chirpui-spacing-sm);
      min-inline-size: 0;
    }

    .chirpui-slider__label {
      color: var(--chirpui-text);
      font-size: var(--chirpui-ui-sm);
      font-weight: var(--chirpui-ui-font-weight-medium);
    }

    .chirpui-slider__value {
      color: var(--chirpui-text-muted);
      font-family: var(--chirpui-code-font-family);
      font-size: var(--chirpui-ui-xs);
      font-variant-numeric: tabular-nums;
    }

    .chirpui-slider__input {
      inline-size: 100%;
      min-block-size: var(--chirpui-control-block-size-sm);
      margin: 0;
      accent-color: var(--chirpui-accent);
    }

    .chirpui-slider__input:focus-visible {
      outline: 2px solid var(--chirpui-focus-ring);
      outline-offset: 2px;
    }

    :scope(.chirpui-slider--sm) .chirpui-slider__input {
      min-block-size: 1.65rem;
    }

    :scope(.chirpui-slider--lg) .chirpui-slider__input {
      min-block-size: var(--chirpui-control-block-size);
    }
  }

  @scope (.chirpui-scroll-area) {
    :scope {
      position: relative;
      min-inline-size: 0;
      max-block-size: var(--chirpui-scroll-area-max-block-size, none);
    }

    .chirpui-scroll-area__viewport {
      min-inline-size: 0;
      max-block-size: inherit;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    :scope(.chirpui-scroll-area--vertical) .chirpui-scroll-area__viewport {
      overflow-x: hidden;
      overflow-y: auto;
    }

    :scope(.chirpui-scroll-area--horizontal) .chirpui-scroll-area__viewport {
      overflow-x: auto;
      overflow-y: hidden;
    }

    :scope(.chirpui-scroll-area--both) .chirpui-scroll-area__viewport {
      overflow: auto;
    }

    :scope(.chirpui-scroll-area--fade)::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 2rem;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--chirpui-surface));
    }
  }

  @scope (.chirpui-item) {
    :scope {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: var(--chirpui-spacing-sm);
      min-inline-size: 0;
      min-block-size: var(--chirpui-control-block-size);
      padding: var(--chirpui-spacing-sm);
      border-radius: var(--chirpui-radius-sm);
      color: var(--chirpui-text);
      text-decoration: none;
    }

    :scope:is(a):hover {
      background: color-mix(in srgb, var(--chirpui-accent) 8%, transparent);
    }

    :scope:is(a):focus-visible {
      outline: 2px solid var(--chirpui-focus-ring);
      outline-offset: 2px;
    }

    :scope(.chirpui-item--selected) {
      background: color-mix(in srgb, var(--chirpui-accent) 12%, transparent);
      color: var(--chirpui-text);
    }

    :scope(.chirpui-item--disabled) {
      opacity: 0.55;
      pointer-events: none;
    }

    .chirpui-item__icon {
      display: inline-grid;
      place-items: center;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      color: var(--chirpui-text-muted);
    }

    .chirpui-item__content {
      display: grid;
      gap: var(--chirpui-spacing-2xs);
      min-inline-size: 0;
    }

    .chirpui-item__title {
      overflow: hidden;
      color: currentColor;
      font-size: var(--chirpui-ui-sm);
      font-weight: var(--chirpui-ui-font-weight-medium);
      line-height: var(--chirpui-line-height-tight);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chirpui-item__description {
      overflow: hidden;
      color: var(--chirpui-text-muted);
      font-size: var(--chirpui-ui-xs);
      line-height: var(--chirpui-line-height-tight);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chirpui-item__meta,
    .chirpui-item__action {
      color: var(--chirpui-text-muted);
      font-size: var(--chirpui-ui-xs);
      white-space: nowrap;
    }
  }

  @scope (.chirpui-data-table) {
    :scope {
      display: grid;
      gap: var(--chirpui-spacing-md);
      min-inline-size: 0;
    }

    :scope(.chirpui-data-table--compact) {
      gap: var(--chirpui-spacing-sm);
    }

    .chirpui-data-table__header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: var(--chirpui-spacing-md);
      min-inline-size: 0;
    }

    .chirpui-data-table__summary {
      display: grid;
      gap: var(--chirpui-spacing-2xs);
      min-inline-size: 0;
    }

    .chirpui-data-table__title {
      margin: 0;
      color: var(--chirpui-text);
      font-size: var(--chirpui-ui-lg);
      line-height: var(--chirpui-line-height-tight);
    }

    .chirpui-data-table__description {
      margin: 0;
      color: var(--chirpui-text-muted);
      font-size: var(--chirpui-ui-sm);
      line-height: var(--chirpui-line-height-normal);
    }

    .chirpui-data-table__filters,
    .chirpui-data-table__body,
    .chirpui-data-table__footer {
      min-inline-size: 0;
    }

    .chirpui-data-table__footer {
      display: flex;
      justify-content: flex-end;
    }

    @media (max-width: 42rem) {
      .chirpui-data-table__header {
        align-items: stretch;
        flex-direction: column;
      }

      .chirpui-data-table__footer {
        justify-content: flex-start;
      }
    }
  }
}

/* === partials/169_data-grid.css === */
/* ==========================================================================
   Data Grid (#200) — server-driven interactive grid composite
   ========================================================================== */
@layer chirpui.component {
    @scope (.chirpui-data-grid) to (.chirpui-data-grid .chirpui-data-grid) {
        :scope {
            display: flex;
            flex-direction: column;
            gap: var(--chirpui-spacing-sm);
            box-sizing: border-box;
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        .chirpui-data-grid__header {
            display: flex;
            flex-direction: column;
            gap: var(--chirpui-spacing-2xs);
        }

        .chirpui-data-grid__title {
            margin: 0;
            font-size: var(--chirpui-font-lg);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            line-height: var(--chirpui-line-height-tight);
            overflow-wrap: anywhere;
        }

        .chirpui-data-grid__description {
            margin: 0;
            font-size: var(--chirpui-font-sm);
            color: var(--chirpui-text-muted);
        }

        .chirpui-data-grid__filters {
            min-inline-size: 0;
        }

        .chirpui-data-grid__selection {
            min-inline-size: 0;
        }

        .chirpui-data-grid__body {
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        .chirpui-data-grid__table {
            min-inline-size: 100%;
        }

        .chirpui-data-grid__load-more {
            display: flex;
            justify-content: center;
            padding-block-start: var(--chirpui-spacing-sm);
        }

        .chirpui-data-grid__load-more-btn {
            min-inline-size: 12rem;
        }

        .chirpui-data-grid__footer {
            display: flex;
            justify-content: center;
        }

        &.chirpui-data-grid--compact {
            gap: var(--chirpui-spacing-xs);
        }
    }
}

/* === partials/170_context-menu.css === */
/* ==========================================================================
   Context Menu — right-click / keyboard menu anchored at the pointer.
   @layer + @scope envelope (see docs/plans/PLAN-css-scope-and-layer.md).

   The region is a focusable trigger; the panel is position: fixed at the
   pointer (clientX/clientY) and clamped to the viewport by the Alpine factory.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-context-menu) to (.chirpui-context-menu .chirpui-context-menu) {
        /* Root is layout-transparent (it only hosts the trigger + the fixed
           panel); the trigger carries the box, so it is the focusable region. */
        :scope {
            display: contents;
        }

        & .chirpui-context-menu__target {
            display: block;
            cursor: context-menu;
        }

        & .chirpui-context-menu__target:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }

        & .chirpui-context-menu__panel {
            position: fixed;
            z-index: var(--chirpui-z-popover);
            min-inline-size: 10rem;
            max-inline-size: min(20rem, calc(100vw - 1rem));
            max-block-size: calc(100dvh - 1rem);
            overflow-y: auto;
            padding: var(--chirpui-spacing-xs);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius-sm);
            background: var(--chirpui-surface);
            box-shadow: var(--chirpui-elevation-floating);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-normal);
        }

        & .chirpui-context-menu__item {
            display: flex;
            align-items: center;
            gap: var(--chirpui-spacing-sm);
            inline-size: 100%;
            box-sizing: border-box;
            min-inline-size: 0;
            padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
            border: none;
            background: none;
            color: var(--chirpui-text);
            font-family: var(--chirpui-ui-font-family);
            font-size: var(--chirpui-font-sm);
            font-weight: var(--chirpui-ui-font-weight-medium);
            line-height: var(--chirpui-line-height-tight);
            text-align: start;
            text-decoration: none;
            cursor: pointer;
            border-radius: var(--chirpui-radius-sm);
            overflow-wrap: anywhere;
        }

        & .chirpui-context-menu__item:hover {
            background: var(--chirpui-muted-bg);
        }

        & .chirpui-context-menu__item:focus {
            background: var(--chirpui-muted-bg);
            outline: var(--chirpui-state-focus-outline);
            outline-offset: -2px;
        }

        /* Danger text mixed toward the foreground so it clears WCAG AA contrast
           in both themes (raw --chirpui-error is mid-lightness and fails on a
           white surface). Hover/focus reuse the neutral base highlight rather
           than a red-on-red tint. */
        & .chirpui-context-menu__item--danger {
            color: color-mix(in oklab, var(--chirpui-error) 68%, var(--chirpui-text));
        }

        & .chirpui-context-menu__item--muted {
            color: var(--chirpui-text-muted);
        }

        & .chirpui-context-menu__item[aria-disabled="true"] {
            color: var(--chirpui-text-muted);
            opacity: 0.55;
            cursor: default;
        }

        & .chirpui-context-menu__item[aria-disabled="true"]:hover {
            background: none;
        }

        & .chirpui-context-menu__icon {
            flex: 0 0 auto;
            opacity: 0.8;
        }
    }
}

/* === partials/171_combobox.css === */
/* ==========================================================================
   Combobox / autocomplete — role="combobox" input over a filtered listbox.
   @layer + @scope envelope (see docs/plans/PLAN-css-scope-and-layer.md).

   The list is absolutely anchored under the input (the root is positioned);
   filtering/roving is owned by the chirpuiCombobox Alpine factory.
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-combobox) to (.chirpui-combobox .chirpui-combobox) {
        :scope {
            position: relative;
            display: block;
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        & .chirpui-combobox__label {
            display: block;
            margin-block-end: var(--chirpui-spacing-2xs);
            font-size: var(--chirpui-ui-sm);
            font-weight: var(--chirpui-ui-font-weight-medium);
            color: var(--chirpui-text);
        }

        & .chirpui-combobox__input {
            display: block;
            inline-size: 100%;
            max-inline-size: 100%;
            min-inline-size: 0;
            box-sizing: border-box;
            min-block-size: var(--chirpui-control-block-size);
            padding: var(--chirpui-spacing-sm);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius-sm);
            font: inherit;
            line-height: var(--chirpui-line-height-normal);
            background: var(--chirpui-surface);
            color: var(--chirpui-text);
            transition:
                border-color var(--chirpui-transition),
                box-shadow var(--chirpui-transition);
        }

        & .chirpui-combobox__input:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }

        & .chirpui-combobox__list {
            position: absolute;
            inset-inline: 0;
            z-index: var(--chirpui-z-popover);
            margin-block-start: var(--chirpui-spacing-2xs);
            padding: var(--chirpui-spacing-2xs);
            list-style: none;
            max-block-size: 16rem;
            overflow-y: auto;
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius-sm);
            background: var(--chirpui-surface);
            box-shadow: var(--chirpui-elevation-floating);
        }

        & .chirpui-combobox__option {
            display: block;
            padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
            border-radius: var(--chirpui-radius-sm);
            color: var(--chirpui-text);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-tight);
            cursor: pointer;
            min-inline-size: 0;
            overflow-wrap: anywhere;
        }

        & .chirpui-combobox__option--active,
        & .chirpui-combobox__option:hover {
            background: var(--chirpui-muted-bg);
        }

        & .chirpui-combobox__empty {
            padding: var(--chirpui-spacing-xs) var(--chirpui-spacing-sm);
            color: var(--chirpui-text-muted);
            font-size: var(--chirpui-font-sm);
        }

        /* Multi-select: the control owns the border and wraps pills + a
           borderless flexing input; pills are removable tokens. */
        & .chirpui-combobox__control {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--chirpui-spacing-2xs);
            box-sizing: border-box;
            min-block-size: var(--chirpui-control-block-size);
            padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-xs);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius-sm);
            background: var(--chirpui-surface);
        }

        :scope.chirpui-combobox--multiple .chirpui-combobox__input {
            flex: 1 1 6rem;
            min-inline-size: 6rem;
            min-block-size: auto;
            padding: var(--chirpui-spacing-2xs);
            border: none;
            background: transparent;
        }

        & .chirpui-combobox__tokens {
            display: contents;
        }

        & .chirpui-combobox__token {
            display: inline-flex;
            align-items: center;
            gap: var(--chirpui-spacing-2xs);
            max-inline-size: 100%;
            padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-xs);
            border-radius: var(--chirpui-radius-sm);
            background: var(--chirpui-muted-bg);
            color: var(--chirpui-text);
            font-size: var(--chirpui-font-sm);
            line-height: var(--chirpui-line-height-tight);
        }

        & .chirpui-combobox__token-label {
            min-inline-size: 0;
            overflow-wrap: anywhere;
        }

        & .chirpui-combobox__token-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: none;
            background: none;
            color: var(--chirpui-text-muted);
            font-size: var(--chirpui-ui-base);
            line-height: 1;
            cursor: pointer;
        }

        & .chirpui-combobox__token-remove:hover {
            color: var(--chirpui-text);
        }

        & .chirpui-combobox__token-remove:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }
    }
}

/* === partials/172_date-picker.css === */
/* ==========================================================================
   Date / range picker — readonly display input + client-rendered calendar popover.
   @layer + @scope envelope (see docs/plans/PLAN-css-scope-and-layer.md).
   ========================================================================== */

@layer chirpui.component {
    @scope (.chirpui-date-picker) to (.chirpui-date-picker .chirpui-date-picker) {
        :scope {
            position: relative;
            display: block;
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        & .chirpui-date-picker__label {
            display: block;
            margin-block-end: var(--chirpui-spacing-2xs);
            font-size: var(--chirpui-ui-sm);
            font-weight: var(--chirpui-ui-font-weight-medium);
            color: var(--chirpui-text);
        }

        & .chirpui-date-picker__control {
            position: relative;
            display: flex;
            align-items: center;
        }

        & .chirpui-date-picker__icon {
            position: absolute;
            inset-inline-start: var(--chirpui-spacing-sm);
            color: var(--chirpui-text-muted);
            pointer-events: none;
        }

        & .chirpui-date-picker__input {
            display: block;
            inline-size: 100%;
            max-inline-size: 100%;
            min-inline-size: 0;
            box-sizing: border-box;
            min-block-size: var(--chirpui-control-block-size);
            padding: var(--chirpui-spacing-sm) var(--chirpui-spacing-sm) var(--chirpui-spacing-sm)
                calc(var(--chirpui-spacing-lg) + var(--chirpui-spacing-xs));
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius-sm);
            font: inherit;
            line-height: var(--chirpui-line-height-normal);
            background: var(--chirpui-surface);
            color: var(--chirpui-text);
            cursor: pointer;
        }

        & .chirpui-date-picker__input:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }

        /* Range mode shows "start – end", so give the field room. */
        :scope.chirpui-date-picker--range .chirpui-date-picker__input {
            min-inline-size: 14rem;
        }

        & .chirpui-date-picker__popover {
            position: absolute;
            inset-inline-start: 0;
            z-index: var(--chirpui-z-popover);
            margin-block-start: var(--chirpui-spacing-2xs);
            padding: var(--chirpui-spacing-sm);
            border: 1px solid var(--chirpui-border);
            border-radius: var(--chirpui-radius-sm);
            background: var(--chirpui-surface);
            box-shadow: var(--chirpui-elevation-floating);
        }

        & .chirpui-date-picker__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--chirpui-spacing-sm);
            margin-block-end: var(--chirpui-spacing-xs);
        }

        & .chirpui-date-picker__nav {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            inline-size: var(--chirpui-control-block-size-sm);
            block-size: var(--chirpui-control-block-size-sm);
            border: none;
            border-radius: var(--chirpui-radius-sm);
            background: none;
            color: var(--chirpui-text);
            font-size: var(--chirpui-ui-base);
            cursor: pointer;
        }

        & .chirpui-date-picker__nav:hover {
            background: var(--chirpui-muted-bg);
        }

        & .chirpui-date-picker__nav:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }

        & .chirpui-date-picker__month {
            font-size: var(--chirpui-ui-sm);
            font-weight: var(--chirpui-ui-font-weight-semibold);
            color: var(--chirpui-text);
        }

        & .chirpui-date-picker__grid {
            display: block;
            min-inline-size: 16rem;
        }

        & .chirpui-date-picker__weekdays,
        & .chirpui-date-picker__week {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        & .chirpui-date-picker__weekday {
            padding-block: var(--chirpui-spacing-2xs);
            color: var(--chirpui-text-muted);
            font-size: var(--chirpui-ui-xs);
            font-weight: var(--chirpui-ui-font-weight-medium);
            text-align: center;
        }

        & .chirpui-date-picker__day {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-block-size: 2.25rem;
            border: none;
            border-radius: var(--chirpui-radius-sm);
            background: none;
            color: var(--chirpui-text);
            font: inherit;
            font-size: var(--chirpui-font-sm);
            cursor: pointer;
        }

        & .chirpui-date-picker__day:hover {
            background: var(--chirpui-muted-bg);
        }

        & .chirpui-date-picker__day:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: -2px;
        }

        & .chirpui-date-picker__day--outside {
            color: var(--chirpui-text-muted);
        }

        & .chirpui-date-picker__day--today {
            font-weight: var(--chirpui-ui-font-weight-semibold);
            box-shadow: inset 0 0 0 1px var(--chirpui-border);
        }

        & .chirpui-date-picker__day--in-range {
            background: var(--chirpui-muted-bg);
            border-radius: 0;
        }

        /* Darken the accent so white (--chirpui-on-accent) clears WCAG AA on the
           selected day in both themes; raw --chirpui-accent is too light. */
        & .chirpui-date-picker__day--selected,
        & .chirpui-date-picker__day--range-end {
            background: color-mix(in oklab, var(--chirpui-accent), black 22%);
            color: var(--chirpui-on-accent);
        }

        & .chirpui-date-picker__day:disabled {
            color: var(--chirpui-text-muted);
            opacity: 0.4;
            cursor: default;
        }

        & .chirpui-date-picker__day:disabled:hover {
            background: none;
        }

        & .chirpui-date-picker__footer {
            display: flex;
            justify-content: space-between;
            gap: var(--chirpui-spacing-sm);
            margin-block-start: var(--chirpui-spacing-xs);
        }

        & .chirpui-date-picker__today,
        & .chirpui-date-picker__clear {
            border: none;
            background: none;
            /* Accent text mixed toward the foreground so it clears AA on surface. */
            color: color-mix(in oklab, var(--chirpui-accent), var(--chirpui-text) 28%);
            font-size: var(--chirpui-ui-sm);
            font-weight: var(--chirpui-ui-font-weight-medium);
            cursor: pointer;
            padding: var(--chirpui-spacing-2xs) var(--chirpui-spacing-xs);
            border-radius: var(--chirpui-radius-sm);
        }

        & .chirpui-date-picker__today:hover,
        & .chirpui-date-picker__clear:hover {
            background: var(--chirpui-muted-bg);
        }

        & .chirpui-date-picker__today:focus-visible,
        & .chirpui-date-picker__clear:focus-visible {
            outline: var(--chirpui-state-focus-outline);
            outline-offset: var(--chirpui-state-focus-offset);
        }
    }
}