/* ── The public information pages (templates/pages/) ────────────────────────
   One readable column: the row of links between the pages, the title, then prose. */

.info {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-8);
}

/* The pages, side by side, wrapping on a narrow phone. */
.info-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

.info-nav-link {
    flex: none;
    padding: 6px var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.info-nav-link:hover { color: var(--text-primary); }
.info-nav-link.is-current { background: var(--brand); border-color: var(--brand); color: var(--white); }

.info-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.info-title { margin: 0; font-family: var(--font-title); font-size: var(--font-size-3xl); font-weight: 400; }
.info-lede { margin: 0; font-size: var(--font-size-lg); color: var(--text-secondary); }
.info-updated { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); }

/* Prose. */
.info-body { font-size: var(--font-size-md); line-height: 1.6; overflow-wrap: break-word; }
.info-body h2 {
    margin: var(--space-6) 0 var(--space-2);
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 400;
}
.info-body h2:first-child { margin-top: 0; }
.info-body h3 { margin: var(--space-4) 0 var(--space-1); font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: 700; }
.info-body p { margin: 0 0 var(--space-3); }
.info-body ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.info-body li { margin-bottom: var(--space-1); }
.info-body a { color: var(--brand); }

/* Help's questions: closed until tapped. */
.info-qa { border-bottom: 1px solid var(--border); }
.info-qa summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.info-qa summary::-webkit-details-marker { display: none; }
.info-qa summary::after { content: "+"; flex: none; color: var(--text-muted); font-weight: 400; }
.info-qa[open] summary::after { content: "\2212"; }
.info-qa-body { padding-bottom: var(--space-2); color: var(--text-secondary); }

/* Play responsibly's edges. */
.info-table { width: 100%; margin: 0 0 var(--space-3); border-collapse: collapse; font-size: var(--font-size-sm); }
.info-table th,
.info-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.info-table th { color: var(--text-secondary); font-weight: 600; }
.info-table td:last-child,
.info-table th:last-child { padding-left: var(--space-3); text-align: right; white-space: nowrap; }
.info-table td:last-child { font-family: var(--font-mono); }