/* Information pages (views/v2/info.php): about, methodology, editorial policy, community guidelines, contact.
   Builds on legal.css (the "On this page" rail and the 44rem text column) with a lead, stats, screenshots,
   steps, cards and the contact form. */

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

        h1 { max-inline-size: 22ch; font-size: var(--step-4); letter-spacing: -.03em; }
    }

    .info__eyebrow {
        margin-bottom: var(--space-3);
        color: var(--brand);
        font-size: .8125rem;
        font-weight: 650;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .info__lead { max-inline-size: 60ch; margin-top: var(--space-4); color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
    .info__updated { margin-top: var(--space-3); color: var(--muted); font-size: var(--step--1); }

    /* Key numbers under the title */
    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-6);

        li { display: grid; gap: var(--space-1); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
        strong { color: var(--ink); font-size: var(--step-3); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
        span { color: var(--muted); font-size: var(--step--1); }
    }

    .info__hero { margin-bottom: var(--space-6); }
    .info__layout--single { display: block; }
    .info__layout--single .legal__body { max-inline-size: 44rem; }

    /* Screenshots: framed like a browser window, with a caption that says what the image shows. */
    .shot {
        margin-block: var(--space-5);

        img {
            inline-size: 100%;
            block-size: auto;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--bg);
            box-shadow: var(--shadow);
        }

        figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
    }

    .shot--phone img { inline-size: min(100%, 16rem); margin-inline: auto; border-radius: 1.75rem; }
    .shot--phone figcaption { text-align: center; }

    .shot-pair {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--space-4);
        align-items: start;

        .shot { margin-block: 0; }
    }

    /* Numbered steps */
    .legal__body ol.howto {
        display: grid;
        gap: var(--space-4);
        padding-left: 0;
        list-style: none;
        counter-reset: howto;

        li {
            position: relative;
            display: grid;
            gap: var(--space-1);
            padding-left: 3rem;
            counter-increment: howto;
        }

        li::before {
            content: counter(howto);
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            display: grid;
            place-items: center;
            inline-size: 2rem;
            block-size: 2rem;
            border-radius: 50%;
            background: var(--brand-tint);
            color: var(--brand);
            font-weight: 700;
            font-size: var(--step--1);
        }

        strong { color: var(--ink); }
    }

    /* Cards with an icon */
    .legal__body ul.cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        gap: var(--space-3);
        padding-left: 0;
        list-style: none;

        li { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); line-height: 1.5; }
        .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--brand); }
        strong { color: var(--ink); }
        span { color: var(--ink-2); font-size: var(--step--1); }
    }

    /* The three status labels and what they mean */
    .legal__body ul.states {
        display: grid;
        gap: var(--space-3);
        padding-left: 0;
        list-style: none;

        li { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--s-tint); line-height: 1.5; }
        .status-pill { justify-self: start; }
    }

    /* Sites in the network */
    .legal__body ul.sites {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
        gap: var(--space-2) var(--space-4);
        padding-left: 0;
        list-style: none;

        li { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--line); line-height: 1.3; }
        span { display: grid; color: var(--muted); font-size: var(--step--1); }
        strong { color: var(--ink); font-size: var(--step-0); }
    }

    /* Highlighted note inside the text */
    .callout {
        padding: var(--space-4) var(--space-5);
        border-left: 3px solid var(--brand);
        border-radius: 0 var(--radius) var(--radius) 0;
        background: var(--brand-tint);
        color: var(--ink);
    }

    .legal__body code {
        padding: .1em .35em;
        border-radius: 6px;
        background: var(--surface-3);
        font-family: var(--font-mono);
        font-size: .88em;
        overflow-wrap: anywhere;
    }

    /* Contact form */
    .contact-form { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
    .contact-form h2 { font-size: var(--step-1); }
    .contact-form .notice { background: var(--surface-2); }
    .notice--bad { background: var(--bad-tint) !important; }
    .notice--bad .icon { color: var(--bad); }

    .form { display: grid; gap: var(--space-4); }
    .form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
    .form__note { color: var(--muted); font-size: var(--step--1); }
    .form .btn { justify-self: start; }
    .form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .field__opt { color: var(--muted); font-weight: 400; }
    .field.is-invalid .input { border-color: var(--bad); }
    .field.is-invalid .input:focus-visible { outline-color: var(--bad); }
    .field.is-valid .input { border-color: var(--ok); }
    .field__req { color: var(--bad); font-weight: 600; }
    .field__error { color: var(--bad); font-size: var(--step--1); font-weight: 550; }
    .field__error:empty { display: none; }
    .field__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); }
    .field__count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
    .field__count.is-done { color: var(--ok); }
    .field__count.is-over { color: var(--bad); }
    .contact-form__done { outline: none; }
    .contact-form__done .btn { margin-block-start: var(--space-3); padding-inline: 0; color: var(--brand); }
    select.input { appearance: auto; }
}