/* =====================================================================
   CSI.UI.Demo — app-level styles

   The heavy lifting lives in the CSI.UI theme tokens loaded from
   _content/CSI.UI/csi-theme.css. Rules here are demo chrome only — the
   surrounding page shell, playground layout, params table, etc.
   ==================================================================== */

code {
    font-family: var(--csi-font-mono);
    font-size: 0.9em;
    color: var(--csi-brand-primary);
    background: var(--csi-surface-tertiary);
    padding: 0 4px;
    border-radius: var(--csi-radius-sm);
}

.csi-demo-embed-root {
    background: var(--csi-bg-page);
}

.csi-demo-page {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-2xl);
}

.csi-demo-page-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--csi-fg-primary);
}

.csi-demo-page-description {
    font-size: 14px;
    color: var(--csi-fg-secondary);
    margin: var(--csi-space-xs) 0 0;
}

.csi-demo-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--csi-fg-muted);
    margin: 0 0 var(--csi-space-sm);
}

.csi-demo-playground {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--csi-space-xl);
    padding: var(--csi-card-padding);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-lg);
    background: var(--csi-bg-surface);
}

@media (max-width: 880px) {
    .csi-demo-playground {
        grid-template-columns: 1fr;
    }
}

.csi-demo-controls {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-md);
}

.csi-demo-controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--csi-fg-secondary);
}

.csi-demo-controls input[type="text"],
.csi-demo-controls select,
.csi-demo-controls textarea {
    padding: 6px 10px;
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-sm);
    font: inherit;
    font-size: 13px;
    background: var(--csi-bg-surface);
    color: var(--csi-fg-primary);
}

.csi-demo-controls-inline {
    display: flex;
    gap: var(--csi-space-sm);
    flex-wrap: wrap;
}

.csi-demo-controls-inline button {
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    background: var(--csi-surface-tertiary);
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-sm);
    cursor: pointer;
    color: var(--csi-fg-primary);
}

.csi-demo-controls-inline button.csi-selected {
    background: var(--csi-brand-primary);
    color: var(--csi-brand-primary-fg);
    border-color: var(--csi-brand-primary);
}

.csi-demo-preview-frame {
    padding: var(--csi-space-lg);
    background: var(--csi-bg-page);
    border: 1px dashed var(--csi-border-strong);
    border-radius: var(--csi-radius-md);
    min-height: 160px;
}

/* Pages whose preview is a full LayoutFullApp-in-iframe need extra height. */
.csi-demo-preview-frame iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-surface);
}

.csi-demo-pwa-frame {
    width: var(--csi-pwa-phone-width);
    margin: 0 auto;
    background: var(--csi-bg-surface);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 4px solid var(--csi-fg-primary);
    /* Smaller scale so LayoutPwa's min-height fits inside the phone bezel. */
    height: 520px;
    display: flex;
    flex-direction: column;
}

.csi-demo-pwa-frame > * {
    min-height: 100% !important;
    flex: 1;
}

/* ── Parameters table ─────────────────────────────────────────────── */

.csi-demo-params {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--csi-fg-primary);
}

.csi-demo-params th {
    text-align: left;
    padding: var(--csi-space-sm);
    font-weight: 600;
    color: var(--csi-fg-secondary);
    border-bottom: 2px solid var(--csi-border-default);
}

.csi-demo-params td {
    padding: var(--csi-space-sm);
    border-bottom: 1px solid var(--csi-border-default);
    vertical-align: top;
}

.csi-demo-notes p {
    line-height: 1.55;
}

/* ── Token page ──────────────────────────────────────────────────── */

.csi-demo-token-group {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-sm);
    margin-bottom: var(--csi-space-2xl);
}

.csi-demo-token-group h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--csi-fg-primary);
}

.csi-demo-token-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.csi-demo-token-table td {
    padding: var(--csi-space-sm);
    border-bottom: 1px solid var(--csi-border-default);
    vertical-align: middle;
}

.csi-demo-token-table td:first-child {
    font-family: var(--csi-font-mono);
    width: 40%;
    color: var(--csi-fg-primary);
}

.csi-demo-token-swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: var(--csi-radius-sm);
    border: 1px solid var(--csi-border-strong);
    vertical-align: middle;
    margin-right: var(--csi-space-sm);
}

