/* Audit page — single-purpose admin-only doc summarizing the 2026-06-14
   QA pass. Styled to match the rest of the site (theme.css tokens) so
   light/dark mode flips with the OS like every other page. */
.page-body {
    max-width: 880px;
    margin: 0 auto;
    /* Bottom padding is intentionally taller than the site default (48px) —
       this is a long single-scroll document and the extra room gives the
       print/PDF footer breathing space. */
    padding: 24px 32px 64px 32px;
    font-size: 14px;
    line-height: 1.55;
}
.page-header { margin-bottom: 28px; }
.page-header h1 { margin: 0 0 4px; font-size: 26px; }
.page-header .meta {
    color: var(--text-muted);
    font-size: 13px;
}

h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 8px;
    color: var(--text);
}
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 22px; }
li { margin-bottom: 5px; }
code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    background: var(--bg-card);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
}
strong { font-weight: 600; }

/* Stats strip at the top — six tiles in a responsive grid. */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}
.stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}
.stat .num {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stat .lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.stats-note {
    margin-top: -16px;
    color: var(--text-muted);
    font-size: 12px;
}

/* Before/after callout block for the major sections. */
.callout {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 12px 0;
    font-size: 13px;
}
.callout .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.callout.good   { border-left-color: var(--success); }
.callout.bad    { border-left-color: var(--danger); }

/* Print: hide nav, allow page breaks to fall naturally. */
@media print {
    .site-nav, .back-link { display: none; }
    .page-body { max-width: none; padding: 0; }
    a { color: inherit; text-decoration: none; }
    h2 { page-break-after: avoid; }
}

.back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--link);
    text-decoration: none;
    font-size: 13px;
}
.back-link:hover { text-decoration: underline; }
.print-btn {
    float: right;
    padding: 6px 14px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.print-btn:hover { background: var(--accent-hover); }