/* ==========================================================================
   Account surface: log in, sign up and the pages behind emailed links
   (forgot and reset password, email confirmation, unsubscribe), the error
   pages (and the 500 page rendered at startup), the membership page
   (/join) and account settings. Only what these pages need beyond the
   foundation (styles.css): the index card and its head on the red line,
   fields, buttons, alerts, the error summary, the section opener, the
   category classes and washes, the tab, the photo mount, status marks,
   the tally, figures and the score rows all come from there. Colours
   come only from the tokens.

   Every page here is a card pulled from the recipe box: a white index
   card (.account-card) with the eight dividers' tabs (account_tabs)
   standing on its top edge, in their fills, the way the cards stand in
   the tin behind them. A form (log in, sign up, forgot and reset
   password) is its title on the card's red line, the fields, the one
   button on a ruled line and the way out on the card's last line. A
   message (the pages behind emailed links, the error pages) is a glyph
   beside its title on the red line, one sentence and the way on. Account
   settings are one card of ruled rows. /join is the page's one wash
   (dessert, as the home page's Join section): the price, what members do
   and the button on the card; then, on paper, one real recipe's test
   record as a picture (its photo mounted on its category's fill, the
   card striped in it).

   Contents
   01  The account card and its tabs
   02  Forms you fill in: log in, sign up, forgot and reset password
   03  Messages: the pages behind emailed links; the error pages
   04  Membership (/join): the offer; one recipe's record; members
   05  Account settings: ruled rows on one card
   06  Right to left, Japanese
   07  Phones and fingers
   ========================================================================== */

/* 01  The account card --------------------------------------------------------
   A white index card (the foundation's .index-card: 1px edge, 4px
   corners, its head on the red line) with the eight category tabs
   standing on its top edge, set in from its ends: decorative (aria-hidden,
   each in its fill and edge, ink-free), so colour carries nothing here.
   The card leaves room above it for the tabs. */
.account-card {
    position: relative;
    margin-top: 26px;
}

.account-tabs {
    position: absolute;
    bottom: 100%;
    inset-inline: clamp(16px, 3.5vw, 48px);
    display: flex;
    gap: 6px;
    pointer-events: none;
}

.account-tabs > i {
    flex: 1 1 0;
    max-width: 96px;
    height: 22px;
    border: 1px solid var(--c-edge);
    border-bottom: 0;
    border-radius: var(--tab-corner) var(--tab-corner) 0 0;
    background: var(--c);
}

/* The tabs come first in the card (account_tabs), so its head is not the
   foundation's :first-child: it takes the card's top padding itself here,
   so the title sits where every card's does. */
.account-card > .account-tabs:first-child + .index-card-head {
    margin-top: calc(-1 * var(--card-pad));
    padding-top: var(--s-4);
}

/* A card's title is a card's heading (24-30), not a page's (36-60): the
   card is the page. */
.account-card > .index-card-head h1 {
    font-size: var(--t-xl);
    letter-spacing: -0.006em;
}

/* 02  Forms you fill in -------------------------------------------------------
   The card in the middle of the page, as wide as a form needs (30rem);
   with what the visitor came for (a recipe, or the membership) beside it
   on wide screens, the two as one centred group, and under it on phones.
   Inside: the title on the red line, at most one short line, the fields,
   the button on a ruled line running edge to edge, and the way out on
   the card's last line. */
.auth {
    display: grid;
    grid-template-columns: minmax(0, 30rem);
    justify-content: center;
    gap: var(--s-7) clamp(40px, 6vw, 88px);
    padding-block: clamp(32px, 5vw, 64px) var(--section);
}

@media (min-width: 900px) {
    .auth.has-aside {
        grid-template-columns: minmax(0, 30rem) minmax(0, 22rem);
        align-items: start;
    }
}

.auth-card {
    min-width: 0;
}

.auth-lead {
    margin-top: var(--s-4);
    color: var(--ink-2);
}

