/* Shared styling for the long-form pages: privacy, data-deletion, support.
 *
 * These pages are mostly prose, so the type rules live here rather than as
 * utility strings repeated on every paragraph — the repetition is what let the
 * old pages drift out of sync with each other and with the home page.
 *
 * Dark mode follows the home page: class-driven (`html.dark`, set by
 * assets/theme.js) so the light/system/dark switcher and these prose tokens
 * stay in step. Tokens mirror assets/theme.js (docs/DESIGN-SYSTEM.md §2); the
 * `--muted` tone is the pinned D-052 secondary (#67635B / #98958F), not a
 * hand-picked grey — the old #8A8378 fell to 3.0:1 on paper.
 */

:root {
    --page: #F4F1E9;        /* paper — D-064 "Vitsœ" ramp */
    --surface: #FBFAF5;     /* panel — D-064 "Vitsœ" ramp */
    --body: #57534E;        /* prose — warm gray, tuned for the paper canvas */
    --strong: #292524;      /* emphasis + headings */
    --muted: #67635B;       /* datelines, footer — D-052 secondary (4.8:1 on paper) */
    --rule: rgba(0, 0, 0, 0.08);
    --rule-strong: #292524;
    --bullet: rgba(0, 0, 0, 0.18);
    --code: rgba(0, 0, 0, 0.05);
    --link-underline: rgba(0, 0, 0, 0.25);
}

.dark {
    --page: #100F0D;        /* ink */
    --surface: #1C1B19;     /* inkpanel */
    --body: #A8A29E;
    --strong: #E7E5E4;
    --muted: #98958F;       /* D-052 secondary dark (6.4:1 on ink) */
    --rule: rgba(255, 255, 255, 0.10);
    --rule-strong: #E7E5E4;
    --bullet: rgba(255, 255, 255, 0.22);
    --code: rgba(255, 255, 255, 0.08);
    --link-underline: rgba(255, 255, 255, 0.3);
}

a {
    text-decoration: none;
}

/* Matches the home page's `.divider`, so headers/footers line up across pages. */
.divider {
    border-color: var(--rule);
}

.policy p,
.policy li {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--body);
}

.policy strong {
    color: var(--strong);
    font-weight: 600;
}

.policy h1,
.policy h2,
.policy h3 {
    color: var(--strong);
}

.policy ul {
    margin-bottom: 1.5rem;
}

.policy li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.policy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--bullet);
}

.policy code {
    font-size: 0.8125rem;
    background: var(--code);
    color: var(--strong);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, monospace;
}

/* `.plain` opts a link out of prose styling — nav and footer links style
   themselves with utilities. */
.policy a:not(.plain) {
    color: var(--strong);
    text-decoration: underline;
    text-decoration-color: var(--link-underline);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
}

.policy a:not(.plain):hover {
    text-decoration-color: var(--strong);
}

.rule {
    border-color: var(--rule);
}

/* The scope callout and the contact card. */
.card {
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.card-strong {
    border: 2px solid var(--rule-strong);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

/* Platform scope badges.
 *
 * These carry the weight of the whole privacy policy: a reader must never
 * mistake an Android-only practice (Crashlytics, OAuth credentials) for
 * something the iOS app does. Apple's review reads the page in whichever theme
 * the reviewer runs, so both variants have to stay loud. Blue/green is the
 * conventional iOS/Android pairing and is doing semantic work here, which is
 * why these two sit outside the warm canonical palette — desaturated to keep
 * them from shouting over the paper. */
.badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    vertical-align: 0.15em;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.badge-ios {
    background: #E3ECF7;
    color: #2A5A94;
    border: 1px solid #BFD4EA;
}

.badge-android {
    background: #E4EFE4;
    color: #3A6B41;
    border: 1px solid #C3DCC5;
}

.dark .badge-ios {
    background: rgba(96, 152, 214, 0.16);
    color: #8FB8E4;
    border-color: rgba(143, 184, 228, 0.35);
}

.dark .badge-android {
    background: rgba(106, 168, 114, 0.16);
    color: #93C89B;
    border-color: rgba(147, 200, 155, 0.35);
}

.policy table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
}

.policy th,
.policy td {
    border: 1px solid var(--rule);
    padding: 0.625rem 0.75rem;
    text-align: left;
    vertical-align: top;
    color: var(--body);
    line-height: 1.5;
}

.policy th {
    background: var(--surface);
    color: var(--strong);
    font-weight: 600;
}

/* Wide tables scroll inside their own box; the page body never scrolls sideways. */
.table-scroll {
    overflow-x: auto;
}