.csi-demo-token-spacing-sample {
    display: inline-block;
    background: var(--csi-brand-primary);
    height: 12px;
    vertical-align: middle;
    border-radius: var(--csi-radius-sm);
}

/* ── NotFound ────────────────────────────────────────────────────── */

.csi-demo-notfound {
    padding: var(--csi-space-2xl);
    text-align: center;
    color: var(--csi-fg-secondary);
}

/* ── Loading progress (overwrite template defaults to match brand) ── */

.loading-progress circle {
    fill: none;
    stroke: var(--csi-border-strong);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--csi-brand-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress,
.loading-progress-text {
    position: absolute;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress {
    display: block;
    width: 8rem;
    height: 8rem;
}

.loading-progress-text {
    text-align: center;
    font-weight: bold;
    color: var(--csi-fg-primary);
    inset: calc(20vh + 3.25rem) 0 auto 0;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Foundations docs pages (1J/M9) ─────────────────────────────── */

.fp {
    max-width: 980px;
    padding: 2rem 2rem 4rem;
}

.fp__header {
    margin-bottom: 2.5rem;
}

.fp__title {
    font-size: var(--csi-text-4xl, 2.25rem);
    font-weight: var(--csi-weight-bold, 700);
    line-height: var(--csi-leading-tight, 1.2);
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    margin: 0 0 .5rem;
}

.fp__lead {
    font-size: 1.0625rem;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    line-height: var(--csi-leading-loose, 1.7);
    margin: 0;
    max-width: 68ch;
}

.fp__section {
    margin-bottom: 3rem;
}

.fp__section-title {
    font-size: var(--csi-text-lg, 1.125rem);
    font-weight: var(--csi-weight-semibold, 600);
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border-default));
}

/* swatch grid */
.fp-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.fp-swatch {
    border-radius: var(--csi-radius-md, 6px);
    overflow: hidden;
    border: 1px solid var(--csi-border-default, var(--csi-border-default));
    min-width: 120px;
    flex: 0 0 auto;
}

.fp-swatch__color {
    height: 64px;
}

.fp-swatch__meta {
    padding: .5rem .625rem;
    background: var(--csi-bg-surface, var(--csi-bg-surface));
}

.fp-swatch__token {
    display: block;
    font-size: .6875rem;
    font-family: var(--csi-font-mono);
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    line-height: 1.4;
    word-break: break-all;
}

.fp-swatch__hex {
    display: block;
    font-size: .6875rem;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    font-family: var(--csi-font-mono);
    margin-top: .125rem;
}

.fp-swatch__note {
    display: block;
    font-size: .625rem;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    margin-top: .125rem;
    font-style: italic;
}

/* token table */
.fp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.fp-table th {
    text-align: left;
    padding: .5rem .75rem;
    background: var(--csi-bg-surface, var(--csi-bg-surface));
    border-bottom: 2px solid var(--csi-border-strong, var(--csi-border-strong));
    font-weight: var(--csi-weight-semibold, 600);
    font-size: .8125rem;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    white-space: nowrap;
}

.fp-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border-default));
    vertical-align: middle;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    font-size: .875rem;
}

.fp-table tr:last-child td {
    border-bottom: none;
}

.fp-table code {
    font-family: var(--csi-font-mono);
    font-size: .8125rem;
    background: var(--csi-bg-surface, var(--csi-bg-surface));
    padding: .125rem .3125rem;
    border-radius: var(--csi-radius-sm, 4px);
    border: 1px solid var(--csi-border-default, var(--csi-border-default));
}

.fp-color-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: var(--csi-radius-sm, 4px);
    border: 1px solid var(--csi-border-default, var(--csi-border-default));
    vertical-align: middle;
    margin-right: .375rem;
}

/* spacing scale */
.fp-space-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border-default));
}

.fp-space-row:last-child {
    border-bottom: none;
}

.fp-space-bar-wrap {
    flex: 0 0 280px;
}

.fp-space-bar {
    height: 20px;
    background: var(--csi-color-brand-200, #4F9ACF);
    border-radius: var(--csi-radius-sm, 4px);
    min-width: 2px;
}

.fp-space-meta {
    display: flex;
    gap: 1rem;
    font-size: .8125rem;
}

.fp-space-token {
    font-family: var(--csi-font-mono);
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    min-width: 12ch;
}

.fp-space-value {
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    min-width: 5ch;
}

.fp-space-px {
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
}

/* type scale */
.fp-type-sample {
    padding: .75rem 0;
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border-default));
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.fp-type-sample:last-child {
    border-bottom: none;
}