/* An address keeps its own order inside an Arabic sentence. */
.auth-lead strong,
.notice-text strong {
    color: var(--ink);
    font-weight: 600;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.auth-card > .alert,
.auth-card > .error-summary {
    margin: var(--s-4) 0 0;
}

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

/* The button's ruled line runs across the card, as every card line does. */
.auth-form > .form-actions {
    margin-inline: calc(-1 * var(--card-pad));
    padding-inline: var(--card-pad);
}

/* The button may wrap: French "Enregistrer le nouveau mot de passe" is
   wider than a 320px phone's column at the large size, and a button's
   words never run off the page. */
.auth-form .form-actions > .btn {
    max-width: 100%;
    padding-block: var(--s-2);
    white-space: normal;
    text-wrap: balance;
}

/* The password's label with "Forgot your password?" at the other end. The
   link follows the input in the page (Tab goes from the email to the
   password); the grid puts it on the label's line. */
.field-password {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--s-4);
}

.field-password > label {
    grid-column: 1;
    grid-row: 1;
}

.field-password > .field-link {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--t-xs);
    color: var(--ink-2);
}

.field-password > input {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* The way out ("New here? Create an account"): the card's last line, on
   a ruled line of its own, edge to edge. */
.auth-alt {
    margin: var(--s-5) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: var(--s-4) var(--card-pad);
    border-top: 1px solid var(--rule);
    font-size: var(--t-s);
    color: var(--ink-2);
}

.auth-alt a {
    color: var(--ink);
    font-weight: 600;
}

/* Beside the card: the recipe the visitor was saving or cooking, as a
   print mounted on its category's fill with the category's tab standing
   on the mount (tilted a hair on wide screens, as the recipe page's photo
   is), then its title, its one status mark and its figures. Its top lines
   up with the card's tabs. */
.auth-aside {
    min-width: 0;
}

.auth-recipe {
    display: grid;
    gap: var(--s-3);
    align-content: start;
}

.auth-recipe-print {
    position: relative;
    margin-top: 30px;
}

.auth-recipe-print > .cat-tab {
    position: absolute;
    bottom: 100%;
    inset-inline-start: var(--s-3);
}

.auth-recipe-photo {
    display: block;
}

.auth-recipe-photo img,
.auth-recipe-photo .no-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-3);
}

.auth-recipe-photo .no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    border-radius: var(--photo-corner);
    font-size: var(--t-xs);
    color: var(--ink-3);
}

.auth-recipe-title {
    margin-top: var(--s-2);
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.auth-recipe-title a,
.join-record-title a {
    text-decoration: none;
}

.auth-recipe-title a:hover,
.join-record-title a:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

.auth-recipe-foot {
    display: grid;
    gap: 6px;
    padding-top: var(--s-2);
    border-top: 1px solid var(--rule);
}

/* On the way to joining: the price and what members do, as on /join's
   card, standing level with the form's title. */
.auth-join {
    display: grid;
    gap: var(--s-5);
    align-content: start;
    padding-top: calc(26px + var(--s-4));
}

.auth-join .join-price {
    font-size: clamp(2.5rem, 1.75rem + 2vw, 3.5rem);
}

@media (min-width: 900px) {
    .auth-recipe-print {
        rotate: 1.2deg;
    }
}

/* 03  Messages ----------------------------------------------------------------
   The pages behind emailed links (forgot "sent", reset expired, verify
   confirmed and expired, the four unsubscribe states) and the error
   pages (404, 403, 413, 429, 503, and the 500 page rendered once at
   startup) share one card, a little wider than a form's: a glyph beside
   the title on the red line (an error's status code at the line's other
   end, in ink-3), one sentence, the one action on a ruled line, then at
   most one hint on the card's last line. A missing page also offers the
   recipe search. */
.notice-page {
    display: grid;
    grid-template-columns: minmax(0, 36rem);
    justify-content: center;
    padding-block: clamp(32px, 5vw, 64px) var(--section);
}

/* The title takes the line, wrapping beside its glyph, so the code stays
   at the line's end. */
.notice-title {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.notice-glyph {
    flex: none;
    width: 30px;
    height: 30px;
    color: var(--pen-2);
}

.notice-code {
    flex: none;
    font-family: var(--latin-serif);
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1;
    color: var(--ink-3);
    font-variant-numeric: lining-nums tabular-nums;
}

.notice-text {
    margin-top: var(--s-4);
    font-size: var(--t-l);
    line-height: 1.45;
    color: var(--ink-2);
    text-wrap: pretty;
}

.notice-card > .notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) calc(-1 * var(--card-pad)) 0;
    padding: var(--s-4) var(--card-pad) 0;
    border-top: 1px solid var(--rule);
}

