/* ==========================================================================
   Recipe surface: the recipe page (pages/recipe.html), the discussion
   (partials/discussion.html), the cook report and share/revise forms
   (cook.html, recipe_form.html), the Test Kitchen (kitchen.html) and My
   recipes (me.html). Builds on the recipe box in styles.css: its tokens,
   the index card (.index-card, -head, -line, -bleed), ruled text (.ruled),
   the divider tab (.divider-tab with .cat-{slug} or .tab-kitchen), the
   section opener on the red line, status marks, the pen tally, the score
   readout and scale, recipe rows and form controls. Only what these pages
   need beyond it lives here.

   The recipe page is a card filed in the box, in its category's colour:
   the header on the category's tint, the crumb's divider tab and the
   photo's mount in its fill, and on paper three white index cards with
   its stripe: the test record (the testers' card, filled in pen), the
   ingredients (the card you prop against the jar) and the method. The
   cook-report form is the other kind of card:
   a blank test card you fill in.

   Contents
   01  Recipe page: the header on its category's tint (crumb, status,
       title, facts, actions, photo)
   02  The cards and the test record (verdict, scores, the cooks)
   03  Ingredients and method (testers' notes, author's note, Cooked it?)
   04  Members-only gate
   05  Cook reports, version history, discussion
   06  Forms: the column, the cook-report card, share and revise
   07  Test Kitchen and My recipes
   08  Responsive
   09  Forced colours, print
   ========================================================================== */

/* 01  Recipe page: the header on its category's tint ---------------------------
   The recipe page takes the colour of the category it is filed behind:
   .cat-{slug} on the article sets --c, --c-tint and --c-edge for all of
   it. Top to bottom:
     .recipe-header (ground-cat)  the header, washed in the tint: the crumb
                                  (where it is listed, then the category's
                                  divider tab standing on a 1.5px ink line),
                                  the status mark, the title on the red
                                  line, the description, the byline; the
                                  facts as four figures with glyphs on a
                                  white card, the actions; the photo
                                  mounted on the fill (.photo-mount), tilted
                                  a little on wide screens, as in the box.
     .recipe-cards                on paper, white index cards striped in the
                                  fill (.index-card.striped): the test record
                                  (section 02), the ingredients and the
                                  method (03), or the members' gate (04).
     .community                   cook reports, versions, discussion (05).
   Wide screens (960px and up): the title, facts and actions beside the
   photo; the ingredients over the method, the record beside them.
   Narrower: one column, the record first. */

/* Anchored things (steps, reports, the ingredients, the cooks) land clear
   of the sticky masthead. */
.recipe-page [id],
.community [id] {
    scroll-margin-top: calc(var(--masthead-h) + var(--s-4));
}

.recipe-header {
    padding-block: var(--s-4) clamp(40px, 5vw, 72px);
}

/* The crumb: plain words, then the category's divider tab standing on the
   ink line (its fill covers the line beneath it, styles.css 07). */
.recipe-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1.5px solid var(--ink);
    font-size: var(--t-s);
}

.recipe-crumbs li {
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.recipe-crumbs li + li::before {
    content: "/";
    align-self: center;
    margin-inline-end: var(--s-2);
    color: var(--ink-3);
}

.recipe-crumbs a:not(.divider-tab) {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--ink-2);
}

.recipe-crumbs a:not(.divider-tab):hover {
    color: var(--ink);
}

.recipe-crumbs .divider-tab {
    color: var(--ink);
}

@media (pointer: coarse) {
    .recipe-crumbs a {
        min-height: 44px;
    }
}

.recipe-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "intro"
        "photo"
        "meta";
    gap: var(--s-6);
    margin-top: clamp(24px, 3.5vw, 48px);
}

.recipe-intro { grid-area: intro; }
.recipe-photo { grid-area: photo; }
.recipe-meta { grid-area: meta; }

@media (min-width: 960px) {
    .recipe-header-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "intro photo"
            "meta photo";
        grid-template-rows: auto 1fr;
        column-gap: clamp(40px, 4.5vw, 64px);
        align-items: start;
    }

    .recipe-photo {
        margin-top: var(--s-2);
        transform: rotate(1.2deg);
    }

    [dir="rtl"] .recipe-photo {
        transform: rotate(-1.2deg);
    }
}

/* The status line: one mark and its fact (the day it was proven, members
   only, the steps testers flagged), then, for a hidden or needs-work
   recipe, one short line on what happens next. The separators are in the
   markup (.sep, glued to the part before), so a wrapped line never starts
   with one. */
.status-line {
    font-size: var(--t-s);
    line-height: 1.6;
    color: var(--ink-3);
}

.sep {
    color: var(--ink-3);
    font-weight: 400;
}

/* The mark runs inline with the words after it, on their baseline (the
   shared .badge is middle-aligned for rows), a size up from a card's. */
.status-line > .badge {
    display: inline;
    font-size: var(--t-m);
    vertical-align: baseline;
    white-space: normal;
}

.status-line > .badge > .icon {
    width: 22px;
    height: 22px;
    margin-inline-end: 6px;
    vertical-align: -0.3em;
}

.status-line > .badge > .tally {
    margin-inline-end: 8px;
    vertical-align: -0.05em;
}

.status-note {
    max-width: 52ch;
    margin-top: var(--s-1);
    font-size: var(--t-s);
    color: var(--ink-2);
}

.status-line a,
.status-note a {
    color: var(--ink);
    font-weight: 600;
}

.status-premium {
    color: var(--ink-2);
    white-space: nowrap;
}

.status-premium .icon {
    width: 16px;
    height: 16px;
    margin-inline-end: 4px;
    vertical-align: -0.2em;
}

/* The title, written on the red line, as a card is titled. */
.recipe-title {
    margin-top: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: var(--head-line) solid var(--card-red);
    font-size: var(--t-2xl);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

/* The description: the author's promise, in Besley 400, quieter than the
   title. Typed text, so it is never ruled. */
.recipe-lead {
    max-width: 44ch;
    margin-top: var(--s-4);
    font-family: var(--serif);
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
    line-height: 1.5;
    color: var(--ink-2);
}

/* Japanese wraps between any two characters, so text-wrap: pretty only
   leaves a ragged gap on every line: the description sets full lines. */
.recipe-lead:lang(ja) {
    text-wrap: wrap;
}

/* A title and description written the other way from the page (an Arabic
   recipe on the English site) run the full column and line up with the
   page, like the status line and the byline around them. */
[dir="ltr"] .recipe-intro [dir="rtl"],
[dir="rtl"] .recipe-intro [dir="ltr"] {
    max-width: none;
}

html[dir="rtl"] .recipe-intro :is(.recipe-title, .recipe-lead) { text-align: right; }
html[dir="ltr"] .recipe-intro :is(.recipe-title, .recipe-lead) { text-align: left; }

.byline {
    margin-top: var(--s-3);
    font-size: var(--t-s);
    line-height: 1.6;
    color: var(--ink-3);
}

.byline strong {
    font-weight: 600;
    color: var(--ink);
}

/* A date stays whole (Japanese would break "2026年3月9日" anywhere). */
:is(.byline, .status-line) time {
    white-space: nowrap;
}

/* The facts: four figures on a white card, each a glyph in the category's
   edge, the value in Besley and its label under it (in the markup the
   label comes first, for screen readers: dd takes order -1). The cells
   share the card's width by their content, so a long value ("20 min +
   1 hr marinating") takes more of it and wraps less. Two by two where
   the column is narrower than 30rem (phones, and beside the photo up to
   about 1100px), which four cells overran. */
.recipe-meta {
    container: facts / inline-size;
}

.recipe-facts {
    display: flex;
    margin: 0;
    border: 1px solid var(--card-edge);
    border-radius: var(--corner);
    background: var(--card);
}

.recipe-facts > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 5.5rem;
    padding: 14px 16px 16px;
}

