/* Legal pages (views/v2/legal.php): a plain reading page. Large title, the "On this page" list on a rail
   beside a 44rem text column on wide screens, a collapsible box above the text on phones. */

@layer page {
    .legal__head {
        padding-block: var(--space-6) var(--space-6);

        h1 { font-size: var(--step-4); letter-spacing: -.03em; }
        p { margin-top: var(--space-3); color: var(--muted); font-size: var(--step--1); }
    }

    .legal__layout { padding-bottom: var(--space-6); }

    @media (width >= 60rem) {
        .legal__layout {
            display: grid;
            grid-template-columns: 15rem minmax(0, 44rem);
            align-items: start;
            gap: clamp(2rem, 5vw, 4.5rem);
        }

        .toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
    }

    /* "On this page": each link sits on a rail; toc.js marks the section being read. */
    .toc {
        padding-top: var(--space-6);
        border-top: 1px solid var(--line);
        font-size: var(--step--1);

        ol { display: grid; gap: .15rem; margin-top: var(--space-3); }

        a {
            display: block;
            padding: .35rem 0 .35rem .85rem;
            border-left: 2px solid var(--line);
            color: var(--muted);
            line-height: 1.35;
            text-decoration: none;
            transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
        }

        a:hover { color: var(--ink); }
        a[aria-current] { border-color: var(--brand); color: var(--ink); font-weight: 600; }
    }

    .toc__box summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        cursor: pointer;

        &::-webkit-details-marker { display: none; }
        .icon { inline-size: 1rem; block-size: 1rem; transition: rotate var(--dur) var(--ease); }
    }

    .toc__box[open] summary .icon { rotate: 180deg; }

    @media (width < 60rem) {
        .toc { padding-top: 0; border-top: 0; }

        .toc__box {
            margin-bottom: var(--space-5);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius);
            background: var(--surface);
        }
    }

    @media (width >= 60rem) {
        .toc__box summary { cursor: default; pointer-events: none; }
        .toc__box summary .icon { display: none; }
    }

    /* Text column */
    .legal__body {
        padding-top: var(--space-6);
        border-top: 1px solid var(--line);
        line-height: 1.7;

        > * + * { margin-top: var(--space-6); }
        section > * + * { margin-top: 1em; }

        h2 { font-size: var(--step-1); letter-spacing: -.01em; }
        section h2 + * { margin-top: var(--space-3); }

        a { color: var(--brand); text-underline-offset: .2em; }
        a:hover { color: var(--brand-strong); }

        ul { display: grid; gap: .45em; padding-left: 1.3em; list-style: disc; }
        li::marker { color: var(--muted); }
    }

    /* Key points, a filled card under the intro (no rail markers, check icons instead). */
    .legal__summary {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
        background: var(--surface);

        h2 { font-size: var(--step-0); }

        .legal__body & ul { gap: var(--space-3); margin-top: var(--space-4); padding-left: 0; list-style: none; }
        li { display: flex; gap: var(--space-3); line-height: 1.5; }
        .icon { flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin-top: .15em; color: var(--brand); }
    }
}