/* Legal pages (terms, privacy, etc.) — used only on legal.php, so it gets its own <link> there
   instead of being @import'd into style.css. */
.legal-section { border: 1px solid var(--clr-border); border-radius: var(--radius-large); margin-bottom: 1rem; overflow: hidden; }
.legal-summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.85rem 1.1rem; cursor: pointer; font-size: 1.05rem; font-weight: 600; background: var(--clr-surface); list-style: none; user-select: none; }
.legal-summary::-webkit-details-marker { display: none; }
.legal-summary::before { content: '▶'; font-size: 0.7em; color: var(--clr-text-muted); transition: transform 0.15s; flex-shrink: 0; }
.legal-section[open] > .legal-summary::before { transform: rotate(90deg); }
.legal-summary:hover { background: var(--clr-surface-alt); }
.legal-date { font-size: 0.8rem; font-weight: 400; color: var(--clr-text-muted); }
.legal-body { padding: 0.75rem 0 0.25rem; }
.legal-body .page-card { margin: 0 0.75rem 0.75rem; }
.legal-body .page-card h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.legal-n { color: var(--clr-text-muted); font-weight: 400; font-size: 0.85em; margin-right: 0.3em; }
.legal-note { font-size: 0.875rem; color: var(--clr-text-muted); }

.legal-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.5rem 0; }
.legal-table th, .legal-table td { text-align: left; padding: 0.5rem 0.65rem; border: 1px solid var(--clr-border); vertical-align: top; }
.legal-table th { color: var(--clr-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--clr-surface-alt); }