.recipe-facts > div + div {
    border-inline-start: 1px solid var(--rule);
}

.recipe-facts dt {
    font-size: var(--t-xs);
    line-height: 1.25;
    color: var(--ink-3);
}

.recipe-facts dd {
    order: -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    font-family: var(--serif);
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.recipe-facts dd .icon {
    width: 26px;
    height: 26px;
    color: var(--c-edge, var(--pen-2));
}

/* A value in the recipe's direction sits on the page's side of its cell. */
html[dir="rtl"] .recipe-facts dd { text-align: right; }
html[dir="ltr"] .recipe-facts dd { text-align: left; }

@container facts (width < 30rem) {
    .recipe-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recipe-facts > div:nth-child(3) {
        border-inline-start: 0;
    }

    .recipe-facts > div:nth-child(n + 3) {
        border-top: 1px solid var(--rule);
    }
}

/* The actions: the buttons on one row, then the quiet words (Print,
   Download, Report) together on a row of their own, under them. Print
   sits inside the cookbook's clip panel (display: contents), so the rows
   come from flex order and a full-width break (.recipe-actions-break),
   not from wrappers. "You cooked this version" heads the strip. */
.recipe-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.recipe-actions-break {
    order: 1;
    flex-basis: 100%;
    height: 0;
}

/* No quiet words (a locked recipe with no Report), nothing to break for. */
.recipe-actions:not(:has(.clip-print, > .push, > .flag-widget)) > .recipe-actions-break {
    display: none;
}

.recipe-actions .clip-panel > .clip-print,
.recipe-actions > .push,
.recipe-actions > .flag-widget {
    order: 2;
    margin-inline-start: 0;
}

/* The quiet words sit close together, the first glyph on the buttons'
   edge (out through its padding). */
.recipe-actions .clip-panel > .clip-print,
.recipe-actions > .btn-quiet,
.recipe-actions .flag-widget .flag-summary {
    padding-inline: var(--s-1);
}

.recipe-actions .clip-panel > .clip-print,
.recipe-actions:not(:has(.clip-print)) > .push,
.recipe-actions:not(:has(.clip-print, > .push)) > .flag-widget {
    margin-inline-start: calc(-1 * var(--s-1));
}

/* Open, the report slip takes a line of its own (flags.css). */
.recipe-actions > .flag-widget:has(details[open]) {
    margin-inline-start: 0;
}

.recipe-actions > .tag-done {
    order: -1;
    flex-basis: 100%;
    font-size: var(--t-s);
    color: var(--ink);
}

.recipe-actions > .tag-done .icon {
    color: var(--pen);
}

/* The photo: a print mounted on the category's fill (.photo-mount). No
   photo yet: card stock on the mount, saying so. */
.recipe-photo {
    margin: 0;
}

.recipe-photo img,
.recipe-photo .no-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.recipe-photo img {
    background: var(--paper-3);
}

.recipe-photo .no-photo {
    border: 1px dashed var(--c-edge, var(--rule-2));
    border-radius: var(--photo-corner);
    background: var(--paper-3);
    font-size: var(--t-s);
}

@media (max-width: 639px) {
    .recipe-header-grid {
        gap: var(--s-5);
    }

    .recipe-title {
        line-height: 1.08;
    }

    .recipe-photo.photo-mount {
        padding: 8px;
    }

    .recipe-actions > .btn-primary {
        flex: 1 1 100%;
    }
}

/* 02  The cards and the test record ---------------------------------------------
   On paper under the header, the recipe's white index cards, each with
   the category's stripe along its top edge (.index-card.striped). The
   record comes first on narrow screens and stands beside the ingredients
   and the method from 960px. */
.recipe-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "record"
        "ingredients"
        "method";
    gap: var(--s-6) clamp(32px, 4vw, 56px);
    align-items: start;
    padding-block: clamp(40px, 5vw, 64px) var(--s-7);
}

.recipe-cards.is-locked {
    grid-template-areas:
        "record"
        "gate";
}

.recipe-record { grid-area: record; min-width: 0; container: record / inline-size; }
.ingredients { grid-area: ingredients; min-width: 0; }
.method { grid-area: method; min-width: 0; }
.members-gate { grid-area: gate; min-width: 0; }

@media (min-width: 960px) {
    .recipe-cards {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas:
            "ingredients record"
            "method record";
        grid-template-rows: auto 1fr;
    }

    .recipe-cards.is-locked {
        grid-template-areas: "gate record";
        grid-template-rows: auto;
    }
}

/* Narrow screens, the record first: the way past it to the ingredients,
   at the end of its head. Beside them from 960px, it isn't needed. */
.recipe-skip {
    font-size: var(--t-s);
    color: var(--ink-2);
}

@media (min-width: 960px) {
    .recipe-skip {
        display: none;
    }
}

/* A finger-sized target on touch screens, without moving the red line. */
@media (pointer: coarse) {
    .recipe-skip {
        margin-block: -12px;
        padding-block: 12px;
    }
}

/* What a card's head says beside its title: the yield, the steps. */
.recipe-card-meta {
    font-size: var(--t-s);
    color: var(--ink-3);
}

/* The yield: the facts' glyph, in the category's edge, then the value. */
.recipe-yield {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.recipe-yield .icon {
    width: 18px;
    height: 18px;
    color: var(--c-edge, var(--pen-2));
}

/* The verdict: a big glyph (the testers' tick-box in pen, the seal, the
   Test Kitchen's flask, or the red pencil's correction for Needs work and
   Hidden), the word in Besley, and its evidence under it: the tally, or
   why it didn't pass. */
.verdict {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-4) var(--s-2);
}

.verdict-glyph {
    width: 32px;
    height: 32px;
    color: var(--pen);
}

.verdict:is(.is-needs-work, .is-hidden) .verdict-glyph {
    color: var(--red);
}

.verdict-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.verdict-word {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
}

.verdict.is-hidden .verdict-word {
    color: var(--red);
}

.verdict.is-needs-work .verdict-word {
    color: var(--red);
    text-decoration: underline wavy var(--red);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    text-decoration-skip-ink: none;
}

.verdict-line {
    font-size: var(--t-s);
    line-height: 1.45;
    color: var(--ink-2);
}

.verdict-line .tally-line {
    font-size: var(--t-s);
    color: var(--ink-2);
}

/* Each average beside its scale (the shared .score-pair: the glyph and
   question, the scale under them, the figure at the end), each on a ruled
   line that runs edge to edge; then how many would make it again. */
.recipe-score,
.recipe-again {
    margin-inline: calc(-1 * var(--card-pad));
    padding: var(--s-4) var(--card-pad);
    border-bottom: 1px solid var(--rule);
}

.recipe-score .readout-label {
    font-size: var(--t-m);
}

.recipe-again {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    padding-block: var(--s-3);
    font-weight: 600;
}

.recipe-again b {
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 700;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--pen);
}

/* The as-written cooks: each a square print of their result, their two
   scores as the testers' figures, the day (and, for members, the name,
   in pen, linking to the report, and the steps they left notes on). The
   cook that made it pass has "Proven after cook 3" on the highlighter;
   the one a version stopped at, the red pencil's words. Three to a row. */
.recipe-cooks {
    margin-top: var(--s-5);
}

.recipe-cooks-title {
    font-family: var(--sans);
    font-size: var(--t-m);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-2);
}

.cook-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5) var(--s-3);
    margin: var(--s-3) 0 0;
    padding: 0;
    list-style: none;
}

.cook-tile {
    min-width: 0;
}

/* A narrow record (beside the ingredients under about 1100px, small
   phones): two to a row, so a name and its day still fit under each. */
@container record (width < 19rem) {
    .cook-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cook-tile img,
.cook-tile .no-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--photo-corner);
    object-fit: cover;
    background: var(--paper-3);
}

