/* Articles (views/v2/article.php), the /guides and /reports lists (articles.php) and bylines (author.php).
   The reading layout comes from legal.css; this adds the head and byline, the body elements the Markdown dialect
   produces (figures, tables, quotes, code, status embeds), FAQ, sources and the article cards. */

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

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

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

    .article__lead { max-inline-size: 62ch; margin-top: var(--space-4); color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

    /* Byline: author, reviewer, dates, reading time */
    .byline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
        margin-top: var(--space-5);
        font-size: var(--step--1);
    }

    .byline__person {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        line-height: 1.35;

        a { color: var(--ink); font-weight: 600; text-decoration: none; }
        a:hover { color: var(--brand); }
    }

    .byline__label { color: var(--muted); }
    .byline__role { display: block; color: var(--muted); }

    .byline__avatar {
        flex: none;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: 50%;
        object-fit: cover;
        background: var(--surface);
    }

    .byline__avatar--initials, .author__avatar--initials {
        display: grid;
        place-items: center;
        background: var(--brand-tint);
        color: var(--brand-strong);
        font-weight: 650;
    }

    .byline__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-4);
        inline-size: 100%;
        color: var(--muted);
    }

    .article__cover {
        margin-bottom: var(--space-6);

        img { inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); background: var(--surface); }
        figcaption { margin-top: var(--space-2); color: var(--muted); font-size: var(--step--1); }
    }

    .article__layout--single { display: block; }
    .article__layout--single .legal__body { max-inline-size: 44rem; }

    /* Body: what ArticleMarkdown renders */
    .article__body {
        > * + * { margin-top: 1.1em; }
        > h2 { margin-top: var(--space-7); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
        > h3 { margin-top: var(--space-6); font-size: var(--step-0); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
        > h4 { margin-top: var(--space-5); font-size: var(--step-0); color: var(--ink-2); }
        > h2 + *, > h3 + *, > h4 + * { margin-top: var(--space-3); }

        ol { display: grid; gap: .45em; padding-left: 1.4em; list-style: decimal; }
        strong { color: var(--ink); }

        code {
            padding: .1em .35em;
            border-radius: 6px;
            background: var(--surface);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .9em;
        }

        pre {
            overflow-x: auto;
            padding: var(--space-4);
            border-radius: var(--radius);
            background: var(--surface);
            line-height: 1.5;

            code { padding: 0; background: none; }
        }

        blockquote {
            padding: var(--space-4) var(--space-5);
            border-left: 3px solid var(--brand);
            border-radius: 0 var(--radius) var(--radius) 0;
            background: var(--surface);

            p + p { margin-top: .75em; }
        }

        hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-6); }
    }

    .article-figure {
        margin-block: var(--space-6);

        img { inline-size: 100%; block-size: auto; border-radius: var(--radius); background: var(--surface); }
        figcaption { margin-top: var(--space-2); color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
    }

    .figure__credit { color: var(--muted); }

    .table-wrap {
        overflow-x: auto;
        border-radius: var(--radius);
        background: var(--surface);

        table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
        th, td { padding: .6rem .85rem; text-align: left; vertical-align: top; }
        th { color: var(--muted); font-weight: 600; white-space: nowrap; }
        tbody tr { border-top: 1px solid var(--line); }
        .t-right { text-align: right; }
        .t-center { text-align: center; }
    }

    /* {{status:slug}}: live status card */
    .article__body .status-embed {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--ink);
        text-decoration: none;

        &:hover { background: var(--surface-2); color: var(--ink); }
    }

    .status-embed__text { display: grid; flex: 1; line-height: 1.3; }
    .status-embed__state { color: var(--s-ink); font-size: var(--step--1); font-weight: 600; }
    .status-embed__cta { color: var(--brand); font-size: var(--step--1); font-weight: 600; white-space: nowrap; }

    /* {{services:a,b}}: compact list */
    .article__body .service-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
        gap: var(--space-2);
        padding: 0;
        list-style: none;

        a {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--ink);
            text-decoration: none;
            line-height: 1.25;
        }

        a:hover { background: var(--surface-2); }
        .avatar { flex: none; }
        .avatar + span { flex: 1; font-weight: 600; }
    }

    .service-list__state { color: var(--s-ink); font-size: .75rem; font-weight: 600; }

    .article__faq {
        details { border-top: 1px solid var(--line); }
        details:last-child { border-bottom: 1px solid var(--line); }

        summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            padding-block: var(--space-4);
            list-style: none;
            font-weight: 600;
            cursor: pointer;

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

        details[open] summary .icon { rotate: 180deg; }
        details p { padding-bottom: var(--space-4); color: var(--ink-2); }
    }

    .article__sources {
        > p { color: var(--muted); font-size: var(--step--1); }
        ol { font-size: var(--step--1); }
    }

    .article__host { color: var(--muted); }

    .article__note {
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--muted);
        font-size: var(--step--1);
        line-height: 1.55;

        p + p { margin-top: .5em; }
    }

    .article__services, .article__next { margin-bottom: var(--space-7); }

    .article-services {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        gap: var(--space-2);
        margin-top: var(--space-4);

        a {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--ink);
            font-weight: 600;
            text-decoration: none;
        }

        a:hover { background: var(--surface-2); }
        span:not(.avatar) { flex: 1; }
        .icon { inline-size: 1rem; block-size: 1rem; rotate: -90deg; color: var(--muted); }
    }

    /* Article cards (Read next, /guides, /reports, author pages) */
    .article-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
        gap: var(--space-4);
        margin-top: var(--space-4);
    }

    .article-card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--radius-lg);
        background: var(--surface);

        img { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; object-fit: cover; }

        h3 { font-size: var(--step-0); line-height: 1.3; }
        h3 a { color: var(--ink); text-decoration: none; }
        /* The whole card is the link target. */
        h3 a::after { content: ""; position: absolute; inset: 0; }
        &:hover h3 a { color: var(--brand); }
        &:has(a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

        p { margin-top: var(--space-2); color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
        time { display: block; margin-top: auto; padding-top: var(--space-3); color: var(--muted); font-size: .75rem; }
    }

    .article-card__text { display: flex; flex: 1; flex-direction: column; padding: var(--space-4) var(--space-5) var(--space-5); }

    .article-index { padding-bottom: var(--space-7); }
    .article-index .article__head { padding-bottom: var(--space-4); }
    .article-index .chips { margin-bottom: var(--space-2); }
    .article-index .chips a[aria-current] { background: var(--ink); color: var(--bg); }
    .article-index__page { color: var(--muted); font-size: .5em; font-weight: 500; letter-spacing: 0; }
    .article-index__none { margin-top: var(--space-5); color: var(--muted); }

    .pager { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }

    /* Author page */
    .author__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-5);
        padding-block: var(--space-6);

        > div { flex: 1 1 20rem; }
        h1 { font-size: var(--step-4); letter-spacing: -.03em; }
    }

    .author__avatar { flex: none; inline-size: 6rem; block-size: 6rem; border-radius: 50%; object-fit: cover; font-size: var(--step-3); }
    .author__role { margin-top: var(--space-1); color: var(--muted); }
    .author__bio { max-inline-size: 62ch; margin-top: var(--space-4); color: var(--ink-2); line-height: 1.6; }

    .author__links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
        margin-top: var(--space-4);
        font-size: var(--step--1);

        a { color: var(--brand); }
    }

    .author__title { font-size: var(--step-2); }
}