/* Demo-level layout styles only. Design tokens and component styles
   come from the SharpCompose bundle loaded before this file. */

* {
    box-sizing: border-box;
}

/* clip, not hidden: overflow-x hidden would make body a scroll container,
   which disables position: sticky for the header and docs sidebar. */
html,
body {
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, sans-serif;
    background: var(--background);
    color: var(--foreground);
}

/* body sits outside the .dark scope on .demo-app, so the canvas and the
   document scrollbar must be re-themed explicitly for dark mode. */
body:has(.demo-app.dark) {
    background: oklch(0.145 0 0);
    color-scheme: dark;
}

#blazor-error-ui {
    display: none;
}

/* Layout primitives and all cn-* component styles are generated by the
   framework itself (SharpCompose.Core.Styling) — this file holds only the
   docs-shell and preview chrome. */

/* App shell — sticky top header plus a per-section docs layout (sidebar +
   content), modeled on the BlazorCN documentation site. */

.demo-app {
    min-height: 100vh;
    gap: 0;
    background: var(--background);
    color: var(--foreground);
}

.demo-header {
    position: sticky;
    top: 0;
    /* below the framework's dropdown/popover dismiss overlay (z-index 49)
       so clicking the header while a menu is open dismisses it first. */
    z-index: 40;
    height: 3.5rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--background) 92%, transparent);
    backdrop-filter: blur(8px);
}

.demo-brand,
.demo-brand:hover {
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: transparent;
    box-shadow: none;
    color: var(--foreground);
}