.notice-card > .notice-actions:last-child {
    padding-bottom: 0;
}

.notice-hint {
    margin: var(--s-5) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: var(--s-4) var(--card-pad);
    border-top: 1px solid var(--rule);
    font-size: var(--t-s);
    color: var(--ink-2);
}

.notice-hint a {
    color: var(--ink);
    font-weight: 600;
}

.error-search {
    margin-top: var(--s-5);
}

/* 04  Membership (/join) -----------------------------------------------------
   The offer on the page's one wash (ground-dessert): the title on the
   red line and one short line, then the mock's Join card, the eight tabs
   on its top edge: the price large in Besley, the four things members
   do (join_offer: a glyph each, pen-2 like every figure's glyph), the
   button with the state's short line under it. The home page's Join
   section shows the same card. Three columns from 1240px, the price
   beside the perks (the action under both) from 720px, one column on
   phones. */
.join-hero {
    padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px);
}

.join-head h1 {
    padding-bottom: var(--s-3);
    border-bottom: var(--head-line) solid var(--card-red);
}

.join-lead {
    margin-top: var(--s-3);
    font-size: var(--t-l);
    color: var(--ink-2);
}

.join-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--s-6) clamp(32px, 4vw, 56px);
    margin-top: clamp(48px, 5vw, 64px);
    padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
}

/* Tablets: the price beside the perks, the action under both. Wide
   screens: the three side by side, once the card is at its full width
   (narrower, the price would be squeezed onto three lines in French,
   "19 $, / une / fois"). Either way the perks keep to one line each, and
   the price takes what is left, wrapping between words (balanced) when a
   language's price runs long ("19 $, einmalig"). */
@media (min-width: 720px) {
    .join-card:not(.join-member-card) {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .join-card:not(.join-member-card) > .join-act {
        grid-column: 1 / -1;
    }

    .join-card .join-perks li {
        white-space: nowrap;
    }
}

@media (min-width: 1240px) {
    .join-card:not(.join-member-card) {
        grid-template-columns: auto auto auto;
    }

    .join-card:not(.join-member-card) > .join-act {
        grid-column: auto;
    }
}

.join-price {
    font-family: var(--serif);
    font-size: clamp(3.25rem, 2.25rem + 3vw, 5.25rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--ink);
    text-wrap: balance;
    overflow-wrap: normal;
}

.join-perks {
    display: grid;
    gap: 14px;
    list-style: none;
}

.join-perks li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.join-perks .icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--pen-2);
}

/* The action and its line: the button, then the state's words in ink-2
   under it (or the words alone when there is no button). */
.join-act {
    display: grid;
    justify-items: start;
    gap: var(--s-3);
}

.join-act > .btn,
.join-act form .btn {
    min-height: 54px;
    padding-inline: 28px;
    font-size: 1.125rem;
}

.join-note {
    max-width: 22rem;
    font-size: var(--t-s);
    color: var(--ink-2);
}

/* "Memberships open soon": the state itself, in ink, where the button
   would be. */
.join-note-first {
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 600;
    color: var(--ink);
}

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