.cook-tile img {
    outline: 1px solid var(--photo-edge);
    outline-offset: -1px;
}

.cook-figures {
    gap: 2px 10px;
    margin-top: var(--s-2);
    font-size: 1.0625rem;
}

.cook-who,
.cook-tile-steps {
    margin-top: 2px;
    font-size: var(--t-xs);
    line-height: 1.35;
    color: var(--pen-2);
    overflow-wrap: anywhere;
}

.cook-who a {
    font-weight: 600;
    color: var(--pen);
}

.cook-who time {
    white-space: nowrap;
}

.cook-tile-steps a {
    color: var(--pen-2);
    white-space: nowrap;
}

.cook-moment {
    margin-top: var(--s-1);
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.6;
}

/* The mark is a strip as wide as the tile, so a translation that wraps
   ("اعتُمدت بعد الطبخة 3") stays one block of highlighter. */
.cook-moment .moment-mark {
    display: block;
    padding: 2px 6px;
    white-space: normal;
}

.cook-moment.is-failed {
    color: var(--red);
    text-decoration: underline wavy var(--red);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
}

/* Under the cooks: who cooked it with changes (in pen: they are cooks
   too, never the red pencil), then the rule, one line with its glyph,
   linked to how testing works. */
.recipe-record-changes {
    margin-top: var(--s-5);
    font-size: var(--t-s);
    color: var(--ink-2);
}

.recipe-record-changes a {
    color: var(--pen);
}

.recipe-record-rule {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-top: var(--s-4);
    font-size: var(--t-s);
    line-height: 1.4;
    color: var(--ink-3);
}

.recipe-record-rule .icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

/* Links to a step from a sentence ("testers flagged steps 2 and 3") or a
   cook: a finger-sized target on touch screens without changing the
   line. */
@media (pointer: coarse) {
    :is(.status-line, .report-pinned, .cook-tile-steps) a {
        margin-inline: -4px;
        padding-block: 12px;
        padding-inline: 4px;
    }

    /* A bare step number ("step 4"): a target about 44px wide, centred on
       the number. */
    :is(.status-line, .report-pinned) a.step-link {
        margin-inline: -17px;
        padding-inline: 17px;
    }
}

/* 03  Ingredients and method ---------------------------------------------------
   The ingredients: each a row on a ruled blue line that runs edge to edge,
   the square ticks of styles.css 07 (a ticked one is struck through); an
   author's sub-head ("For the ragù:") in Besley. The method: big Besley
   numbers, the step text at reading size, each step on a ruled line; a
   step testers annotated has its number on the highlighter and their
   notes under its text, in pen, small: a 2px pen rule at the start, the
   note on its own ruled lines, signed. Then the author's note and "Cooked
   it?", lined up with the step text. */
.ingredient-list {
    margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: 0;
    list-style: none;
    font-size: 1.125rem;
    line-height: 1.4;
}

.ingredient-list > li {
    padding-inline: var(--card-pad);
    border-bottom: 1px solid var(--rule);
}

.ingredient-list > li:last-child {
    border-bottom: 0;
}

.ingredient-list .tick {
    padding-block: 12px;
}

.ingredient-list > li:last-child .tick {
    padding-bottom: var(--s-4);
}

.ingredient-group {
    padding-block: var(--s-4) var(--s-2);
    font-family: var(--serif);
    font-weight: 600;
    line-height: var(--leading-tight);
}

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A step: the number, then the text. The list carries the recipe's dir,
   so the number, the text and the notes stay in order on a page in
   another script. */
.step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: var(--s-4);
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--rule);
}

.step:last-child {
    border-bottom: 0;
}

/* The numeral, in Besley (latin in every language), never split. */
.step-num {
    font-family: var(--latin-serif);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums proportional-nums;
    white-space: nowrap;
}

.step-num mark {
    padding-inline: 0.14em;
}

.step-text {
    grid-column: 2;
    max-width: 38em;
    font-size: 1.125rem;
    line-height: 1.55;
}

.step-notes {
    display: grid;
    grid-column: 2;
    gap: var(--s-3);
    max-width: 38em;
    margin: var(--s-3) 0 0;
    padding: 0;
    list-style: none;
}

.step-note {
    padding-inline-start: var(--s-3);
    border-inline-start: 2px solid var(--pen);
    color: var(--pen);
}

/* A short note (by length) in Source Sans italic, the closest the type
   comes to a hand; longer ones upright, to be read. Arabic and Japanese
   are always upright (styles.css 17). */
.step-note-text {
    --ruled-pitch: 1.6em;
    font-size: var(--t-s);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.step-note-text.is-short {
    font-style: italic;
}

/* The notes carry the page's lang (the site can't tell a note's
   language), so an Arabic note on a left-to-right page misses .ruled's
   :lang(ar) switch: its resolved direction catches it (unruled, upright,
   at the Arabic leading). */
.step-note-text:dir(rtl) {
    font-style: normal;
    line-height: 1.8;
    background-image: none;
}

.step-note-by {
    margin-top: 2px;
    font-size: var(--t-xs);
    color: var(--pen-2);
}

.step-note-by a {
    font-weight: 600;
    color: var(--pen);
}

.step-note-by .sep {
    color: inherit;
}

/* The author's note and "Cooked it?" on the steps' tracks (the number's
   column, then the text's), so they start where the step text does. The
   section carries the recipe's direction for the tracks; the words keep
   the page's. */
.author-note,
.cook-prompt {
    display: grid;
    grid-template-columns: calc(3rem + var(--s-4)) minmax(0, 1fr);
    margin-top: var(--s-4);
}

.author-note > *,
.cook-prompt > * {
    grid-column: 2;
    max-width: 38em;
}

.author-note h3 {
    padding-bottom: 6px;
    border-bottom: var(--head-line) solid var(--card-red);
    font-size: var(--t-l);
}

.author-note[dir="ltr"] > h3 { text-align: left; }
.author-note[dir="rtl"] > h3 { text-align: right; }

.author-note-text {
    --ruled-pitch: 1.65em;
    margin-top: var(--s-2);
    font-family: var(--serif);
    font-size: 1.125rem;
    white-space: pre-line;
}

/* "Cooked it?": the question and the button on one ruled line at the
   card's foot. */
.cook-prompt {
    margin-top: var(--s-5);
}

.cook-prompt-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--ink);
}

.cook-prompt h3 {
    font-size: var(--t-l);
}

.print-source {
    margin-top: var(--s-5);
    font-size: var(--t-xs);
    color: var(--ink-3);
}

@media (max-width: 639px) {
    .step {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: var(--s-3);
    }

    .step-num {
        font-size: 1.625rem;
    }

    .step-text {
        font-size: var(--t-m);
    }

    .author-note,
    .cook-prompt {
        grid-template-columns: minmax(0, 1fr);
    }

    .author-note > *,
    .cook-prompt > * {
        grid-column: 1;
    }
}

/* 04  Members-only gate ------------------------------------------------------------
   A reader of a members-only recipe meets the lock where the ingredients
   and method would be: one card, its head on the red line, the price in
   one line, one way in. */
.members-gate h2 {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.members-gate h2 .icon {
    width: 24px;
    height: 24px;
    color: var(--ink-2);
}

.members-gate-line {
    margin-block: var(--s-4) var(--s-5);
    font-size: var(--t-m);
    color: var(--ink-2);
}

/* 05  Cook reports, version history, discussion -----------------------------------
   Open paper under the cards: each section's head on the red line (the
   shared .section-head), each report and comment on a ruled blue line,
   Report at its top end. A report is the cook's print beside their name
   in pen, the day, as written or not, their two scores as figures, then
   their words in pen. From 960px the community keeps the page's two
   columns (the cards' 7fr and 5fr above): the reports run across both;
   the discussion's thread stands under the method, and beside it, under
   the record, the version history when there is one (the discussion's
   form then follows its thread), or else the form to add a comment. */
.community {
    padding-block: var(--s-5) var(--section);
}

.community-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
}

