/* ============================================
   UI KIT — Internal catalog page styles
   Only styles wrappers around components.
   Components themselves use their existing
   classes from style.css / docs.css / etc.
   ============================================ */

/* Internal-marker badge next to the H1 — subtle, not alarming */
.uk-doc-internal-badge {
    display: inline-block;
    padding: 3px 10px;
    margin-left: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ============================================
   Section — top-level category of components
   ============================================ */
.uk-doc-section {
    padding: var(--space-3xl) 0 var(--space-2xl);
    scroll-margin-top: calc(var(--layout-nav-height) + var(--space-lg));
}

.uk-doc-section:first-of-type {
    padding-top: var(--space-xl);
}

.uk-doc-section > h2 {
    position: relative;
    font-size: var(--font-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-tight);
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.uk-doc-section > h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    bottom: 0.25em;
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
}

/* .section-anchor visibility is now driven by docs-polish.css (loaded before
   this file) — it shows the # on h2:hover as a copy-link affordance. */

.uk-doc-section-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
    margin: 0 0 var(--space-2xl) var(--space-md);
    max-width: 720px;
}

.uk-doc-section-desc code,
.uk-doc-component-desc code,
.uk-doc-component dd code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 2px 6px;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
}

/* ============================================
   Component — single catalog entry
   ============================================ */
.uk-doc-component {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.uk-doc-component-title {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
    letter-spacing: -0.005em;
}

/* ============================================
   Component states — Legacy / Proposed
   Tint the surrounding card and append a pill
   to the title to distinguish these from the
   plain (canonical / production) components.
   ============================================ */
.uk-doc-component--legacy {
    border-color: rgba(var(--color-warning-rgb), 0.25);
    background:
        linear-gradient(180deg,
            rgba(var(--color-warning-rgb), 0.04) 0%,
            var(--color-bg-card) 70%);
}

.uk-doc-component--legacy .uk-doc-component-title::after {
    content: 'Legacy';
    display: inline-block;
    margin-left: var(--space-md);
    padding: 2px 10px;
    font-size: var(--font-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-warning);
    background: rgba(var(--color-warning-rgb), 0.1);
    border: 1px solid rgba(var(--color-warning-rgb), 0.3);
    border-radius: var(--radius-full);
    vertical-align: middle;
}

.uk-doc-component--proposed {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    background:
        linear-gradient(180deg,
            rgba(var(--color-primary-rgb), 0.04) 0%,
            var(--color-bg-card) 70%);
}

.uk-doc-component--proposed .uk-doc-component-title::after {
    content: 'Proposed';
    display: inline-block;
    margin-left: var(--space-md);
    padding: 2px 10px;
    font-size: var(--font-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: var(--radius-full);
    vertical-align: middle;
}

/* --deprecated — temporary migration shims kept in sync with their
   .uk-* canonical for the duration of a per-page migration. Reader
   MUST avoid using these class names in new markup; the meta-block
   inside the article points to the canonical replacement and to the
   live consumers blocking removal. */
.uk-doc-component--deprecated {
    border-color: rgba(var(--color-error-rgb), 0.25);
    background:
        linear-gradient(180deg,
            rgba(var(--color-error-rgb), 0.04) 0%,
            var(--color-bg-card) 70%);
}

.uk-doc-component--deprecated .uk-doc-component-title::after {
    content: '⚠ Deprecated';
    display: inline-block;
    margin-left: var(--space-md);
    padding: 2px 10px;
    font-size: var(--font-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-error);
    background: rgba(var(--color-error-rgb), 0.1);
    border: 1px solid rgba(var(--color-error-rgb), 0.3);
    border-radius: var(--radius-full);
    vertical-align: middle;
}

.uk-doc-component-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
    margin: 0 0 var(--space-lg);
    max-width: 720px;
}

/* ============================================
   Showcase — where the live component renders
   Subtle grid background like a design canvas.
   ============================================ */
.uk-doc-showcase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background-color: var(--color-bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Vertical stack of showcase items.
   We deliberately switch to grid (with explicit `minmax(0, 1fr)` track)
   instead of `flex-direction: column`. Reason: in flex column with
   `align-items: stretch`, a child whose intrinsic min-content is wider
   than the column (e.g. a `.uk-scrollbar-plump` wrapping an inline-block
   `<code white-space: nowrap>` curl one-liner) will visually overflow
   the showcase even with `min-width: 0` set on the item — the
   flex-wrap algorithm gives the oversized item its own line at its
   content width. Grid's `minmax(0, 1fr)` track hard-caps the column
   width at the container's content width, so child `overflow-x: auto`
   wrappers actually trigger their internal scrollbar instead of
   pushing the article past its border. `gap` works in grid the same
   as in flex. */
.uk-doc-showcase--column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.uk-doc-showcase--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
}

/* Belt-and-suspenders width containment for the catalog: every level of
   the chain that could pick up `min-width: auto` from a long unbreakable
   child gets pinned to 0, and every block-level container is capped at
   max-width: 100% so it physically cannot push past the column.
   (.uk-doc-component-desc keeps its own max-width: 720px for readability —
   only min-width: 0 is added there.) */
.uk-doc-section,
.uk-doc-component,
.uk-doc-showcase,
.uk-doc-snippet {
    min-width: 0;
    max-width: 100%;
}

.uk-doc-component-desc {
    min-width: 0;
}

/* Safety net: even if a deeply-nested element finds a way to push wider
   than the column despite the min-width chain above, clip it at article
   level so it can never spill outside the article visually. */
.uk-doc-component {
    overflow-x: clip;
}

/* Flex/grid items default to min-width: auto, which equals content's
   min-content width — so a child with `white-space: nowrap` (or a long
   <pre> with no wrapping) pushes the showcase wider than its column.
   Force flex/grid items to be shrinkable so child scrollers (like
   .uk-scrollbar-plump containers) actually trigger their overflow handling
   instead of dragging the column past the article edge. */
.uk-doc-showcase > *,
.uk-doc-showcase--grid > * {
    min-width: 0;
    max-width: 100%;
}

.uk-doc-status-line {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   Snippet — copyable HTML
   Copy button reveals on hover for a clean default.
   ============================================ */
.uk-doc-snippet {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.uk-doc-snippet pre {
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: 1.65;
    color: var(--color-text);
}

.uk-doc-snippet pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.uk-doc-copy-btn {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-xs);
    font-weight: 500;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast),
                color var(--transition-fast), border-color var(--transition-fast);
    z-index: 1;
}

.uk-doc-snippet:hover .uk-doc-copy-btn,
.uk-doc-copy-btn:focus-visible,
.uk-doc-copy-btn.is-copied {
    opacity: 1;
}

.uk-doc-copy-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.uk-doc-copy-btn.is-copied {
    background: rgba(var(--color-success-rgb), 0.15);
    border-color: rgba(var(--color-success-rgb), 0.4);
    color: var(--color-success);
}

/* ============================================
   Meta table — classes / tokens / source
   ============================================ */
.uk-doc-meta {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-sm) var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-sm);
    margin: 0;
}