.fp-type-sample__label {
    font-size: .75rem;
    font-family: var(--csi-font-mono);
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    min-width: 14ch;
    flex-shrink: 0;
    align-self: center;
}

.fp-type-sample__text {
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    line-height: var(--csi-leading-normal, 1.55);
}

/* motion demo */
.fp-motion-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border-default));
    flex-wrap: wrap;
}

.fp-motion-row:last-child {
    border-bottom: none;
}

.fp-motion-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--csi-color-brand-500, #006EB6);
    transition-property: transform;
    transition-timing-function: var(--csi-ease-out, cubic-bezier(0,0,.2,1));
}

.fp-motion-row:hover .fp-motion-dot {
    transform: translateX(40px);
}

@media (prefers-reduced-motion: reduce) {
    .fp-motion-dot { transition: none; }
}

/* elevation cards */
.fp-elevation-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--csi-color-neutral-100, #ECEDEE);
    border-radius: var(--csi-radius-lg, 10px);
}

.fp-elevation-card {
    background: var(--csi-bg-surface, #fff);
    border-radius: var(--csi-radius-lg, 10px);
    padding: 1.25rem 1.5rem;
    min-width: 200px;
    flex: 1 1 200px;
}

.fp-elevation-card__label {
    font-size: .75rem;
    font-family: var(--csi-font-mono);
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}

.fp-elevation-card__title {
    font-size: 1rem;
    font-weight: var(--csi-weight-semibold, 600);
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    margin: 0 0 .375rem;
}

.fp-elevation-card__body {
    font-size: .875rem;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    margin: 0;
}

/* icon grid */
.fp-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.fp-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: .625rem .5rem;
    min-width: 72px;
    border: 1px solid var(--csi-border-default, var(--csi-border-default));
    border-radius: var(--csi-radius-md, 6px);
    background: var(--csi-bg-surface, var(--csi-bg-surface));
    font-size: .6rem;
    font-family: var(--csi-font-mono);
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    text-align: center;
    word-break: break-all;
}

/* code block */
.fp-code {
    background: var(--csi-bg-surface, var(--csi-bg-surface));
    border: 1px solid var(--csi-border-default, var(--csi-border-default));
    border-radius: var(--csi-radius-md, 6px);
    padding: 1rem 1.25rem;
    font-family: var(--csi-font-mono);
    font-size: .8125rem;
    line-height: 1.65;
    overflow-x: auto;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    white-space: pre;
}

