/* The walkthroughs at /tutorial/<slug>.
 *
 * legal.css already dresses a page of prose -- the masthead, .lead, .callout,
 * .cta-big, .uses, the footer -- and these pages use it as it stands. What it
 * has never had to style is a page that is mostly screenshots, which is what a
 * walkthrough is. So: figures, captions, and the code blocks the responsive
 * walkthrough prints.
 *
 * Loaded AFTER legal.css, so anything here wins where the two meet.
 */

/* A screenshot of the application, on a page whose ground is a different
 * colour from the application's own. The border and the radius are what stop
 * a dark screenshot from bleeding into a dark page and looking like a hole.
 */
.shot {
    margin: 26px 0 30px;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;                       /* the width/height attributes are the
                                           aspect ratio, not the display size */
    max-width: 100%;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--stage);           /* what the capture paints behind the
                                           frame, so a PNG that has not
                                           arrived yet is not a white flash */
}

.shot figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Wide screenshots on a narrow phone.
 *
 * A screenshot of a two-column desktop layout is unreadable at 360px however
 * neatly it scales, so on a small screen the picture is allowed to be its own
 * scroll box rather than being shrunk into illegibility. The caption stays
 * put; only the picture moves.
 */
@media (max-width: 560px) {
    .shot {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .shot img {
        width: auto;
        max-width: none;
        height: 260px;
    }
    .shot figcaption {
        position: sticky;
        left: 0;
    }
}

/* The generated markup, printed as text rather than photographed: crawlable,
 * copyable, and never clipped at the width of a column in a screenshot. */
main pre {
    overflow-x: auto;
    padding: 16px 18px;
    margin: 20px 0;
    border-radius: 12px;
    background: var(--code-bg);
    border: 1px solid var(--rule);
    font-size: 13px;
    line-height: 1.65;
}

main pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    white-space: pre;
}

/* Inline code in running prose: a filename, an attribute, a folder. */
main p code,
main li code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--code-bg);
    font-size: 0.92em;
}

/* The step headings carry the structure, so they get a little more air above
 * them than legal.css gives an h2 in a wall of paragraphs. */
main h2 {
    margin-top: 40px;
}

main h3 {
    margin-top: 28px;
}

/* The step headings.
 *
 * legal.css sets h2 to 1.1rem uppercase, which is right for the section
 * headings of a privacy notice and wrong here: on a walkthrough the h2 came
 * out smaller than the lead paragraph above it, so the page read as one flat
 * wall rather than as a sequence of steps.
 *
 * Numbered because these genuinely are a sequence -- you cannot read the
 * results before pressing the button -- and the number is generated from the
 * document order, so inserting a step cannot leave the numbering wrong.
 */
main {
    counter-reset: step;
}

main h2.step {
    counter-increment: step;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: clamp(1.25rem, 3.2vw, 1.5rem);
    letter-spacing: -0.01em;
    text-transform: none;
    margin-top: 46px;
}

main h2.step::before {
    content: counter(step);
    flex: 0 0 auto;
    width: 1.9em;
    height: 1.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand);
    color: var(--brand-over);
    font-size: 0.72em;
    font-weight: 900;
    letter-spacing: 0;
}