@media (min-width: 960px) {
    .community-main {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(32px, 4vw, 56px);
    }

    .community-main > .community-section {
        grid-column: 1 / -1;
    }

    .community-main.has-versions > .versions-section {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .community-main.has-versions > .discussion {
        grid-column: 1;
        grid-row: 2;
    }

    /* No versions: the discussion takes both columns, its head across
       them, the thread at the start and the form beside it, held in view
       (under the masthead) while the thread scrolls past. */
    .community-main:not(.has-versions) > .discussion {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(32px, 4vw, 56px);
        align-items: start;
    }

    .community-main:not(.has-versions) > .discussion > * {
        grid-column: 1;
    }

    .community-main:not(.has-versions) > .discussion > .section-head {
        grid-column: 1 / -1;
    }

    .community-main:not(.has-versions) > .discussion > .comment-form {
        position: sticky;
        top: calc(var(--masthead-h) + var(--s-4));
        grid-column: 2;
        grid-row: 2 / span 2;
        margin-top: 0;
    }
}

.community-empty {
    color: var(--ink-3);
}

.report-list,
.versions,
.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The reports: a grid of the cooks' cards, three or four to a row; on a
   phone one to a row, the print beside the words. */
.report-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--s-5);
}

.report.index-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.report-photo {
    display: block;
}

/* The card clips its corners (overflow: hidden), so the print's focus
   ring is drawn inside it. */
.report-photo:focus-visible {
    outline-offset: calc(-1 * var(--focus-width));
}

.report-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-3);
}

.report-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: var(--s-3) var(--card-pad) var(--s-4);
}

.report-body > .flag-widget {
    margin-top: auto;
    padding-top: var(--s-2);
}

.report-body > .flag-widget:has(details[open]) {
    align-self: stretch;
}

/* Report, at the top end of a comment: after the words in the markup,
   beside the name on the page; the words under them take the full width.
   Open, its slip takes the width, under the words. */
.comment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    column-gap: var(--s-3);
    min-width: 0;
}

.comment > * {
    grid-column: 1 / -1;
}

.comment > .comment-meta {
    grid-column: 1;
}

.comment > .flag-widget {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: -6px;
}

.comment > .flag-widget:has(details[open]) {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: var(--s-2);
}

.report-body .flag-summary,
.comment .flag-summary {
    color: var(--ink-3);
}

.report-meta,
.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--s-3);
}

.report-meta strong,
.comment-meta strong {
    font-size: var(--t-m);
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* A report is a tester's: their name in pen, their day in pen-2. */
.report-meta strong {
    color: var(--pen);
}

.report-meta time {
    font-size: var(--t-xs);
    color: var(--pen-2);
}

.comment-meta time {
    font-size: var(--t-xs);
    color: var(--ink-3);
}

/* "As written" carries the pen's tick; "With changes" is the same plain
   ink-2 word without one (a normal way to cook, never the red pencil). */
.report-how .tag .icon {
    color: var(--pen);
}

.report-how {
    margin-top: 2px;
}

.report-figures {
    margin-top: var(--s-2);
}

.report-again {
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--ink-2);
}

.report-changes {
    margin-top: var(--s-2);
    font-size: var(--t-s);
    color: var(--ink-2);
    white-space: pre-line;
}

/* What the cook wrote, in their pen. Upright: a report is read, and may
   run long. */
.report-text {
    max-width: var(--measure);
    margin-top: var(--s-2);
    color: var(--pen);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.report-pinned {
    margin-top: var(--s-2);
    font-size: var(--t-xs);
    color: var(--ink-3);
}

.report-pinned a {
    color: var(--pen-2);
}

/* Version history: each version on a ruled row, its record under it as
   the testers' figures, then whether it passed. */
.version {
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
}

.version:first-child {
    padding-top: 0;
}

.version-head strong {
    font-family: var(--serif);
    font-size: var(--t-m);
    font-weight: 600;
}

.version-head time {
    margin-inline-start: var(--s-2);
    font-size: var(--t-xs);
    color: var(--ink-3);
}

.version-current {
    margin-inline-start: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink-2);
}

.version-note {
    max-width: var(--measure);
    margin-top: 2px;
    font-size: var(--t-s);
}

.version-record {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    margin-top: var(--s-1);
    font-size: var(--t-xs);
}

.version-record .figures {
    font-size: var(--t-s);
}

.version-none {
    color: var(--ink-3);
}

.version-failed,
.version-proven {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.version-failed .icon,
.version-proven .icon {
    width: 16px;
    height: 16px;
}

/* A version that didn't pass: the red pencil, its wavy underline. */
.version-failed {
    color: var(--red);
    text-decoration: underline wavy var(--red);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.version-proven {
    color: var(--ink);
}

.version-proven .icon {
    color: var(--pen);
}

.version-proven time {
    font-weight: 400;
}

/* The discussion: a plain thread, oldest first. The recipe author's own
   comments carry a 2px ink rule at the start (the author writes in ink,
   like the recipe; the pen is the testers'). */
.comments-older {
    margin-bottom: var(--s-3);
    font-size: var(--t-s);
    color: var(--ink-3);
}

.comment {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--rule);
}

.comment:first-child {
    padding-top: 0;
}

.comment.is-author {
    padding-inline-start: var(--s-3);
    border-inline-start: 2px solid var(--ink);
}

.comment.is-author:first-child {
    padding-top: var(--s-1);
}

.comment-role {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink-2);
}

.comment-body {
    max-width: var(--measure);
    margin-top: var(--s-1);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.comment-empty {
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-3);
}

.comment-form {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

/* Who reads what is posted: the lock and two words, beside the button. */
.comment-audience {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-s);
    color: var(--ink-2);
}

.comment-audience .icon {
    width: 16px;
    height: 16px;
}

/* Everyone else: one line with the lock, and a way in, under a head
   that runs the container's width like the members' sections. */
.members-teaser-line {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--t-m);
    color: var(--ink-2);
}

.members-teaser-line .icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.members-teaser .btn {
    margin-top: var(--s-4);
}

@media (max-width: 639px) {
    .report.index-card {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: 0;
    }

    .report-photo img {
        height: 100%;
        min-height: 7rem;
        aspect-ratio: auto;
    }

    .report-body {
        padding: var(--s-3);
    }
}

/* Forced colours: the lines the system colours would drop. */
@media (forced-colors: active) {
    .recipe-crumbs ol,
    .cook-prompt-body {
        border-color: CanvasText;
    }

    .recipe-facts {
        border-color: CanvasText;
    }
}

/* Print: the recipe on paper (Print itself opens the cookbook's print
   page; this is the browser's own print of the page). The crumb, actions,
   the record's scores and cooks and the community drop out; the header
   prints unwashed, the photo small, the facts on one line; the record is
   its verdict; the ingredients keep their card beside the method. */
