/* Shared scale for information pages and forms. Components are opt-in. */
:root {
    --page-title-size: 2rem;
    --page-heading-size: 1.375rem;
    --page-spacing: 3rem;
}
.page-shell { padding: var(--page-spacing) 0; background: var(--bg-primary); }
.page-shell--compact { --page-spacing: 2rem; }
.page-content { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.page-content--form { max-width: 640px; }
.page-content--wide { max-width: 1152px; }
.page-heading { margin-bottom: 28px; }
.page-heading > span { display: inline-flex; margin-bottom: 12px; }
.page-heading h1, h1.page-title {
    margin: 0 0 12px; font-size: var(--page-title-size); line-height: 1.25;
    font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary);
}
.page-heading p, .page-section p { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); }
.page-heading p + p, .page-section p + p { margin-top: 12px; }
.page-heading .page-kicker { margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: var(--accent-primary); }
.page-section { padding: 32px 0; border-top: 1px solid var(--border-color); }
.page-section h2, .page-panel h2 {
    margin: 0 0 12px; font-size: var(--page-heading-size); line-height: 1.35;
    font-weight: 600; color: var(--text-primary);
}
.page-panel { padding: 24px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.page-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 8px;
    font-size: 1rem; line-height: 1.4; font-weight: 600; text-decoration: none;
    background: var(--accent-primary); color: white; cursor: pointer;
}
.page-button:hover { background: var(--accent-hover); color: white; }
.page-button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.page-button:disabled { opacity: 0.5; cursor: not-allowed; }
.page-note { margin-top: 20px; font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }
.page-note--divided { padding-top: 16px; border-top: 1px solid var(--border-color); }
.page-form { gap: 16px; }
.page-form:not(.hidden) { display: grid; }
.page-form label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.page-form input:not([type="hidden"]), .page-form select, .page-form textarea {
    width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--input-border);
    border-radius: 6px; font-size: 0.875rem; line-height: 1.5;
    background: var(--input-bg); color: var(--text-primary);
}
.page-form input::placeholder, .page-form textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.page-form input:focus, .page-form select:focus, .page-form textarea:focus {
    outline: 2px solid var(--accent-primary); outline-offset: 2px; border-color: var(--accent-primary);
}
.page-form textarea { min-height: 104px; resize: vertical; }
.page-form .page-button { min-height: 40px; padding: 8px 16px; font-size: 0.875rem; border-radius: 6px; }
.page-form-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.page-form-row { display: flex; align-items: stretch; gap: 12px; }
.page-form-row input { flex: 1; }
.page-form-row .page-button { flex-shrink: 0; }
.legal-copy p { white-space: pre-line; overflow-wrap: anywhere; }
.legal-intro { margin-bottom: 28px; }
.legal-intro p { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); }
.legal-intro p + p { margin-top: 12px; }
.page-heading .page-updated { font-size: 0.875rem; color: var(--text-secondary); }
@media (max-width: 640px) {
    :root { --page-title-size: 1.75rem; --page-spacing: 2rem; }
    .page-content { padding: 0 20px; }
    .page-panel { padding: 20px; }
    .page-form-row { flex-direction: column; }
    .page-form-fields { grid-template-columns: minmax(0, 1fr); }
    .page-form input:not([type="hidden"]), .page-form select, .page-form textarea { min-height: 44px; font-size: 1rem; }
    .page-form textarea { min-height: 112px; }
    .page-form .page-button { min-height: 44px; }
}