/* callout / rules box */
.fp-callout {
    border-left: 3px solid var(--csi-color-brand-500, #006EB6);
    background: var(--csi-color-brand-50, #E6F3FA);
    padding: .875rem 1.125rem;
    border-radius: 0 var(--csi-radius-md, 6px) var(--csi-radius-md, 6px) 0;
    font-size: .9rem;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
    margin: 1rem 0;
}

.fp-callout--warning {
    border-left-color: var(--csi-color-warning-500, #B8860B);
    background: var(--csi-color-warning-50, #FFF8E1);
}

.fp-callout--danger {
    border-left-color: var(--csi-color-danger-500, #A82828);
    background: var(--csi-color-danger-50, #FBEAEA);
}

/* browser mock frames */
.fp-browser-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.fp-browser {
    border: 2px solid var(--csi-border-strong, var(--csi-border-strong));
    border-radius: var(--csi-radius-lg, 10px);
    overflow: hidden;
    flex-shrink: 0;
}

.fp-browser__chrome-bar {
    background: var(--csi-color-neutral-100, #ECEDEE);
    padding: .375rem .625rem;
    font-size: .6875rem;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
    display: flex;
    align-items: center;
    gap: .375rem;
    border-bottom: 1px solid var(--csi-border-strong, var(--csi-border-strong));
}

.fp-browser__dots {
    display: flex;
    gap: .25rem;
}

.fp-browser__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--csi-color-neutral-400, #949598);
}

.fp-browser__body {
    background: var(--csi-bg-surface, var(--csi-bg-surface));
    padding: .75rem;
    font-size: .75rem;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
}

.fp-browser--desktop { width: 420px; min-width: 0; }
.fp-browser--tablet  { width: 280px; min-width: 0; }
.fp-browser--phone   { width: 180px; min-width: 0; }

/* don't / anti-pattern list */
.fp-dont-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.fp-dont-list li {
    padding: .625rem .875rem;
    background: var(--csi-color-danger-50, #FBEAEA);
    border-left: 3px solid var(--csi-color-danger-500, #A82828);
    border-radius: 0 var(--csi-radius-md, 6px) var(--csi-radius-md, 6px) 0;
    font-size: .9rem;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
}

/* ── Per-component docs shared helpers (M9) ── */

/* Phone-frame wrapper: constrains content to 360 px mobile viewport */
.phone-frame {
    width: 360px;
    border: 1px solid var(--csi-border-strong, var(--csi-border-strong));
    border-radius: 24px;
    padding: 1rem;
    background: var(--csi-bg-page, var(--csi-bg-surface));
}

/* Dark-mode preview wrapper: renders inside byui-dark theme tokens */
.dark-preview-wrap {
    background: #0F1419;
    padding: 1rem;
    border-radius: var(--csi-radius-md, 6px);
}

/* Component state labels (used in States slot) */
.cdp-state-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
}

.cdp-state-label {
    font-size: .75rem;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
}

/* Inline code block for Code slot */
.cdp-code-pre {
    background: var(--csi-bg-subtle, var(--csi-bg-page));
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md, 6px);
    padding: .875rem 1rem;
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre;
}

.cdp-code-pre code {
    font-family: var(--csi-font-mono, ui-monospace, monospace);
    color: var(--csi-fg-primary, var(--csi-fg-primary));
}

/* Props table (used in PropsTable slot) */
.cdp-props-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.cdp-props-table th {
    text-align: left;
    padding: .5rem .75rem;
    background: var(--csi-bg-subtle, var(--csi-bg-page));
    border-bottom: 2px solid var(--csi-border-strong);
    font-weight: 600;
    color: var(--csi-fg-secondary, var(--csi-fg-secondary));
}

.cdp-props-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--csi-border-strong);
    vertical-align: top;
    color: var(--csi-fg-primary, var(--csi-fg-primary));
}

.cdp-props-table tr:last-child td {
    border-bottom: none;
}

/* =====================================================================
   AppNav — global (not scoped) because nav rows are emitted via
   RenderTreeBuilder helpers in AppNav.razor's @code block, which don't
   receive the Blazor b-{hash} scope attribute. Section labels and other
   directly-written elements would work scoped, but keeping all AppNav
   styles here for consistency.
   ==================================================================== */

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: .75rem 0 1.5rem;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    font-size: .9rem;
}

.app-nav__section-label {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--csi-fg-muted);
    padding: 1rem 1.5rem .375rem;
    margin: 0;
}

.app-nav__subgroup-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--csi-fg-muted);
    padding: .75rem 1.5rem .25rem 1.5rem;
    opacity: .8;
}

.app-nav__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.5rem;
    min-height: 36px;
    line-height: 1.3;
    font-size: .9rem;
    color: var(--csi-fg-primary);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    box-sizing: border-box;
}

.app-nav__row:hover {
    background-color: var(--csi-bg-page);
    color: var(--csi-fg-primary);
}

/* The active-row highlight picks up --app-color (per-app accent). The
   docs site is the Design System "app", so it falls back to deep navy
   (--csi-color-brand-900) — matches the DS tile in the waffle popover
   and the entry on /apps. Other apps override --app-color on a host
   element (e.g. the body, or a layout wrapper) to swap the highlight. */
.app-nav {
    --app-color: var(--csi-color-brand-900);
}

.app-nav__row--active {
    background-color: color-mix(in srgb, var(--app-color) 10%, transparent);
    color: var(--app-color);
    border-left-color: var(--app-color);
    font-weight: 500;
}

.app-nav__row--active:hover {
    background-color: color-mix(in srgb, var(--app-color) 12%, transparent);
}

.app-nav__row--active .csi-icon {
    color: var(--app-color);
}

.app-nav__pill {
    display: inline-flex;
    align-items: center;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background-color: var(--csi-action-primary);
    color: #fff;
    padding: .0625rem .3125rem;
    border-radius: var(--csi-radius-full);
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1.4;
}

.app-nav__row .app-nav__pill {
    margin-left: auto;
}

.app-nav__section-label .app-nav__pill {
    margin-left: .25rem;
}

.app-nav__row .csi-icon {
    flex-shrink: 0;
    opacity: .65;
}