/* Members: the same card, holding their membership as one line in
   Besley, and the way to their account at its end. */
.join-member-card {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
    .join-member-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.join-member-line {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: lining-nums proportional-nums;
    text-wrap: pretty;
}

/* One recipe's test record, on paper under the wash (the section carries
   .cat-{slug}). At the start, the pictures: its photo mounted on its
   category's fill, the tab standing on the mount, tilted a hair as the
   recipe page's photo is; under it the first as-written cooks' photos as
   three prints, each with its two scores as figures and the day. Beside
   them the record, an index card striped in the category: the status,
   the title, the tally, the two score scales and the moment it passed on
   the highlighter. One column below 900px, the pictures first. */
.join-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7) clamp(40px, 5vw, 72px);
    align-items: start;
}

@media (min-width: 900px) {
    .join-proof-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .join-proof-print {
        rotate: -1.2deg;
    }

    /* Beside the pictures, the record's top lines up with the mount's
       (under the tab's height). */
    .join-record {
        margin-top: 30px;
    }
}

.join-proof-pics {
    display: grid;
    gap: var(--s-6);
    min-width: 0;
}

.join-proof-print {
    position: relative;
    margin-top: 30px;
}

.join-proof-print > .cat-tab {
    position: absolute;
    bottom: 100%;
    inset-inline-start: var(--s-4);
}

.join-proof-photo {
    display: block;
}

.join-proof-photo img,
.join-proof-photo .no-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-3);
}

/* The cooks' prints: white stock, a 1px edge, the photo square, its two
   scores (pen, Besley: the testers' figures) and the day in ink-3. */
.join-cooks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
    list-style: none;
}

.join-cook {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* the print's width, never its photo's (Arabic ran 7px off a 320px screen) */
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 8px 8px 10px;
    border: 1px solid var(--card-edge);
    border-radius: var(--photo-corner);
    background: var(--card);
}

.join-cook img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--paper-3);
    outline: 1px solid var(--photo-edge);
    outline-offset: -1px;
}

.join-cook .figures {
    margin-top: 4px;
    gap: 2px 12px;
}

.join-cook-day {
    font-size: var(--t-xs);
    color: var(--ink-3);
}

.join-record {
    display: grid;
    gap: var(--s-3);
}

.join-record-title {
    font-size: var(--t-xl);
}

.join-record-tally {
    padding-bottom: var(--s-2);
}

/* The score rows run edge to edge, like every card line; the last one
   closes the card unless the moment it passed follows. */
.join-record .score-rows {
    margin-inline: calc(-1 * var(--card-pad));
}

.join-record .score-row {
    padding-inline: var(--card-pad);
}

.join-record > .score-rows:last-child {
    margin-bottom: calc(-1 * var(--card-pad));
}

.join-record > .score-rows:last-child > .score-row:last-child {
    border-bottom: 0;
}

.join-proven {
    margin: calc(-1 * var(--s-3)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: var(--s-4) var(--card-pad);
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--ink);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Members' queue: the shared photo cards, under the section opener. */
.join-queue .recipe-index {
    margin-top: 0;
}

/* 05  Account settings ------------------------------------------------------
   One index card from the box: the title on its red line with who you
   are at the head's end, then a row per setting, edge to edge on ruled
   blue lines: its glyph (pen-2) and name (Besley) at the start, then its
   value or the control, at most one short line of help, and the change.
   Every control in the column ends on one vertical, --account-controls
   (the Save buttons and the notifications switch). */
.account-page {
    --account-controls: 34rem;
    padding-block: clamp(32px, 5vw, 64px) var(--section);
}

.account-sheet {
    max-width: 62rem;
    margin-inline: auto;
}

.account-meta {
    font-size: var(--t-s);
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.account-row {
    display: grid;
    grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr);
    gap: var(--s-2) var(--gap);
    margin-inline: calc(-1 * var(--card-pad));
    padding: var(--s-5) var(--card-pad);
    border-bottom: 1px solid var(--rule);
    align-items: start;
    scroll-margin-top: var(--s-5);
}

.account-sheet > .account-row:last-child,
.account-sheet > section:last-child .account-row:last-child {
    margin-bottom: calc(-1 * var(--card-pad));
    border-bottom: 0;
}

/* The name column is wide enough for the longest one whole
   ("Benachrichtigungen" beside its glyph); a longer one breaks with a
   hyphen where the language allows, at any letter only as a last
   resort. */
.account-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: var(--t-l);
    hyphens: auto;
    overflow-wrap: anywhere;
}

