/*
 * ── The documentation footer ──────────────────────────────────────────────
 *
 * Shared by /developers/api and the per-template API reference, which load
 * different stylesheets otherwise. One small sheet rather than the same forty
 * declarations copied into both — the two pages already disagree about
 * everything else, and the footer is the one part of them that must not.
 *
 * Tokens only, logical properties throughout.
 */

.dcf {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    border-block-start: 1px solid var(--color-rule);
    background: var(--color-paper-sunken);
}

.dcf__in,
.dcf__base {
    width: 100%;
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.dcf__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-block: clamp(2rem, 4vw, 3rem);
}

.dcf__mark {
    display: inline-flex;
    text-decoration: none;
}

.dcf__note {
    max-width: 34ch;
    margin: var(--space-sm) 0 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.dcf__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--space-lg);
}

.dcf__col-name {
    margin: 0 0 var(--space-sm);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dcf__list,
.dcf__legal {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dcf__list {
    flex-direction: column;
    gap: var(--space-xs);
}

.dcf__link {
    color: var(--color-ink-soft);
    font-size: 13px;
    text-decoration: none;
    transition: color var(--dur-short) var(--ease-out);
}

.dcf__link:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.dcf__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.dcf__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding-block: var(--space-md) clamp(1.5rem, 4vw, 2.5rem);
    border-block-start: 1px solid var(--color-rule-soft);
}

.dcf__copy {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
}

/* The page's own line — which template, generated when. Set apart so it reads
   as a note about this document rather than as part of the copyright. */
.dcf__colophon {
    display: block;
    margin-block-start: 3px;
    color: var(--color-muted);
    font-size: 11.5px;
}

.dcf__legal { flex-wrap: wrap; gap: var(--space-lg); }

@media (min-width: 46rem) {
    .dcf__in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); }
}

@media print {
    .dcf { background: none; }
    .dcf__nav { display: none; }
}