.uk-doc-meta dt {
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--font-xs);
    padding-top: 4px;
}

.uk-doc-meta dd {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
}

.uk-doc-meta dd code {
    margin-right: 4px;
}

/* ============================================
   DESIGN TOKENS visualizations
   ============================================ */
.uk-doc-tokens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.uk-doc-color-swatch {
    position: relative;
    height: 140px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    color: #000;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform var(--transition-fast);
}

.uk-doc-color-swatch:hover {
    transform: translateY(-2px);
}

.uk-doc-color-swatch--surface {
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.uk-doc-swatch-name {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.uk-doc-swatch-name--dark {
    color: #000;
}

.uk-doc-swatch-value {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    opacity: 0.75;
}

.uk-doc-swatch-value--dark {
    color: #000;
}

/* Typography */
.uk-doc-font-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.uk-doc-font-sample {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.uk-doc-font-label {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--color-primary-light);
    flex-shrink: 0;
    min-width: 130px;
}

.uk-doc-font-demo {
    color: var(--color-text);
    font-size: var(--font-base);
}

.uk-doc-font-scale {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.uk-doc-font-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.uk-doc-font-row:last-child {
    border-bottom: none;
}

.uk-doc-font-row code {
    flex-shrink: 0;
    min-width: 100px;
    color: var(--color-primary-light);
}

.uk-doc-font-row span {
    color: var(--color-text);
    line-height: 1.1;
}

/* Spacing */
.uk-doc-spacing-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uk-doc-spacing-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.uk-doc-spacing-row:last-child {
    border-bottom: none;
}

.uk-doc-spacing-row code {
    flex-shrink: 0;
    min-width: 110px;
    color: var(--color-primary-light);
}

.uk-doc-spacing-bar {
    display: inline-block;
    height: 14px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.25);
}

.uk-doc-spacing-val {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    margin-left: auto;
}

/* Radii */
.uk-doc-radii-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
}

.uk-doc-radius-sample {
    aspect-ratio: 1;
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.15) 0%,
        rgba(var(--color-primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    text-align: center;
    padding: var(--space-sm);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.uk-doc-radius-sample:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-primary-rgb), 0.5);
}