.account-label > .icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--pen-2);
}

.account-label label {
    cursor: pointer;
}

/* One column that may shrink below its content's min-content (an input's
   intrinsic width in Arabic is wider than a 320px phone's column). */
.account-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-content: start;
    gap: var(--s-2);
    min-width: 0;
    max-width: 40rem;
}

.account-body > * {
    max-width: 100%;
}

.account-value {
    font-size: var(--t-m);
    font-weight: 600;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.account-value-quiet {
    font-weight: 400;
    color: var(--ink-2);
}

/* A state: a glyph and words. Confirmed is plain ink-2; unconfirmed is
   the one warning on the card, drawn like the site's verify banner (which
   this page leaves out): an ochre bar, the alert glyph and bold words. */
.account-state {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--t-s);
    color: var(--ink-2);
}

.account-state .icon {
    margin-top: 0.15em;
    width: 16px;
    height: 16px;
}

.account-state.is-warning {
    padding-inline-start: var(--s-3);
    border-inline-start: 2px solid var(--ochre);
    color: var(--ochre);
    font-weight: 600;
}

.account-record {
    font-size: var(--t-s);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums lining-nums;
    overflow-wrap: anywhere;
}

.account-record code {
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.account-body > .hint {
    max-width: 56ch;
}

.account-body > .alert {
    margin: 0;
}

/* The control is the value: an input or select with its save button. */
.account-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    width: 100%;
    max-width: var(--account-controls);
}

.account-inline > .input,
.account-inline > .select {
    flex: 1 1 14rem;
    width: auto;
    min-width: 0;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
}

/* A long label ("Cerrar sesión en los demás dispositivos") may fold onto
   a second line inside its button rather than push past a 320px screen. */
.account-actions .btn {
    max-width: 100%;
    white-space: normal;
    padding-block: 10px;
}

/* The price beside a reader's Join button: "$19, once", in Besley. */
.account-price {
    font-family: var(--serif);
    font-size: var(--t-l);
    font-weight: 700;
    font-variant-numeric: lining-nums proportional-nums;
}

/* A section's result: ink, a tick, one sentence. */
.account-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--ink);
}

.account-notice .icon {
    margin-top: 0.2em;
    width: 16px;
    height: 16px;
}

/* Notifications: the switch is the value. Its track ends where the Save
   buttons do (the controls' measure); the sentence wraps before it. */
.account-notify {
    display: grid;
    gap: var(--s-1);
    width: 100%;
    max-width: var(--account-controls);
}

.account-switch {
    gap: var(--s-5);
    color: var(--ink);
}

/* Its state ("On", "Off") stands under the switch it describes, not
   under the sentence. */
.account-notify > .account-state {
    justify-self: end;
    margin-top: calc(-1 * var(--s-1));
    text-align: end;
}

/* Change password: a disclosure; its summary reads "Cancel" while open,
   and the form opens under it on a ruled line, a field per line. */
.account-change {
    width: 100%;
}

.account-change > summary {
    list-style: none;
    width: fit-content;
}

.account-change > summary::-webkit-details-marker {
    display: none;
}

.account-change:not([open]) .when-open,
.account-change[open] .when-closed {
    display: none;
}

.account-form {
    display: grid;
    gap: var(--s-4);
    max-width: 28rem;
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
}

