/**
 * The design system page — chrome only.
 *
 * Everything here is ds- prefixed so it cannot leak into the components on
 * display. The components themselves are styled by their own stylesheets,
 * loaded the normal way; this file must never restyle one.
 *
 * The page states no design values of its own. Swatches read computed custom
 * properties at runtime (design-system.js), so it cannot drift from
 * tokens.css: a renamed token goes missing here rather than quietly stale.
 */

.ds-wrap {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-5xl);
}

.ds-lede {
    max-width: 44rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xl);
}

.ds-status {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.ds-status.is-bad {
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
}

.ds-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
}

/* ── Section scaffolding ─────────────────────────────────────────────── */

.ds-sec {
    margin-bottom: var(--spacing-5xl);
    scroll-margin-top: var(--spacing-xl);
}

.ds-sec > h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--spacing-xs);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-dark);
}

.ds-sub {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin: var(--spacing-2xl) 0 var(--spacing-sm);
}

.ds-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xs);
}

.ds-meta code {
    font-family: var(--font-family-mono);
    color: var(--color-text-light);
}

.ds-note {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    max-width: 46rem;
}

.ds-toc {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
}

.ds-toc a {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    text-decoration: none;
}

.ds-toc a:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.ds-fold > summary {
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    padding: var(--spacing-xs) 0;
}

/* ── Sample staging ──────────────────────────────────────────────────────
   A sample sits in a box that fits it, rather than floating at the left edge
   of a wide column. Without this a correctly-sized component reads as small
   because of the empty field around it. Nothing here scales a sample. */

.ds-stage {
    display: inline-block;
    max-width: 100%;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.ds-stage--full {
    display: block;
}

.ds-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.ds-stack > * {
    margin-bottom: var(--spacing-sm);
}

.ds-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* The modal backdrop is fixed and full-screen in the product. Un-fixing it
   lets several sit on the page at once; nothing else is touched.
   position:relative, not static, because .modal is the containing block for
   anything absolutely positioned inside a modal.
   .modal also stands in for the viewport, since .modal-content sizes itself
   against it (width 90%, capped by its own max-width). The width below is
   only chosen to be past the point where that cap wins, so the sample is the
   real width without this page ever naming the number. */
.ds-modal-stage {
    position: relative;
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    /* The dot pool behind a modal is 1100px across. In production it sits on a
       full-screen backdrop; here it would spill over the page between stages. */
    overflow: hidden;
}

.ds-modal-stage .modal {
    position: relative;
    width: 680px;
    max-width: 100%;
    height: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    z-index: auto;
    padding: 0;
}

.ds-modal-stage .modal-content {
    transform: none;
    max-height: none;
}

/* The cookie banner centres itself with left:50% and a translate off its
   containing block. Absolute inside a relative stage keeps those real rules
   doing the real work; pinning it to static would throw the centring away. */
.ds-banner-stage {
    position: relative;
    min-height: 140px;
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-lg);
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.ds-banner-stage .cookie-banner {
    position: absolute;
}

/* The script nav is a full-width bar, so it gets a full-width stage. */
.ds-nav-stage {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.ds-nav-stage .script-nav {
    position: static;
}

/* The notes panel is fixed to the window and parked off the right edge until
   it is opened. Neutralising the position and the transform is all this does;
   the skin, the width and the inset are the real rules doing the real work. */
.ds-panel-stage {
    position: relative;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.ds-panel-stage .notes-rail {
    position: static;
    transform: none;
    max-width: 100%;
}

/* A line of script, so the marks on it are shown in the face they are read in. */
.ds-panel-stage .ds-gutter {
    font-family: var(--script-font);
}

/* ── Swatches ────────────────────────────────────────────────────────────
   A chip holds no value of its own: the fill is set from the custom property
   and the caption reports back whatever the browser resolved. */

.ds-chip {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tag);
    overflow: hidden;
}

.ds-chip .ds-fill {
    height: 92px;
}

.ds-chip .ds-cap {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xxs);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
}

.ds-chip .ds-name {
    font-family: var(--font-family-mono);
    display: block;
    word-break: break-all;
}

.ds-chip .ds-val {
    color: var(--color-text-lighter);
    display: block;
    word-break: break-all;
}

.ds-missing .ds-fill {
    background: repeating-linear-gradient(45deg,
            var(--color-error-light) 0 8px, transparent 8px 16px);
}

.ds-missing .ds-name {
    color: var(--color-error);
}

/* ── Scales ──────────────────────────────────────────────────────────── */

.ds-spec {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.ds-spec .ds-label {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    min-width: 220px;
    color: var(--color-text-light);
}

/* Navy, not orange. Orange means "do this", and a measuring bar is
   decoration, which is the one use the brand forbids. */
.ds-bar-viz {
    background: var(--color-navy);
    height: 12px;
    border-radius: var(--border-radius-xs);
}

.ds-spec .ds-cap {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xxs);
    color: var(--color-text-lighter);
    white-space: nowrap;
}

.ds-type-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-lg);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.ds-type-row .ds-label {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xxs);
    color: var(--color-text-lighter);
    min-width: 190px;
    flex-shrink: 0;
}

.ds-shadow-box {
    width: 120px;
    height: 72px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.ds-radius-box {
    width: 92px;
    height: 62px;
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border-dark);
    display: grid;
    place-items: center;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xxs);
    color: var(--color-text-light);
}

.ds-icon-cell {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: var(--spacing-lg) 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tag);
    text-align: center;
}

.ds-icon-cell i {
    font-size: var(--font-size-xl);
}

.ds-icon-cell span {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xxs);
    color: var(--color-text-light);
    word-break: break-all;
}

.ds-ruler {
    font-family: var(--script-font);
    font-size: 12pt;
    display: inline-block;
}

@media (max-width: 700px) {
    .ds-spec {
        flex-wrap: wrap;
    }

    .ds-spec .ds-label,
    .ds-type-row .ds-label {
        min-width: 0;
        flex-basis: 100%;
    }
}