/* /terms and /privacy (templates/legal_page.html): a page meant to be READ, top to bottom.
   Theme tokens only (static/theme.css), so light and dark both work. Type: 17px body on a 44rem measure with 1.65 line height; nothing under 14px;
   headings in sentence case from the shared text (legal/*.html). Every link is a 44px-tall target. The same class names are styled by the website's
   own stylesheet (C:\wisphero-site\src\site.css) - the shared fragment carries classes only, never inline styles. */
.ph-legal-page {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ph-bg);
    color: var(--ph-text);
}
.ph-legal-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding: .5rem max(1rem, calc((100% - 44rem) / 2));
    background: color-mix(in srgb, var(--ph-surface) 92%, transparent);
    border-bottom: 1px solid var(--ph-border);
    backdrop-filter: blur(8px);
}
.ph-legal-home { display: inline-flex; align-items: center; min-height: 44px; }
.ph-legal-home img { height: 28px; width: auto; }
.ph-legal-switch { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-right: auto; }
.ph-legal-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1rem;
    color: var(--ph-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.ph-legal-switch a:hover { color: var(--ph-text); }
.ph-legal-switch a[aria-current="page"] { color: var(--ph-text); font-weight: 600; border-bottom-color: var(--ph-accent-text); }
.ph-legal-theme {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ph-border);
    border-radius: .5rem;
    background: var(--ph-surface);
    color: var(--ph-text-muted);
    cursor: pointer;
}
.ph-legal-theme:hover { color: var(--ph-text); }

.ph-legal-main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 1rem; }

.legal-doc { font-size: 1.0625rem; line-height: 1.65; color: var(--ph-text-secondary); }
.legal-doc h1, .legal-doc h2, .legal-doc h3 { color: var(--ph-text); line-height: 1.25; text-wrap: balance; }
.legal-doc h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .25rem; }
.legal-doc h2 { font-size: 1.3125rem; font-weight: 700; margin: 2.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--ph-border); scroll-margin-top: 4.5rem; }
.legal-doc h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 1rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.5rem; }
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc ol.legal-alpha { list-style: lower-alpha; }
.legal-doc li { margin: 0 0 .5rem; padding-left: .25rem; }
.legal-doc li::marker { color: var(--ph-text-muted); }
.legal-doc strong { color: var(--ph-text); font-weight: 700; }
.legal-doc a { color: var(--ph-accent-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.legal-doc a:hover { text-decoration-thickness: 2px; }
/* A link inside running text keeps the line height; its tap area grows invisibly to 44px (vertical padding on an inline box does not move the text). */
.legal-doc p a, .legal-doc li a { padding: .8rem 0; }
.legal-doc section { scroll-margin-top: 4.5rem; }
.legal-doc :target > h2 { color: var(--ph-accent-text); }

.legal-meta { font-size: 1rem; color: var(--ph-text-muted); margin-bottom: 1rem; }
.legal-lede { font-size: 1.125rem; color: var(--ph-text); }

.legal-short {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem .25rem;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-left: 4px solid var(--ph-accent-text);
    border-radius: .5rem;
}
.legal-short h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.125rem; }
.legal-short p { font-size: .9375rem; color: var(--ph-text-muted); }

.legal-toc { margin: 1.5rem 0 0; }
.legal-toc h2 { font-size: 1rem; text-transform: none; margin: 0 0 .25rem; padding-top: 0; border-top: 0; color: var(--ph-text-muted); }
.legal-toc ol { columns: 2 16rem; column-gap: 2rem; margin: 0; }
.legal-toc li { margin: 0; break-inside: avoid; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; text-decoration: none; color: var(--ph-accent-text); }
.legal-toc a:hover { text-decoration: underline; }

.legal-strong { color: var(--ph-text); }

.ph-legal-foot {
    max-width: 44rem;
    margin: 1rem auto 0;
    padding: 1.25rem 1rem 3rem;
    border-top: 1px solid var(--ph-border);
    font-size: .9375rem;
    color: var(--ph-text-muted);
}
.ph-legal-foot p { margin: 0 0 .25rem; }
.ph-legal-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ph-accent-text); text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 30rem) {
    .legal-doc { font-size: 1rem; }
    .legal-doc h1 { font-size: 1.625rem; }
    .legal-doc h2 { font-size: 1.1875rem; }
    .ph-legal-main { padding-top: 1.25rem; }
}

@media print {
    .ph-legal-bar, .ph-legal-theme, .legal-toc { display: none; }
    .ph-legal-page { overflow: visible; }
    .legal-doc a { color: inherit; }
}