.uk-doc-radius-sample span {
    line-height: var(--line-snug);
}

.uk-doc-radius-sample small {
    display: block;
    color: var(--color-text-muted);
    font-size: 10px;
    letter-spacing: 0;
    margin-top: 2px;
}

/* ============================================
   BRAND BOOK — additions for Phase 2.1
   Logo specimens, iconography ladders, voice & tone,
   weight ladder, line-heights, brand-asset list.
   ============================================ */

/* Sub-section heading inside a brand-book article */
.uk-doc-palette-group {
    margin: var(--space-xl) 0 var(--space-md);
    color: var(--color-text);
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.uk-doc-palette-group::before {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--color-border);
}

.uk-doc-palette-group:first-of-type {
    margin-top: var(--space-md);
}

/* ----- Logo ----- */
/* Atmosphere is provided by an inner <canvas class="uk-backdrop-radial">
   (Backdrops canonical — JS dithered radial w/ chaotic drift). The tile
   itself stays a plain dark surface — no CSS radial-gradient. */
.uk-doc-logo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-3xl) var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    isolation: isolate;
}

.uk-doc-logo-tile-img,
.uk-doc-logo-tile-caption {
    position: relative;
    z-index: 1;
}

.uk-doc-logo-tile-img {
    height: 56px;
    width: auto;
    max-width: 100%;
}

.uk-doc-logo-tile-caption {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    text-align: center;
    max-width: 420px;
    line-height: var(--line-relaxed);
}

.uk-doc-logo-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

.uk-doc-logo-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    min-height: 140px;
}

.uk-doc-logo-size img {
    width: auto;
    max-width: 100%;
    margin-bottom: var(--space-xs);
}

.uk-doc-logo-size code {
    color: var(--color-primary-light);
    font-size: var(--font-xs);
    font-family: var(--font-mono);
}

.uk-doc-logo-size-note {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    line-height: var(--line-snug);
}

.uk-doc-logo-clearspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
}

@media (min-width: 720px) {
    .uk-doc-logo-clearspace {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
    }
}

