/* ============================================================================
   kHouse Dossier · Utilities + Styleguide-page-only chrome
   ----------------------------------------------------------------------------
   Tiny utility helpers + the special layout used inside the styleguide doc.
   ============================================================================ */

.kd-stack-1  { display: flex; flex-direction: column; gap: var(--kd-s-1); }
.kd-stack-2  { display: flex; flex-direction: column; gap: var(--kd-s-2); }
.kd-stack-3  { display: flex; flex-direction: column; gap: var(--kd-s-3); }
.kd-stack-4  { display: flex; flex-direction: column; gap: var(--kd-s-4); }
.kd-stack-5  { display: flex; flex-direction: column; gap: var(--kd-s-5); }
.kd-stack-6  { display: flex; flex-direction: column; gap: var(--kd-s-6); }
.kd-row      { display: flex; gap: var(--kd-s-3); align-items: center; flex-wrap: wrap; }
.kd-row-end  { display: flex; gap: var(--kd-s-3); align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.kd-grid-2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kd-gap-grid); }
.kd-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kd-gap-grid); }
.kd-grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kd-gap-grid); }

@media (max-width: 1024px) {
    .kd-grid-3, .kd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kd-grid-2, .kd-grid-3, .kd-grid-4 { grid-template-columns: 1fr; }
}

/* ===== Styleguide layout: sidebar + content ===== */
.kd-doc {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}
.kd-doc__nav {
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow-y: auto;
    padding: var(--kd-s-7) var(--kd-s-5);
    border-right: var(--kd-border-w) solid var(--kd-border);
    background: var(--kd-bg-alt);
}
.kd-doc__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--kd-s-7); }
.kd-doc__nav-section { font-family: var(--kd-font-mono); font-size: var(--kd-text-0); text-transform: uppercase; letter-spacing: var(--kd-track-mono); color: var(--kd-fg-muted); margin: var(--kd-s-5) 0 var(--kd-s-2); }
.kd-doc__nav-section:first-child { margin-top: 0; }
.kd-doc__nav a {
    display: block;
    font-size: var(--kd-text-2);
    color: var(--kd-fg-muted);
    padding: 6px 8px;
    border-radius: var(--kd-radius);
    transition: color var(--kd-dur) var(--kd-ease), background var(--kd-dur) var(--kd-ease);
}
.kd-doc__nav a:hover { color: var(--kd-fg); background: var(--kd-bg); }
.kd-doc__main { padding: var(--kd-s-9) var(--kd-s-9); max-width: 1080px; }

/* Doc section block */
.kd-doc-section { padding-block: var(--kd-s-8); border-bottom: var(--kd-border-w) solid var(--kd-border); }
.kd-doc-section:last-child { border-bottom: 0; }
.kd-doc-section__head { display: flex; align-items: baseline; gap: var(--kd-s-4); margin-bottom: var(--kd-s-6); }
.kd-doc-section__num  { font-family: var(--kd-font-mono); font-size: var(--kd-text-1); color: var(--kd-fg-muted); letter-spacing: var(--kd-track-mono); }
.kd-doc-section__title { font-size: var(--kd-text-7); font-weight: var(--kd-w-bold); letter-spacing: var(--kd-track-snug); }
.kd-doc-section__desc  { color: var(--kd-fg-muted); font-size: var(--kd-text-3); margin-bottom: var(--kd-s-6); max-width: 60ch; }

/* Demo frame — wraps a live example */
.kd-demo {
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg);
    overflow: hidden;
}
.kd-demo__bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; border-bottom: var(--kd-border-w) solid var(--kd-border);
    background: var(--kd-bg-alt);
}
.kd-demo__bar .kd-mono { font-size: var(--kd-text-0); }
.kd-demo__body { padding: var(--kd-s-7); }
.kd-demo__body--alt { background: var(--kd-bg-alt); }
.kd-demo__body--sunken { background: var(--kd-bg-sunken); }

/* Token swatch grid */
.kd-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--kd-s-3); }
.kd-swatch {
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    overflow: hidden;
    background: var(--kd-bg);
}
.kd-swatch__chip { height: 64px; display: block; border-bottom: var(--kd-border-w) solid var(--kd-border); }
.kd-swatch__meta { padding: 10px 12px; }
.kd-swatch__name { font-size: var(--kd-text-2); font-weight: var(--kd-w-semi); }
.kd-swatch__token { font-family: var(--kd-font-mono); font-size: var(--kd-text-0); color: var(--kd-fg-muted); letter-spacing: var(--kd-track-loose); }

/* Type specimen row */
.kd-spec { display: grid; grid-template-columns: 120px 1fr; gap: var(--kd-s-5); align-items: baseline; padding-block: var(--kd-s-3); border-bottom: var(--kd-border-w) solid var(--kd-border); }
.kd-spec:last-child { border-bottom: 0; }
.kd-spec__name { font-family: var(--kd-font-mono); font-size: var(--kd-text-1); color: var(--kd-fg-muted); text-transform: uppercase; letter-spacing: var(--kd-track-mono); }

/* Spacing scale visual */
.kd-spacing-row { display: grid; grid-template-columns: 100px 80px 1fr; gap: var(--kd-s-4); align-items: center; padding-block: 6px; }
.kd-spacing-row__bar { height: 12px; background: var(--kd-fg); }

/* Index landing card */
.kd-landing { min-height: 100vh; display: grid; place-items: center; padding: var(--kd-s-9) var(--kd-s-6); }
.kd-landing__card { max-width: 720px; width: 100%; }
.kd-landing__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kd-s-4); margin-top: var(--kd-s-7); }
.kd-landing__tile {
    display: block;
    padding: var(--kd-s-7);
    background: var(--kd-bg);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    transition: border-color var(--kd-dur) var(--kd-ease), transform var(--kd-dur) var(--kd-ease);
}
.kd-landing__tile:hover { border-color: var(--kd-fg); transform: translateY(-2px); }

@media (max-width: 900px) {
    .kd-doc { grid-template-columns: 1fr; }
    .kd-doc__nav { position: static; height: auto; border-right: 0; border-bottom: var(--kd-border-w) solid var(--kd-border); }
    .kd-doc__main { padding: var(--kd-s-6); }
    .kd-landing__pair { grid-template-columns: 1fr; }
}