/* Guides index and article pages.
   Loaded after styles.css and pages.css, which supply every token used here. */

/* ---- bylines -------------------------------------------------------------- */

.byline {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-faint);
}

.byline-author {
    color: var(--text-muted);
}

.byline-sep {
    opacity: 0.5;
    margin: 0 2px;
}

/* ---- index listing -------------------------------------------------------- */

.guide-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-card {
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
}

.guide-card:first-child {
    padding-top: 4px;
}

.guide-card:last-child {
    border-bottom: 0;
}

.page-content .guide-card h2 {
    font-size: 1.1875rem;
    line-height: 1.35;
    margin-bottom: 8px;
    letter-spacing: -0.012em;
}

.page-content .guide-card h2 a {
    color: var(--text);
    text-decoration: none;
}

.page-content .guide-card h2 a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.guide-meta {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}

.page-content .guide-card p {
    margin-top: 0;
}

/* ---- article furniture ---------------------------------------------------- */

/* Reference tables run wide, so they scroll rather than squeezing the type. */
.table-scroll {
    margin-top: 18px;
    overflow-x: auto;
}

.table-scroll table {
    margin-top: 0;
    min-width: 30rem;
}

.page-content td code,
.page-content th code {
    white-space: nowrap;
}

.page-content .numeric {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* Key/value rows for things like a measurement summary. */
.page-content .figure-note {
    margin-top: 10px;
    font-size: 0.875rem;
    color: var(--text-faint);
}

/* ---- prev / next ---------------------------------------------------------- */

.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 52px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.pager-link {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.page-content .pager-link {
    color: var(--text);
    text-decoration: none;
}

.pager-link:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.pager-link:last-child {
    text-align: right;
}

.pager-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.pager-title {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.4;
}

@media (max-width: 560px) {
    .pager {
        grid-template-columns: 1fr;
    }

    .pager-link:last-child {
        text-align: left;
    }
}

/* ---- code blocks ---------------------------------------------------------- */

.page-content pre {
    margin: 18px 0 0;
    padding: 16px 18px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.page-content pre code {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre;
    color: var(--text-muted);
}