.app-nav__row--active .csi-icon,
.app-nav__row:hover .csi-icon {
    opacity: 1;
}

/* =====================================================================
   Docs site chrome — global (not scoped). MainLayout's sidebar-header,
   logo chip, brand name, and DocsTopbar all live here so they reliably
   apply across Blazor's scoped-CSS quirks (same pattern as AppNav).
   ==================================================================== */

/* ── Sidebar header ── matches topbar height (64px) so the brand chip
   and the topbar bottom-edge sit on the same baseline. */
.docs-shell__sidebar-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 64px;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border));
    flex-shrink: 0;
    box-sizing: border-box;
}

.docs-shell__logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--csi-color-brand-900);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.docs-shell__app-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--csi-fg-primary, var(--csi-fg));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Topbar ── matches .docs-shell__sidebar-header height (64px) so the
   bottom-borders + content baselines line up across both columns.
   box-sizing: border-box is required — without it, default content-box
   makes the rendered height = 64px + vertical padding = ~88px. */
.docs-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 64px;
    padding: 0 var(--csi-space-8);
    background: var(--csi-bg-surface, var(--csi-bg));
    border-bottom: 1px solid var(--csi-border-default, var(--csi-border));
    position: sticky;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ── Breadcrumb ── */
.docs-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--csi-fg-muted);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-topbar__breadcrumb-link {
    color: var(--csi-fg-muted);
    text-decoration: none;
    transition: color 120ms ease;
}

.docs-topbar__breadcrumb-link:hover {
    color: var(--csi-fg);
    text-decoration: underline;
}

.docs-topbar__breadcrumb-current {
    color: var(--csi-fg);
    font-weight: 500;
}

.docs-topbar__breadcrumb-sep {
    color: var(--csi-border);
    user-select: none;
}

/* ── Search ── rendered as a real <button> so click + Enter both work.
   Reset the default button chrome and rebuild the look. */
.docs-topbar__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--csi-bg-page, var(--csi-bg-subtle));
    border: 1px solid var(--csi-border-default, var(--csi-border));
    border-radius: var(--csi-radius-md);
    padding: .4rem .75rem;
    cursor: pointer;
    min-width: 240px;
    max-width: 320px;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.docs-topbar__search:hover {
    border-color: var(--csi-color-brand-500);
}

.docs-topbar__search:focus-visible {
    outline: 0;
    border-color: var(--csi-color-brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--csi-color-brand-500) 25%, transparent);
}

.docs-topbar__search-placeholder {
    flex: 1;
    font-size: .85rem;
    color: var(--csi-fg-muted);
    min-width: 0;
}

.docs-topbar__search-kbd {
    font-size: .6875rem;
    color: var(--csi-fg-muted);
    background: var(--csi-bg-surface, var(--csi-bg));
    border: 1px solid var(--csi-border-default, var(--csi-border));
    border-radius: 4px;
    padding: .0625rem .25rem;
    font-family: var(--csi-font-mono, monospace);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Actions ── */
.docs-topbar__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

/* ── Icon buttons ── */
.docs-topbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--csi-radius-md);
    color: var(--csi-fg-muted);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Hamburger — visible on mobile only. */
.docs-topbar__hamburger { display: none; }

@media (max-width: 768px) {
    .docs-topbar__hamburger { display: inline-flex; }
}

.docs-topbar__icon-btn:hover {
    background: var(--csi-bg-page, var(--csi-bg-subtle));
    color: var(--csi-fg-primary, var(--csi-fg));
}

/* ── Waffle & Profile wrappers (relative for popover positioning) ── */
.docs-topbar__waffle-wrapper,
.docs-topbar__profile-wrapper {
    position: relative;
}

/* ── Profile button ── */
.docs-topbar__profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: box-shadow 120ms ease;
}

.docs-topbar__profile-btn:hover {
    box-shadow: 0 0 0 2px var(--csi-color-brand-500);
}

/* ── Avatar ── (Design System app uses deep navy --csi-color-brand-900;
   downstream apps will set their own --app-color and the avatar inherits) */
.docs-topbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--csi-color-brand-900);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    user-select: none;
    flex-shrink: 0;
}

.docs-topbar__avatar--lg {
    width: 42px;
    height: 42px;
    font-size: .9375rem;
}

