/**
 * Styleguide site — the presentation of static.jsengenberger.de itself.
 *
 * Not part of the framework. Everything here is prefixed `sg-` so that nobody
 * copies it into a project by mistake: the specimens inside `.sg-specimen__stage`
 * are pure framework markup, the frame around them is this file.
 *
 * Same rules as the framework (REGELN.md §1): every colour, size, space and
 * radius comes from a token. `npm run waechter` checks this file too.
 */

/* ===================================================================
   Layout: sticky sidebar + content
   =================================================================== */

.sg-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.sg-nav {
    position: sticky;
    top: var(--navbar-height);
    align-self: start;
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-2xl);
    border-right: 1px solid var(--border-color);
}

.sg-nav__group {
    margin: var(--spacing-lg) 0 var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.sg-nav__group:first-child { margin-top: 0; }

.sg-nav__link {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.sg-nav__link:hover { color: var(--text-primary); background-color: var(--hover-bg); text-decoration: none; }
.sg-nav__link[aria-current="location"] {
    color: var(--color-primary-text);
    background-color: var(--color-primary-alpha);
    font-weight: var(--font-weight-medium);
}

.sg-main {
    min-width: 0;
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-3xl);
}

/* ===================================================================
   Intro
   =================================================================== */

.sg-hero__title {
    margin: var(--spacing-sm) 0 var(--spacing-sm);
    font-size: var(--font-size-4xl);
    letter-spacing: var(--letter-spacing-tight);
}
.sg-hero__lead {
    max-width: 60ch;
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

/* ===================================================================
   Sections
   =================================================================== */

.sg-group-title {
    margin: var(--spacing-3xl) 0 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.sg-section {
    padding-top: var(--spacing-2xl);
    scroll-margin-top: var(--navbar-height);
}
.sg-section__title { margin: 0 0 var(--spacing-xs); font-size: var(--font-size-2xl); }
.sg-section__lead {
    max-width: 72ch;
    margin: 0 0 var(--spacing-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

/* ===================================================================
   Specimen: a live example on a stage, its source folded underneath
   =================================================================== */

.sg-specimen {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    overflow: hidden;
}

/* Layout containment makes the stage the containing block for fixed
   content, so an overlay stays on the stage instead of covering the page
   (measured: `container-type` on a card does not do this). Sticky parts of
   a specimen are shown where they sit, not where they would stick. */
.sg-specimen__stage {
    contain: layout;
    overflow: auto;
    padding: var(--spacing-xl);
}
.sg-specimen__stage .navbar,
.sg-specimen__stage .tabs { position: static; }

/* A fixed overlay takes no room in the flow, so on its own it would give the
   stage no height. Shown in the flow instead, it grows with whatever dialog
   it holds; the backdrop runs to the edges of the stage. */
.sg-specimen__stage:has(> .modal-overlay) { padding: 0; }
.sg-specimen__stage > .modal-overlay {
    position: relative;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

/* The print header exists only on paper; the showcase shows it anyway. */
.sg-specimen__stage .print-header { display: flex !important; }

/* A form in a specimen is as wide as a form on a page, not as the stage. */
.sg-specimen__stage > .form-group { max-width: 32rem; }
.sg-specimen__stage--flush { padding: 0; }

.sg-specimen__code { border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.sg-specimen__code > summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sg-specimen__code > summary::-webkit-details-marker { display: none; }
.sg-specimen__code > summary:hover { color: var(--text-primary); }
.sg-specimen__code > summary svg { transition: transform var(--transition-fast); }
.sg-specimen__code[open] > summary svg { transform: rotate(90deg); }
.sg-specimen__code pre {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
}

/* ===================================================================
   Foundations: colour swatches, type scale, spacing, radii
   =================================================================== */

.sg-swatch-group { margin-bottom: var(--spacing-lg); }
.sg-swatch-group__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md);
}
.sg-swatch {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-primary);
}
.sg-swatch__color { height: 64px; border-bottom: 1px solid var(--border-color); }
.sg-swatch__name {
    display: block;
    padding: var(--spacing-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.sg-scale { margin: 0; padding: 0; list-style: none; }
.sg-scale__row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color-light);
}
.sg-scale__row:last-child { border-bottom: 0; }
.sg-scale__label { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--text-secondary); }
.sg-scale__label b { display: block; font-weight: var(--font-weight-medium); color: var(--text-primary); }
.sg-scale__sample { line-height: var(--line-height-tight); overflow-wrap: anywhere; }
.sg-scale__bar { height: var(--spacing-md); border-radius: var(--radius-xs); background: var(--color-primary); }

.sg-radii { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); }
.sg-radius { margin: 0; text-align: center; }
.sg-radius__box {
    width: 72px;
    height: 72px;
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--border-color-dark);
    background: var(--bg-tertiary);
}
.sg-radius figcaption { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ===================================================================
   Phone: the sidebar becomes a strip under the navbar
   =================================================================== */

@media (max-width: 768px) {
    .sg-layout { grid-template-columns: minmax(0, 1fr); }
    .sg-nav {
        top: var(--navbar-height);
        z-index: var(--z-sticky);
        display: flex;
        gap: var(--spacing-2xs);
        height: auto;
        overflow-x: auto;
        padding: var(--spacing-sm) var(--spacing-md);
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-primary);
        white-space: nowrap;
    }
    .sg-nav__group { display: none; }
    .sg-main { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl); }
    .sg-section { scroll-margin-top: calc(var(--navbar-height) + var(--spacing-3xl)); }
    .sg-specimen__stage { padding: var(--spacing-md); }
    .sg-scale__row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
}

/* A disclosure that is the whole specimen (no stage above it). */
.sg-specimen__code--alone { border-top: 0; }
.sg-specimen__code--alone .table-scroll { border-top: 1px solid var(--border-color); }