.account-form > .error-summary {
    margin-bottom: 0;
}

/* 06  Right to left, Japanese ------------------------------------------------
   A recipe's title keeps its own language's direction (an English title
   on an Arabic page) but lines up with the page around it (text-align:
   match-parent, which Chrome lacks, spelled out). So do the reported
   words on /flags/new (dir="auto": a description, a comment, a report's
   notes), so they line up under their head. The tilted prints lean the
   other way in a right-to-left page. */
html[dir="rtl"] :is(.auth-recipe-title, .join-record-title, .flag-item-title)[dir="ltr"],
html[dir="rtl"] .flag-item-text:dir(ltr) {
    text-align: right;
}

html[dir="ltr"] :is(.auth-recipe-title, .join-record-title, .flag-item-title)[dir="rtl"],
html[dir="ltr"] .flag-item-text:dir(rtl) {
    text-align: left;
}

@media (min-width: 900px) {
    [dir="rtl"] .auth-recipe-print {
        rotate: -1.2deg;
    }

    [dir="rtl"] .join-proof-print {
        rotate: 1.2deg;
    }
}

/* Arabic and Japanese set the price at their own serif's weight: no
   tightened tracking (letter-spacing breaks the joins between Arabic
   letters). */
:is(:lang(ar), :lang(ja)) .join-price {
    letter-spacing: normal;
    line-height: 1.15;
}

/* Seven full-width characters ("$19、一回払い") run as wide as a dozen
   latin ones: the Japanese price is set a size down, and breaks between
   phrases where Chrome can. */
:lang(ja) .join-price {
    font-size: clamp(2.5rem, 1.75rem + 2.4vw, 4rem);
    word-break: auto-phrase;
}

:lang(ja) .auth-join .join-price {
    font-size: 2.5rem;
}

/* 07  Phones and fingers ---------------------------------------------------- */
/* Links that stand on their own ("Forgot your password?") are 44px
   targets under a finger. The links inside a sentence grow their target
   with padding, which leaves the line as it is. */
@media (pointer: coarse) {
    .field-password > .field-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .auth-alt a,
    .notice-hint a,
    .join-note a {
        padding-block: 12px;
    }
}

/* Below 900px: the recipe beside the form follows it as a compact line
   (the mounted print small at its start, the title, the status and the
   figures beside it), and the price and perks follow the form. */
@media (max-width: 899px) {
    .auth-recipe {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: var(--s-4);
    }

    .auth-recipe-print {
        grid-row: 1 / 3;
        margin-top: 0;
    }

    .auth-recipe-print > .cat-tab {
        display: none;
    }

    .auth-recipe-photo {
        padding: 6px;
    }

    .auth-recipe-title {
        align-self: end;
        margin-top: 0;
        font-size: var(--t-m);
    }

    .auth-recipe-foot {
        align-self: start;
        padding-top: 6px;
    }

    .auth-join {
        padding-top: 0;
    }
}

/* Narrow screens: a message's buttons and /join's action take the card's
   width, the quiet one ("Cancel") too, its words centred under the
   button above rather than set in by its padding. */
@media (max-width: 720px) {
    .notice-actions > .btn,
    .join-act,
    .join-act > .btn,
    .join-act form,
    .join-act form .btn {
        width: 100%;
    }

    .account-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-3);
        padding-block: var(--s-4) var(--s-5);
    }

    .account-label {
        min-height: 0;
    }

    .account-inline > .btn {
        flex: 1 1 auto;
    }

    .join-cooks {
        gap: var(--s-2);
    }
}

/* Japanese message titles on phones. Headings break between phrases
   (word-break: auto-phrase, styles.css section 17), so a phrase must fit
   the column whole: at 24px, ten characters beside the glyph fit a 320px
   phone's card. */
@media (max-width: 480px) {
    .notice-code {
        display: none;
    }

    :lang(ja) .notice-card > .index-card-head h1 {
        font-size: 1.375rem;
    }
}