@media print {
    .recipe-crumbs,
    .recipe-scores,
    .recipe-cooks,
    .recipe-record-changes,
    .recipe-record-rule {
        display: none !important;
    }

    .recipe-header {
        padding: 0;
        background: none;
    }

    .recipe-header-grid {
        display: block;
        margin: 0;
    }

    .recipe-title {
        margin-top: 0;
        padding-bottom: 4pt;
        border-bottom-width: 1pt;
    }

    .recipe-photo.photo-mount {
        width: fit-content;
        margin-top: 8pt;
        padding: 0;
        border: 0;
        background: none;
        transform: none;
    }

    .recipe-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 4pt 16pt;
        margin-top: 8pt;
        border: 0;
    }

    .recipe-facts > div,
    .recipe-facts > div + div {
        padding: 0;
        border: 0;
    }

    .recipe-facts dd {
        font-size: 11pt;
    }

    .recipe-facts dd .icon {
        display: none;
    }

    .recipe-cards {
        grid-template-columns: 58mm minmax(0, 1fr);
        grid-template-areas:
            "record record"
            "ingredients method";
        gap: 8pt 8mm;
        padding: 10pt 0 0;
    }

    .recipe-record.index-card,
    .method.index-card {
        padding: 0;
        border: 0;
    }

    .recipe-record > .index-card-head {
        display: none;
    }

    .verdict {
        padding: 0;
    }

    .verdict-glyph {
        width: 16pt;
        height: 16pt;
    }

    .verdict-word {
        font-size: 12pt;
    }

    .ingredients.index-card {
        --card-pad: 6pt;
        border-top-width: 1pt;
    }

    .ingredients .index-card-head h2,
    .method .index-card-head h2 {
        font-size: 13pt;
    }

    .method > .index-card-head:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .ingredient-list {
        font-size: 10pt;
    }

    .ingredient-list .tick {
        min-height: 0;
        padding: 2pt 0;
        gap: 6pt;
    }

    .step {
        grid-template-columns: 22pt minmax(0, 1fr);
        padding: 5pt 0;
        break-inside: avoid;
    }

    .step-num {
        font-size: 13pt;
    }

    .step-text {
        max-width: none;
        font-size: 10.5pt;
    }

    .step-note-text {
        font-size: 9.5pt;
        line-height: 1.4;
    }

    .author-note {
        display: block;
        margin-top: 10pt;
        break-inside: avoid;
    }

    .members-gate .btn {
        display: none;
    }
}

/* 06  Forms: the column, the cook-report card, share and revise ------------
   Forms are open paper: the page title on its red line and at most one
   short line under it, then each section's head on a 1px ink line (the
   shared .form-card), white inputs with a --control edge, the actions on a
   ruled line. Colour comes from the categories, never from a wash: the
   share form's dividers, the photo mounted on the chosen category's fill,
   and the cook report, which is the one form that is a card (below),
   filed behind its recipe's category. */
.form-column {
    max-width: 40rem;
}

.form-column .lead {
    max-width: none;
}

.recipe-form,
.cook-form {
    display: grid;
}

.form-card > h2 {
    font-size: var(--t-l);
}

/* A page with no line under its title (the cook report) keeps the error
   summary off the title's red line. */
.form-column > .page-title + .error-summary {
    margin-top: var(--s-5);
}

/* A group of choices sent back with an error: the red pencil edges every
   option (the dividers keep their colours; their error line says it). */
:is(.recipe-form, .cook-form) [role="radiogroup"][aria-invalid="true"] :is(.choice, .rating-option span) {
    border-color: var(--red);
}

/* A photo field: the photo (the current one when revising, then the
   chosen one, shown by app.js) mounted on the category's fill, above the
   file picker. The preview's frame is hidden until a photo is chosen; the
   current photo gives way to it. */
.photo-pick {
    display: grid;
    justify-items: start;
    gap: var(--s-3);
}

.photo-pick .photo-mount {
    width: min(100%, 17rem);
    margin: 0;
    padding: 8px;
}

.photo-pick .photo-mount img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-3);
}

.photo-pick .photo-preview[hidden],
.photo-pick:has(.photo-preview:not([hidden])) .photo-current {
    display: none;
}

/* Share and revise ---------------------------------------------------------
   The category is the first thing asked: the eight dividers, two shelves
   of four standing in the teal tin (its front drawn across each shelf's
   foot, in front of them), each in its fill with its edge, its glyph and
   its word in ink. The radio inside is hidden but takes focus (the ring
   goes round the divider). Hover lifts a divider; the chosen one stands
   up out of the tin, edged in ink, bold, and ticked, so the choice never
   rests on colour. */
.share-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--s-3);
    margin-top: var(--s-2);
}

.share-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 3px 0;
    cursor: pointer;
}

/* The tin's front: the cells touch, so each shelf's runs unbroken, its
   rolled rim along the top and its corners at the shelf's ends. */
.share-cat::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    height: 18px;
    border-top: 3px solid var(--tin-edge);
    background: var(--tin);
    pointer-events: none;
}

.share-cat:nth-child(4n + 1)::after {
    border-start-start-radius: var(--corner);
}

.share-cat:nth-child(4n)::after {
    border-start-end-radius: var(--corner);
}

.share-cat input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.share-cat-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 104px;
    padding: 10px 8px 28px;
    border: 1px solid var(--c-edge);
    border-radius: var(--tab-corner) var(--tab-corner) 0 0;
    background: var(--c);
    color: var(--ink);
    transition: transform 180ms var(--ease);
}

.share-cat-glyph {
    width: 28px;
    height: 28px;
}

.share-cat-name {
    max-width: 100%;
    font-size: var(--t-s);
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: break-word;
}

/* A word wider than a phone's divider ("Accompagnements", "Frühstück")
   is hyphenated; English and Spanish break at their spaces ("Sides &" /
   "Salads"), Japanese after its middle dot ("副菜・" / "サラダ"), never
   inside a word. */
.share-cat-name:is(:lang(fr), :lang(de)) {
    hyphens: auto;
}

.share-cat-name:lang(ja),
.share-choices .choice:lang(ja) {
    word-break: keep-all;
}

.share-cat-tick {
    position: absolute;
    top: 9px;
    inset-inline-end: 7px;
    display: none;
    width: 20px;
    height: 20px;
}

.share-cat:hover .share-cat-card {
    transform: translateY(-5px);
}

.share-cat:has(input:checked) .share-cat-card {
    padding: 9.5px 7.5px 27.5px;
    border: 1.5px solid var(--ink);
    transform: translateY(-14px);
}

.share-cat:has(input:checked) .share-cat-name {
    font-weight: 700;
}

.share-cat:has(input:checked) .share-cat-tick {
    display: block;
}

.share-cat:has(input:focus-visible) .share-cat-card {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: 2px;
}

/* The chosen category colours what is filed behind it: the photo's mount
   and the card preview's tab and stripe. Without :has() they stay
   neutral. */