.uk-doc-logo-clearspace-frame {
    position: relative;
    padding: 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.uk-doc-logo-clearspace-frame::before {
    content: '';
    position: absolute;
    inset: 24px;
    border: 1px dashed rgba(var(--color-primary-rgb), 0.4);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.uk-doc-logo-clearspace-img {
    height: 40px;
    width: auto;
    position: relative;
    z-index: 1;
}

.uk-doc-logo-clearspace-rule {
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
    margin: 0;
}

.uk-doc-logo-clearspace-rule strong {
    color: var(--color-text);
}

.uk-doc-logo-donts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

.uk-doc-logo-dont {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.uk-doc-logo-dont-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.uk-doc-logo-dont-tile img {
    height: 28px;
    width: auto;
    max-width: 100%;
}

.uk-doc-logo-dont-tile::after {
    content: '✕';
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--color-error);
    font-size: var(--font-md);
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
}

.uk-doc-logo-dont--recolor img {
    filter: hue-rotate(140deg) saturate(1.4);
}

.uk-doc-logo-dont--stretch img {
    transform: scaleY(0.55) scaleX(1.15);
    transform-origin: center;
}

.uk-doc-logo-dont--shadow img {
    filter: drop-shadow(0 0 6px rgba(var(--color-primary-rgb), 0.9))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.uk-doc-logo-dont--noise {
    background:
        repeating-linear-gradient(45deg,
            rgba(var(--color-error-rgb), 0.18) 0 6px,
            rgba(var(--color-warning-rgb), 0.18) 6px 12px,
            rgba(var(--color-success-rgb), 0.18) 12px 18px),
        var(--color-bg-card);
}

.uk-doc-logo-dont--noise::before {
    content: '';
    position: absolute;
    inset: 50% 30%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

.uk-doc-logo-dont-label {
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    line-height: var(--line-snug);
}

/* ----- Typography weight ladder ----- */
.uk-doc-weight-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uk-doc-weight-row {
    display: grid;
    grid-template-columns: 60px 110px 1fr;
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.uk-doc-weight-row:last-child {
    border-bottom: none;
}

.uk-doc-weight-row code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

.uk-doc-weight-name {
    color: var(--color-text);
    font-size: var(--font-md);
}

.uk-doc-weight-demo {
    color: var(--color-text);
    font-size: var(--font-base);
    line-height: var(--line-snug);
}

@media (max-width: 720px) {
    .uk-doc-weight-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ----- Line-heights ----- */
.uk-doc-leading-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.uk-doc-leading-row {
    display: grid;
    grid-template-columns: 130px 60px 1fr;
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.uk-doc-leading-row:last-child {
    border-bottom: none;
}

.uk-doc-leading-row code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

.uk-doc-leading-val {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

.uk-doc-leading-use {
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-snug);
}

@media (max-width: 720px) {
    .uk-doc-leading-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ----- Iconography ----- */
.uk-doc-icon-ladder,
.uk-doc-iconbox-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
}

.uk-doc-icon-step,
.uk-doc-iconbox-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    min-height: 140px;
}

.uk-doc-icon-step svg,
.uk-doc-iconbox-demo svg {
    color: var(--color-primary-light);
}

.uk-doc-icon-step code,
.uk-doc-iconbox-step code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    margin-top: var(--space-xs);
}

.uk-doc-icon-step-note,
.uk-doc-iconbox-note {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    line-height: var(--line-snug);
}

.uk-doc-iconbox-demo {
    width: var(--box, 44px);
    height: var(--box, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.12);
    border-radius: var(--radius-md);
    color: var(--color-primary-light);
}

.uk-doc-iconbox-demo svg {
    width: var(--icon, 20px);
    height: var(--icon, 20px);
}

.uk-doc-icon-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.uk-doc-icon-color-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}

.uk-doc-icon-color-cell code {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

/* ----- Voice & tone ----- */
.uk-doc-voice-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.uk-doc-voice-pillar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-top: 2px solid var(--color-primary);
}

.uk-doc-voice-pillar-label {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-light);
}

.uk-doc-voice-pillar p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
}

.uk-doc-voice-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.uk-doc-voice-quote {
    margin: 0;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background:
        linear-gradient(180deg,
            rgba(var(--color-primary-rgb), 0.06) 0%,
            transparent 100%),
        var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    position: relative;
}

.uk-doc-voice-quote::before {
    content: '“';
    position: absolute;
    top: -8px;
    left: 12px;
    font-family: var(--font-sans);
    font-size: 56px;
    line-height: 1;
    color: rgba(var(--color-primary-rgb), 0.25);
    pointer-events: none;
}

.uk-doc-voice-quote p {
    margin: 0 0 var(--space-md);
    color: var(--color-text);
    font-size: var(--font-lg);
    line-height: var(--line-snug);
    font-weight: 500;
}

.uk-doc-voice-quote cite {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.uk-doc-voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.uk-doc-voice-do,
.uk-doc-voice-dont {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: relative;
}

.uk-doc-voice-do {
    border-left: 3px solid var(--color-success);
}

.uk-doc-voice-dont {
    border-left: 3px solid var(--color-error);
}

.uk-doc-voice-flag {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.uk-doc-voice-flag--do {
    background: rgba(var(--color-success-rgb), 0.15);
    color: var(--color-success);
}

.uk-doc-voice-flag--dont {
    background: rgba(var(--color-error-rgb), 0.15);
    color: var(--color-error);
}

.uk-doc-voice-do p,
.uk-doc-voice-dont p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-md);
    line-height: var(--line-snug);
}

.uk-doc-voice-note {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    line-height: var(--line-snug);
}

/* ----- Brand assets ----- */
.uk-doc-asset-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.uk-doc-asset-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
}

.uk-doc-asset-row--flag {
    border-color: rgba(var(--color-warning-rgb), 0.3);
    background:
        linear-gradient(180deg,
            rgba(var(--color-warning-rgb), 0.04) 0%,
            transparent 100%),
        var(--color-bg);
}

.uk-doc-asset-preview {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
}

.uk-doc-asset-preview img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
}

.uk-doc-asset-preview--favicon img {
    max-width: 28px;
    max-height: 28px;
}

.uk-doc-asset-preview--missing {
    background:
        repeating-linear-gradient(45deg,
            rgba(var(--color-warning-rgb), 0.15) 0 6px,
            transparent 6px 12px),
        var(--color-bg-card);
    color: var(--color-warning);
    font-weight: 600;
}

.uk-doc-asset-preview--svg {
    padding: var(--space-xs);
}

.uk-doc-asset-preview--svg img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.55);
}

.uk-doc-asset-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.uk-doc-asset-name {
    color: var(--color-text);
    font-size: var(--font-md);
    font-weight: 600;
}

.uk-doc-asset-body code {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    padding: 2px 6px;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    word-break: break-all;
}

.uk-doc-asset-note {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
}

.uk-doc-asset-note code {
    align-self: auto;
    display: inline;
    padding: 1px 4px;
    font-size: 0.85em;
}

