article {
    --gap-base: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--gap-base);

    section {
        width: 100%;
        padding: 0 32px;
        box-sizing: border-box;

        max-width: min(calc(var(--base-content-width) + 64px), 100%);

        @media all and (max-width: 600px) {
            padding: 0 20px;
        }

        &.narrow {
            max-width: min(760px, 100%);
        }

        &.wide {
            max-width: min(calc(var(--base-content-width) + 64px), 100%);
        }

        &.ultraWide {
            max-width: 100%;
        }

        &.isolated {
            margin-top: calc(var(--gap-base) * 2);
            margin-bottom: calc(var(--gap-base) * 2);
        }

        &.panel {
            padding: 36px;
            background: var(--color-surface);
            border: solid var(--color-border) 1px;
            border-radius: var(--border-radius-big);

            @media all and (max-width: 600px) {
                padding: 24px 20px;
                border-radius: var(--border-radius);
            }
        }

        display: flex;
        flex-direction: column;
        gap: var(--gap-base);

        color: var(--color-text-soft);

        /* Short technical terms: a monospaced chip */
        i {
            font-style: normal;
            font-family: var(--font-family-mono);
            font-size: .88em;
            color: var(--color-accent-text);
            background: var(--color-surface-raised);
            border-radius: var(--border-radius-small);
            padding: .1em .4em;
            white-space: nowrap;
        }

        u,
        div b.enumerated,
        li b.enumerated {
            text-decoration: none;
            font-family: var(--font-family-mono);
            font-size: .88em;
            font-weight: 400;
            color: var(--color-text-strong);
            background: var(--color-surface-raised);
            border-radius: var(--border-radius-small);
            padding: .1em .4em;
            white-space: nowrap;
        }

        h1 > u,
        h2 > u,
        h3 > u,
        h4 > u,
        h5 > u {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
        }

        ul {
            margin-top: 1em;
            margin-bottom: 1em;

            &.emoji {
                padding-left: 1.45em;

                li.ok { list-style-type: "\2705   "; }
                li.ko { list-style-type: "\274C   "; }
                li.apple { list-style-type: "\1F34F   "; }
                li.android { list-style-type: "\1F916   "; }
                li.warning { list-style-type: "\1F6AB   "; }
            }
        }

        ul.blocks > li > b:has(> i:first-child) {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            letter-spacing: -0.01em;

            > i:first-child {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                padding: 0;
                border-radius: 50%;
                font-size: 14px;
                background: var(--color-accent);
                color: var(--color-on-accent);
            }
        }

        span.variableName,
        div.variableName {
            font-family: var(--font-family-mono);
            font-size: .9em;
            font-weight: 500;
            color: var(--color-accent-text);
            background: var(--color-accent-tint);
        }

        span.variableValue,
        div.variableValue {
            font-family: var(--font-family-mono);
            font-size: .9em;
            font-weight: 500;
            color: var(--color-text-strong);
        }

        div.variableName,
        div.variableValue {
            width: max-content;
            border: solid var(--color-border) 1px;
            border-radius: var(--border-radius-small);
            padding: .1em .5em;
            white-space: nowrap;
        }

        .hdrjpg {
            border-radius: var(--border-radius);
            overflow: hidden;

            > img {
                float: left;
                width: 100%;
            }
        }

        aside {
            padding: var(--gap-base);
            background: var(--color-surface-raised);
            border-radius: var(--border-radius);
            color: var(--color-text-soft);

            > p {
                margin: 0;

                &:not(:first-child) {
                    margin-top: 1em;
                }
            }
        }

        /* Code blocks are dark in both themes; the highlighting colors are in code.css */
        code {
            position: relative;
            display: inline-block;
            padding: 20px 22px;

            border-radius: var(--border-radius);
            word-break: break-word;
            font-family: var(--font-family-mono);
            font-size: 14px;
            line-height: 1.7;

            background: var(--color-code-bg);
            border: solid var(--color-code-border) 1px;
            color: var(--color-code-text);

            overflow: hidden;

            > pre {
                float: left;
                margin: 0;
                font-family: inherit;
            }
        }

        code > pre {
            width: 100%;
            overflow-x: auto;
        }

        code:is(.json, .php, .html, .css) {
            white-space: pre-wrap;
        }

        code[data-label] {
            padding-top: 40px;
        }

        code[data-label]:after {
            position: absolute;
            top: 12px;
            left: 22px;
            content: attr(data-label);
            font-size: 11px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--color-code-label);
        }

        code.centered {
            margin-left: auto;
            margin-right: auto;
        }

        code.apiKey {
            display: inline-block;
            padding: 8px 12px;
            letter-spacing: .5px;
            font-size: 15px;
        }

        table {
            border-collapse: collapse;

            th {
                font-family: var(--font-family-mono);
                font-size: 12px;
                font-weight: 400;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--color-text-faint);
            }

            th, td {
                border-bottom: solid var(--color-border-subtle) 1px;
                text-align: left;
                vertical-align: top;
                padding: 18px 16px 18px 0;

                &.complex {
                    display: inline-flex;
                    flex-direction: column;
                    gap: 20px;
                }
            }

            @media all and (max-width: 600px) {
                th {
                    display: none;
                }

                tr {
                    display: flex;
                    flex-direction: column;
                }

                td {
                    padding-right: 0;
                }
            }
        }

        .getwaitlistWidget {
            justify-content: center;
            margin: 0 auto;
            max-width: 100% !important;
            width: min(100%, 400px) !important;
            font-family: inherit !important;
            font-size: inherit !important;

            > div {
                background: none !important;
            }

            input {
                background: var(--color-surface);
                color: var(--color-text);
                height: 39px !important;
                border: solid var(--color-border-strong) 1px !important;
                border-right: none !important;
            }

            button {
                font-size: .9em;
                font-weight: 600;
                white-space: nowrap;
                background-color: var(--color-accent) !important;
                color: var(--color-on-accent) !important;
            }
        }
    }

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

    .footer {
        display: grid;
        grid-template-columns: minmax(80px, 1fr) repeat(3, auto);
        gap: 32px 64px;
        font-size: 14px;
        color: var(--color-text-faint);

        @media all and (max-width: 800px) {
            grid-template-columns: minmax(0, 1fr);
        }

        > .logo {
            color: var(--color-text-strong);

            > .image {
                width: 28px;
                height: 28px;
                background-color: currentColor;
                mask-size: contain;
                mask-repeat: no-repeat;
            }
        }

        ul {
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        /* "Cookie preferences" opens the consent script's dialog: a button that looks like the links around it */
        button {
            padding: 0;
            border: none;
            background: none;
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: pointer;
            transition: color var(--transition-animation-ms);

            &:hover {
                color: var(--color-accent-text);
            }
        }
    }

    /* tabs */
    .tabSet {

        > .tabs {
            /* Room from the menu when stuck under it; .floating tabs, over a photo, also keep it from its left edge */
            --float-inset: 0px;

            z-index: 1;
            position: sticky;
            top: calc(var(--menu-height) + var(--float-inset));
            align-self: flex-start;
            margin-left: var(--float-inset);
            max-width: calc(100% - var(--float-inset));
            box-sizing: border-box;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
            padding: 6px;

            background: var(--color-surface);
            border: solid var(--color-border) 1px;
            border-radius: 28px;

            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        &.floating > .tabs {
            --float-inset: 12px;
        }
    }

    .tabSet > .tabs > input[type="radio"] {
        position: absolute;
        left: -200vw;
        display: flex;
    }

    .tabSet > .tabs > label {
        white-space: nowrap;
        line-height: 1.2em;
        font-family: var(--font-family-mono);
        font-size: 14px;
        padding: 11px 18px;
        border-radius: var(--border-radius-pill);
        transition: color var(--transition-animation-ms), background var(--transition-animation-ms);
        cursor: pointer;
        color: var(--color-text-soft);

        > u {
            font-size: 1em;
            padding: 0;
            background: none;
            color: var(--color-text-faint);
        }

        &:hover {
            color: var(--color-text-strong);
        }
    }

    .tabSet > .tabs > input:checked + label {
        background: var(--color-accent);
        color: var(--color-on-accent);

        > u {
            color: inherit;
            opacity: .7;
        }
    }

    .tabSet > .tabs > input:focus-visible + label {
        outline: solid 2px var(--color-accent);
        outline-offset: 2px;
    }

    .tabSet > .tabSections {
        > section {
            max-width: none;
            padding: 0;
            display: none;
        }
    }

    .tabSet:has(.tabs > input:first-child:checked) > .tabSections > section:first-child,
    .tabSet:has(.tabs > input:nth-child(3):checked) > .tabSections > section:nth-child(2),
    .tabSet:has(.tabs > input:nth-child(5):checked) > .tabSections > section:nth-child(3),
    .tabSet:has(.tabs > input:nth-child(7):checked) > .tabSections > section:nth-child(4),
    .tabSet:has(.tabs > input:nth-child(9):checked) > .tabSections > section:nth-child(5),
    .tabSet:has(.tabs > input:nth-child(11):checked) > .tabSections > section:nth-child(6) {
        display: flex;
    }
}

.textCentered {
    text-align: center;
}

/* The /learn guides */
article section {

    .breadcrumb {
        font-size: .85em;
        margin-bottom: .5em;

        a {
            color: var(--color-text-faint);
        }
    }

    .guideMeta {
        font-size: .85em;
        color: var(--color-text-faint);
        margin-top: -.5em;
    }

    &.guide {
        /* Running text: the site's sections are flex columns spaced for short blocks, too loose for an article */
        display: block;

        > h1 {
            font-size: clamp(36px, 5vw, 56px);
            line-height: 1.02;
            margin-bottom: .4em;
        }

        > p, > ul, > ol, > blockquote {
            margin-top: 0;
            margin-bottom: .9em;
        }

        > ul, > ol {
            li + li {
                margin-top: .35em;
            }
        }

        > h2 {
            font-size: 30px;
            margin-top: 1.6em;
            margin-bottom: .5em;
        }

        > h3 {
            font-size: 22px;
            margin-top: 1.2em;
            margin-bottom: .4em;
        }

        /* Inline code inside prose reads as a word, not as the boxed code blocks used for examples */
        :is(p, li, td) > code {
            display: inline;
            padding: .1em .35em;
            border: none;
            background: var(--color-surface-raised);
            color: var(--color-text-strong);
            font-size: .85em;
        }

        > code {
            display: block;
            margin: 1em 0;
        }

        /* Tables are as wide as the wide sections (the hero image above the text), centered on the text column */
        table {
            --wide-width: min(calc(1024px - 2 * var(--gap-base)), calc(100vw - 2 * var(--gap-base)));
            width: var(--wide-width);
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin: 2.5em 0;

            /* A raised block, like the site's panels */
            box-sizing: border-box;
            padding: 10px 16px;
            background: var(--color-surface);
            border: solid var(--color-border) 1px;
            border-radius: var(--border-radius-big);
            border-collapse: separate;
            border-spacing: 0;

            th, td {
                padding: 8px 12px;
            }

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

            /* Too narrow for all the columns: the table scrolls sideways, rows and headings kept (the site's
               general rule stacks each row's cells and hides the headings, which loses what a comparison table says) */
            @media all and (max-width: 700px) {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;

                th {
                    display: table-cell;
                    white-space: nowrap;
                }

                tr {
                    display: table-row;
                }

                td {
                    min-width: 9em;
                }
            }
        }

        blockquote {
            margin: 1em 0;
            padding: .2em 1em;
            border-left: solid 3px var(--color-accent);
            color: var(--color-text-soft);
        }
    }

    &.guides {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .guideCard {
            display: block;
            padding: 20px 24px;
            border-radius: var(--border-radius);
            border: solid var(--color-border) 1px;
            background: var(--color-surface);
            color: var(--color-text-soft);
            text-decoration: none;
            transition: border-color var(--transition-animation-ms) ease;

            &:hover {
                border-color: var(--color-accent);
            }

            .title {
                font-size: 19px;
                font-weight: 600;
                color: var(--color-text-strong);
            }

            .description {
                margin-top: 4px;
            }

            .meta {
                margin-top: 6px;
                font-size: .85em;
                color: var(--color-text-faint);
            }
        }
    }
}

/* Screenshots in guides: centered, raised like the site's panels, with a caption */
section.guide figure.screenshot {
    margin: 1.2em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    img {
        display: block;
        max-width: 100%;
        height: auto;
        border: solid var(--color-border) 1px;
        border-radius: var(--border-radius);
        box-shadow: 0 8px 24px -14px var(--color-shadow);
    }

    figcaption {
        font-size: var(--font-size-small);
        color: var(--color-text-faint);
        text-align: center;
    }
}

/* A page's opening when it is a title and a paragraph: side by side on wide screens */
article section.pageIntro {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px 64px;

    > h1 {
        flex: 1 1 420px;
    }

    > p {
        flex: 1 1 380px;
        margin: 0;
        font-size: 18px;
        color: var(--color-text-muted);
    }
}

/* A page title on its own, above the page's panel */
article > h1 {
    box-sizing: border-box;
    max-width: min(880px, 100%);
    padding: 0 20px;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    text-align: center;
}

/* Titles of the narrow pages (account, sign up, guides) stay in proportion with their column */
article section.narrow h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.02;
}