.demo-top-nav {
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.demo-top-link,
.demo-top-link:hover {
    padding: 0 0.5rem;
    background: transparent;
    box-shadow: none;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

.demo-top-link:hover {
    color: var(--foreground);
}

.demo-top-link.demo-top-active {
    color: var(--foreground);
    font-weight: 500;
}

.demo-docs {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.demo-sidebar {
    width: 16rem;
    flex: 0 0 16rem;
    gap: 0.5rem;
    padding: 1.5rem 0.75rem;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 3.5rem;
    align-self: flex-start;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
}

.demo-sidebar-label {
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.demo-sidebar-items {
    gap: 0.125rem;
}

.demo-side-item,
.demo-side-item:hover {
    width: 100%;
    height: 2rem;
    padding: 0 0.75rem;
    justify-content: flex-start;
    background: transparent;
    box-shadow: none;
    color: var(--muted-foreground);
    font-weight: 400;
}

.demo-side-item:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.demo-side-item.demo-side-active {
    background: var(--accent);
    color: var(--accent-foreground);
    font-weight: 500;
}

.demo-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 72rem;
    gap: 1.5rem;
    padding: 2rem 3rem;
}

/* Full-page blocks/examples (sidebars, dashboard) are whole-page app shells, so
   they need the full width — drop the docs max-width and tighten the side
   padding so the app-shell previews aren't cramped. */
.demo-main-bleed {
    max-width: none;
    padding: 1.5rem;
}

.sc-page-heading {
    min-width: 0;
    gap: 0.375rem;
}

.sc-page-title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sc-page-subtitle {
    font-size: 1.05rem;
    color: var(--muted-foreground);
}

/* Landing hero */

.demo-home {
    flex: 1 1 auto;
    align-items: center;
    gap: 2.5rem;
    padding: 5rem 2rem;
}

.demo-hero {
    align-items: center;
    gap: 1.25rem;
    max-width: 48rem;
    text-align: center;
}

.demo-hero-title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.demo-hero-subtitle {
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

.demo-hero-actions {
    gap: 0.75rem;
}

.demo-hero-grid {
    width: 100%;
    max-width: 64rem;
}

@media (max-width: 760px) {
    .demo-header {
        height: auto;
        min-height: 3.5rem;
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
        gap: 0.25rem 0.75rem;
    }

    .demo-header > .cn-badge {
        display: none;
    }

    .demo-docs {
        flex-direction: column;
    }

    .demo-sidebar {
        position: static;
        width: 100%;
        flex: 0 0 auto;
        max-height: 15rem;
        overflow-y: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .demo-main {
        padding: 1.25rem;
    }

    .demo-hero-title {
        font-size: 2rem;
    }
}

/* ComponentPreview chrome — keeps showcase pages free of class strings. */

.demo-preview {
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.demo-preview-heading {
    gap: 0.25rem;
}

.demo-preview-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.demo-preview-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.demo-preview-canvas {
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
}

.demo-preview-canvas > .sc-hstack:not([role]) {
    flex-wrap: wrap;
    justify-content: center;
}

/* Flex centering leaves grids without a definite width, which collapses
   auto-fit columns — stretch grids (and anything containing one) instead. */
.demo-preview-canvas .sc-grid {
    width: 100%;
}

.demo-preview-canvas > .sc-vstack,
.demo-preview-canvas > .sc-card,
.demo-preview-canvas > .cn-card,
.demo-preview-canvas > .sc-group:not([data-slot]) {
    width: 100%;
}

.demo-icon-tile {
    align-items: center;
    gap: 0.375rem;
    width: 5.5rem;
    padding: 0.75rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Marketing pricing sections follow their container width, including embedded previews. */
.demo-pricing { container: pricing / inline-size; padding: 64px 16px; }
.demo-pricing-header { width: 100%; max-width: 672px; margin: 0 auto 48px; text-align: center; }
.demo-pricing-heading { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; }
.demo-pricing-intro { font-size: 18px; line-height: 28px; }
.demo-pricing-trust { text-align: center; margin-block-start: 32px; }
.demo-pricing-plans { max-width: 1024px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.demo-pricing-two { max-width: 768px; }
.demo-pricing-narrow { width: 100%; max-width: 672px; margin-inline: auto; }
.demo-pricing-plan { position: relative; }
.demo-pricing-plan > .cn-card-header { padding-block-end: 16px; }
.demo-pricing-plan .cn-card-title { font-size: 18px; line-height: 28px; }
.demo-pricing-plan > .cn-card-content { flex: 1; }
.demo-pricing-plan > .cn-card-footer { padding-block-start: 16px; }
.demo-pricing-plan > .cn-card-footer > .cn-button { width: 100%; }
.demo-pricing-plan .cn-card-header > .demo-pricing-price { margin-block-start: 4px; }
.demo-pricing-recommendation { position: absolute; inset-block-start: -12px; inset-inline-end: 16px; }
.demo-pricing-billing-plan > .demo-pricing-recommendation { inset-inline-end: auto; left: 50%; transform: translateX(-50%); }
.demo-pricing-popular { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 20%, transparent), 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; }
.demo-pricing-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-pricing-price > * { flex-shrink: 0; }
.demo-pricing-suffix { font-size: 14px; color: var(--muted-foreground); }
.demo-pricing-feature > :last-child { overflow-wrap: anywhere; }
.demo-pricing-feature .cn-icon { color: var(--primary); }
.demo-pricing-excluded .cn-icon { color: var(--muted-foreground); }
.demo-pricing-inverted { background: var(--foreground); color: var(--background); }
.demo-pricing-inverted .cn-card-description { color: color-mix(in oklab, var(--background) 70%, var(--foreground)); }
.demo-pricing-inverted .demo-pricing-price > :last-child { color: color-mix(in oklab, var(--background) 70%, var(--foreground)); }
.demo-pricing-inverted .demo-pricing-feature .cn-icon { color: color-mix(in oklab, var(--background) 80%, var(--foreground)); }
.demo-pricing-inverted .cn-card-header .cn-badge { background: color-mix(in oklab, var(--background) 15%, transparent); color: var(--background); border: 0; }
.demo-pricing-forward:dir(rtl) { transform: scaleX(-1); }
.demo-pricing-billing-control { margin-block-start: 16px; flex-wrap: wrap; justify-content: center; }
.demo-pricing-usage-header { text-align: center; justify-items: center; }
.demo-pricing-slider { padding-inline: 8px; }
.demo-pricing-tiers { justify-content: space-between; }
.demo-pricing-tier { min-width: 0; padding-inline: 0; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.demo-pricing-tier[aria-pressed="true"], .demo-pricing-tier:hover { color: var(--primary); background: transparent; }
.demo-pricing-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.demo-pricing-usage-actions { flex-direction: column; align-items: stretch; }
.demo-pricing-usage-actions > .cn-button { width: 100%; }
.demo-pricing-addon-summary { justify-content: space-between; align-items: flex-start; }
.demo-pricing-addon-summary > :last-child { flex-shrink: 0; }
.demo-pricing-addons { padding: 0; gap: 0; }
.demo-pricing-addons > .cn-card-content { padding: 0; }
.demo-pricing-addon-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 24px; border-block-end: 1px solid var(--border); }
.demo-pricing-addon-row:last-child { border-block-end: 0; }
.demo-pricing-addon-row .demo-pricing-price > :last-child { font-size: 12px; }
.demo-pricing-comparison { width: 100%; max-width: 896px; margin-inline: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.demo-pricing-comparison table.cn-table { min-width: 680px; }
.demo-pricing-comparison thead th { text-align: center; vertical-align: bottom; color: var(--foreground); }
.demo-pricing-comparison thead th:first-child { width: 200px; text-align: start; vertical-align: middle; }
.demo-pricing-feature-name { text-align: start; height: auto; font-weight: 400; color: var(--foreground); }
.demo-pricing-comparison .cn-icon[aria-label="Included"] { color: #16a34a; }
.demo-pricing-pro-column .cn-icon[aria-label="Included"] { color: var(--primary); }
.demo-pricing-tier-header { padding-block: 12px; align-items: center; }
.demo-pricing-tier-header .demo-pricing-suffix { font-size: 12px; }
.demo-pricing-tier-header .cn-button { width: 100%; margin-block-start: 8px; }
.demo-pricing-pro-column { background: color-mix(in oklab, var(--primary) 5%, transparent); border-inline: 2px solid var(--primary); }
th.demo-pricing-pro-column { border-block-start: 2px solid var(--primary); }
.demo-pricing-category { background: color-mix(in oklab, var(--muted) 40%, transparent); }
.demo-pricing-category td { letter-spacing: 0.05em; }
.demo-pricing-feature-help { gap: 6px; cursor: help; border-radius: 2px; }
.demo-pricing-feature-help:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@container pricing (min-width: 640px) {
    .demo-pricing-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-pricing-usage-actions { flex-direction: row; }
    .demo-pricing-usage-actions > .cn-button { flex: 1; }
}
@media (min-width: 768px) { .demo-pricing { padding-block: 96px; } }
@container pricing (min-width: 768px) {
    .demo-pricing-heading { font-size: 36px; line-height: 40px; }
    .demo-pricing-header { margin-block-end: 64px; }
    .demo-pricing-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .demo-pricing-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .demo-pricing-popular { transform: scale(1.05); }
}
@container pricing (min-width: 1024px) {
    .demo-pricing-heading { font-size: 48px; line-height: 48px; }
    .demo-pricing-plans { gap: 24px; }
}
@container pricing (max-width: 400px) {
    .demo-pricing-addon-summary { flex-wrap: wrap; }
    .demo-pricing-addon-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding-inline: 16px; }
    .demo-pricing-addon-row > .demo-pricing-price { grid-column: 2; }
}

/* Settings and billing share the reference's compact card sections. Rows respond to the
   card's own space, including when embedded in a narrow desktop column. */
.demo-compact-block { container: compact-block / inline-size; }
.demo-settings { container-name: compact-block settings; }
.demo-compact-card { gap: 0; padding: 0; border-radius: var(--radius); box-shadow: none; overflow-wrap: anywhere; }
.demo-compact-card > .cn-card-header { padding: 12px 16px; gap: 4px 12px; border-block-end: 1px solid var(--border); }
.demo-compact-card > .cn-card-header .cn-card-title { font-size: 14px; font-weight: 500; line-height: 20px; }
.demo-compact-card > .cn-card-header .cn-card-description { font-size: 12px; }
.demo-compact-card > .cn-card-content { padding: 0; }
.demo-compact-card > .cn-card-footer { padding: 12px 16px; border-block-start: 1px solid var(--border); }
.demo-settings-danger, .demo-settings-danger > .cn-card-header,
.demo-settings-danger .cn-button-variant-outline { border-color: color-mix(in oklab, var(--destructive) 25%, transparent); }
.demo-compact-section { padding: 16px; border-block-end: 1px solid var(--border); }
.demo-compact-row { flex-wrap: wrap; padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-compact-row-content { flex: 1 1 220px; min-width: 0; }
.demo-compact-actions { flex-shrink: 0; max-width: 100%; margin-inline-start: auto; }
.demo-compact-details { min-width: 0; }
/* Remove trailing separators on top-level content/ForEach and authored compact
   rows, preserving borders inside nested controls such as card-style radios. */
.demo-compact-card > .cn-card-content > :last-child,
.demo-compact-card > .cn-card-content > .sc-group:not([data-slot]):last-child > :last-child,
.demo-compact-card > .cn-card-content .sc-group:last-child > :is(.demo-compact-row, .demo-compact-section):last-child { border-block-end: 0; }
.demo-compact-card .cn-button-size-sm { height: var(--demo-compact-button-height, 28px); font-size: 12px; }
.demo-compact-card .cn-input, .demo-compact-card .cn-select { height: 32px; font-size: 14px; }
.demo-compact-card .cn-select { padding-block: 4px; }
.demo-compact-card .cn-textarea { min-height: 80px; font-size: 14px; field-sizing: fixed; }

/* Calendar compositions share section chrome; the month grids keep equal columns. */
.demo-calendar-block { container-name: compact-block calendar-block; --demo-compact-button-height: 28px; }
.demo-calendar-block .demo-compact-card { border-radius: 8px; overflow: hidden; }
.demo-calendar-block .cn-card-description { line-height: 16px; }
.demo-calendar-block .cn-card-header { row-gap: 0; }
.demo-calendar-block .demo-calendar-rsvp-header { row-gap: 4px; }
.demo-calendar-block .demo-compact-section { padding: 12px 16px; gap: 8px; }
.demo-calendar-block .cn-button { max-width: 100%; white-space: normal; }
.demo-calendar-block .cn-button-size-sm { height: auto; min-height: 28px; padding-block: 4px; line-height: 16px; }
.demo-calendar-block .cn-button > .sc-hstack { min-width: 0; }
.demo-calendar-block .cn-badge { font-size: 12px; line-height: 16px; font-weight: 400; padding-block: 1px; }
.demo-calendar-block .cn-card-header > .cn-card-action { max-width: 100%; display: flex; align-items: center; }
.demo-calendar-block .cn-card-action > .sc-hstack { flex-wrap: wrap; }
.demo-calendar-grow { flex: 1 1 0%; min-width: 0; }
.demo-calendar-summary { justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.demo-calendar-summary > :last-child { margin-inline-start: auto; }
.demo-calendar-navigation { direction: ltr; flex-shrink: 0; }
.demo-calendar-navigation .cn-button { width: 28px; height: 28px; min-height: 28px; padding: 0; }
.demo-calendar-mini-header .cn-button { width: 24px; height: 24px; min-height: 24px; }
.demo-calendar-block .demo-calendar-mini-footer { padding-block: 8px; }
.demo-calendar-outside { height: 36px; display: flex; align-items: center; justify-content: center; color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); }
.demo-calendar-month-grid, .demo-calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.demo-calendar-weekdays > * { height: 28px; display: flex; align-items: center; justify-content: center; }
.demo-calendar-mini-grid { padding: 8px 12px; }
.demo-calendar-month-grid .cn-button { min-width: 0; width: 100%; padding: 0; height: 36px; border: 0; border-radius: 4px; }
.demo-calendar-mini-day > .sc-vstack { align-items: center; gap: 0 !important; }
.demo-calendar-day-number { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
.demo-calendar-mini-day[aria-pressed="true"] .demo-calendar-day-number { background: var(--muted); font-weight: 500; }
.demo-calendar-mini-day[data-today="true"] .demo-calendar-day-number { background: var(--foreground); color: var(--background); font-weight: 500; }
.demo-calendar-event-dots { height: 10px; justify-content: center; }
.demo-calendar-event-dots > .sc-group { line-height: 10px !important; }
.demo-calendar-date-strip { border-block-end: 1px solid var(--border); direction: ltr; }
.demo-calendar-date-strip > .cn-button { padding: 0; width: 28px; height: 28px; flex-shrink: 0; }
.demo-calendar-booking-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
.demo-calendar-booking-date.cn-button { height: auto; border: 0; padding: 8px 12px; border-radius: 0; }
.demo-calendar-booking-date > .sc-vstack { align-items: center; }
.demo-calendar-date-compact { display: none; }
.demo-calendar-booking-date:not([aria-pressed="true"]) .demo-calendar-date-wide:first-child { color: var(--muted-foreground) !important; }
.demo-calendar-booking-date[aria-pressed="true"] { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-calendar-booking-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.demo-calendar-booking-slot.cn-button { height: auto; padding: 8px 12px; min-height: 34px; }
.demo-calendar-booking-slot:disabled { border-color: transparent; background: var(--muted); }
.demo-calendar-confirmation { padding: 48px 16px; text-align: center; }
.demo-calendar-confirmation > .sc-vstack { align-items: center; }
.demo-calendar-confirmation > .cn-button { margin-block-start: 4px; }
.demo-calendar-confirm-icon { color: #059669; }
.dark .demo-calendar-confirm-icon { color: #34d399; }
.demo-calendar-separated { border-block-end: 1px solid var(--border); }
.demo-calendar-separated:last-child { border-block-end: 0; }
.demo-calendar-agenda-date { padding: 8px 16px; flex-wrap: wrap; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-calendar-block .demo-calendar-disclosure { display: block; height: auto; width: 100%; padding: 12px 16px; border: 0; border-radius: 0; text-align: start; }
.demo-calendar-disclosure > .sc-hstack { justify-content: flex-start; }
.demo-calendar-disclosure:focus-visible, .demo-calendar-booking-date:focus-visible { outline-offset: -3px; }
.demo-calendar-agenda-time { width: 64px; flex-shrink: 0; }
.demo-calendar-agenda-meta { flex-wrap: wrap; }
.demo-calendar-agenda-meta .sc-hstack { flex-wrap: wrap; }
.demo-calendar-agenda-panel { padding: 0 16px 12px; padding-inline-start: 92px; }
.demo-calendar-agenda-day + .demo-calendar-agenda-day { border-block-start: 1px solid var(--border); }
.demo-calendar-agenda-day:not(:last-child) > .sc-group > .demo-calendar-separated:last-child { border-block-end: 1px solid var(--border); }
.demo-calendar-block .demo-calendar-details-action { min-height: 24px; height: 24px; padding: 0 8px; }
.demo-calendar-response-row { flex-wrap: wrap; }
.demo-calendar-guest-summary > .sc-hstack { flex-wrap: wrap; }
.demo-calendar-guest { padding: 10px 16px; }
.demo-calendar-guest .cn-avatar { flex-shrink: 0; }
.demo-calendar-guest .cn-avatar-fallback { font-size: 12px; font-weight: 500; color: var(--foreground); }
.demo-calendar-guest > :last-child { flex-shrink: 0; }
.demo-calendar-habit-summary > .sc-hstack { flex-wrap: wrap; }
.demo-calendar-block .demo-calendar-habit-summary { padding-block: 10px; }
.demo-calendar-habit-grid { padding: 0 16px 12px; }
.demo-calendar-habit-grid .demo-calendar-month-grid { gap: 4px; }
.demo-calendar-month-grid .demo-calendar-habit-day { height: 34px; padding: 4px; border-radius: 6px; }
.demo-calendar-habit-day[data-today="true"]:not(:focus-visible) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 20%, transparent); }
.demo-calendar-habit-day:disabled { opacity: .3; }
.demo-calendar-streak-icon { color: #b45309; }
.dark .demo-calendar-streak-icon { color: #fbbf24; }
.demo-calendar-availability-header, .demo-calendar-availability-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0; }
.demo-calendar-availability-header { border-block-end: 1px solid var(--border); }
.demo-calendar-availability-row { border-block-end: 1px solid var(--border); align-items: stretch; }
.demo-calendar-availability-row:last-child { border-block-end: 0; }
.demo-calendar-availability-header > .sc-group:first-child { padding: 10px 12px; border-inline-end: 1px solid var(--border); }
.demo-calendar-availability-header > .sc-group:last-child, .demo-calendar-hours { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.demo-calendar-availability-header > .sc-group:last-child > * { text-align: center; padding: 10px 0; border-inline-end: 1px solid var(--border); }
.demo-calendar-availability-header > .sc-group:last-child > :last-child { border-inline-end: 0; }
.demo-calendar-day-switch { padding: 10px 12px; border-inline-end: 1px solid var(--border); gap: 8px; font-size: 12px; }
.demo-calendar-block .demo-calendar-hour { height: auto; min-height: 36px; padding: 4px; border: 0; border-inline-end: 1px solid var(--border); border-radius: 0; }
.demo-calendar-hour:last-child { border-inline-end: 0; }
.demo-calendar-hour[aria-pressed="true"] { background: #10b98126; }
.demo-calendar-hour[aria-pressed="true"]:hover { background: #10b98140; }
.demo-calendar-hour:disabled { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-calendar-hour:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.demo-calendar-hour-label { display: none; }
.demo-calendar-block .cn-card:has(.demo-calendar-hours) > .cn-card-footer { padding-block: 8px; }
@container calendar-block (max-width: 560px) {
    .demo-calendar-booking-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-calendar-availability-header { display: none; }
    .demo-calendar-availability-row { display: flex; flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 8px; }
    .demo-calendar-day-switch { border: 0; padding: 0; width: fit-content; }
    .demo-calendar-hours { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .demo-calendar-hour-label { display: block; }
    .demo-calendar-block .demo-calendar-hour { border: 1px solid var(--border); border-radius: 4px; min-height: 42px; }
}
@container calendar-block (max-width: 400px) {
    .demo-calendar-agenda-time { width: auto; grid-column: 2; grid-row: 2; }
    .demo-calendar-disclosure > .sc-hstack:has(.demo-calendar-agenda-time) { display: grid; grid-template-columns: 8px minmax(0, 1fr) 16px; gap: 6px 8px; }
    .demo-calendar-agenda-time + .cn-circle { grid-column: 1; grid-row: 1; }
    .demo-calendar-disclosure .demo-calendar-grow { grid-column: 2; grid-row: 1; }
    .demo-calendar-disclosure:has(.demo-calendar-agenda-time) > .sc-hstack > svg:last-child { grid-column: 3; grid-row: 1; }
    .demo-calendar-agenda-panel { padding-inline-start: 16px; }
    .demo-calendar-booking-date.cn-button { padding-inline: 2px; }
    .demo-calendar-booking-date .sc-group { overflow-wrap: normal; }
    .demo-calendar-booking-date .demo-calendar-date-wide { display: none; }
    .demo-calendar-booking-date .demo-calendar-date-compact { display: flex; align-items: center; }
    .demo-calendar-booking-slot.cn-button { padding-inline: 4px; }
    .demo-calendar-booking-slot svg { display: none; }
    .demo-calendar-guest { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; }
    .demo-calendar-guest > :last-child { grid-column: 2; }
}

@container calendar-block (max-width: 300px) {
    .demo-calendar-booking-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Storefront reference cards share compact chrome and native selection controls. */
.demo-storefront { container-name: compact-block storefront; --demo-compact-button-height: 32px; }
.demo-storefront .demo-compact-card { overflow: hidden; border-radius: 8px; }
.demo-storefront .demo-compact-card > .cn-card-header { gap: 2px 12px; }
.demo-storefront .cn-card-description { line-height: 16px; }
.demo-storefront .demo-compact-section { padding: 12px 16px; gap: 8px; }
.demo-storefront .demo-compact-section:last-child { border-block-end: 0; }
.demo-storefront .cn-button { white-space: normal; max-width: 100%; }
.demo-storefront .cn-button-size-sm { min-height: var(--demo-compact-button-height); height: auto; padding-block: 4px; }
.demo-storefront .cn-button > .sc-hstack { min-width: 0; flex-wrap: wrap; }
.demo-storefront .cn-input { font-size: 12px; }
.demo-storefront-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.demo-storefront-placeholder { display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--muted) 50%, transparent); color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.demo-storefront-category.cn-button { display: block; height: auto; padding: 0; border: 0; border-radius: 0; background: var(--card); text-align: start; }
.demo-storefront-category:hover, .demo-storefront-category[aria-pressed="true"] { background: color-mix(in oklab, var(--muted) 50%, var(--card)); }
.demo-storefront-category:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.demo-storefront-category-copy { padding: 12px 16px; }
.demo-storefront-products { gap: 0; }
.demo-storefront-tabs-strip { padding: 8px 16px; border-block-end: 1px solid var(--border); }
.demo-storefront-tabs-strip .cn-tabs-list { max-width: 100%; height: auto; min-height: 36px; }
.demo-storefront-tabs-strip .cn-tabs-trigger { flex: 0 1 auto; min-width: 0; white-space: normal; height: auto; min-height: 28px; font-size: 14px; }
.demo-storefront-products .cn-tabs-content { margin: 0; }
.demo-storefront-product { padding: 16px; background: var(--card); --demo-compact-button-height: 28px; }
.demo-storefront-product-image { border-radius: 6px; overflow: hidden; margin-block-end: 12px; }
.demo-storefront-product-name { margin-block-end: 4px; flex-wrap: wrap; }
.demo-storefront-tag { display: inline-flex; width: fit-content; padding: 2px 6px; border-radius: 4px; background: color-mix(in oklab, var(--primary) 10%, transparent); }
.demo-storefront-price-row { justify-content: space-between; flex-wrap: wrap; }
.demo-storefront-price-row > :last-child { margin-inline-start: auto; }
.demo-storefront-total { border-block-start: 1px solid var(--border); padding-block-start: 8px; margin-block-start: 4px; }
.demo-storefront-cart-totals.demo-compact-section { gap: 6px; }
.demo-storefront-cart-row { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-storefront-cart-details { flex: 1 1 0%; }
.demo-storefront-cart-actions { align-items: flex-end; }
.demo-storefront-empty { padding-block: 32px !important; }
.demo-storefront-colors { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.demo-storefront-colors .cn-radio-item { position: relative; width: 28px; height: 28px; border-radius: 50%; }
.demo-storefront-colors .cn-radio-control, .demo-storefront-sizes .cn-radio-control { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.demo-storefront-colors .cn-radio, .demo-storefront-sizes .cn-radio { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.demo-storefront-swatch { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--swatch); color: var(--swatch-ink); }
.demo-storefront-swatch svg { visibility: hidden; }
.demo-storefront-colors .cn-radio-item:has(:checked) .demo-storefront-swatch { border-color: var(--foreground); transform: scale(1.1); }
.demo-storefront-colors .cn-radio-item:has(:checked) svg { visibility: visible; }
.demo-storefront-colors .cn-radio-item:has(:focus-visible), .demo-storefront-sizes .cn-radio-item:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; }
.demo-storefront-sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.demo-storefront-sizes .cn-radio-item { position: relative; justify-content: center; height: 36px; border: 1px solid var(--border); border-radius: 6px; text-align: center; }
.demo-storefront-sizes .cn-radio-item:has(:checked) { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.demo-storefront-sizes .cn-radio-item:has(:disabled) { text-decoration: line-through; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-storefront .demo-storefront-guide-button { font-size: 10px; min-height: 0; padding: 0; text-decoration: underline; color: var(--muted-foreground); }
.demo-storefront-materials { gap: 4px; }
.demo-storefront-material-copy { flex: 1 1 0%; }
.demo-storefront-materials .cn-radio-item { align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; }
.demo-storefront-materials .cn-radio-item:has(:checked) { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.demo-storefront-materials .cn-radio-indicator { display: none !important; }
.demo-storefront-materials .cn-radio:checked { background-color: var(--primary); border-color: var(--primary); background-image: radial-gradient(circle, var(--primary-foreground) 3px, transparent 3px); }
.demo-storefront-materials .cn-radio-item:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-storefront-availability[data-stock="available"] { color: #059669; }
.demo-storefront-availability[data-stock="low"] { color: #d97706; }
.demo-storefront-availability[data-stock="none"] { color: #dc2626; }
.dark .demo-storefront-availability[data-stock="available"] { color: #34d399; }
.dark .demo-storefront-availability[data-stock="low"] { color: #fbbf24; }
.dark .demo-storefront-availability[data-stock="none"] { color: #f87171; }
.demo-storefront .demo-storefront-rating-filter { display: flex; width: 100%; height: auto; padding: 2px 4px; border: 0; border-radius: 4px; }
.demo-storefront-rating-filter > .sc-hstack { flex: 1; flex-wrap: nowrap !important; }
.demo-storefront-rating-filter[aria-pressed="true"] { background: var(--muted); }
.demo-storefront-review-filter.demo-compact-section { padding-block: 8px; }
.demo-storefront-review { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-storefront-review:last-child { border-block-end: 0; }
.demo-storefront .demo-storefront-helpful { align-self: flex-start; min-height: 24px; padding: 2px 8px; margin-block-start: 6px; }
.demo-storefront-tracking-header { justify-content: space-between; flex-wrap: wrap; }
.demo-storefront .demo-storefront-timeline { padding-block: 16px; }
.demo-storefront-timeline-marker { align-self: stretch; align-items: center; }
.demo-storefront-timeline-copy { padding-block-end: 16px; flex: 1; }
.demo-storefront-timeline-dot { color: color-mix(in oklab, var(--muted-foreground) 30%, transparent); }
[data-status="completed"] .demo-storefront-timeline-dot { color: #10b981; }
[data-status="current"] .demo-storefront-timeline-dot { color: var(--primary); }
.demo-storefront-timeline-line { width: 1px; min-height: 40px; flex: 1; background: color-mix(in oklab, var(--muted-foreground) 20%, transparent); }
[data-status="completed"] .demo-storefront-timeline-line { background: #10b98180; }
.demo-storefront .demo-storefront-copy { width: 20px; height: 20px; padding: 0; }
.demo-storefront-copy svg { width: 12px; height: 12px; }
.demo-storefront-address > .sc-group { line-height: 19.5px !important; }
@container storefront (max-width: 400px) {
    .demo-storefront-products .demo-storefront-grid { grid-template-columns: minmax(0, 1fr); }
    .demo-storefront-cart-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
    .demo-storefront-cart-actions { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
}
@container storefront (max-width: 280px) {
    .demo-storefront-tabs-strip .cn-tabs-trigger { font-size: 12px; padding-inline: 4px; overflow-wrap: normal; flex: 1 1 0%; }
    .demo-storefront-category-copy { padding-inline: 8px; }
    .demo-storefront-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-storefront-materials .cn-radio-item { padding-inline: 4px; gap: 8px; }
    .demo-storefront-materials .cn-radio-item > .sc-hstack { flex-wrap: wrap; }
    .demo-storefront-material-copy { flex-basis: 100%; }
}

/* Login compositions share native controls; authored card chrome responds to its container. */
.demo-login { --demo-compact-button-height: 32px; container-name: compact-block login; }
.demo-login .cn-card { border-radius: 8px; }
.demo-login .cn-input { height: 36px; }
.demo-login .cn-card-description { line-height: 16px; }
.demo-login .cn-card-header { row-gap: 2px; }
.demo-login .cn-field { gap: 6px; min-width: 0; }
.demo-login .cn-field > .cn-label { line-height: 1; }
.demo-login-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.demo-login-form > *, .demo-login .cn-card > *, .demo-login-form .cn-field > * { min-width: 0; }
.demo-login .cn-button-size-sm { font-size: 14px; }
.demo-login .cn-button:where(:not(.demo-login-link, .cn-button-size-icon-sm, .demo-login-account-row)) { white-space: normal; height: auto; min-height: 36px; padding-block: 7px; }
.demo-login .cn-button.cn-button-size-sm { min-height: 32px; padding-block: 5px; }
.demo-login .cn-button > .sc-hstack { min-width: 0; }
.demo-login .cn-button > .sc-hstack > span { min-width: 0; overflow-wrap: anywhere; }
.demo-login .demo-login-link { padding: 0; height: auto; min-height: 16px; border: 0; font-size: 12px; line-height: 16px; font-weight: 400; white-space: normal; text-align: start; }
.demo-login-footer { justify-content: center; flex-wrap: wrap; font-size: 12px; }
.demo-login-footer .demo-login-link { font-weight: 500; }
.demo-login-brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.demo-login .demo-login-centered { border: 0; border-radius: 16px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .05), 0 4px 6px -4px rgb(0 0 0 / .05); }
.demo-login-centered > .demo-login-centered-header { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 8px; border: 0; gap: 4px; text-align: center; }
.demo-login-centered-header > .demo-login-brand-mark { margin-block-end: 8px; }
.demo-login-centered > .demo-login-centered-header .cn-card-title { font-size: 16px; font-weight: 600; line-height: 24px; }
.demo-login-centered > .demo-login-centered-content { display: flex; flex-direction: column; padding: 20px 24px; gap: 12px; }
.demo-login-centered .demo-login-form { gap: 12px; }
.demo-login-centered .demo-login-or, .demo-login-social-content > .demo-login-or { height: 9px; flex-shrink: 0; }
.demo-login .demo-login-split { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.demo-login-split-brand { min-height: 400px; padding: 32px; color: white; background: radial-gradient(rgb(255 255 255 / .03) 1px, transparent 1px) 0 0 / 24px 24px, #09090b; }
.demo-login-split-form { padding: 32px 24px; justify-content: center; }
.demo-login-remember { justify-content: space-between; flex-wrap: wrap; }
.demo-login-remember > .cn-field { width: auto; }
.demo-login-remember .cn-label { font-weight: 400; }
.demo-login .demo-login-social-header { padding: 16px; text-align: center; }
.demo-login .demo-login-social-header .cn-card-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.demo-login .demo-login-social-content { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.demo-login-social-content .demo-login-form { gap: 12px; }
.demo-login .cn-button.demo-login-social-provider { justify-content: flex-start; min-height: 40px; padding-block: 9px; }
.demo-login-social-provider > .sc-hstack { justify-content: flex-start; }
.demo-login-dot-google { color: #ef4444; }
.demo-login-dot-github { color: #27272a; }
.demo-login-dot-apple { color: #000; }
.demo-login-dot-microsoft { color: #3b82f6; }
.dark .demo-login-dot-github { color: #e4e4e7; }
.dark .demo-login-dot-apple { color: #fff; }
.demo-login-legal { display: block; font-size: 12px; line-height: 16px; text-align: center; color: var(--muted-foreground); }
.demo-login-legal > .sc-group { display: block; }
.demo-login-legal a, .demo-authentication-legal a { text-decoration: underline; text-underline-offset: 4px; }
.demo-login .demo-login-wizard-content { padding: 20px 16px; }
.demo-login-steps { justify-content: center; }
.demo-login-step-line { flex: 0 1 48px; min-width: 8px; margin-block-end: 16px; }
.demo-login .demo-login-tabbed-header { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; gap: 8px; text-align: center; }
.demo-login .demo-login-tabbed-content { padding: 16px; }
.demo-login-tabbed-content .cn-tabs-list { width: 100%; height: auto; min-height: 32px; padding: 4px; border-radius: 8px; align-items: stretch; }
.demo-login-tabbed-content .cn-tabs-trigger { flex: 1 1 0%; height: auto; min-width: 0; padding-block: 1px; white-space: normal; }
.demo-login-tabbed-content .cn-field, .demo-login-recent-form .cn-field { gap: 8px; }
.demo-login-tabbed-content .cn-tabs-content { margin-block-start: 16px; }
.demo-login-provider-row { flex-wrap: wrap; }
.demo-login-form > .sc-vstack:has(> .demo-login-forgot) { position: relative; }
.demo-login-form > .sc-vstack:has(> .demo-login-forgot) .cn-label { min-height: 16px; }
.demo-login-form .demo-login-forgot { position: absolute; inset-inline-end: 0; inset-block-start: 0; }
.demo-login .demo-login-account-row { display: flex; width: 100%; height: auto; padding: 12px 16px; border: 0; border-radius: 0; border-block-end: 1px solid var(--border); white-space: normal; text-align: start; }
.demo-login-account-row > .sc-hstack { width: 100%; min-width: 0; }
.demo-login-account-copy { flex: 1 1 0%; min-width: 0; }
.demo-login-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-login-chevron:dir(rtl) { transform: scaleX(-1); }
.demo-login-status { overflow-wrap: anywhere; }
.demo-authentication { container: authentication / inline-size; width: 100%; }
.demo-authentication-columns { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 600px; }
.demo-authentication-columns > * { min-width: 0; }
.demo-authentication-brand { display: none; padding: 40px; background: #18181b; color: white; }
.demo-authentication-form { padding: 32px; justify-content: center; }
.demo-authentication-legal { display: block; padding-inline: 32px; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
@container login (min-width: 640px) {
    .demo-login .demo-login-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container login (min-width: 800px) {
    .demo-login-split-brand { padding: 48px; }
    .demo-login-split-form { padding-inline: 40px; }
}
@container authentication (min-width: 960px) {
    .demo-authentication-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-authentication-brand { display: flex; }
}

/* Error references share compact cards, centered heroes and native recovery actions. */
/* Contact forms keep native form/field defaults, with the reference's section insets. */
/* Sample map compositions: map coordinates stay physical; surrounding chrome is logical. */
.demo-map { --demo-compact-button-height: 28px; }
.demo-map .demo-compact-card { overflow: hidden; }
.demo-map .demo-map-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; }
.demo-map-header > * { min-width: 0; }
.demo-map-wrap { flex-wrap: wrap; min-width: 0; }
.demo-map-between { justify-content: space-between; }
.demo-map-wrap > .sc-group { min-width: 0; }
.demo-map-wrap > .cn-icon { flex-shrink: 0; }
.demo-map .demo-map-layout { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
.demo-map-sidebar { min-width: 0; border-block-end: 1px solid var(--border); }
.demo-map-list { max-height: 350px; min-width: 0; overflow-x: hidden; overflow-y: auto; }
.demo-map-list:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.demo-map-counter { padding: 8px 12px; border-block-end: 1px solid var(--border); font-weight: 500; }
.demo-map .demo-map-row { display: flex; align-items: stretch; justify-content: flex-start; height: auto; min-height: 44px; width: 100%; max-width: 100%; padding: 10px 12px; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; box-shadow: none; white-space: normal; text-align: inherit; font-weight: 400; background: transparent; }
.demo-map-row > .sc-vstack { width: 100%; min-width: 0; }
.demo-map .demo-map-row:hover, .demo-map .demo-map-row[aria-pressed=true] { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-map .demo-map-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.demo-map .demo-map-badge { height: auto; min-height: 16px; padding: 0 6px; font-size: 10px; font-weight: 400; line-height: 14px; white-space: normal; color: var(--map-badge-color, var(--foreground)); }
.demo-map .demo-map-footer { padding: 10px 16px; }
.demo-map-footer > * { width: 100%; }
.demo-map-search { padding: 10px 16px; border-block-end: 1px solid var(--border); flex-wrap: wrap; }
.demo-map-search > .cn-icon { flex-shrink: 0; }
.demo-map .demo-map-search .cn-input { flex: 1 1 130px; width: 0; min-width: 0; height: 28px; padding: 0; border: 0; border-radius: 2px; background: transparent; box-shadow: none; }
.demo-map .demo-map-search .cn-input:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.demo-map .demo-map-search .cn-button { height: 24px; padding: 0 8px; margin-inline-start: auto; font-size: 12px; }
.demo-map-filters { gap: 6px; }
.demo-map .demo-map-filters .cn-button { height: auto; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.demo-map-canvas { position: relative; min-width: 0; height: min(350px, var(--map-height, 500px)); overflow: clip; background: color-mix(in oklab, var(--muted) 30%, var(--background)); }
.demo-map-plane, .demo-map-grid, .demo-map-land, .demo-map-layers { position: absolute; inset: 0; }
.demo-map-plane { direction: ltr; transform-origin: center; }
.demo-map-pin { pointer-events: none; }
.demo-map-marker { pointer-events: auto; }
.demo-map-grid { background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 12.5% 12.5%; opacity: .3; }
.demo-map-search ~ .demo-map-layout .demo-map-plane::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background: linear-gradient(var(--border), var(--border)) 0 30% / 100% 1px no-repeat, linear-gradient(var(--border), var(--border)) 0 55% / 100% 1px no-repeat, linear-gradient(var(--border), var(--border)) 0 75% / 100% 1px no-repeat, linear-gradient(var(--border), var(--border)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--border), var(--border)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--border), var(--border)) 72% 0 / 1px 100% no-repeat; }
.demo-map-land { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.dark .demo-map-land { background: linear-gradient(135deg, #1e293b, #0f172a); }
.demo-map-layers { pointer-events: none; }
.demo-map-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.demo-map-route path { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.demo-map-route[data-dashed=true] path { stroke-dasharray: 4 4; }
.demo-map-radius { position: absolute; transform: translate(-50%, -50%); }
.demo-map-pin { position: absolute; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom, 1))); z-index: 1; }
.demo-map-pin[data-active=true] { z-index: 3; }
.demo-map-pin:hover, .demo-map-pin:focus-within { z-index: 4; }
.demo-map .demo-map-marker, .demo-map-marker { display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid var(--background); border-radius: 50%; box-shadow: 0 3px 7px #0003; }
.demo-map-marker > .cn-icon { flex-shrink: 0; }
.demo-map-marker:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.demo-map-pin-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); max-width: 150px; padding: 2px 4px; border-radius: 3px; background: var(--card); color: var(--foreground); font-size: 10px; line-height: 14px; white-space: nowrap; box-shadow: 0 1px 3px #0002; pointer-events: none; }
.demo-map-caption { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; max-width: calc(100% - 24px); padding: 4px 8px; border-radius: 4px; background: color-mix(in oklab, var(--card) 85%, transparent); color: var(--muted-foreground); font-size: 12px; line-height: 16px; pointer-events: none; }
.demo-map-controls { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 6; }
.demo-map-controls .cn-button { width: 28px; height: 28px; background: var(--card); }
.demo-map-popup { position: absolute; z-index: 5; box-sizing: border-box; width: min(240px, calc(100% - 16px)); max-height: min(224px, calc(100% - 64px)); overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--popover); color: var(--popover-foreground); box-shadow: 0 4px 12px #0002; left: clamp(8px, calc(var(--map-x) - 120px), max(8px, calc(100% - 248px))); top: clamp(44px, calc(var(--map-y) + 20px), max(44px, calc(100% - 260px))); }
.demo-map-popup:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.demo-map-popup-close { align-self: flex-end; margin-block: -6px -8px; margin-inline-end: -6px; flex-shrink: 0; }
.demo-map-popup a { overflow-wrap: anywhere; }
.demo-map-stop { padding: 10px 12px; border-block-end: 1px solid var(--border); }
.demo-map-stop-actions { margin-inline-start: auto; }
.demo-map-add-stop { padding: 8px 12px; border-block-start: 1px solid var(--border); }
.demo-map-add-stop .cn-button { width: 100%; }
.demo-map-alert-detail { padding: 0 12px 12px; border-block-end: 1px solid var(--border); }
.demo-map-guidance { padding: 10px; border-radius: 6px; background: color-mix(in oklab, var(--muted) 50%, transparent); }
@container compact-block (min-width: 640px) {
    .demo-map .demo-map-layout { grid-template-columns: var(--map-sidebar-width, 256px) minmax(0, 1fr); }
    .demo-map-sidebar { border-block-end: 0; border-inline-end: 1px solid var(--border); }
    .demo-map-list { max-height: 500px; }
    .demo-map-sidebar:has(.demo-map-counter) .demo-map-list { max-height: 467px; }
    .demo-map-canvas { height: var(--map-height, 500px); }
}
@container compact-block (max-width: 400px) { .demo-map-pin-label { display: none; } }

.demo-contact { --demo-compact-button-height: 32px; }
.demo-contact .demo-compact-card > .cn-card-header { padding: 20px 24px; grid-template-rows: auto; }
.demo-contact .cn-card-title, .demo-contact .cn-card-description { text-align: left; }
.demo-contact:dir(rtl) .cn-card-title, .demo-contact:dir(rtl) .cn-card-description { text-align: right; }
.demo-contact-form, .demo-contact-section, .demo-contact-receipt { padding: 24px; }
.demo-contact .cn-field { gap: 8px; }
.demo-contact .demo-compact-card .cn-field > .cn-label { font-size: 14px; line-height: 1; color: var(--foreground); }
.demo-contact .cn-input, .demo-contact .cn-select { height: 36px; }
.demo-contact .cn-textarea { resize: vertical; }
.demo-contact .demo-contact-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.demo-contact-row { flex-wrap: wrap; justify-content: space-between; }
.demo-contact-progress { padding: 16px 24px; border-block-end: 1px solid var(--border); }
.demo-contact-navigation { flex-wrap: wrap; justify-content: space-between; padding-block-start: 8px; }
.demo-contact-navigation > :last-child { margin-inline-start: auto; }
.demo-contact-receipt .cn-button { height: auto; min-height: 36px; white-space: normal; line-height: 20px; }
.demo-contact-method { min-width: 0; }
.demo-contact-method > .cn-icon { flex-shrink: 0; margin-block-start: 2px; }
.demo-contact-method > :last-child { min-width: 0; flex: 1 1 0; }
.demo-contact-link { display: block; font-size: 14px; line-height: 20px; color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; }
.demo-contact-link:hover { text-decoration: underline; }
.demo-contact-link:focus-visible { outline: 1px solid var(--ring); outline-offset: 2px; border-radius: 2px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.demo-contact-info-title { margin-block-end: 12px; }
.demo-contact-info-methods { margin-block-start: 40px; }
.demo-contact-info-methods .cn-icon { margin-block-start: 0; }
.demo-contact-info-methods .demo-contact-link { font-size: 16px; line-height: 24px; }
.demo-contact-support-link { height: auto; min-height: 0; padding: 0; white-space: normal; font-size: 16px; font-weight: 400; line-height: 24px; text-align: start; justify-content: flex-start; color: var(--foreground); }
.demo-contact-location + .demo-contact-location { border-block-start: 1px solid var(--border); }
.demo-contact-locations-form { border-block-start: 1px solid var(--border); }
.demo-contact-host { flex-wrap: wrap; }
.demo-contact-host .cn-avatar { flex-shrink: 0; }
.demo-contact-host .sc-vstack { flex: 1 1 160px; }
.demo-contact .demo-contact-days { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.demo-contact .demo-contact-times { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.demo-contact .demo-contact-day { width: 100%; height: auto; padding: 12px 0; min-width: 0; border-radius: 8px; }
.demo-contact-day .sc-vstack { gap: 0; line-height: 20px; }
.demo-contact .demo-contact-time { width: 100%; min-width: 0; padding-inline: 2px; border-radius: 8px; }
.demo-contact-attendee { border-block-start: 1px solid var(--border); padding-block-start: 24px; margin-block-start: 8px; }
.demo-contact .demo-contact-map-layout { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; }
.demo-contact-map { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.demo-contact-map-link { align-self: flex-start; }
.demo-contact-map-info { container: contact-map-info / inline-size; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.demo-contact .demo-contact-map-details { grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container compact-block (min-width: 400px) {
    .demo-contact .demo-contact-days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .demo-contact .demo-contact-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container compact-block (min-width: 480px) { .demo-contact .demo-contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container compact-block (min-width: 640px) {
    .demo-contact .demo-contact-map-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .demo-contact-map-form { border-inline-end: 1px solid var(--border); padding-inline-end: 24px; }
    .demo-contact-map-column { padding-inline-start: 24px; }
}
@container contact-map-info (min-width: 480px) { .demo-contact .demo-contact-map-details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.demo-error { --demo-compact-button-height: 32px; }
.demo-error .cn-card-header { grid-template-rows: auto; }
.demo-error-heading, .demo-error-row { flex-wrap: wrap; justify-content: space-between; }
.demo-error .cn-card-title, .demo-error-notice { text-align: left; }
.demo-error:dir(rtl) .cn-card-title, .demo-error:dir(rtl) .demo-error-notice { text-align: right; }
.demo-error-centered { text-align: center; }
.demo-error-grow { flex: 1 1 0; min-width: 0; }
.demo-error-hero { min-height: 500px; padding: 64px 16px; justify-content: center; }
.demo-error-code { margin-block-end: 16px; }
.demo-error-title { margin-block-end: 8px; }
.demo-error-intro { margin-block-end: 32px; }
.demo-error-kicker { margin-block-end: 16px; max-width: 100%; }
.demo-error-kicker > .sc-shape { flex-shrink: 0; }
.demo-error-actions { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.demo-error-status-link { margin-block-start: 32px; color: var(--muted-foreground); }
.demo-error-inline-notice { margin-block-end: 16px; width: 100%; }
.demo-error-body { padding: 48px 16px; }
.demo-error-maintenance-heading, .demo-error-maintenance-progress, .demo-error-maintenance-info, .demo-error-search-heading, .demo-error-search-form { margin-block-end: 32px; }
.demo-error-maintenance-progress { padding: 16px; border-radius: 6px; background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-error-info { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); }
.demo-error-info > .cn-icon, .demo-error-summary > .sc-hstack > .cn-icon { flex-shrink: 0; margin-block-start: 2px; }
.demo-error .demo-error-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
.demo-error-split-message { padding: 48px 24px; justify-content: center; border-block-end: 1px solid var(--border); }
.demo-error-split-links { padding: 48px 24px; }
.demo-error-link { display: block; width: 100%; border-radius: 6px; padding: 10px 12px; text-decoration: none; }
.demo-error-link:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-error-link:focus-visible { outline: 1px solid var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.demo-error-link > .sc-hstack > .cn-icon { flex-shrink: 0; margin-block-start: 2px; }
.demo-error .demo-error-section { padding: 16px; gap: 12px; }
.demo-error .demo-error-description, .demo-error .demo-error-feedback-body { padding-block: 12px; }
.demo-error .demo-error-footer { padding: 16px; }
.demo-error-footer > .demo-error-actions { width: 100%; }
.demo-error-footer .cn-button { flex: 1 1 140px; white-space: normal; height: auto; min-height: 36px; line-height: 20px; }
.demo-error-code-box { padding: 12px; background: color-mix(in oklab, var(--muted) 50%, transparent); border-radius: 6px; overflow-wrap: anywhere; }
.demo-error-code-box > .cn-button { flex-shrink: 0; }
.demo-error-log-disclosure { border: 0; border-radius: 0; }
.demo-error-log-disclosure > .cn-collapsible-trigger { padding: 12px 16px; width: 100%; min-height: 44px; font-size: 14px; font-weight: 500; }
.demo-error-log-disclosure > .cn-collapsible-content { padding: 12px 16px; border-block-start: 1px solid var(--border); }
.demo-error-log-console { padding: 12px; border-radius: 6px; background: #09090b; line-height: 16px; overflow-wrap: anywhere; }
.demo-error-log-actions { flex-wrap: wrap; margin-block-start: 8px; }
.demo-error-feedback-heading { flex-wrap: wrap; }
.demo-error-feedback-heading > .sc-vstack { flex: 1 1 160px; }
.demo-error-feedback-description.cn-textarea { min-height: 120px; resize: none; }
.demo-error-feedback-body .cn-input { height: 36px; }
.demo-error-saved { padding-block: 24px; }
.demo-error-saved-mark { color: #047857; background: rgb(16 185 129 / 10%); }
.demo-error-saved-copy { margin-block-start: 12px; margin-block-end: 16px; }
.demo-error-search-form .cn-input-group { flex: 1 1 0; }
.demo-error-search-form .cn-input, .demo-error-search-form .cn-input-group, .demo-error-search-form .cn-button { height: 36px; }
.demo-error-search-notice { margin-block-end: 16px; }
.demo-error-search-notice > .cn-button { align-self: flex-start; }
.demo-error-search-results .demo-error-link { padding-block: 8px; }
.demo-error-search-results .demo-error-link .sc-group { font-weight: 400; }
.demo-error-status-badges { flex-wrap: wrap; }
.demo-error-service-dot { margin-block-start: 4px; flex-shrink: 0; }
.demo-error-service-copy { flex: 1 1 140px; min-width: 0; }
.demo-error .demo-error-stat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.demo-error-stat { padding: 12px; border-radius: 6px; }
.demo-error-stat-operational { background: rgb(16 185 129 / 10%); }
.demo-error-stat-degraded { background: rgb(245 158 11 / 10%); }
.demo-error-stat-down { background: rgb(239 68 68 / 10%); }
.demo-error-operational { color: #047857; }
.demo-error-degraded { color: #92400e; }
.demo-error-down { color: #b91c1c; }
.dark .demo-error-operational, .dark .demo-error-saved-mark { color: #34d399; }
.dark .demo-error-degraded { color: #fcd34d; }
.dark .demo-error-down { color: #f87171; }
@container compact-block (min-width: 480px) { .demo-error .demo-error-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container compact-block (min-width: 560px) {
    .demo-error .demo-error-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-error-split-message { border-block-end: 0; border-inline-end: 1px solid var(--border); }
}

/* Success confirmations use the same compact card anatomy and native actions. */
.demo-success { --demo-compact-button-height: 32px; }
.demo-success .cn-card-header { grid-template-rows: auto; }
.demo-success .cn-card-description { line-height: 16px; }
/* Paragraph direction follows its copy; alignment follows the surrounding card.
   Explicit sides preserve that distinction in browsers without match-parent. */
.demo-success .cn-card-description, .demo-success .cn-card-title, .demo-success .cn-alert { text-align: left; }
.demo-success:dir(rtl) .cn-card-description, .demo-success:dir(rtl) .cn-card-title, .demo-success:dir(rtl) .cn-alert { text-align: right; }
.demo-success .demo-success-prominent { padding: 16px; }
.demo-success-heading { flex-wrap: wrap; }
.demo-success-heading-copy { flex: 1 1 180px; min-width: 0; }
.demo-success .demo-success-section { padding: 12px 16px; gap: 12px; }
.demo-success .demo-success-spacious { padding: 16px; gap: 16px; }
.demo-success-muted { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-success .demo-success-footer { gap: 8px; flex-wrap: wrap; justify-content: flex-end; background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-success-footer { border-end-start-radius: calc(var(--radius) - 1px); border-end-end-radius: calc(var(--radius) - 1px); }
.demo-success .cn-card:has(> .demo-success-header) > .demo-success-footer { padding-block: 10px; }
.demo-success-footer-prefix { margin-inline-end: auto; flex-wrap: wrap; max-width: 100%; }
.demo-success-row { flex-wrap: wrap; justify-content: space-between; }
.demo-success-mark { flex-shrink: 0; color: #047857; background: rgb(16 185 129 / 10%); }
.demo-success-green { color: #047857; }
.demo-success-key-mark { color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.demo-success-delta { padding: 2px 8px; border: 1px solid rgb(16 185 129 / 20%); border-radius: 999px; line-height: 16px; background: rgb(16 185 129 / 10%); }
.demo-success-balance { flex-wrap: wrap; justify-content: center; padding-block: 24px; }
.demo-success .demo-success-section:has(> .demo-success-balance) { gap: 16px; }
.demo-success-stages { flex-wrap: wrap; }
.demo-success .demo-success-grid, .demo-success-suggestions > .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.demo-success-stat { background: color-mix(in oklab, var(--muted) 10%, transparent); }
.demo-success .demo-success-secret-section { padding: 24px 16px; }
.demo-success-secret { padding: 10px 12px; min-height: 40px; line-height: 16px; border: 1px solid var(--border); border-radius: 4px; background: color-mix(in oklab, var(--muted) 50%, transparent); overflow-wrap: anywhere; }
.demo-success-warning { padding: 12px; border: 1px solid rgb(245 158 11 / 20%); border-radius: 6px; background: rgb(245 158 11 / 5%); color: #92400e; }
.demo-success-warning > .cn-icon { flex-shrink: 0; margin-block-start: 2px; }
.demo-success-blue { color: #1d4ed8; }
.demo-success-onboarding-hero { padding: 32px 16px; text-align: center; background: color-mix(in oklab, var(--muted) 30%, transparent); border-block-end: 1px solid var(--border); }
.demo-success-onboarding-hero { border-start-start-radius: calc(var(--radius) - 1px); border-start-end-radius: calc(var(--radius) - 1px); }
.demo-success-suggestion { background: color-mix(in oklab, var(--muted) 20%, transparent); }
.demo-success-suggestion > .cn-icon { margin-block-start: 2px; }
.demo-success-streak-hero { padding: 40px 16px; text-align: center; border-block-end: 1px solid var(--border); }
.demo-success-streak-mark { color: #f97316; background: rgb(249 115 22 / 5%); border: 4px solid rgb(249 115 22 / 10%); box-shadow: 0 0 24px rgb(249 115 22 / 10%); }
.demo-success-streak-mark > .cn-icon { fill: rgb(249 115 22 / 20%); }
.demo-success .demo-success-week-section { padding: 24px 16px; gap: 16px; }
.demo-success-week { flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.demo-success-day-active { color: #fff; background: #c2410c; border: 1px solid #c2410c; }
.demo-success-day-upcoming { color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 50%, transparent); border: 1px solid var(--border); }
.dark .demo-success-green, .dark .demo-success-mark:not(.demo-success-key-mark, .demo-success-streak-mark) { color: #34d399; }
.dark .demo-success-warning { color: #fcd34d; }
.dark .demo-success-blue { color: #60a5fa; }
@container compact-block (min-width: 480px) {
    .demo-success .demo-success-grid, .demo-success-suggestions > .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Empty-state references share compact headings and generous centered bodies. */
.demo-empty { --demo-compact-button-height: 32px; }
.demo-empty .cn-card-header { grid-template-rows: auto; }
.demo-empty-heading { flex-wrap: wrap; gap: 4px 8px; line-height: 20px; }
.demo-empty-heading > .cn-icon { flex-shrink: 0; }
.demo-empty-body { padding: 56px 24px; text-align: center; line-height: 20px; }
.demo-empty-copy { margin-block-start: 24px; max-width: 100%; }
.demo-empty-copy > :last-child { line-height: 1.625; }
.demo-empty-actions { margin-block-start: 24px; max-width: 100%; }
.demo-empty-hint { margin-block-start: 12px; line-height: 16px; }
.demo-empty-footer { justify-content: center; text-align: center; line-height: 16px; }
.demo-empty-project { grid-template-columns: minmax(0, 1fr); gap: 0; }
.demo-empty-illustration { padding: 56px 24px; min-height: 240px; background: color-mix(in oklab, var(--muted) 20%, transparent); border-block-end: 1px solid var(--border); }
.demo-empty-project-pitch { padding: 56px 24px; justify-content: center; line-height: 20px; }
.demo-empty-progress { display: flex; padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-empty-step { padding: 12px 16px; }
.demo-empty-step:not(:last-child) { border-block-end: 1px solid var(--border); }
.demo-empty-step:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-empty-step-field.cn-field { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.demo-empty-step-field > .cn-checkbox { margin-block-start: 2px; }
.demo-empty-step-field.cn-field > .cn-label { color: var(--foreground); font-size: 14px; line-height: 20px; }
.demo-empty-step-field > .cn-field-description { grid-column: 2; line-height: 16px; }
.demo-empty-step-field[data-complete="true"] > .cn-label { color: var(--muted-foreground); text-decoration: line-through; }
.demo-empty-next.cn-badge { height: 20px; font-size: 10px; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.demo-empty .demo-empty-tools { width: max-content; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 80px)); gap: 12px; }
.demo-empty-tool.cn-button { width: 100%; height: auto; align-items: flex-start; padding: 16px 8px; border-style: dashed; white-space: normal; line-height: 16px; background: color-mix(in oklab, var(--muted) 20%, transparent); }
.demo-empty-tool.cn-button:not(:focus-visible) { box-shadow: none; }
.demo-empty-tool > .sc-vstack { width: 100%; }
.demo-empty-tool-labels { width: max-content; max-width: none; }
.demo-empty-tool:hover, .demo-empty-tool[aria-pressed="true"] { background: var(--muted); }
.demo-empty-tool[aria-pressed="true"] { border-style: solid; border-color: var(--foreground); }
.demo-empty-avatars > * { flex-shrink: 0; }
.demo-empty-avatars > :not(:first-child) { margin-inline-start: -8px; }
.demo-empty-seat { border: 2px dashed color-mix(in oklab, var(--muted-foreground) 25%, transparent); }
.demo-empty-invite-copy { margin-block-start: 20px; }
.demo-empty-invite-field { flex: 1 1 0; text-align: start; }
.demo-empty-invite-field > .cn-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.demo-empty-invite-form > .cn-button { flex-shrink: 0; }
.demo-empty-invite-notice:not(:empty) { margin-block-start: 12px; line-height: 16px; }
.demo-empty-search-input.cn-input-group { background: transparent; }
.demo-empty-search-input.cn-input-group:not(:focus-within) { border-color: transparent; box-shadow: none; }
.demo-empty-search-input .cn-input-group-addon { padding-inline: 0; }
.demo-empty-search-input .cn-input-group-addon:first-child { padding-inline-end: 8px; }
.demo-empty-search-body { padding: 48px 16px; }
.demo-empty-search-copy { margin-block-start: 16px; }
.demo-empty-suggestions { margin-block-start: 16px; flex-wrap: wrap; justify-content: center; }
.demo-empty-suggestions > .cn-button { font-weight: 400; font-size: 12px; height: 22px; }
.demo-empty-search-body > .demo-empty-actions, .demo-empty-key-body > .demo-empty-actions { margin-block-start: 20px; }
.demo-empty-key-body { padding: 40px 16px; }
.demo-empty-terminal { line-height: 16px; overflow-wrap: anywhere; }
@container compact-block (min-width: 430px) { .demo-empty .demo-empty-tools { grid-template-columns: repeat(4, minmax(0, 80px)); } }
@container compact-block (min-width: 576px) {
    .demo-empty-project { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-empty-illustration { border-block-end: 0; border-inline-end: 1px solid var(--border); }
}
@container compact-block (max-width: 340px) {
    .demo-empty-body, .demo-empty-illustration, .demo-empty-project-pitch { padding-inline: 12px; }
    .demo-empty-invite-form { flex-wrap: wrap; }
    .demo-empty-invite-field { flex-basis: 100%; }
    .demo-empty-invite-form > .cn-button { width: 100%; }
}


/* Notification inboxes share compact chrome, with timestamps below content on small cards. */
.demo-notification-header { flex-wrap: wrap; }
.demo-notification-heading { flex-shrink: 0; max-width: 100%; }
.demo-notification-header-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; }
.demo-notification-header-actions > :is(.cn-button, span:not(.cn-badge)) { margin-inline-start: auto; }
.demo-notification .cn-badge { font-weight: 400; }
.demo-dialog-plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.demo-dialog-create-workspace > .cn-dialog { padding: 0; gap: 0; }
.demo-dialog-create-workspace .cn-dialog-body { padding: 0; margin: 0; }
@media (min-width: 640px) { .demo-dialog-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.demo-notification-footer.cn-card-footer { justify-content: center; padding-block: 10px; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.demo-notification-unread-count.cn-badge { height: 20px; font-size: 10px; font-variant-numeric: tabular-nums; }
.demo-notification-row { --notification-icon-width: 16px; grid-template-columns: var(--notification-icon-width) minmax(0, 1fr) max-content; align-items: start; gap: 12px; padding: 12px 16px; }
.demo-notification-row:not(:last-child), .demo-notification-read-button:not(:last-child), .demo-notification-channel:not(:last-child), .demo-notification-group:not(:last-child) { border-block-end: 1px solid var(--border); }
.demo-notification-row > :first-child { margin-block-start: 2px; }
.demo-notification-details { min-width: 0; }
.demo-notification-title { font-size: 14px; font-weight: 500; line-height: 20px; }
.demo-notification-description { font-size: 12px; line-height: 16px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-notification-time { font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--muted-foreground); margin-block-start: 2px; }
[data-read="true"] .demo-notification-title { color: var(--muted-foreground); font-weight: 400; }
.demo-notification-read-button.cn-button { display: block; width: 100%; height: auto; padding: 0; border-radius: 0; white-space: normal; text-align: start; font-weight: 400; }
.demo-notification-read-button:focus-visible { position: relative; z-index: 1; }
.demo-notification-center-row { --notification-icon-width: 30px; }
.demo-notification-tabs { gap: 0; }
.demo-notification-tab-strip { padding: 8px 16px; border-block-end: 1px solid var(--border); }
.demo-notification-tab-strip .cn-tabs-list { height: 28px; }
.demo-notification-tab-strip .cn-tabs-trigger { font-size: 12px; padding: 2px 10px; }
.demo-notification-tabs .cn-tabs-content { margin: 0; }
.demo-notification-mark-all.cn-button { height: 24px; }
.demo-notification-group { gap: 0; }
.demo-notification-group .cn-collapsible-trigger { padding: 12px 16px; font-size: 14px; font-weight: 500; border-radius: 0; }
.demo-notification-group .cn-collapsible-trigger > .sc-hstack { gap: 8px; align-items: center; }
.demo-notification-group .cn-collapsible-trigger:hover { text-decoration: none; background: color-mix(in oklch, var(--muted) 50%, transparent); }
.demo-notification-group .cn-collapsible-content { padding: 0; }
.demo-notification-group-row { --notification-icon-width: 14px; padding-block: 10px; padding-inline-start: 44px; }
.demo-notification-preferences > .cn-card-header .cn-card-description { font-size: 14px; }
.demo-notification-channel > .demo-notification-row { border: 0; }
.demo-notification-channel .demo-notification-description, .demo-notification-toast-row .demo-notification-description, .demo-notification-invite-row .demo-notification-description { white-space: normal; overflow: visible; }
.demo-notification-options { padding: 0 16px 12px; padding-inline-start: 44px; }
.demo-notification-option { padding-block: 6px; line-height: 20px; }
.demo-notification-option > .sc-spacer { min-width: 0; }
.demo-notification-option > span { min-width: 0; }
.demo-notification-preference-footer.cn-card-footer { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.demo-notification-preference-footer .cn-button { width: 100%; height: 32px; }
.demo-notification-empty { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--muted-foreground); }
.demo-notification-featured-invite { padding: 12px 16px; }
.demo-notification-invite-sentence { display: block; font-size: 14px; line-height: 20px; }
.demo-notification-invite-actions { flex-wrap: wrap; }
.demo-notification-other-invites { border-block-start: 1px solid var(--border); }
.demo-notification-other-title { padding: 12px 16px 0; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.demo-notification-invite-row { --notification-icon-width: 32px; align-items: center; }
.demo-notification-invite-row .cn-avatar-fallback { font-size: 12px; line-height: 16px; font-weight: 500; }
.demo-notification-invite-dialog .demo-notification-invite-actions .cn-button { height: 28px; font-size: 12px; }
.demo-notification-toast-row { --notification-icon-width: 20px; }
.demo-notification-toast-row > .cn-button { width: 28px; height: 28px; color: var(--muted-foreground); }
.demo-notification-toast-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; }
.demo-notification-toast-icon[data-tone="success"] { color: #059669; background: rgb(16 185 129 / 10%); }
.demo-notification-toast-icon[data-tone="error"] { color: #dc2626; background: rgb(239 68 68 / 10%); }
.demo-notification-toast-icon[data-tone="warning"] { color: #d97706; background: rgb(245 158 11 / 10%); }
.demo-notification-toast-icon[data-tone="info"] { color: #2563eb; background: rgb(59 130 246 / 10%); }
.dark .demo-notification-toast-icon[data-tone="success"] { color: #34d399; }
.dark .demo-notification-toast-icon[data-tone="error"] { color: #f87171; }
.dark .demo-notification-toast-icon[data-tone="warning"] { color: #fbbf24; }
.dark .demo-notification-toast-icon[data-tone="info"] { color: #60a5fa; }
@container compact-block (max-width: 440px) {
    .demo-notification-row:has(> .demo-notification-time), .demo-notification-invite-row { grid-template-columns: var(--notification-icon-width) minmax(0, 1fr); }
    .demo-notification-time { grid-column: 2; margin-block-start: -8px; }
    .demo-notification-invite-row > .cn-button { grid-column: 2; justify-self: start; }
}
.demo-compact-card .cn-field > .cn-label { font-size: 12px; color: var(--muted-foreground); }
.demo-compact-card .cn-field-description { font-size: 12px; }
.demo-checkout { --demo-compact-button-height: 32px; font-size: 14px; line-height: 20px; }
.demo-checkout .cn-card-description, .demo-checkout .cn-field-error { font-size: 12px; line-height: 16px; }
.demo-checkout .cn-card-header > .sc-hstack:not(.demo-checkout-steps) { flex-wrap: wrap; }
.demo-checkout .cn-field { gap: 6px; }
.demo-checkout .cn-field > .cn-label { color: var(--card-foreground); line-height: 16px; }
.demo-checkout .cn-input { height: 36px; }
.demo-checkout-section { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-checkout-fields { padding-block: 16px; }
.demo-checkout .cn-card-footer > .sc-vstack { width: 100%; }
.demo-checkout-footnote { justify-content: center; color: var(--muted-foreground); text-align: center; }
.demo-checkout-footnote .cn-icon { flex-shrink: 0; }
.demo-checkout-total { justify-content: space-between; }
.demo-checkout-amount { flex-shrink: 0; }
.demo-checkout-item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-checkout-item:last-child { border-block-end: 0; }
.demo-checkout-thumbnail { display: grid; place-items: center; flex-shrink: 0; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-checkout-item-details { min-width: 0; }
.demo-checkout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.demo-checkout-address-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demo-checkout-promo .cn-input { height: 32px; }
.demo-checkout-promo { border-block-start: 1px solid var(--border); }
.demo-checkout-promo .cn-button { flex-shrink: 0; }
.demo-checkout-promo-label { font-size: 12px; color: var(--muted-foreground); }
.demo-checkout-promo-success { padding: 8px 12px; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, #10b981 10%, transparent); }
.demo-checkout-success { color: #047857; }
.dark .demo-checkout-success { color: #34d399; }
.demo-checkout-box { padding: 12px; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-checkout-box-center { padding: 16px; text-align: center; align-items: center; }
.demo-checkout-methods { gap: 0; }
.demo-checkout-methods .cn-tabs-list { width: 100%; height: auto; gap: 0; padding: 0; border-block-end: 1px solid var(--border); border-radius: 0; }
.demo-checkout-methods .cn-tabs-trigger { flex: 1 1 0; min-width: 0; height: 38px; padding: 8px 12px; border-radius: 0; font-size: 12px; gap: 6px; }
.demo-checkout-methods .cn-tabs-trigger > .sc-hstack { gap: 6px; }
.demo-checkout-methods .cn-tabs-trigger .cn-icon { flex-shrink: 0; }
.demo-checkout-methods .cn-tabs-content { margin: 0; padding: 16px; }
.demo-checkout-methods .cn-input { height: 32px; }
.demo-checkout-installments .cn-badge { flex-shrink: 0; font-weight: 400; }
.demo-checkout-shipping { gap: 0; border-block-end: 1px solid var(--border); }
.demo-checkout-shipping .cn-radio-item { padding: 12px 16px; gap: 12px; align-items: center; border-block-end: 1px solid var(--border); }
.demo-checkout-shipping .cn-radio-item:last-child { border-block-end: 0; }
.demo-checkout .cn-card:has(.demo-checkout-shipping) > .cn-card-footer { border-block-start: 0; padding-block-start: 0; }
.demo-checkout-shipping .cn-radio-item:hover, .demo-checkout-shipping .cn-radio-item:has(:checked) { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-checkout-shipping-content { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.demo-checkout-shipping-price { text-align: end; align-items: flex-end; }
.demo-checkout-steps { justify-content: space-between; gap: 8px; }
.demo-checkout-step { gap: 8px; flex-shrink: 0; line-height: 16px; }
.demo-checkout-step-circle { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.demo-checkout-connector { flex: 1 1 80px; max-width: 80px; height: 1px; }
.demo-checkout-quantity { gap: 8px; margin-block-start: 6px; flex-wrap: wrap; }
.demo-checkout-quantity-group { display: flex; align-items: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.demo-checkout-quantity .cn-button { width: 28px; height: 28px; border-radius: 0; padding: 0; }
.demo-checkout-quantity-group > .cn-button:first-child { border-start-start-radius: calc(var(--radius) - 3px); border-end-start-radius: calc(var(--radius) - 3px); }
.demo-checkout-quantity-group > .cn-button:last-child { border-start-end-radius: calc(var(--radius) - 3px); border-end-end-radius: calc(var(--radius) - 3px); }
.demo-checkout-quantity > .cn-button { border-radius: calc(var(--radius) - 2px); }
.demo-checkout-quantity-value { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.demo-checkout-empty { padding: 32px 16px; text-align: center; color: var(--muted-foreground); font-size: 14px; }
.demo-checkout-nav-icon:dir(rtl) { transform: scaleX(-1); }
.demo-checkout-wizard-footer { justify-content: space-between; gap: 8px; }
.demo-checkout-wizard-footer .cn-button { padding-inline: 8px; }
@container compact-block (max-width: 400px) {
    .demo-checkout-item { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
    .demo-checkout-item > .demo-checkout-thumbnail { grid-row: 1 / span 2; }
    .demo-checkout-item > .demo-checkout-amount { grid-column: 2; }
    .demo-checkout-shipping-content { grid-template-columns: 16px minmax(0, 1fr); gap: 4px 8px; }
    .demo-checkout-shipping-content > .cn-icon { grid-row: 1 / span 2; align-self: start; margin-block-start: 2px; }
    .demo-checkout-shipping-price { grid-column: 2; text-align: start; align-items: flex-start; }
    .demo-checkout-methods .cn-tabs-trigger { flex: 1 1 auto; padding-inline: 6px; }
    .demo-checkout-methods .cn-tabs-trigger .cn-icon { display: none; }
}
@container compact-block (max-width: 300px) {
    .demo-checkout-steps { gap: 4px; }
    .demo-checkout-step { flex-direction: column; gap: 4px; }
    .demo-checkout-connector { align-self: flex-start; margin-block-start: 12px; }
    .demo-checkout-address-grid { grid-template-columns: minmax(0, 1fr); }
}
.demo-form { --demo-compact-button-height: 32px; }
.demo-form .cn-card-description { line-height: 16px; }
.demo-form-content { padding: 16px; }
.demo-form-content:has(> .cn-fieldset) { gap: 24px; }
.demo-form .cn-field { gap: 6px; }
.demo-form .cn-field > .cn-label { color: var(--card-foreground); font-size: 14px; line-height: 20px; }
.demo-form .cn-field-description, .demo-form .cn-field-error { font-size: 12px; line-height: 16px; }
.demo-form .cn-input, .demo-form .cn-select { height: 36px; }
.demo-form .cn-textarea { min-height: 80px; }
.demo-form .cn-fieldset { gap: 16px; }
.demo-form .cn-field-legend { margin-block-end: 12px; }
.demo-form .demo-compact-card > .cn-card-footer { padding: 8px 16px 16px; border-block-start: 0; }
.demo-form-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.demo-form-actions > .cn-button { max-width: 100%; }
.demo-form-themes { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.demo-form-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
.demo-form-setting > .cn-label { grid-column: 1; grid-row: 1; }
.demo-form-setting > .cn-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.demo-form-setting > .cn-field-description { grid-column: 1; grid-row: 2; }
.demo-form-checkbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; }
.demo-form-checkbox > .cn-checkbox { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-block-start: 2px; }
.demo-form-checkbox > .cn-label { grid-column: 2; grid-row: 1; }
.demo-form-checkbox > .cn-field-description { grid-column: 2; grid-row: 2; }
.demo-form-plan-options { gap: 12px; }
.demo-form-plan-options .cn-radio-item { flex-direction: row-reverse; align-items: center; padding: 16px; gap: 12px; border: 1px solid var(--border); border-radius: 8px; }
.demo-form-plan-options .cn-radio-item-content { flex: 1; min-width: 0; line-height: 20px; }
.demo-form-plan-options .cn-radio-item-description { font-size: 14px; }
.demo-form-plan-options .cn-radio-item:has(:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.demo-form-plan-options[aria-invalid="true"] .cn-radio-item { border-color: var(--destructive); }
.demo-form-tags { flex-wrap: wrap; }
.demo-form-tag { max-width: 100%; flex: 0 1 auto; }
.demo-form-tag > span { min-width: 0; overflow-wrap: anywhere; }
.demo-form-tag .cn-button { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.demo-form-payment .demo-form-content { padding-block: 24px; }
.demo-form-payment-grid { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-form-steps { padding: 24px 16px; align-items: stretch; gap: 0; border-block-end: 1px solid var(--border); }
.demo-form-step { position: relative; flex: 1 1 0; min-width: 0; gap: 8px; text-align: center; color: var(--muted-foreground); }
.demo-form-step::after { content: ""; position: absolute; top: 15px; inset-inline-start: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: color-mix(in oklab, var(--muted-foreground) 30%, transparent); }
.demo-form-step:last-child::after { display: none; }
.demo-form-step-circle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--muted-foreground) 30%, transparent); flex-shrink: 0; }
.demo-form-step[data-state="active"], .demo-form-step[data-state="complete"] { color: var(--card-foreground); font-weight: 500; }
.demo-form-step[data-state="active"] .demo-form-step-circle { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.demo-form-step[data-state="complete"] .demo-form-step-circle { background: #047857; color: white; border-color: #047857; }
.demo-form-step[data-state="complete"]::after { background: #047857; }
.demo-form-wizard .demo-form-content { padding-block: 24px; }
.demo-form .demo-form-wizard > .cn-card-footer { padding: 12px 16px; border-block-start: 1px solid var(--border); }
@container compact-block (max-width: 280px) {
    .demo-form-steps { flex-direction: column; gap: 16px; }
    .demo-form-step { flex: 0 0 auto; flex-direction: row; text-align: start; gap: 12px; }
    .demo-form-step::after { top: 36px; inset-inline-start: 15px; width: 2px; height: calc(100% - 24px); }
}
.demo-billing { --demo-compact-button-height: 32px; }
/* Table blocks retain semantic, horizontally scrollable tables and let their
   surrounding headings, legends, and actions adapt to the embedding width. */
.demo-tables-header, .demo-tables-role-header, .demo-tables-legend { flex-wrap: wrap; }
.demo-tables-header > * { max-width: 100%; }
.demo-tables-surface { border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--card-foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); overflow: hidden; }
.demo-tables-data { min-width: 850px; }
.demo-tables-data .cn-table-head { font-weight: 600; }
.demo-tables-surface .sc-empty-state { padding: 24px 16px; }
.demo-tables-role-header { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-tables-roles .demo-tables-data { min-width: 600px; }
.demo-tables-roles .cn-table-header { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-tables-roles .cn-table-head { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.cn-button.demo-tables-sort { height: 32px; padding: 0; gap: 8px; font-size: 14px; font-weight: 600; }
.cn-button.demo-tables-sort:hover { background: transparent; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.demo-tables-sort .cn-icon { flex-shrink: 0; }
.demo-tables-bulk-toolbar { position: sticky; inset-block-end: 16px; z-index: 1; flex-wrap: wrap; align-self: center; width: fit-content; max-width: 100%; padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--card-foreground); box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); }
.demo-tables-bulk-toolbar .cn-button { height: 28px; padding-inline: 8px; font-size: 12px; }
.demo-tables-subtotal { background: color-mix(in oklab, var(--muted) 50%, transparent); border-block-start: 2px solid var(--border); }
.demo-tables-status-completed { --table-status-color: #059669; --table-status-text: #047857; }
.demo-tables-status-on-track { --table-status-color: var(--primary); --table-status-text: var(--foreground); }
.demo-tables-status-at-risk { --table-status-color: #ca8a04; --table-status-text: #854d0e; }
.demo-tables-status-behind { --table-status-color: #dc2626; --table-status-text: #dc2626; }
.dark .demo-tables-status-completed { --table-status-color: #34d399; --table-status-text: #34d399; }
.dark .demo-tables-status-at-risk { --table-status-color: #fbbf24; --table-status-text: #fbbf24; }
.dark .demo-tables-status-behind { --table-status-color: #f87171; --table-status-text: #f87171; }
.demo-upload-section { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-upload-list-caption { display: block; padding: 8px 16px; border-block-end: 1px solid var(--border); }
.demo-upload .cn-card-header { row-gap: 2px; }
.demo-upload .cn-card-description { line-height: 16px; }
.demo-upload-file-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; padding: 10px 16px; border-block-end: 1px solid var(--border); }
.demo-upload-file-row > .sc-vstack { min-width: 0; }
.demo-upload-file-actions-wide { flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cn-button.demo-upload-dropzone { width: 100%; height: auto; padding: 40px 24px; white-space: normal; border: 2px dashed color-mix(in oklab, var(--muted-foreground) 20%, transparent); border-radius: calc(var(--radius) - 2px); box-shadow: none; }
.cn-button.demo-upload-dropzone:hover:not(:disabled) { border-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-upload-transfer-empty { padding-block: 40px; }
.demo-upload-transfer-stats { flex-wrap: wrap; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.demo-upload-success, .demo-upload-complete-file > .cn-icon { color: #047857; }
.demo-upload-warning { color: #92400e; }
.demo-upload-danger { color: #dc2626; }
.dark .demo-upload-success, .dark .demo-upload-complete-file > .cn-icon { color: #34d399; }
.dark .demo-upload-warning { color: #fbbf24; }
.dark .demo-upload-danger { color: #f87171; }
.demo-upload-legend { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px 12px; }
.demo-upload-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.demo-upload-step { white-space: nowrap; }
.demo-upload-step-number { display: grid; place-items: center; }
.demo-upload-option { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-upload-wizard-status { padding-block: 32px; }
.demo-upload-scanning { padding-block: 24px; }
.demo-upload-scan-detail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 10px 16px; border-block-end: 1px solid var(--border); }
.demo-upload-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.demo-upload-thumb { position: relative; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-upload-cover { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; padding: 2px 6px; border-radius: 4px; background: color-mix(in oklab, var(--background) 80%, transparent); }
.demo-upload-photo-actions { position: absolute; inset: 0; justify-content: center !important; align-content: center; padding: 4px; border-radius: inherit; background: color-mix(in oklab, var(--background) 60%, transparent); opacity: 0; transition: opacity 150ms; }
.demo-upload-thumb:hover .demo-upload-photo-actions, .demo-upload-thumb:focus-within .demo-upload-photo-actions { opacity: 1; }
.cn-button.demo-upload-gallery-add { height: auto; width: 100%; aspect-ratio: 1; padding: 16px; align-self: start; border: 1px dashed var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-upload .cn-input.demo-upload-caption { height: 28px; padding-inline: 4px; border: 0; background: transparent; font-size: 12px; }
.demo-upload .cn-input.demo-upload-caption:not(:focus-visible) { box-shadow: none; }
@media (hover: none) {
    .demo-upload-photo-actions { inset-block-start: auto; inset-block-end: 4px; inset-inline: 4px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-upload-photo-actions { transition: none; }
}
@container compact-block (max-width: 600px) {
    .demo-upload-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-upload-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container compact-block (max-width: 360px) {
    .demo-upload-file-row:has(.demo-upload-file-actions-wide) { grid-template-columns: 16px minmax(0, 1fr); }
    .demo-upload-file-actions-wide { grid-column: 2; }
}
@container compact-block (max-width: 320px) {
    .demo-upload-gallery { grid-template-columns: minmax(0, 1fr); }
    .cn-button.demo-upload-dropzone { padding-inline: 12px; }
}
@container compact-block (max-width: 260px) {
    .demo-upload-steps { grid-template-columns: minmax(0, 1fr); }
}

.demo-billing .demo-compact-row-content { flex-basis: 200px; }
.demo-billing .demo-compact-row { gap: 8px 12px; }
.demo-billing .demo-compact-section { gap: 8px; padding: 12px 16px; }
.demo-billing .demo-billing-usage { padding-block: 16px; }
.demo-billing .cn-card-header .cn-card-description { font-size: 14px; }
.demo-billing .demo-billing-footnote { padding-block: 10px; justify-content: center; text-align: center; }
.demo-billing-header-action, .demo-billing-card-on-file { margin-inline-start: auto; max-width: 100%; }
.demo-billing .cn-badge { font-size: 10px; font-weight: 400; }
.demo-billing .demo-billing-header-action.cn-badge { font-size: 12px; }
.demo-billing .demo-billing-header-action.cn-button-size-sm,
.demo-billing .demo-billing-download { height: 28px; padding-inline: 8px; }
.demo-billing .cn-progress { height: 6px; }
.demo-billing-card-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-billing-interval { gap: 4px; padding: 2px; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-billing-interval .cn-toggle-button { height: 28px; padding-inline: 12px; font-size: 12px; }
.demo-billing-interval .cn-toggle-button[aria-pressed="true"] { background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.demo-billing .cn-button-size-icon-xs { width: 28px; height: 28px; }
.demo-billing-plan { width: 100%; height: auto; padding: 16px; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; white-space: normal; text-align: start; }
.demo-billing-plan:last-child { border-block-end: 0; }
.demo-billing-plan[aria-pressed="true"], .demo-billing-seat-summary { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-billing-plan:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.demo-billing-order-items { border-block-end: 1px solid var(--border); }
.demo-billing-order-items .demo-compact-row { border-block-end: 0; }
.demo-billing-positive, .demo-billing-positive-text { color: #059669; }
.demo-billing-positive { background: rgb(16 185 129 / .1); }
.dark .demo-billing-positive, .dark .demo-billing-positive-text { color: #34d399; }
.demo-billing-negative { color: #dc2626; background: rgb(239 68 68 / .1); }
.dark .demo-billing-negative { color: #f87171; }

/* AI reference blocks reuse compact card sections and native disclosure controls. */
.demo-ai .cn-badge { font-size: 12px; font-weight: 400; }
.demo-ai .demo-compact-section { padding: 12px 16px; gap: 8px; }
.demo-ai .demo-compact-row { padding: 10px 16px; gap: 8px 12px; }
.demo-ai .demo-compact-row-content { flex-basis: 200px; }
.demo-ai-notice { padding: 12px; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-ai .demo-ai-task-progress { padding-block: 8px; }
.demo-ai-task-progress .cn-progress { height: 4px; }
.demo-ai-task-check:checked { background-color: #10b981; border-color: #10b981; }
.demo-ai-disclosure { gap: 0; border-block-end: 1px solid var(--border); }
.demo-ai-disclosure:last-child { border-block-end: 0; }
.demo-ai-disclosure > .cn-collapsible-trigger { padding: 10px 16px; border-radius: 0; }
.demo-ai-disclosure > .cn-collapsible-trigger:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); text-decoration: none; }
.demo-ai-disclosure > .cn-collapsible-trigger > .sc-hstack { align-items: center; gap: 12px; }
.demo-ai-disclosure > .cn-collapsible-trigger .cn-disclosure-chevron { width: 14px; height: 14px; transform: rotate(-90deg); }
.demo-ai-disclosure[data-state="closed"]:dir(rtl) > .cn-collapsible-trigger .cn-disclosure-chevron { transform: rotate(90deg); }
.demo-ai-disclosure[data-state="open"] > .cn-collapsible-trigger .cn-disclosure-chevron { transform: none; }
.demo-ai-disclosure > .cn-collapsible-content { padding: 0; }
.demo-ai-disclosure .demo-compact-row { border-block-start: 1px solid var(--border); border-block-end: 0; }
.demo-ai-provider-label { padding: 10px 16px; border-block-start: 1px solid var(--border); }
.demo-ai-model { width: 100%; height: auto; padding: 0; border: 0; border-radius: 0; white-space: normal; text-align: start; }
.demo-ai-model .demo-compact-row { padding-block: 12px; border-block-start: 1px solid var(--border); border-block-end: 0; }
.demo-ai-model[aria-pressed="true"] { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-ai-model:focus-visible, .demo-ai-disclosure > .cn-collapsible-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.demo-ai-model .demo-ai-capability { font-size: 10px; padding: 0 6px; }
.demo-ai-model-check, .demo-ai-approved, .demo-ai-rejected { display: grid; place-items: center; flex-shrink: 0; }
.demo-ai-key-value { padding: 8px 16px; border-block-end: 1px solid var(--border); }
.demo-ai-key-value:last-child { border-block-end: 0; }
.demo-ai-approval-actions { justify-content: flex-end; }
.demo-ai-resolved { padding: 32px 16px; }
.demo-ai-approved { color: #059669; background: rgb(16 185 129 / .1); }
.dark .demo-ai-approved { color: #34d399; }
.demo-ai-rejected { color: var(--muted-foreground); background: var(--muted); }
.demo-ai-transcript { flex: 1 1 0%; min-height: 0; }
.demo-ai-messages { padding: 24px; }
.demo-ai-chat-bubble { padding: 10px 16px; border-radius: 16px; max-width: 85%; min-width: 0; white-space: pre-wrap; }
.demo-ai-composer { align-items: flex-end; }
.demo-ai-composer .demo-ai-chat-input { flex: 1 1 240px; min-width: 0; height: 64px; min-height: 64px; resize: none; }
.demo-ai-composer .cn-button { margin-inline-start: auto; }
.demo-ai-welcome-card > .cn-card-content { display: flex; flex: 1; }
.demo-ai-welcome { padding: 24px; justify-content: center; width: 100%; }
.demo-ai-welcome-heading .cn-card-title { font-size: 14px; font-weight: 500; }
.demo-ai-welcome-heading .cn-card-description { font-size: 12px; }
.demo-ai-suggestion-grid { width: 100%; max-width: 448px; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.demo-ai-suggestion { width: 100%; height: auto; padding: 12px; border: 0; white-space: normal; text-align: start; align-items: flex-start; background: color-mix(in oklab, var(--muted) 50%, transparent); }
@container compact-block (max-width: 480px) {
    .demo-ai-messages, .demo-ai-welcome { padding: 16px; }
}

.demo-settings-channel-legend { padding: 8px 16px; border-block-end: 1px solid var(--border); }
.demo-settings-channels { display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; }
.demo-settings-preference { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-settings-channel-label { display: none; }
@container settings (max-width: 480px) {
    .demo-settings-preference { grid-template-columns: minmax(0, 1fr); }
    .demo-settings-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .demo-settings-channel-legend { display: none; }
    .demo-settings-channel-label { display: block; }
}

/* Compact block actions follow their header when the host becomes narrow. */
@container (max-width: 480px) {
    .demo-compact-card > .cn-card-header[data-has-action="true"] { grid-template-columns: minmax(0, 1fr); }
    .demo-compact-card > .cn-card-header > .cn-card-action { grid-column: 1; grid-row: auto; justify-self: start; margin-block-start: 8px; }
}

/* Account reference blocks share compact cards, form sections, and native controls. */
.demo-account .cn-card-description { line-height: 16px; }
.demo-account .cn-input, .demo-account .cn-select { height: 36px; }
.demo-account .cn-label { font-size: 12px; }
.demo-account .cn-field > .cn-label { color: var(--foreground); }
.demo-account-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-account-professional { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr) minmax(0, 1fr); }
.demo-account-professional .cn-select { padding-inline: 6px 24px; background-size: 14px; background-position: right 6px center; }
.demo-account-professional .cn-select:dir(rtl) { background-position: left 6px center; }
.demo-account-professional .cn-select-trigger { padding-inline: 6px; gap: 4px; }
.demo-account-professional .cn-select-chevron { width: 14px; height: 14px; }
.demo-account-date { width: 100%; min-width: 0; height: 36px; padding-inline: 8px; font-size: 14px; font-weight: 400; justify-content: flex-start; }
.demo-account-avatar-layout { gap: 24px; grid-template-columns: minmax(0, 176px) minmax(0, 1fr); align-items: start; }
.demo-account-avatar-fallback, .demo-account-upload-icon, .demo-account-success-icon { display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-account-avatar-fallback { border: 1px solid var(--border); }
.demo-account-upload-icon { width: 48px; height: 48px; flex-shrink: 0; }
.demo-account-upload-formats { flex-wrap: wrap; justify-content: center; }
.demo-account-upload-formats .cn-badge { font-size: 12px; font-weight: 400; color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 50%, transparent); padding: 2px 8px; }
.demo-account-actions { flex-wrap: wrap; justify-content: flex-end; }
.demo-account-actions > .cn-button, .demo-account-enabled-actions > .cn-button { max-width: 100%; height: auto; min-height: 36px; white-space: normal; padding-block: 8px; }
.demo-account-actions > .cn-button-size-sm, .demo-account-enabled-actions > .cn-button-size-sm { min-height: 28px; padding-block: 4px; }
.demo-account-form-actions { padding-block-start: 16px; border-block-start: 1px solid var(--border); }
.demo-account .demo-account-password-input { height: 44px; }
.demo-account .demo-account-password-input > .cn-input { height: 100%; }
.demo-account-password-input > .cn-input-group-button { height: 100%; width: 40px; color: var(--muted-foreground); }
.demo-account-requirements { gap: 8px; }
.demo-account-positive, .demo-account-strength-strong { color: #15803d; }
.demo-account-strength-weak { color: #dc2626; }
.demo-account-strength-fair { color: #c2410c; }
.demo-account-strength-good { color: #a16207; }
.dark .demo-account-positive, .dark .demo-account-strength-strong { color: #4ade80; }
.dark .demo-account-strength-weak { color: #f87171; }
.dark .demo-account-strength-fair { color: #fb923c; }
.dark .demo-account-strength-good { color: #facc15; }
.demo-account-method { width: 100%; height: auto; padding: 12px; white-space: normal; text-align: start; box-shadow: none; }
.demo-account-method-label { flex: 1 1 0%; }
.demo-account-method-badge { height: 16px; padding: 0 6px; font-size: 10px; }
.demo-account-method-chevron:dir(rtl) { transform: rotate(180deg); }
.demo-account-direction-icon:dir(rtl) { transform: scaleX(-1); }
.demo-account-qr { width: 186px; max-width: 100%; height: auto; padding: 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: white; }
.demo-account-setup-key { flex: 1 1 0%; min-width: 0; padding: 8px 12px; border-radius: calc(var(--radius) - 2px); background: var(--card); overflow-wrap: anywhere; text-align: center; }
.demo-account-key-row { width: 100%; }
.demo-account .demo-account-verification-code { height: 48px; font-size: 24px; text-align: center; font-family: ui-monospace, monospace; letter-spacing: .25em; }
.demo-account-backup-grid { grid-template-columns: repeat(auto-fit, minmax(min(84px, 100%), 1fr)); gap: 8px; }
.demo-account-backup-code { padding: 6px 8px; border-radius: calc(var(--radius) - 2px); text-align: center; white-space: nowrap; background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-account-step-current, .demo-account-step-complete, .demo-account-step-pending { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; font-size: 12px; }
.demo-account-step-current { color: var(--background); background: var(--foreground); }
.demo-account-step-complete { color: white; background: #15803d; }
.demo-account-step-pending { color: var(--muted-foreground); background: var(--muted); }
.demo-account-session-filters { flex-wrap: wrap; }
.demo-account-session-filters .cn-button { padding-inline: 10px; }
.demo-account-sessions { min-width: 800px; }
.demo-account-sessions th { height: 36px; font-size: 12px; padding: 8px 16px; }
.demo-account-sessions td { padding: 10px 16px; }
.demo-account-sessions th:first-child { width: 180px; }
.demo-account .demo-account-sort { padding: 0; height: auto; font-weight: 500; }
.demo-account-sessions .cn-button-size-icon-xs { width: 16px; height: 16px; padding: 2px; }
.demo-account .demo-account-page-size { width: 60px; height: 28px; padding-inline: 8px 24px; font-size: 12px; background-size: 12px; background-position: right 8px center; }
.demo-account .demo-account-page-size:dir(rtl) { background-position: left 8px center; }
.demo-account .demo-account-page-size.cn-select-trigger { padding-inline: 8px; gap: 4px; }
.demo-account-page-size > .cn-select-chevron { width: 12px; height: 12px; }
.demo-account-session-status { width: fit-content; border-radius: 9999px; padding: 2px 8px; }
.demo-account-session-active { color: #047857; background: rgb(16 185 129 / .1); }
.demo-account-session-revoked { color: #b91c1c; background: rgb(239 68 68 / .1); }
.demo-account-session-expired { color: var(--muted-foreground); background: var(--muted); }
.dark .demo-account-session-active { color: #34d399; }
.dark .demo-account-session-revoked { color: #f87171; }
.demo-account .demo-account-storage-header { border-block-end: 0; }
.demo-account-storage-summary { padding: 4px 16px 16px; border-block-end: 1px solid var(--border); }
.demo-account-storage-total, .demo-account-storage-values { flex-wrap: wrap; align-items: baseline; }
.demo-account-storage-bar { height: 12px; overflow: hidden; border-radius: 9999px; background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-account-storage-segment { flex-shrink: 0; }
.demo-account-storage-legend { flex-wrap: wrap; gap: 4px 16px; }
.demo-account-storage-legend > .sc-hstack { flex-shrink: 0; }
.demo-account-storage-category { border-block-end: 1px solid var(--border); }
.demo-account-storage-category:last-child { border-block-end: 0; }
.demo-account-storage-icon { display: grid; place-items: center; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-account-storage-category .cn-progress { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-account-storage-footer { background: color-mix(in oklab, var(--muted) 30%, transparent); gap: 8px 12px; }
@container compact-block (max-width: 636px) {
    .demo-account-professional { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container compact-block (max-width: 600px) {
    .demo-account-avatar-layout { grid-template-columns: minmax(0, 1fr); }
}
@container compact-block (max-width: 480px) {
    .demo-account-grid { grid-template-columns: minmax(0, 1fr); }
    .demo-account-steps { flex-wrap: wrap; }
}
@container compact-block (max-width: 300px) {
    .demo-account-steps { flex-direction: column; align-items: stretch; }
    .demo-account-step-connector { display: none; }
}
@container compact-block (max-width: 240px) {
    .demo-account-method-content { flex-wrap: wrap; gap: 8px; }
    .demo-account-method-label { flex-basis: 100%; order: 1; }
    .demo-account-method-chevron { margin-inline-start: auto; }
}

/* Dashboard reference blocks: metric grids, sectioned rows, and data tables. */
.demo-dashboard .cn-card-description { line-height: 16px; }
.demo-dashboard .cn-badge { font-size: 12px; line-height: 16px; font-weight: 400; }
.demo-dashboard .demo-compact-row { padding: 12px 16px; gap: 8px 12px; }
.demo-dashboard .demo-compact-row-content { flex-basis: 220px; align-items: flex-start; }
.demo-dashboard .cn-progress { height: 6px; background: var(--muted); color: var(--dashboard-progress-color, color-mix(in oklab, var(--foreground) 20%, transparent)); }
.demo-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.demo-dashboard-metric { padding: 16px; border-block-end: 1px solid var(--border); }
.demo-dashboard-metric:nth-child(odd) { border-inline-end: 1px solid var(--border); }
.demo-dashboard-metric:nth-last-child(-n+2) { border-block-end: 0; }
.demo-dashboard-positive { color: #047857; }
.demo-dashboard-negative { color: #dc2626; }
.demo-dashboard-warning { color: #b45309; }
.demo-dashboard-info { color: #2563eb; }
.demo-dashboard-health-value.demo-dashboard-positive { color: #059669; }
.demo-dashboard-health-value.demo-dashboard-warning { color: #d97706; }
.dark .demo-dashboard-positive { color: #34d399; }
.dark .demo-dashboard-negative { color: #f87171; }
.dark .demo-dashboard-warning { color: #fbbf24; }
.dark .demo-dashboard-info { color: #60a5fa; }
.demo-dashboard-progress-positive { --dashboard-progress-color: #10b981; }
.demo-dashboard-progress-negative { --dashboard-progress-color: #ef4444; }
.demo-dashboard-progress-warning { --dashboard-progress-color: #f59e0b; }
.demo-dashboard-timeline { position: relative; }
.demo-dashboard-timeline::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 32px; width: 1px; background: var(--border); }
.demo-dashboard-activity { position: relative; }
.demo-dashboard-activity .cn-avatar { z-index: 1; }
.demo-dashboard-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.demo-dashboard-board-column { border-inline-end: 1px solid var(--border); }
.demo-dashboard-board-column:last-child { border-inline-end: 0; }
.demo-dashboard-board-summary { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-dashboard-task { padding: 10px 16px; border-block-end: 1px solid var(--border); }
.demo-dashboard-task:last-child { border-block-end: 0; }
.demo-dashboard-disclosure { gap: 0; border-block-end: 1px solid var(--border); }
.demo-dashboard-disclosure:last-child { border-block-end: 0; }
.demo-dashboard-disclosure > .cn-collapsible-trigger { padding: 12px 16px; border-radius: 0; }
.demo-dashboard-disclosure > .cn-collapsible-trigger:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); text-decoration: none; }
.demo-dashboard-disclosure > .cn-collapsible-trigger > .sc-hstack { align-items: center; gap: 12px; }
.demo-dashboard-disclosure .demo-compact-row { padding: 0; border: 0; }
.demo-dashboard-disclosure .cn-disclosure-chevron { width: 16px; height: 16px; transform: rotate(-90deg); }
.demo-dashboard-disclosure[data-state="closed"]:dir(rtl) .cn-disclosure-chevron { transform: rotate(90deg); }
.demo-dashboard-disclosure[data-state="open"] .cn-disclosure-chevron { transform: none; }
.demo-dashboard-disclosure > .cn-collapsible-content { padding: 0 16px 12px; padding-inline-start: 52px; }
.demo-dashboard-order-items { padding: 12px; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklab, var(--muted) 50%, transparent); }
.demo-dashboard-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.demo-dashboard-shortcut { padding: 20px 16px; width: 100%; border: 0; border-radius: 0; background: var(--card); }
.demo-dashboard-shortcut:hover { background: color-mix(in oklab, var(--muted) 50%, var(--card)); }
.demo-dashboard-flags { table-layout: fixed; min-width: 700px; }
.demo-dashboard-flags .cn-table-head { padding: 8px 16px; height: auto; font-size: 12px; color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 30%, transparent); }
.demo-dashboard-flags .cn-table-cell { padding: 12px 16px; }
.demo-dashboard-flags .cn-table-head:not(:first-child), .demo-dashboard-flags .cn-table-cell:not(:first-child) { padding-inline: 4px; text-align: center; }
.demo-dashboard-flags .cn-table-head:nth-child(n+2):nth-child(-n+4) { width: 34px; }
.demo-dashboard-flags .cn-table-head:nth-child(5) { width: 100px; }
.demo-dashboard-flags .cn-table-head:last-child { width: 48px; }
.demo-dashboard-flags .cn-table-cell > .cn-shape, .demo-dashboard-flags .cn-table-cell > .cn-avatar { margin-inline: auto; }
.demo-dashboard-flags .cn-table-cell:first-child { white-space: normal; }
.demo-dashboard-flags .cn-table-cell:first-child .sc-vstack { min-width: 0; }
.demo-dashboard-heatmap { table-layout: fixed; min-width: 544px; border-collapse: separate; border-spacing: 1px; }
.demo-dashboard-heatmap .cn-table-head, .demo-dashboard-heatmap .cn-table-cell { padding: 0; height: auto; text-align: center; line-height: 16px; font-weight: 400; color: var(--muted-foreground); }
.demo-dashboard-heatmap .cn-table-head:first-child { width: 40px; text-align: start; font-size: 12px; }
.demo-dashboard-heatmap .cn-table-head.demo-dashboard-heatmap-day { color: transparent; }
.demo-dashboard-heatmap .cn-table-row { border: 0; }
.demo-dashboard-heatmap .cn-table-row:hover { background: transparent; }
.demo-dashboard-pipeline-progress { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.demo-dashboard-pipeline-segment { flex: 1 1 0%; max-width: 54px; }
.demo-dashboard-pipeline-connector { flex: 1 1 0%; min-width: 0; }
.demo-dashboard-notifications { gap: 0; }
.demo-dashboard-notifications .cn-tabs-list { gap: 4px; padding: 8px 16px; width: 100%; height: auto; justify-content: flex-start; border-radius: 0; background: transparent; border-block-end: 1px solid var(--border); }
.demo-dashboard-notifications .cn-tabs-trigger { flex: 0 0 auto; padding: 4px 12px; height: auto; font-size: 12px; line-height: 16px; border-radius: 999px; box-shadow: none; }
.demo-dashboard-notifications .cn-tabs-trigger[data-state="active"] { background: var(--foreground); color: var(--background); }
.demo-dashboard-notifications .cn-tabs-content { padding: 0; }
.demo-dashboard .cn-button-size-icon-sm { width: 28px; height: 28px; }
@container compact-block (max-width: 640px) {
    .demo-dashboard-board { grid-template-columns: minmax(0, 1fr); }
    .demo-dashboard-board-column { border-inline-end: 0; border-block-end: 1px solid var(--border); }
    .demo-dashboard-board-column:last-child { border-block-end: 0; }
    .demo-dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container compact-block (max-width: 480px) {
    .demo-dashboard-metrics { grid-template-columns: minmax(0, 1fr); }
    .demo-dashboard-metric:nth-child(n) { border-inline-end: 0; border-block-end: 1px solid var(--border); }
    .demo-dashboard-metric:last-child { border-block-end: 0; }
    .demo-dashboard-order-status, .demo-dashboard-order-date { display: none; }
    .demo-dashboard-disclosure > .cn-collapsible-content { padding-inline-start: 16px; }
}

/* Authored split-card composition shared by the login/signup image blocks.
   Query the space offered by the host, including scaled gallery previews. */
.demo-auth-image-page { container: auth-image / inline-size; }
.demo-auth-image-shell { max-width: 384px; }
.demo-auth-image-columns { display: grid; grid-template-columns: minmax(0, 1fr); }
.demo-auth-image-form { padding: 24px; }
.demo-auth-image-cover { display: none; }
.demo-auth-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dark .demo-auth-cover-image { filter: brightness(.2) grayscale(1); }

@container auth-image (min-width: 640px) {
    .demo-auth-image-shell { max-width: 896px; }
    .demo-auth-image-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-auth-image-form { padding: 32px; }
    .demo-auth-image-cover { display: block; }
}

.demo-auth-split-page { container: auth-split / inline-size; }
.demo-auth-split-columns { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 560px; }
.demo-auth-split-form { padding: 24px; }
.demo-auth-split-cover { display: none; }

@container auth-split (min-width: 720px) {
    .demo-auth-split-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-auth-split-form { padding: 32px; }
    .demo-auth-split-cover { display: block; }
}

.demo-icon-name {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
}

.demo-preview-code {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
    color: var(--foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Official Calendar preview chrome. Month layout belongs to the primitive. */
.demo-calendar-block-stage { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 480px; min-width: 0; padding: 24px; }
.demo-calendar-block-stage > * { min-width: 0; max-width: 100%; }
.demo-calendar-analytics { container-type: inline-size; }
.demo-calendar-analytics > .cn-card-header { position: relative; grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.demo-calendar-analytics-filter { position: absolute; inset-inline-end: 16px; top: 16px; }
.demo-calendar-analytics > .cn-card-footer { border-top: 1px solid var(--border); padding-top: 24px; }
.demo-calendar-analytics-summary { font-size: 14px; line-height: 20px; }
.demo-calendar-analytics-summary > * { display: inline; }
@container (max-width: 500px) {
    .demo-calendar-analytics-filter { position: static; margin-top: 8px; justify-self: start; min-width: 0; max-width: 100%; }
    .demo-calendar-analytics-filter > .cn-button { max-width: 100%; height: auto; min-height: 36px; padding-block: 7px; white-space: normal; }
    .demo-calendar-analytics-filter > .cn-button .sc-hstack { min-width: 0; }
}
.demo-official-calendar { box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
/* Calendar previews use 16px mobile insets inside the page's 20px padding. */
@media (max-width: 767px) { .demo-calendar-block-stage { padding: 0; margin-inline: -4px; } }

.demo-calendar-booked > .cn-calendar-day { text-decoration: line-through; }
.demo-calendar-agenda { width: fit-content; padding-block: 16px; }
.demo-calendar-agenda > .cn-card-content { padding-inline: 16px; }
.demo-calendar-agenda-calendar { padding: 0; border: 0; background: transparent; }
.demo-calendar-agenda-footer { flex-direction: column; align-items: start; gap: 12px; border-top: 1px solid var(--border); padding: 24px 16px 0; }
.demo-calendar-agenda-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 4px; width: 100%; font-size: 14px; line-height: 20px; font-weight: 500; }
.demo-calendar-agenda-heading > button { width: 24px; height: 24px; padding: 0; flex-shrink: 0; }
.demo-calendar-agenda-events { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.demo-calendar-event { position: relative; padding: 8px; padding-inline-start: 24px; border-radius: calc(var(--radius) * 0.8); background: var(--muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.demo-calendar-event::after { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 8px; width: 4px; border-radius: 9999px; background: color-mix(in oklab, var(--primary) 70%, transparent); }
.demo-calendar-event-title { font-weight: 500; }
.demo-calendar-event-time { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.demo-calendar-picker-field { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 100%; }
.demo-calendar-picker-field > label, .demo-calendar-compact-time > label { padding-inline: 4px; }
.demo-calendar-picker-field > .cn-popover { width: 100%; max-width: 100%; }
.demo-calendar-drawer-hint { padding-inline: 4px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.demo-calendar-drawer-calendar { margin-inline: auto; flex-shrink: 0; --cell-size: clamp(0px, calc(100vw / 7.5), 52px); }
.demo-drawer-contained { width: 100%; max-width: 384px; margin-inline: auto; }
.demo-drawer-goal-body { padding: 16px 16px 0; }
.demo-drawer-goal-metric { flex: 1; min-width: 0; text-align: center; }
.demo-drawer-goal-value { display: block; font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; }
.demo-drawer-goal-caption { display: block; font-size: 0.70rem; line-height: 1.5; color: var(--muted-foreground); text-transform: uppercase; }
.demo-drawer-activity { display: flex; direction: ltr; height: 120px; padding: 5px; margin-top: 12px; }
.demo-drawer-activity-column { display: flex; align-items: end; flex: 1; min-width: 0; }
.demo-drawer-activity-column > * { width: round(down, 80%, 1px); margin-left: 10%; }
.demo-drawer-activity-column path { opacity: .9; }
.demo-sheet-profile-form { gap: 24px; }
.demo-sheet-profile-form > .cn-field > .cn-label { line-height: 1; }

.demo-popover-dimensions .cn-popover-header { gap: 8px; text-align: left; }
.demo-popover-dimensions .cn-popover-header:dir(rtl) { text-align: right; }
.demo-popover-dimensions .cn-popover-title { font-size: 16px; line-height: 1; }
.demo-popover-dimensions .cn-field-group { gap: 8px; }
.demo-popover-dimensions .cn-field-horizontal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.demo-popover-dimensions .cn-field-horizontal > .cn-label { line-height: 1; }
.demo-popover-dimensions .cn-field-horizontal > .cn-input { grid-column: span 2; height: 32px; }
.demo-calendar-picker-trigger { width: var(--calendar-picker-width); max-width: 100%; font-weight: 400; }
.demo-calendar-picker-trigger-content { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.demo-calendar-picker-row { display: flex; flex-wrap: wrap; gap: 16px; width: fit-content; max-width: 100%; }
.demo-calendar-picker-row > * { max-width: 100%; }
.demo-calendar-picker-column { display: flex; flex-direction: column; gap: 24px; width: fit-content; max-width: 100%; }
.demo-calendar-stay-picker { min-width: min(256px, 100%); }
.demo-calendar-stay-picker > .demo-calendar-picker-row { width: 100%; align-items: end; }
.demo-calendar-stay-picker .demo-calendar-picker-field { flex: 1; min-width: max-content; }
.demo-calendar-time-field.demo-calendar-compact-time { width: auto; }
.demo-calendar-compact-time input:not(:where(.dark, .dark *)) { background-color: var(--background); }
.demo-calendar-typed-field { display: flex; flex-direction: column; gap: 12px; width: fit-content; max-width: 100%; }
.demo-calendar-typed-field > label { padding-inline: 4px; }
.demo-calendar-typed-field > .cn-popover { width: 100%; }
.demo-calendar-typed-control { position: relative; width: 100%; min-width: 0; }
.demo-calendar-typed-input { padding-inline-end: 40px; }
.demo-calendar-typed-input:not(:where(.dark, .dark *)) { background-color: var(--background); }
.demo-calendar-typed-button { width: 24px; height: 24px; padding: 0; }
.demo-calendar-typed-control > .demo-calendar-typed-button,
.demo-calendar-typed-button-popover { position: absolute; inset-inline-end: 8px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); }
.demo-calendar-typed-hint { padding-inline: 4px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; text-align: start; }
.demo-calendar-time-card { width: fit-content; padding-block: 16px; }
.demo-calendar-time-footer { border-top: 1px solid var(--border); padding: 24px 16px 0; }
.demo-calendar-stacked-time-footer { flex-direction: column; gap: 24px; }
.demo-calendar-time-field { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
.demo-calendar-time-control { position: relative; width: 100%; }
.demo-calendar-time-icon { position: absolute; inset-inline-start: 10px; top: 10px; pointer-events: none; color: var(--muted-foreground); }
.demo-calendar-time-with-icon { padding-inline-start: 32px; }
.demo-calendar-time-input { appearance: none; }
.demo-calendar-time-input::-webkit-calendar-picker-indicator { display: none; }
.demo-calendar-inline-time-footer { gap: 8px; }
.demo-calendar-inline-time-footer .demo-calendar-time-field { flex: 1; }
.demo-calendar-variable-size { --cell-size: 2.75rem; }
.demo-calendar-presets-card { max-width: min(300px, 100%); }
.demo-calendar-presets-footer { flex-wrap: wrap; gap: 8px; }
.demo-calendar-booking-card { width: fit-content; padding: 0; gap: 0; }
.demo-calendar-booking-content { position: relative; padding: 0; }
.demo-calendar-booking-calendar { padding: 24px; }
.demo-calendar-booking-grid { --cell-size: 2.5rem; }
.demo-calendar-time-scroll { width: 100%; max-height: 288px; overflow-y: auto; padding: 24px; scroll-padding-bottom: 24px; scrollbar-width: none; border-top: 1px solid var(--border); }
.demo-calendar-time-scroll::-webkit-scrollbar { display: none; }
.demo-calendar-time-slots { display: grid; gap: 8px; }
.demo-calendar-time-slots > button { width: 100%; }
.demo-calendar-time-slots > button:not(:focus-visible) { box-shadow: none; }
.demo-calendar-booking-footer { border-top: 1px solid var(--border); padding: 20px 24px; flex-direction: column; gap: 16px; }
.demo-calendar-booking-summary { font-size: 14px; line-height: 20px; }
.demo-calendar-booking-footer > button { width: 100%; }
@media (min-width: 768px) {
    .demo-calendar-variable-size { --cell-size: 3rem; }
    .demo-calendar-booking-grid { --cell-size: 3rem; }
    .demo-calendar-booking-content { padding-inline-end: 192px; }
    .demo-calendar-time-scroll { position: absolute; inset-block: 0; inset-inline-end: 0; width: 192px; max-height: none; border-top: 0; border-inline-start: 1px solid var(--border); }
    .demo-calendar-booking-footer { flex-direction: row; }
    .demo-calendar-booking-footer > button { width: auto; margin-inline-start: auto; }
}
@media (max-width: 379px) {
    .demo-calendar-inline-time-footer { flex-direction: column; }
    .demo-calendar-time-separator { display: none; }
}
.demo-calendar-localized-header { position: relative; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.demo-calendar-language { position: absolute; inset-inline-end: 16px; inset-block-start: 16px; }
/* Calendar13's reference opts into a solid light-theme trigger background. */
.demo-calendar-layout-select:where(:not(.dark *)) { background-color: var(--background); }
@media (max-width: 767px) {
    .demo-calendar-language { position: static; margin-top: 8px; }
    .demo-calendar-localized-header:has(.demo-calendar-language) { grid-template-columns: minmax(0, 1fr); }
}

/* Authored profile composition from the pinned shadcn Hover Card example. */
.demo-hover-card-profile > .sc-vstack { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.demo-hover-card-meta { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* Authored responsive content from the pinned Navigation Menu example. */
.demo-preview-canvas .demo-navigation-home, .demo-preview-canvas .demo-navigation-components { width: 100%; max-width: 100%; min-width: 0; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.demo-navigation-feature { grid-row: span 3; min-width: 0; }
.demo-navigation-feature-link { height: 100%; width: 100%; justify-content: flex-end; padding: 16px; border-radius: 6px; background-image: linear-gradient(to bottom in oklab, color-mix(in oklab, var(--muted) 50%, transparent) 0%, var(--muted) 100%); }
.demo-navigation-feature-title { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 500; }
.demo-navigation-feature-description { font-size: 14px; line-height: 17.5px; color: var(--muted-foreground); }
.demo-preview-canvas .demo-navigation-example-grid { width: 440px; max-width: 100%; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.demo-navigation-vertical { width: 220px; max-width: 100%; }
.demo-navigation-vertical .cn-navigation-menu-link[data-sc-nav-top-link] { width: 100%; justify-content: flex-start; }
@media (min-width: 640px) {
    .demo-navigation-feature-title { margin-top: 16px; }
    .demo-preview-canvas .demo-navigation-components { width: 400px; }
}
@media (min-width: 768px) {
    .demo-preview-canvas .demo-navigation-home { width: 400px; }
    .demo-preview-canvas .demo-navigation-components { width: 500px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-navigation-feature-link { padding: 24px; }
}
@media (min-width: 1024px) {
    .demo-preview-canvas .demo-navigation-home { width: 500px; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); }
    .demo-preview-canvas .demo-navigation-components { width: 600px; }
}

.demo-radio-cards { width: 100%; }
.demo-radio-cards > .cn-radio-item {
    flex-direction: row-reverse;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    line-height: 1.375;
}
.demo-radio-cards > .cn-radio-item:has(.cn-radio:checked) { border-color: var(--primary); }
.demo-resizable { max-width: 448px; }
.demo-resizable-label { display: flex; height: 100%; align-items: center; justify-content: center; padding: 24px; }
@media (min-width: 768px) { .demo-resizable { min-width: min(450px, 100%); } }

.demo-typography-h1 { font-size: 36px; line-height: 40px; }
@media (min-width: 1024px) { .demo-typography-h1 { font-size: 48px; line-height: 48px; } }