.share-column:has(#category-breakfast:checked) :is(.share-form, .share-card) { --c: var(--breakfast); --c-edge: var(--breakfast-edge); }
.share-column:has(#category-lunch:checked) :is(.share-form, .share-card)     { --c: var(--lunch);     --c-edge: var(--lunch-edge); }
.share-column:has(#category-dinner:checked) :is(.share-form, .share-card)    { --c: var(--dinner);    --c-edge: var(--dinner-edge); }
.share-column:has(#category-sides:checked) :is(.share-form, .share-card)     { --c: var(--sides);     --c-edge: var(--sides-edge); }
.share-column:has(#category-snacks:checked) :is(.share-form, .share-card)    { --c: var(--snacks);    --c-edge: var(--snacks-edge); }
.share-column:has(#category-dessert:checked) :is(.share-form, .share-card)   { --c: var(--dessert);   --c-edge: var(--dessert-edge); }
.share-column:has(#category-baking:checked) :is(.share-form, .share-card)    { --c: var(--baking);    --c-edge: var(--baking-edge); }
.share-column:has(#category-drinks:checked) :is(.share-form, .share-card)    { --c: var(--drinks);    --c-edge: var(--drinks-edge); }

/* Language and cuisine side by side; difficulty as three choices; the
   times in a row of three whose labels, boxes and errors line up however
   a label wraps ("Vorbereitungszeit"). */
.share-difficulty {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.share-difficulty > legend {
    margin-bottom: 6px;
    padding: 0;
}

/* Difficulty reads as a little scale, like the cook report's scores:
   three boxes of card stock, the chosen one filled in ink. The radio is
   hidden but takes focus (the ring goes round its box). */
.share-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
}

.share-choices .choice {
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    padding: 8px 10px;
    text-align: center;
    overflow-wrap: anywhere;
}

.share-choices .choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.share-choices .choice:has(input:checked) {
    padding: 8px 10px;
    border: 1px solid var(--button);
    background: var(--button);
    color: var(--on-button);
}

.share-times {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.share-times > .field {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 6px;
}

.share-times label {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.share-times label .icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ink-2);
}

/* The ingredients and steps are written a line each, so their boxes are
   ruled at the text's own pitch (in ink: this is the recipe as written).
   The lines scroll with the text and stay inside the content box (the
   card stock under them is a second layer, so the padding stays white).
   Arabic and Japanese write unruled, as .ruled does (styles.css 17), on
   plain card stock (the shorthand resets the clip too). (.field's
   controls weigh 0,1,1 and more.) */
.share-form .field textarea.share-lines {
    --ruled-pitch: 1.75em;
    line-height: var(--ruled-pitch);
    background-image: linear-gradient(to bottom, transparent calc(var(--ruled-pitch) - 1px), var(--rule) calc(var(--ruled-pitch) - 1px)), linear-gradient(var(--card), var(--card));
    background-size: 100% var(--ruled-pitch), auto;
    background-origin: content-box, padding-box;
    background-clip: content-box, padding-box;
    background-attachment: local, local;
}

.share-form .field textarea.share-lines:is(:lang(ar), :lang(ja)) {
    line-height: var(--leading);
    background: var(--card);
}

.recipe-form > .form-actions {
    margin-top: var(--s-6);
}

/* Revising: where the version stands, before anything else. Its photo on
   its category's fill, then "Version 1", its one status mark and the
   testers' figures (with their legend), on a pair of ruled lines. */
.share-record {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: center;
    margin-bottom: var(--s-6);
    padding-block: var(--s-4);
    border-block: 1px solid var(--rule);
}

.share-record-photo {
    margin: 0;
    padding: 6px;
}

.share-record-photo img,
.share-record-photo .no-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.share-record-text {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.share-record-version {
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 600;
    line-height: 1.2;
}

.share-record .figures-legend {
    margin-top: 2px;
}

/* Sharing, from 1100px: the card being filled in, beside the form. It is
   the recipe card itself (styles.css 09), standing in the margin while
   the form scrolls: grey until a category is chosen, then in its colour,
   with the photo and title as they are typed. Below 1100px it isn't
   shown: the photo field has its own preview. */
.share-preview {
    display: none;
}

.share-preview-label {
    margin-bottom: 44px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink-3);
}

.share-card .recipe-card-photo {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.share-card .recipe-card-photo > * {
    grid-area: 1 / 1;
}

.share-card .no-photo {
    width: 100%;
    height: 100%;
}

.share-card .no-photo .icon {
    width: 32px;
    height: 32px;
    color: var(--ink-3);
}

.share-card img[hidden],
.share-card img:not([hidden]) + .no-photo {
    display: none;
}

.share-card .recipe-card-title {
    font-family: var(--serif);
    overflow-wrap: anywhere;
}

/* The tab names the chosen category, or says "Category" until then. */
.share-card-cat:not(.is-none),
.share-column:has(.share-cats input:checked) .share-card-cat.is-none {
    display: none;
}

.share-column:has(#category-breakfast:checked) .share-card-cat.cat-breakfast,
.share-column:has(#category-lunch:checked) .share-card-cat.cat-lunch,
.share-column:has(#category-dinner:checked) .share-card-cat.cat-dinner,
.share-column:has(#category-sides:checked) .share-card-cat.cat-sides,
.share-column:has(#category-snacks:checked) .share-card-cat.cat-snacks,
.share-column:has(#category-dessert:checked) .share-card-cat.cat-dessert,
.share-column:has(#category-baking:checked) .share-card-cat.cat-baking,
.share-column:has(#category-drinks:checked) .share-card-cat.cat-drinks {
    display: inline;
}

@media (min-width: 1100px) {
    .share-column.has-preview {
        display: grid;
        grid-template-columns: minmax(0, 40rem) minmax(15rem, 19rem);
        column-gap: clamp(48px, 6vw, 112px);
        align-items: start;
        max-width: none;
    }

    .share-column.has-preview > :not(.share-preview) {
        grid-column: 1;
    }

    .share-preview {
        position: sticky;
        top: calc(var(--masthead-h) + var(--s-6));
        display: block;
        grid-column: 2;
        grid-row: 2;
    }
}

/* The version being revised, step by step with the testers' notes, for
   matching "step 3" to a line of the steps field: the step numbers as on
   the recipe page, the notes in pen on their lines. Above the steps field
   (annotated steps only) up to 1100px; beside it from there, the page
   widening to take it. */
.feedback {
    padding-block: var(--s-4);
    border-block: 1px solid var(--rule);
}

.feedback h3 {
    font-size: var(--t-m);
}

.feedback-lead {
    margin-top: var(--s-1);
    font-size: var(--t-xs);
    color: var(--ink-3);
}

@media (max-width: 1099px) {
    .feedback-step:not(.has-notes) {
        display: none;
    }
}

@media (min-width: 1100px) {
    .form-column.has-aside {
        max-width: none;
    }

    .form-column.has-aside > :not(.recipe-form),
    .form-column.has-aside .recipe-form > :not(.has-feedback) {
        max-width: 40rem;
    }

    .recipe-form .form-card.has-feedback {
        grid-template-columns: minmax(0, 40rem) minmax(18rem, 30rem);
        column-gap: clamp(32px, 4vw, 64px);
        align-items: start;
    }

    .form-card.has-feedback > :not(.feedback) {
        grid-column: 1;
    }

    /* Beside the steps field and the notes under it. */
    .form-card.has-feedback > .feedback {
        grid-column: 2;
        grid-row: 3 / span 2;
        padding-top: 0;
        border-top: 0;
    }
}

.feedback-steps {
    display: grid;
    gap: var(--s-4);
    margin: var(--s-3) 0 0;
    padding: 0;
    list-style: none;
}

.feedback-step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--s-3);
}

.feedback-step .step-num {
    align-self: start;
    font-size: 1.375rem;
}

.feedback-step-text {
    font-size: var(--t-s);
    color: var(--ink-2);
}

.feedback .step-notes {
    margin-top: var(--s-2);
    gap: var(--s-3);
}

/* The cook report ----------------------------------------------------------
   A blank test card to fill in, filed behind the recipe's category: its
   tab on the card's top edge, its stripe along it (.index-card.striped),
   then the recipe's name on the red line (with the version being tested)
   and what the author promised as the card's first line: their photo
   mounted on the category's fill beside their description and the times.
   The questions follow, each on a 1px ink line (.form-card); the two
   scores are asked in the words and glyphs of the figures they feed
   (check-circle, list, in pen-2 as on the cards). Whatever the cook
   writes on the card is in their pen, as on the record it goes into. The
   card's lines run edge to edge; the send button stands on its last. */
.cook-column {
    max-width: 44rem;
}

/* Room above the card for its tab. */
.cook-form {
    position: relative;
    margin-top: 56px;
    border-start-start-radius: 0;
}

.cook-tab {
    position: absolute;
    bottom: 100%;
    inset-inline-start: -1px;
    margin-bottom: var(--stripe);
}

.cook-head h2 {
    overflow-wrap: anywhere;
}

.cook-version {
    font-size: var(--t-s);
    color: var(--ink-3);
    white-space: nowrap;
}

.cook-promise {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
    margin-inline: calc(-1 * var(--card-pad));
    margin-bottom: var(--s-6);
    padding: var(--s-5) var(--card-pad);
    border-bottom: 1px solid var(--rule);
}

.cook-promise-photo {
    margin: 0;
    padding: 8px;
}

.cook-promise-photo img,
.cook-promise-photo .no-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cook-promise-label {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink-2);
}

.cook-promise-desc {
    margin-top: 4px;
    font-family: var(--serif);
    font-size: var(--t-m);
    line-height: 1.5;
}

.cook-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-top: var(--s-3);
    font-size: var(--t-s);
    color: var(--ink-2);
}

.cook-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cook-fact .icon {
    width: 18px;
    height: 18px;
}

/* A question's choices, scale and notes sit close under it. */
.cook-form .cook-q {
    gap: var(--s-3);
}

.cook-q-glyph {
    width: 22px;
    height: 22px;
    margin-inline-end: 8px;
    color: var(--pen-2);
    vertical-align: -0.2em;
}

/* The photo's label heads its section, as a legend heads a question. */
.field > label.cook-q-label {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 600;
    line-height: var(--leading-tight);
}

.cook-photo {
    gap: var(--s-2);
}

/* As written / with changes, and yes / no: two big slips side by side. */
.cook-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cook-choices .choice {
    min-height: 64px;
    align-items: center;
    font-size: var(--t-m);
}

.cook-yesno .choice {
    font-size: var(--t-l);
}

.cook-changes {
    margin-top: var(--s-2);
}

/* The "what did you change" field only once "No, I made changes" is
   chosen (without :has() it simply stays visible). */
.cook-form:has(input[name="as_written"][value="yes"]:checked) .cook-changes,
.cook-form:not(:has(input[name="as_written"]:checked)) .cook-changes {
    display: none;
}

/* The 1-5 scores as big squares across the card. Every option looks the
   same until it's chosen (filled in ink, its figure bold); the pass zone
   is one highlighter band under its options, so it marks the scale
   without making them look chosen, and a key under the second scale
   names it. */
.cook-form .rating {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-2);
    padding-bottom: 10px;
}

.cook-form .rating-option span {
    width: 100%;
    height: 64px;
    font-size: 1.625rem;
}

/* The band runs on under the gaps between pass options (half a gap on
   each side), and stops at the first and last option's own edges. */
.cook-form .rating-option.is-pass::after {
    inset-inline: calc(var(--s-2) / -2);
    bottom: -10px;
    height: 6px;
}

.cook-form .rating-option:not(.is-pass) + .is-pass::after,
.cook-form .rating-option.is-pass:first-child::after {
    inset-inline-start: 0;
}

.cook-form .rating-option.is-pass:last-child::after {
    inset-inline-end: 0;
}

.cook-form .rating-option input:checked + span {
    border-width: 2px;
    font-weight: 700;
}

.cook-form .rating-scale {
    max-width: none;
    margin-top: var(--s-2);
}

.cook-pass {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-xs);
    color: var(--ink-2);
}

.cook-pass-band {
    flex: none;
    width: 28px;
    height: 6px;
    background: var(--mark);
}

/* The recipe's own steps, numbered as on the recipe page, each with a
   note of its own, on ruled lines that run edge to edge across the card.
   A step with a note written gets its number highlighted, as annotated
   steps are on the recipe page. */
.cook-steps {
    margin: var(--s-2) calc(-1 * var(--card-pad)) 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.cook-step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-3) var(--card-pad) var(--s-1);
    border-bottom: 1px solid var(--rule);
}

.cook-step .step-num {
    align-self: start;
    justify-self: start;
    padding-inline: 0.14em;
    font-size: 1.375rem;
}

.cook-step:has(.cook-note textarea:not(:placeholder-shown)) .step-num {
    background: var(--mark);
    color: var(--on-mark);
}

.cook-step-body {
    min-width: 0;
}

/* The step is in the recipe's own direction, so it lines up with its own
   start: Safari would otherwise hand an English step on an Arabic page the
   page's side from the list item (styles.css 17). */
.cook-step-text {
    font-size: var(--t-m);
    line-height: 1.5;
    text-align: start;
}

.cook-note > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--ink-2);
    list-style: none;
    cursor: pointer;
}

.cook-note > summary::-webkit-details-marker {
    display: none;
}

.cook-note-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-decoration-color: var(--rule-2);
    text-underline-offset: 0.25em;
}

.cook-note-add .icon {
    width: 16px;
    height: 16px;
}

.cook-note > summary:hover {
    color: var(--ink);
}

.cook-note > summary:hover .cook-note-add {
    text-decoration-color: currentColor;
}

.cook-note[open] > summary {
    color: var(--ink);
}

.cook-note textarea {
    margin-bottom: var(--s-2);
}

/* "Anything else?" closes the step notes. */
.cook-else {
    margin-top: var(--s-3);
}

/* The cook's own words are in their pen, written on the card's ruled
   lines: inside the box (its --control edge stays the boundary, a rule is
   never a border), at the text's own pitch, scrolling with the text, and
   only in the content box so no line crowds the edge. Arabic and Japanese
   write unruled, as .ruled does (styles.css 17). (.field's controls in
   styles.css 07 weigh 0,2,1, hence the scoped selectors.) */
.cook-form :is(.field, .cook-note) textarea {
    --ruled-pitch: 1.6em;
    color: var(--pen);
    line-height: var(--ruled-pitch);
    background-image: linear-gradient(to bottom, transparent calc(var(--ruled-pitch) - 1px), var(--rule) calc(var(--ruled-pitch) - 1px)), linear-gradient(var(--card), var(--card));
    background-size: 100% var(--ruled-pitch), auto;
    background-origin: content-box, padding-box;
    background-clip: content-box, padding-box;
    background-attachment: local, local;
}

.cook-form :is(.field, .cook-note) textarea:is(:lang(ar), :lang(ja)) {
    line-height: var(--leading);
    background: var(--card);
}

/* The send button stands on the card's last ruled line, edge to edge. */
.cook-form > .form-actions {
    margin-top: var(--s-6);
    margin-inline: calc(-1 * var(--card-pad));
    padding-inline: var(--card-pad);
}

/* From 1100px the card widens and the promise takes a column of its own
   beside the questions, staying in view while they are answered (the
   fidelity score is given against it). Its photo is the column's width;
   the steps' ruled lines stop at the questions' column. */
@media (min-width: 1100px) {
    .cook-column {
        max-width: 68rem;
    }

    .cook-form {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
        column-gap: clamp(40px, 4vw, 64px);
        align-items: start;
    }

    .cook-form > * {
        grid-column: 1;
    }

    .cook-form > :is(.index-card-head, .form-actions) {
        grid-column: 1 / -1;
    }

    .cook-promise {
        position: sticky;
        top: calc(var(--masthead-h) + var(--s-5));
        display: block;
        grid-column: 2;
        grid-row: 2 / span 6;
        margin: var(--s-5) 0 0;
        padding: 0;
        border: 0;
    }

    .cook-promise + .cook-q {
        margin-top: var(--s-5);
    }

    .cook-promise-photo {
        margin-bottom: var(--s-4);
        padding: 10px;
    }

    .cook-steps {
        margin-inline-end: 0;
    }

    .cook-step {
        padding-inline-end: 0;
    }
}

/* Narrower screens: the author's photo shrinks; on a phone it is a
   thumbnail beside who promised it and the times, the promise itself
   running the card's full width under them. Two shelves of dividers stay
   four wide; the times stay three wide down to the smallest phones. */
@media (max-width: 720px) {
    .cook-promise {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: var(--s-4);
    }

    .cook-form .rating-option span {
        height: 56px;
    }

    .share-record {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .cook-promise {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: var(--s-1) var(--s-3);
    }

    .cook-promise-text {
        display: contents;
    }

    .cook-promise-photo {
        grid-row: 1 / span 2;
        padding: 5px;
    }

    .cook-promise-label,
    .cook-facts {
        grid-column: 2;
        margin: 0;
    }

    .cook-promise-label {
        grid-row: 1;
        align-self: end;
    }

    .cook-facts {
        grid-row: 2;
        align-self: start;
        gap: 2px 12px;
    }

    .cook-promise-desc {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: var(--s-2);
    }

    .cook-choices .choice {
        padding-inline: 12px;
    }

    .share-cats {
        margin-inline: -2px;
    }

    .share-cat {
        padding-inline: 2px;
    }

    .share-cat-card {
        padding-inline: 6px;
    }

    .share-cat:has(input:checked) .share-cat-card {
        padding-inline: 5.5px;
    }

    .share-cat-glyph {
        width: 24px;
        height: 24px;
    }

    .share-cat-name {
        font-size: var(--t-xs);
    }

    .share-cat-tick {
        top: 7px;
        inset-inline-end: 5px;
        width: 16px;
        height: 16px;
    }

    .share-times {
        gap: var(--s-2);
    }

    /* As written / with changes stack; yes / no stay side by side. */
    .cook-choices:not(.cook-yesno) {
        grid-template-columns: minmax(0, 1fr);
    }

    .cook-choices:not(.cook-yesno) .choice {
        min-height: 56px;
    }
}

@media (forced-colors: active) {
    .cook-step:has(.cook-note textarea:not(:placeholder-shown)) .step-num {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    /* The ruled lines in the boxes go, as .ruled's do (styles.css 16). */
    .cook-form :is(.field, .cook-note) textarea,
    .share-form .field textarea.share-lines {
        background: Canvas;
    }

    .share-cat:has(input:checked) .share-cat-card {
        border-color: Highlight;
    }

    .share-choices .choice:has(input:checked) {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }

    .cook-pass-band {
        forced-color-adjust: none;
        background: Highlight;
    }
}

/* 07  Test Kitchen and My recipes --------------------------------------------
   Both are open paper: the page title on the red line (.page-head), one
   short line or a row of figures under it, then the recipes as photo
   cards (styles.css 09), each filed behind its category. The Test
   Kitchen's cards carry their tally and "Cook it"; My recipes groups the
   member's own by what happens next, each group under a section opener. */
.kitchen-queue,
.me-page {
    padding-bottom: var(--section);
}

/* The Test Kitchen: its one line, the page's standfirst (.lead, as on
   the share form), with the way to the member's own recipes at its end. */
.kitchen-head-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-4);
}

.kitchen-head-foot .lead {
    margin-top: 0;
}

/* My recipes: the counts as figures, as the home page states its own: a
   Besley number over its status glyph and word (Needs work and Hidden in
   red pencil, Proven's tick in pen), each a link to its group; the Share
   button at the row's end, on its foot. Each count is one message ("<b>2</b>
   proven"): its number stands on a line of its own, pulled back over the
   glyph (18px and its 6px gap) so it lines up with the glyph's edge. */
.me-head-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5) var(--s-6);
    margin-top: var(--s-5);
}

.me-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) clamp(28px, 4vw, 56px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.me-stat {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    padding-inline-start: 24px;
    color: var(--ink-2);
    font-size: var(--t-s);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25em;
}

.me-stat > .icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-inline-start: -24px;
    margin-bottom: 2px;
}

.me-stat > span {
    display: block;
}

/* An inline-block, so the link's underline (on hover) stays on the
   words; its full width puts the words on the next line. */
.me-stat b {
    display: inline-block;
    width: calc(100% + 24px);
    margin-inline-start: -24px;
    margin-bottom: 6px;
    color: var(--ink);
    font-family: var(--latin-serif);
    font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums proportional-nums;
}

.me-stat:hover {
    text-decoration-color: currentColor;
}

.me-stat:is(.is-needs-work, .is-hidden) {
    color: var(--red);
}

.me-stat.is-proven .icon {
    color: var(--pen);
}

.me-head {
    margin-bottom: var(--s-5);
}

.me-group + .me-group {
    margin-top: var(--s-8);
}

/* A card that needs work says which steps testers flagged, then "Revise
   it" as a small ink-outline button on a line of its own (the note's link
   already sits above the card's cover link). Only in that group: a hidden
   card's "Reason: …" stays one line of words. */
.me-group.is-needs-work .recipe-card-note > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

.me-group.is-needs-work .recipe-card-note a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--ink);
    border-radius: var(--corner);
    font-size: var(--t-s);
    text-decoration: none;
    white-space: nowrap;
}

.me-group.is-needs-work .recipe-card-note a:hover {
    background: var(--hover);
}

@media (pointer: coarse) {
    .me-group.is-needs-work .recipe-card-note a {
        min-height: 44px;
    }
}

@media (max-width: 639px) {
    .me-head-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 08  Responsive --------------------------------------------------------------- */

/* Print keeps its own width (the cookbook's panel stretches its buttons
   up to 720px; this file loads before cookbook.css, hence the longer
   selector). */
@media (max-width: 720px) {
    .recipe-actions .clip-panel > .clip-print {
        flex: 0 0 auto;
    }
}

@media (max-width: 639px) {
    .recipe-actions > .btn-primary {
        flex: 1 1 100%;
    }
}

/* 09  Forced colours, print ------------------------------------------------- */
/* Testers' notes and the author's comments keep their pen line. */
@media (forced-colors: active) {
    .step-note,
    .comment.is-author {
        border-inline-start-color: CanvasText;
    }
}

/* Print, on top of section 05's: the actions, the status banner, the
   discussion and "Cooked it?" drop out; the type takes print sizes, and
   testers' notes (members) print under their step in dark ink. The ruled
   lines are backgrounds and drop out, as styles.css's print block says. */
@media print {
    .recipe-actions,
    .community,
    .status-banner,
    .cook-prompt {
        display: none !important;
    }

    .recipe-title {
        max-width: none;
        font-size: 24pt;
    }

    .recipe-lead {
        margin-top: 4pt;
        font-size: 11pt;
    }

    .byline {
        margin-top: 4pt;
        font-size: 9.5pt;
    }

    .recipe-photo img {
        width: auto;
        max-width: 100%;
        max-height: 60mm;
        aspect-ratio: auto;
    }

    /* The ingredients card keeps its edge, at a printed card's padding
       (its lines and head follow --card-pad). */
    .ingredients.index-card {
        --card-pad: 6pt;
    }

    .ingredients > .index-card-head:first-child {
        padding-top: 6pt;
        border-bottom-width: 1pt;
    }

    .ingredients .index-card-head h2 {
        font-size: 13pt;
    }

    .ingredient-list {
        font-size: 10pt;
    }

    .ingredient-group {
        padding-block: 5pt 2pt;
    }

    .ingredient-list .tick {
        min-height: 0;
        padding: 2pt 0;
        gap: 6pt;
    }

    .ingredient-list .tick input {
        width: 9pt;
        height: 9pt;
    }

    .ingredient-list .tick input:checked + span {
        color: inherit;
        text-decoration: none;
    }

    .step {
        grid-template-columns: 22pt minmax(0, 1fr);
        padding: 5pt 0;
        break-inside: avoid;
    }

    .step-num {
        font-size: 13pt;
    }

    .step-text {
        max-width: none;
        font-size: 10.5pt;
    }

    .steps .step-notes {
        grid-column: 2;
        gap: 3pt;
        margin-top: 4pt;
    }

    .step-note {
        padding-inline-start: 6pt;
        border-inline-start-width: 1pt;
    }

    .step-note::before {
        display: none;
    }

    .step-note-text {
        font-size: 9.5pt;
        line-height: 1.4;
    }

    .step-note-by {
        font-size: 8.5pt;
    }

    .author-note {
        display: block;
        margin-top: 10pt;
        break-inside: avoid;
    }

    .author-note h3 {
        padding-bottom: 3pt;
        border-bottom-width: 1pt;
    }

    .author-note-text {
        font-size: 11pt;
        line-height: 1.45;
    }

    .print-source {
        margin-top: 12pt;
        padding-top: 6pt;
        border-top: 1px solid var(--rule-2);
        font-size: 8.5pt;
    }

    .members-gate {
        margin-top: 12pt;
    }

    .members-gate .btn {
        display: none;
    }
}