/* ── Popover ── */
.docs-topbar__popover {
    position: absolute;
    top: calc(100% + .5rem);
    background: var(--csi-bg-surface, var(--csi-bg));
    border: 1px solid var(--csi-border);
    border-radius: var(--csi-radius-lg);
    box-shadow: var(--csi-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
    z-index: 200;
    min-width: 200px;
}

.docs-topbar__popover--right {
    right: 0;
}

/* ── Profile menu contents ── */
.docs-topbar__profile-menu {
    padding: .5rem;
    min-width: 240px;
}

.docs-topbar__profile-identity {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .25rem .75rem;
}

.docs-topbar__profile-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--csi-fg);
}

.docs-topbar__profile-email {
    font-size: .75rem;
    color: var(--csi-fg-muted);
}

.docs-topbar__divider {
    border: none;
    border-top: 1px solid var(--csi-border-subtle, var(--csi-border));
    margin: .25rem 0 .5rem;
}

/* ── Profile action menu items ── */
.docs-topbar__profile-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .25rem 0;
}

.docs-topbar__profile-action {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .625rem;
    border: none;
    background: transparent;
    border-radius: var(--csi-radius-sm);
    font-size: .875rem;
    color: var(--csi-fg-primary, var(--csi-fg));
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease;
}

.docs-topbar__profile-action:hover {
    background: var(--csi-bg-page, var(--csi-bg-subtle));
}

.docs-topbar__profile-action--danger {
    color: var(--csi-color-danger-500);
}

.docs-topbar__profile-action--danger:hover {
    background: var(--csi-color-danger-50);
}

/* ── Backdrop for closing popovers ── */
.docs-topbar__backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: transparent;
}

/* ── Content pages (Brand, Voice & Tone, Patterns) ──
   Left-aligned to match .fp (Foundations) and .cdp (component docs) — v3
   mockup keeps content flush left rather than centered in the page area. */