@media (max-width: 720px) {
    .uk-doc-asset-row {
        grid-template-columns: 1fr;
    }

    .uk-doc-asset-preview {
        height: 80px;
    }
}

/* ============================================
   PAGE CHROME catalog supports — Phase 2.2
   Showcase wrappers and decorative scaffolding for the
   .uk-page-shell / .uk-section-pad / .uk-grid-cards articles.
   The primitives themselves live in their own files
   (uk-page-shell.css, uk-section-pad.css, prose.css, uk-grid-cards.css);
   this block only styles the scaffolding around them.
   ============================================ */

/* ---- Page shell mock frames ---- */
.uk-doc-pageshell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    width: 100%;
}

.uk-doc-pageshell-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
}

.uk-doc-pageshell-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-xs);
}

.uk-doc-pageshell-cap code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
}

.uk-doc-pageshell-cap span {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
}

.uk-doc-pageshell-frame {
    position: relative;
    height: 220px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.uk-doc-pageshell-nav {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--layout-nav-height);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.uk-doc-pageshell-nav span {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.uk-doc-pageshell-stage {
    height: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.uk-doc-pageshell-content {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px dashed rgba(var(--color-primary-rgb), 0.35);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
}

/* ---- Section padding visual ladder ---- */
.uk-doc-sectionpad-frame {
    width: 100%;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        var(--color-bg);
    background-size: 24px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.uk-doc-sectionpad-row {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    background:
        linear-gradient(180deg,
            rgba(var(--color-primary-rgb), 0.08) 0%,
            rgba(var(--color-primary-rgb), 0.18) 50%,
            rgba(var(--color-primary-rgb), 0.08) 100%);
    background-clip: content-box;
    -webkit-background-clip: content-box;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.uk-doc-sectionpad-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.uk-doc-sectionpad-label code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
}

.uk-doc-sectionpad-label em {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-style: normal;
}

/* ---- Docs layout showcase frame ---- */
.uk-doc-doclayout-frame {
    position: relative;
    display: flex;
    width: 100%;
    height: 360px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Scope .uk-docs-sidebar inside the demo frame: drop position: fixed so the
   sidebar stays inside its parent. Same dimensions, same internal styling. */
.uk-doc-doclayout-frame .uk-doc-doclayout-sidebar.uk-docs-sidebar {
    position: relative;
    top: auto;
    left: auto;
    height: 100%;
    flex-shrink: 0;
    z-index: 0;
}

.uk-doc-doclayout-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-lg);
    overflow: hidden;
}

.uk-doc-doclayout-content-pad {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px dashed rgba(var(--color-primary-rgb), 0.25);
    border-radius: var(--radius-md);
}

.uk-doc-doclayout-tag {
    align-self: flex-start;
    padding: 2px 8px;
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Grid-cards demo wrapper ---- */
.uk-doc-gridcards-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.uk-doc-gridcards-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.uk-doc-gridcards-label code {
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================
   Roadmap — milestone-style list
   ============================================ */
.uk-doc-roadmap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    counter-reset: uk-doc-milestone;
}

.uk-doc-roadmap li {
    position: relative;
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
    transition: border-color var(--transition-fast);
}

.uk-doc-roadmap li:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
}

.uk-doc-roadmap li::before {
    counter-increment: uk-doc-milestone;
    content: counter(uk-doc-milestone);
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
}

.uk-doc-roadmap strong {
    color: var(--color-primary-light);
    margin-right: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

/* ============================================
   docs-header h1 — make Internal badge align nicer
   ============================================ */
.docs-header h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* ============================================
   PROPOSED CANONICALS — staged on UI Kit only
   These classes preview where production primitives
   are heading. They live ONLY on /docs/ui-kit until
   the catalog polish phase is done; nothing on the
   main site uses them yet.

   .uk-btn-primary / .uk-btn-ghost / .uk-btn-danger moved to
   public/css/uk-btn.css (Phase 1.5 strip — buttons are now the first
   subsystem fully autonomous from the legacy stack).
   ============================================ */

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .uk-doc-meta {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .uk-doc-meta dt {
        padding-top: var(--space-sm);
    }

    .uk-doc-component {
        padding: var(--space-lg);
    }

    .uk-doc-showcase {
        padding: var(--space-lg);
    }

    .uk-doc-font-sample {
        flex-direction: column;
        gap: 4px;
    }

    .uk-doc-section > h2 {
        padding-left: var(--space-sm);
    }

    .uk-doc-section-desc {
        margin-left: var(--space-sm);
    }
}