/* legal.css — the privacy page.
 *
 * Layers on home.css exactly as extension.css does: this file assumes home.css
 * has already defined the token set, .nav, .btn and .footer. It only adds the
 * long-form prose layout, which no other page needs.
 *
 * Deliberately NOT using the .js-reveal scroll-reveal treatment. A legal page
 * should render as a plain readable document with JavaScript disabled, and
 * fading paragraphs in as someone tries to read a policy is the wrong feel.
 *
 * Author: lukeduff.co.uk
 */

.legal {
    max-width: 760px;              /* Narrower than --maxw. Prose wants ~70 characters. */
    margin: 0 auto;
    padding: calc(var(--nav-h) + 56px) var(--pad) 96px;
}

/* ---- Page head ---- */

.legal-head {
    padding-bottom: 32px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
}

.legal-head h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.legal-dates {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--fg-faint);
    margin: 0 0 20px;
}

.legal-intro {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--fg-dim);
    margin: 0;
}

/* ---- Sections ---- */

.legal section { margin-bottom: 56px; }
.legal section:last-child { margin-bottom: 0; }

.legal h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
    scroll-margin-top: calc(var(--nav-h) + 24px);   /* so #anchors clear the fixed nav */
}

.legal h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--fg);
    margin: 32px 0 12px;
}

.legal p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-dim);
    margin: 0 0 16px;
}

.legal ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.legal li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-dim);
    margin-bottom: 10px;
}

.legal a {
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    transition: color 0.15s var(--ease);
}

.legal a:hover { color: var(--accent); }

.legal code {
    font-family: var(--mono);
    font-size: 0.875em;
    color: var(--fg);
    background: var(--accent-soft);
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
}

/* ---- The summary card ---- */

.legal-summary {
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px;
}

.legal-summary h2 { font-size: 1.125rem; margin-bottom: 16px; }
.legal-summary ul  { margin-bottom: 0; }
.legal-summary li  { color: var(--fg); }

.legal-note {
    font-size: 0.9375rem !important;
    color: var(--fg-faint) !important;
    margin: 16px 0 0 !important;
}

/* ---- Permission tables ----
 * Wrapped in .table-wrap so a narrow viewport scrolls the table rather than
 * the whole page: the permission names are long and must not wrap to nothing.
 */

.table-wrap {
    overflow-x: auto;
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

/* These carry tabindex="0" so the scroll is reachable by keyboard, which means
   they are now in the tab order and need to say so when focused. */
.table-wrap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.legal-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-faint);
    padding: 14px 18px;
    background: var(--ink-raised);
    border-bottom: 1px solid var(--line);
}

.legal-table td {
    padding: 16px 18px;
    line-height: 1.6;
    color: var(--fg-dim);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.legal-table tr:last-child td { border-bottom: none; }

.legal-table td:first-child {
    color: var(--fg);
    font-weight: 500;
    width: 34%;
}

.tag-opt {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
}

/* ---- Contact ---- */

.legal-contact {
    font-size: 1.125rem !important;
    margin-bottom: 24px !important;
}

/* This one sits alone in its own paragraph, so it is a standalone target and
   WCAG 2.2's in-sentence exemption does not cover it the way it covers the
   other links on this page. It measured 23px — one short. */
.legal-contact a {
    border-bottom-width: 2px;
    display: inline-block;
    /* Padding on the TOP only. Splitting it across both edges pushes the
       border-bottom away from the text and leaves the underline visibly
       detached; growing upward gets the same 24px without touching the rule. */
    padding-top: 6px;
}

/* .footer-links lives in home.css, not here — the lander and the extension page
 * use the same row and neither of them loads this file. */

@media (max-width: 640px) {
    .legal { padding-top: calc(var(--nav-h) + 32px); }
    .legal-summary { padding: 22px; }
    .legal-table td:first-child { width: auto; }
}