.content-page {
    max-width: 980px;
    padding: var(--csi-space-8) var(--csi-space-8) var(--csi-space-12);
}
.content-page h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--csi-space-2);
}
.content-page .lead {
    font-size: 1.05rem;
    color: var(--csi-fg-muted);
    margin: 0 0 var(--csi-space-8);
}
.content-page h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: var(--csi-space-12) 0 var(--csi-space-3);
    padding-bottom: var(--csi-space-2);
    border-bottom: 1px solid var(--csi-border-default);
}
.content-page h2:first-of-type { margin-top: 0; }
.content-page h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: var(--csi-space-6) 0 var(--csi-space-3);
}
.content-page p { margin: 0 0 var(--csi-space-4); line-height: 1.55; }
.content-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin: var(--csi-space-3) 0 var(--csi-space-6);
}
.content-table th, .content-table td {
    text-align: left;
    padding: var(--csi-space-2) var(--csi-space-3);
    border-bottom: 1px solid var(--csi-border-default);
    vertical-align: top;
}
.content-table th {
    font-weight: 600;
    background: var(--csi-bg-page);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--csi-fg-muted);
}
.content-page code {
    font-family: var(--csi-font-mono);
    font-size: .85em;
    background: var(--csi-bg-page);
    padding: .1rem .35rem;
    border-radius: 3px;
}
.dodont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--csi-space-3);
    margin: var(--csi-space-3) 0 var(--csi-space-6);
}
.dodont-card {
    padding: var(--csi-space-4);
    border-radius: var(--csi-radius-md);
    border: 1px solid var(--csi-border-default);
    background: var(--csi-bg-surface);
}
.dodont-card.do { border-left: 4px solid var(--csi-color-success-500); }
.dodont-card.dont { border-left: 4px solid var(--csi-color-danger-500); }
.dodont-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--csi-space-2);
}
.dodont-card.do .dodont-label { color: var(--csi-color-success-700); }
.dodont-card.dont .dodont-label { color: var(--csi-color-danger-700); }
.dodont-text {
    font-family: var(--csi-font-serif);
    font-size: .92rem;
    margin: 0;
}
/* brand hero card */
.brand-hero {
    background: #006EB6;
    color: #fff;
    border-radius: var(--csi-radius-lg);
    padding: var(--csi-space-8) var(--csi-space-8);
    margin-bottom: var(--csi-space-8);
}
.brand-hero__name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--csi-space-1);
}
.brand-hero__hex {
    font-family: var(--csi-font-mono);
    font-size: 1.1rem;
    opacity: .85;
    margin: 0 0 var(--csi-space-4);
}
.brand-hero__meta {
    display: flex;
    gap: var(--csi-space-6);
    flex-wrap: wrap;
    font-size: .875rem;
    opacity: .9;
    margin: 0 0 var(--csi-space-4);
}
.brand-hero__meta span { white-space: nowrap; }
.brand-hero__note {
    font-size: .875rem;
    opacity: .8;
    margin: 0;
    font-style: italic;
}
/* font specimen cards */
.font-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--csi-space-4);
    margin: var(--csi-space-3) 0 var(--csi-space-6);
}
.font-card {
    padding: var(--csi-space-5);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-surface);
}
.font-card__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--csi-fg-muted);
    margin-bottom: var(--csi-space-3);
}
.font-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--csi-space-1);
}
.font-card__role {
    font-size: .8rem;
    color: var(--csi-fg-muted);
    margin: 0 0 var(--csi-space-4);
}
.font-card__specimens { display: flex; flex-direction: column; gap: var(--csi-space-2); }
.font-card__specimen { margin: 0; line-height: 1.2; }
/* quick-link cards (Getting Started "What's next" grid) */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--csi-space-4);
    margin: var(--csi-space-3) 0 var(--csi-space-8);
}
.quick-link-card {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-1);
    padding: var(--csi-space-5);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--csi-duration-fast) ease,
                box-shadow var(--csi-duration-fast) ease;
}
.quick-link-card:hover {
    border-color: var(--csi-action-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--csi-action-primary) 15%, transparent);
}
.quick-link-card__title {
    font-weight: 600;
    color: var(--csi-action-primary);
    font-size: .9rem;
}
.quick-link-card__desc {
    font-size: .85rem;
    color: var(--csi-fg-muted);
    line-height: 1.45;
}
/* changelog in-development badge */
.changelog-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: var(--csi-radius-full, 9999px);
    background: var(--csi-color-warning-100, #fef3c7);
    color: var(--csi-color-warning-800, #92400e);
    vertical-align: middle;
    margin-left: var(--csi-space-2);
}
/* ── Apps overview page (per-app cards) ──────────────────────────── */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--csi-space-4);
    margin: var(--csi-space-3) 0 var(--csi-space-8);
}
.app-card {
    background: var(--csi-bg-surface);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-lg);
    padding: var(--csi-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-4);
}
.app-card__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--csi-space-3);
}
.app-card__badge {
    width: 56px;
    height: 56px;
    border-radius: var(--csi-radius-md);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: .03em;
}
.app-card__short {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--csi-fg-primary);
}
.app-card__long {
    margin: 0;
    font-size: .85rem;
    color: var(--csi-fg-muted);
}
.app-card__lifecycle {
    align-self: start;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: var(--csi-radius-full, 9999px);
    background: var(--csi-color-warning-100, #fef3c7);
    color: var(--csi-color-warning-800, #92400e);
}
.app-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--csi-space-3) var(--csi-space-4);
    margin: 0;
    padding: var(--csi-space-3) 0;
    border-top: 1px solid var(--csi-border-default);
    border-bottom: 1px solid var(--csi-border-default);
}
.app-card__meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.app-card__meta dt {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--csi-fg-muted);
}
.app-card__meta dd {
    margin: 0;
    font-size: .85rem;
    color: var(--csi-fg-primary);
    display: flex;
    align-items: center;
    gap: var(--csi-space-2);
    flex-wrap: wrap;
    word-break: break-word;
}
.app-card__meta dd code {
    font-size: .75rem;
}
.app-card__swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: var(--csi-radius-sm);
    border: 1px solid var(--csi-border-default);
    flex-shrink: 0;
}
.app-card__hex {
    font-family: var(--csi-font-mono);
    font-size: .75rem;
    color: var(--csi-fg-muted);
}
.app-card__notes {
    font-size: .9rem;
    color: var(--csi-fg-secondary);
    line-height: 1.55;
    margin: 0;
}

/* logo stub */
.logo-stub {
    background: var(--csi-bg-page);
    border: 2px dashed var(--csi-border-default);
    border-radius: var(--csi-radius-md);
    padding: var(--csi-space-10) var(--csi-space-8);
    text-align: center;
    margin: var(--csi-space-3) 0 var(--csi-space-6);
    color: var(--csi-fg-muted);
    font-size: .95rem;
}