/* one palette, two themes: light-dark() picks by color-scheme, light
     unless the toggle chose dark (data-theme) */
  :root { color-scheme: light;
    --bg:      light-dark(#fafbfd, #11131a);
    --ink:     light-dark(#1a1a2e, #e6e8ef);
    --muted:   light-dark(#5b6070, #9aa1b2);
    --accent:  light-dark(#2148c9, #3b63e0);
    --link:    light-dark(#2148c9, #8fa8ff);
    /* the second half of the name in the logo (deploy/brand_logo.py) */
    --brand:   light-dark(#2148c9, #6f8cf5);
    --plate:   light-dark(#eef1f8, #1c2030);
    --surface: light-dark(#ffffff, #161a26);
    --border:  light-dark(#c8cdda, #343b52);
    --line:    light-dark(#e3e6ee, #262b3b);
    --bad:     light-dark(#b3261e, #ff8a80);
    --ok:      light-dark(#0a6f45, #5fd39b);
    --dev-bg:  light-dark(#fff8e1, #2e2610);
    --mine:    light-dark(#e6f4ec, #13261c);
    --site:    light-dark(#f0ebfa, #201a31);
    --shadow:  light-dark(#0002, #0008); }
  :root[data-theme=light] { color-scheme: light; }
  :root[data-theme=dark] { color-scheme: dark; }
  @supports not (color: light-dark(#000, #fff)) {
    :root { --bg: #fafbfd; --ink: #1a1a2e; --muted: #5b6070; --accent: #2148c9; --link: #2148c9; --brand: #2148c9; --plate: #eef1f8; --surface: #ffffff; --border: #c8cdda; --line: #e3e6ee; --bad: #b3261e; --ok: #0a6f45; --dev-bg: #fff8e1; --mine: #e6f4ec; --site: #f0ebfa; --shadow: #0002; --ink: #1b3aa6; --ink: #0a5f3b; }
    :root[data-theme=dark] { --bg: #11131a; --ink: #e6e8ef; --muted: #9aa1b2; --accent: #3b63e0; --link: #8fa8ff; --brand: #6f8cf5; --plate: #1c2030; --surface: #161a26; --border: #343b52; --line: #262b3b; --bad: #ff8a80; --ok: #5fd39b; --dev-bg: #2e2610; --mine: #13261c; --site: #201a31; --shadow: #0008; --ink: #c9d6ff; --ink: #9be6c2; }
  }
  [hidden] { display: none !important; }
  * { box-sizing: border-box; }
  body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--ink); background: var(--bg); }
  /* the footer at the bottom of the window on a short page, not halfway up */
  body { min-height: 100vh; display: flex; flex-direction: column; }
  /* in that column, each part as wide as the page, not as its content: a
     flex item centred by its margins shrinks to its content (the header
     drawn in the middle, 2026-10-24) */
  body > header, body > main, body > footer, body > .invite-banner { width: 100%; box-sizing: border-box; }
  body > header, body > main, body > footer { max-width: calc(var(--page) + 2 * clamp(1rem, 3vw, 2.5rem)); }
  body > main { flex: 1 0 auto; }
  a { color: var(--link); }
  /* the page uses a wide screen (the channel grid, the slides, the tables);
     running text keeps a readable line, about 100 characters (75 cut short
     lines the screen had room for, 2026-11-02: « pourquoi ces retours à la
     ligne ? »); a line that lists (.meta: channels, dates) takes the width */
  :root { --page: 1440px; --measure: 100ch; }
  /* every page in the same place, long or short: the scrollbar's room is
     kept even when there is nothing to scroll */
  html { scrollbar-gutter: stable; }
  main { max-width: var(--page); margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; }
  .lead, main > p, .plate > p, .plate > ol, .hint { max-width: var(--measure); }
  .lead.meta, p.meta { max-width: none; }
  /* a long word cut rather than a page wider than a phone: German makes
     some ("Geschäftsbedingungen"), wider than 360 px in a big font */
  /* a word too long for the line breaks, but no hyphen in a word that fits
     (« au-jourd'hui » in a title on a phone, 2026-10-24) */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
  h1 { font-size: 1.8rem; margin: 0 0 .25rem; }
  .lead { color: var(--muted); margin-top: 0; }
  .plate { background: var(--plate); border-radius: 12px; padding: 1rem 1.25rem; margin: 1rem 0; }
  label.title, span.title { display: block; font-weight: 600; margin-bottom: .5rem; }
  /* a field's title under the field before it: the room a paragraph would leave */
  input + label.title, input + p[hidden] + label.title,
  .pw + label.title, .pw-count + label.title { margin-top: 1rem; }   /* .pw: a password field and its eye */
  input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], textarea { width: 100%; padding: .6rem .75rem; font: inherit; color: var(--ink);
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
  /* a message: room for a few paragraphs, taller if the writer wants */
  textarea { min-height: 12rem; resize: vertical; line-height: 1.5; }
  textarea.short { min-height: 4.5rem; }   /* a few names, not a message */
  input[type=checkbox] { accent-color: var(--accent); }
  /* Proportions (2026-10-23): a field is as wide as what it holds, a form
     no wider than its fields. A number takes a few digits; a form of one
     or two short fields (an address, a code, a search) stands in .narrow,
     its field and its button on one line in .row. */
  input[type=number] { width: 8rem; }
  form.narrow, .plate.narrow { max-width: 34rem; }
  table.narrow { width: auto; }          /* a table of a few short columns: as wide as they are */
  form.contact-form { max-width: 44rem; }   /* a message: a reading width, not the page's */
  .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
  .row input { flex: 1 1 12rem; width: auto; min-width: 0; }
  .row button { flex: none; }
  .row input.code { flex: 0 1 14rem; }
  /* the owner's pages (main.owner: those with admin tabs): fields and
     buttons as tall as the small buttons of their lists, not a customer's
     (« les champs mots sont trop gros… trouve aussi les autres endroits »,
     2026-10-29) */
  main.owner :is(input[type=text], input[type=email], input[type=search], input[type=number],
                 input[type=password], select, textarea) { padding: .35rem .7rem; font-size: .92rem; line-height: 1.3; }
  main.owner :is(button, .button):not(.link):not(.small):not(.sort) { padding: .35rem .9rem; font-size: .92rem; }
  main.owner .fields :is(input[type=text], input[type=search], select) { height: auto; }
  input.code { width: 12rem; max-width: 100%; }
  /* a password field: its eye inside it, at the end */
  .pw { position: relative; display: block; }
  .pw input { padding-inline-end: 2.8rem; }
  .pw-eye { position: absolute; inset-inline-end: .35rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: .35rem; color: var(--muted); line-height: 0; }
  .pw-eye:hover { color: var(--ink); filter: none; }
  .pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
  .pw-count { display: block; margin-top: .3rem; font-variant-numeric: tabular-nums; }
  .pw-count.enough { color: var(--ok); }   /* a code: all its digits, or a backup one */
  /* fields side by side, each its label over it: the wide one takes the room */
  .field-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .field-row .field { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
  .field-row .field.grow { flex: 1 1 14rem; }     /* a code: a dozen characters */
  .field-row .field.check { justify-content: flex-end; padding-block-end: .6rem; }   /* a box, level with the fields */
  /* the channels: a table, one row each, its head sticky and its columns
     sortable; the figures right-aligned, digits all as wide */
  /* as tall as the screen allows: a few rows of two-line names (their
     names on YouTube) scrolled under 380 px (2026-11-02) */
  .channels { max-height: max(380px, 65vh); overflow-y: auto; margin-top: .75rem;
    border: 1px solid var(--line); border-radius: 10px; }
  /* the name column as wide as the longest name shown (--name-ch, set by
     the page: app.name_ch), not the rest of the width: the figures stand next to the
     names, and what is left goes to the end of the row */
  /* its columns, those the page shows (_channel_picker.html: --ch-cols,
     --ch-areas), a variant of the CSS no more for each mix of them */
  .channels .ch-head, .channels .ch-row { display: grid; gap: .25rem .75rem; align-items: center;
    grid-template-columns: var(--ch-cols); grid-template-areas: var(--ch-areas); padding: .3rem .7rem; }
  .channels .ch-head { position: sticky; top: 0; z-index: 1; background: var(--surface);
    border-bottom: 1px solid var(--line); }
  .channels label input { cursor: pointer; }   /* the box alone ticks (2026-11-02) */
  .channels .ch-row:nth-child(odd) { background: var(--plate); }
  .channels .ch-row.off > :not(.ch-acts) { opacity: .55; }   /* greyed, its buttons not: they look disabled (2026-10-30) */
  .channels .ch-theme { grid-area: theme; font-size: .85rem; color: var(--muted); }
  .channels .ch-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
  /* the Channels tab's buttons in slots (_channel_actions.html), the same
     columns in every row: each slot as wide as its widest (--w-*, measured
     by the table's script); on one line, or on two when the row has no room
     (.acts-two): the rare ones and « en priorité » above, the rest below */
  .channels .ch-acts:has(> .slot) { display: grid; justify-content: end; align-items: center; gap: .3rem;
    grid-template-columns: var(--w-x, auto) var(--w-a, auto) var(--w-b, auto) var(--w-cd, auto);
    grid-template-areas: "x a b cd"; }
  .channels.acts-two .ch-acts:has(> .slot) { grid-template-columns: var(--w-xb, auto) var(--w-acd, auto);
    grid-template-areas: "x a" "b cd"; }
  .channels .ch-acts > .slot { display: flex; gap: .3rem; justify-content: flex-end; }
  .channels .ch-acts > .slot-x { grid-area: x; } .channels .ch-acts > .slot-a { grid-area: a; }
  .channels .ch-acts > .slot-b { grid-area: b; } .channels .ch-acts > .slot-cd { grid-area: cd; }
  /* a phone: no room for columns, the buttons follow each other and wrap */
  @media (max-width: 560px) {
    .channels .ch-acts:has(> .slot) { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    .channels .ch-acts > .slot { display: contents; }
  }
  /* a list's actions under its row when the row has no room for them (a
     1280 px screen with the PC's fonts cut them, 2026-10-29): measured by
     the list's script (_channel_picker.html, .acts-under) */
  @media (min-width: 561px) {
    .channels.listing.acts-under .ch-head, .channels.listing.acts-under .ch-row {
      grid-template-columns: var(--ch-cols-narrow); grid-template-areas: var(--ch-areas-narrow); }
    .channels.listing.acts-under .ch-head .ch-acts { display: none; }
  }
  .channels.listing { max-height: none; }      /* a list to read whole, the page scrolls */
  /* its rows laid out only near the screen: 2 900 of them at once made the
     tab slow to show (2026-10-29) */
  .channels.listing .ch-row { content-visibility: auto; contain-intrinsic-size: auto 2.6rem; }
  .channels.listing .ch-head, .channels.listing .ch-row { column-gap: .55rem; }   /* its actions too, on the same width */
  .channels .ch-name small { white-space: nowrap; }   /* « hors exemples » whole */
  /* a sign-in mail the mailbox refused (_live_mail-check.html): the junk
     folder's help and « send again » would only mislead (2026-10-30) */
  body:has(#mail-check .refused) .mail-help { display: none; }
  .channels .ch-name small.ch-yt { white-space: normal; font-weight: 400; }   /* the name on YouTube, under the @name */
  .channels .ch-acts form { margin: 0; }
  .channels .ch-acts button { white-space: nowrap; }   /* a button whole, on a line of its own if need be */
  .channels input { grid-area: box; }
  /* its page beside the name: quiet, the name the row's click */
  .channels .ch-open { color: var(--muted); margin-left: .3rem; vertical-align: -.1em; }
  .channels .ch-open:hover, .channels .ch-open:focus-visible { color: var(--accent); }
  /* the request page: its field and its button on one line, the channels found under */
  .ask-row { flex-wrap: nowrap; }
  .ask-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
  .ask-row button { flex: none; }
  @media (max-width: 30rem) { .ask-row { flex-wrap: wrap; } .ask-row button { flex: 1 1 100%; } }
  .on-site ul { margin: .3rem 0 0; padding-inline-start: 1.2rem; }
  .on-site p { margin: 0; }
  .channels .ch-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
  .channels .ch-videos { grid-area: videos; }
  .channels .ch-subs { grid-area: subs; }
  .channels .ch-oldest { grid-area: oldest; }
  .channels .ch-newest { grid-area: newest; }
  .channels .ch-checked { grid-area: checked; }
  .channels .ch-lang { grid-area: lang; }
  .channels .ch-subs, .channels .ch-videos, .channels .ch-oldest, .channels .ch-newest, .channels .ch-checked { text-align: end;
    font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); font-size: .85rem; }
  /* THE SORTABLE LIST'S LOOK, one for the home's channels and every
     table.data (2026-10-23): small grey heads, the sorted one dark with
     its arrow, the head row held at the top, a row in two tinted, the
     figures on the right in even digits */
  .sort { background: none; color: var(--muted); padding: .2rem 0; border-radius: 0;
    font: inherit; font-size: .8rem; font-weight: 600; text-align: inherit; cursor: pointer; }
  .sort[aria-sort] { color: var(--ink); }
  .sort[aria-sort=ascending]::after { content: " ↑"; }
  .sort[aria-sort=descending]::after { content: " ↓"; }
  /* a date's head on two lines (« Dernière / vidéo »): its column as wide
     as the date, the room left to the names (2026-11-02) */
  .channels .sort { text-align: end; white-space: normal; }
  .channels .sort.ch-name, .channels .sort.ch-lang, .channels .sort.ch-theme { text-align: start; }
  table.data th { font-size: .8rem; font-weight: 600; color: var(--muted); position: sticky; top: 0;
    background: var(--surface); z-index: 1; }
  table.data tr:nth-child(odd) td { background: var(--plate); }
  table.data .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* a phone: the name and its subscribers, then the four other figures
     on a second line (« On ne peut pas garder vérifiée aussi ? »,
     2026-11-01): the video count narrow, the three dates sharing the rest,
     the subscribers above the last one; the figures small, a date whole
     in its track at 360 px */
  @media (max-width: 560px) {
    .channels .ch-head, .channels .ch-row { column-gap: .3rem; padding-inline: .5rem;
      grid-template-columns: 1.4rem 2.8rem repeat(3, minmax(0, 1fr));   /* minmax: rows aligned whatever they hold */
      grid-template-areas: "box name name name subs" "box videos checked newest oldest"; }
    .channels .ch-subs, .channels .ch-videos, .channels .ch-oldest, .channels .ch-newest, .channels .ch-checked {
      font-size: .72rem; }
    .channels .ch-videos, .channels .ch-oldest, .channels .ch-newest, .channels .ch-checked { text-align: start; }
    .channels .sort { white-space: normal; font-size: .72rem; padding-inline: 0; }   /* « Dernière vidéo » on two lines, not into its neighbour */
    .channels.listing .ch-head, .channels.listing .ch-row { column-gap: .55rem;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem;
      grid-template-areas: "name name videos" "checked newest oldest" "acts acts acts"; }
    .channels.listing .ch-subs { display: none; }
    .channels.listing .ch-videos { text-align: end; }
    .channels .ch-lang, .channels .ch-theme { display: none; }
    .channels .ch-head .ch-acts { display: none; }
  }
  @media (max-width: 380px) {      /* 360 px: a date a few pixels wider than its track */
    .channels .ch-head, .channels .ch-row { column-gap: .15rem; padding-inline: .3rem; }
    .channels .sort, .channels .ch-subs, .channels .ch-videos, .channels .ch-oldest,
    .channels .ch-newest, .channels .ch-checked { font-size: .66rem; }
  }
  .picked { margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
  .picked .chips { display: contents; }
  /* "Voir seulement la sélection": a switch beside the filter, which it
     is too; under the table among the chips it read as one of them */
  .filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .ch-count { margin: .5rem 0 .3rem; }   /* the number of channels, above the table */
  .filter-row input[type=search] { flex: 1 1 16rem; width: auto; }
  .filter-row select { flex: 0 0 auto; width: auto; }
  #only-picked { font-size: .85rem; font-weight: 600; color: var(--ink); white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: .45rem .9rem; cursor: pointer; }
  #only-picked:hover, #only-picked:focus-visible { border-color: var(--accent); }
  #only-picked[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .chip { border: 1px solid var(--accent); border-radius: 999px; background: var(--plate);
          color: var(--ink); padding: .1rem .6rem; font: inherit; font-size: .9em; cursor: pointer; }
  .chip:hover, .chip:focus-visible { background: var(--accent); color: #fff; }
  /* dragged to another place: held by the finger, not scrolling the page */
  /* a chip one drags: on an iPhone a long press selected its name and
     offered « Copier » instead of moving it (2026-10-27): the prefixed
     rules too, and no callout */
  .picked .chips .chip { touch-action: none; cursor: grab; user-select: none;
    -webkit-user-select: none; -webkit-touch-callout: none; }
  /* dragged: above the page under the pointer, the slot where it will land */
  .chip.dragging { position: fixed; z-index: 50; margin: 0; pointer-events: none; cursor: grabbing;
    box-shadow: 0 6px 18px var(--shadow); transform: scale(1.04); }
  /* the chips one drags: easy to read, a grip to say they move, blue for
     the channels and green for the words (2026-10-22) */
  .chip-channel, .chip-word { display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem .3rem .5rem; font-size: .95rem; font-weight: 600; border-width: 1px; }
  .chip-channel::before, .chip-word::before { content: "⠿"; opacity: .5; font-weight: 400; }
  .chip-channel { --ink: light-dark(#1b3aa6, #c9d6ff); background: light-dark(#e3eaff, #1e2a52);
    color: var(--ink); border-color: light-dark(#9db2f5, #3b5bd1); }
  .chip-word { --ink: light-dark(#0a5f3b, #9be6c2); background: light-dark(#dff5ec, #173328);
    color: var(--ink); border-color: light-dark(#8fd3b4, #2f8a63); }
  .chip-channel:hover, .chip-channel:focus-visible, .chip-word:hover, .chip-word:focus-visible {
    background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .chip .x { opacity: .6; font-weight: 400; background: none; border: 0; padding: 0 .15rem; margin: 0;
    color: inherit; font: inherit; line-height: 1; cursor: pointer; }
  .chip .x:hover, .chip .x:focus-visible { opacity: 1; }
  .chip.opens:hover { text-decoration: underline; }   /* its name opens its page */
  /* the same chips, shown only (an example's words and channels): no grip,
     nothing happens under the pointer */
  .chip.shown { cursor: default; padding-inline-start: .7rem; }
  .chip.shown::before { content: none; }
  .chip-word.shown:hover { background: light-dark(#dff5ec, #173328); color: var(--ink); border-color: light-dark(#8fd3b4, #2f8a63); }
  .chip-channel.shown:hover { background: light-dark(#e3eaff, #1e2a52); color: var(--ink); border-color: light-dark(#9db2f5, #3b5bd1); }
  /* a channel's chip that leads to its page (an example's, its neighbours) */
  a.chip.shown { cursor: pointer; text-decoration: none; }
  a.chip.shown:hover, a.chip.shown:focus-visible { text-decoration: underline; }
  .chip-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 .9rem; }
  /* the width of a paragraph is for reading: chips use the whole line ("informé"
     alone on the next one, 2026-10-28) */
  .plate > .chip-row, main > .chip-row { max-width: none; }
  .chip-row > .label { color: var(--muted); margin-inline-end: .2rem; }
  .chip-slot { display: inline-block; box-sizing: border-box; border: 2px dashed var(--accent);
    border-radius: 999px; background: none; }
  /* on a line of its own, under the chips, however short it is */
  #drag-hint, #words-drag-hint { flex-basis: 100%; max-width: none; margin: 0; font-size: .8rem; }
  /* one button, whatever carries it: <button>, a link (.button), a menu's
     summary. Filled for the step that goes on, outlined (.secondary) for the
     others, .small in lists; an icon (_ui.html) sits before the text */
  button, .button { font: inherit; font-weight: 600; line-height: 1.25; color: #fff;
    background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
    padding: .65rem 1.3rem; cursor: pointer; text-decoration: none; }
  .button { display: inline-flex; align-items: center; gap: .45rem; }
  button:not([class]):hover, .button:hover { filter: brightness(1.1); }
  /* the buttons that are not one to the eye: a link, a column's head, a
     switch, the box's controls */
  .link, .sort, .switch, #close, #box .nav { border: 0; }
  button.secondary, .button.secondary { background: none; color: var(--link); border-color: var(--border); }
  button.secondary:hover, .button.secondary:hover { filter: none; border-color: currentColor; }
  button.small, .button.small { padding: .35rem .8rem; font-size: .9rem; }
  .button svg { flex: none; }
  /* a button that cannot be pressed looks so: it looked like any other,
     « Renvoyer le lien » waiting its minute included (2026-10-28) */
  button:disabled, button:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; }
  /* how long before it can be pressed again, said where the eye is: the
     sentence in plain text, its seconds bold, and on the button too */
  .wait-note { color: var(--ink); }
  .wait-note [data-countdown], button .wait { font-weight: 700; font-variant-numeric: tabular-nums; }
  .actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
  .preview { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 1.5rem; align-items: start; }
  .preview img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line);
    box-shadow: 0 18px 40px -22px var(--shadow); }
  @media (max-width: 700px) { .preview { grid-template-columns: 1fr; } }
  footer.site { max-width: var(--page); margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 2.5rem; font-size: .85rem;
    color: var(--muted); border-top: 1px solid var(--line); }
  .consent { display: grid; gap: .5rem; }
  .consent label { display: flex; gap: .5rem; align-items: baseline; font-size: .92rem; }
  .legal { max-width: 760px; }
  .legal h2 { font-size: 1.15rem; margin-top: 1.75rem; }
  mark.todo { background: #ffe08a; color: #3b2c00; padding: 0 .3rem; border-radius: 4px; }
  .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem 1rem;
    margin-bottom: 1rem; }
  /* the fields of a row on one line, whatever their labels' length: each
     label as tall as the row's tallest, its text just above its field */
  .fields { align-items: stretch; }
  .fields label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600;
    grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); align-items: end; min-width: 0; }
  .fields input, .fields select { font-weight: 400; font-size: 1rem; }
  /* a text field and a list side by side: the same height */
  .fields input[type=text], .fields input[type=search], .fields select { box-sizing: border-box; height: 2.75rem; }
  ::placeholder { color: var(--muted); opacity: .7; font-weight: 400; }
  /* never wider than its place: a list is as wide as its longest choice,
     which in Georgian and Armenian went past a phone's edge (2026-10-25) */
  select { font: inherit; padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--ink); max-width: 100%; min-width: 0; }
  /* the lists of « Mes mots »: dense, a line per entry, its controls level with it */
  table.sets { font-size: .92rem; }
  table.sets td { vertical-align: middle; overflow-wrap: anywhere; padding: .3rem .5rem; }
  @media (min-width: 700px) { table.sets td:first-child { white-space: nowrap; } }
  .row-actions { white-space: nowrap; text-align: end; }
  .row-actions form { display: inline; margin-inline-start: .5rem; }
  table.sets tr.off td:not(.row-actions) { opacity: .45; text-decoration: line-through; }
  /* « Mes mots », the passages a word is said in: the passage the widest;
     on a phone a row is a block, its cells one under the other */
  table.passages { width: 100%; font-size: .92rem; }
  table.passages td { vertical-align: top; padding: .45rem .5rem; overflow-wrap: anywhere; }
  table.passages td.passage { min-width: 16rem; }
  table.passages mark { background: #ffe08a; color: #3b2c00; padding: 0 .2rem; border-radius: 3px; font-weight: 600; }
  table.passages tr.left-out td.passage { color: var(--muted); }
  table.passages .counted { color: var(--ok); }
  table.passages .not-counted { color: var(--bad); }
  @media (max-width: 600px) {
    table.passages, table.passages tbody, table.passages tr, table.passages td { display: block; }
    table.passages tr:first-child { display: none; }
    table.passages td.passage { min-width: 0; }
    table.passages td { padding: .2rem .5rem; }
    table.passages tr { padding: .4rem 0; }
  }
  details.detail summary { font-size: .85em; color: var(--muted, #777); cursor: pointer; }
  details.detail code { display: block; white-space: pre-wrap; word-break: break-all; font-size: .8em; }
  .danger { color: var(--bad) !important; }
  .icon-btn { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0;
              background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 8px;
              vertical-align: middle; }
  .icon-btn:hover, .icon-btn:focus-visible { color: var(--link); border-color: currentColor; }
  .icon-btn.danger { color: var(--muted) !important; }
  .icon-btn.danger:hover, .icon-btn.danger:focus-visible { color: var(--bad) !important; }
  .switch { position: relative; width: 2rem; height: 1.15rem; padding: 0; border-radius: 1rem;
            background: var(--border); vertical-align: middle; }
  .switch::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .85rem; height: .85rem;
                   border-radius: 50%; background: #fff; transition: left .15s; }
  .switch[aria-checked=true] { background: var(--ok); }
  .switch[aria-checked=true]::after { left: 1rem; }
  /* « Mes mots »: the customer's own on one colour, the site's on another,
     the forms on the plain plate */
  .plate.mine { background: var(--mine); }
  .plate.site { background: var(--site); }
  details.plate summary { cursor: pointer; font-weight: 600; }
  /* the admin's curve of Google's indexed pages (admin_pages.html): one series, thin line */
  .index-chart { max-width: 40rem; margin: 0 0 1.5rem; }
  .index-chart svg { width: 100%; height: auto; overflow: visible; }
  .index-chart .series { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
  .index-chart .dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
  .index-chart .hit { fill: transparent; }
  .index-chart g:hover .dot { r: 6; }
  .index-chart .axis { stroke: var(--border); }
  .index-chart .grid { stroke: var(--line); stroke-dasharray: 3 3; }
  .index-chart figcaption { display: flex; justify-content: space-between; }
  /* the admin's carousels (admin_carousels.html): a card each, its cover tapped open */
  /* the posts side by side as the screen allows (asked 2026-11-03: the
     right half was empty); one language shown by #carousel-langs */
  .carousel-grid { display: grid; gap: 1rem; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
  .carousel-grid > .carousel { margin: 0; }
  #carousel-langs { margin: .6rem 0; }
  .carousel h2 { margin: .2rem 0 .4rem; }
  .carousel-cover { display: block; width: 100%; max-width: 270px; height: auto; border-radius: 8px; margin: .6rem 0; }
  .carousel-actions { gap: .6rem; }
  .carousel-actions form { margin: 0; }
  /* the frequent questions (faq.html): a reading width, one per line */
  .faq { max-width: 44rem; }
  .faq details { border-top: 1px solid var(--line); padding: .7rem 0; }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; font-weight: 600; }
  .faq details p { margin: .5rem 0 0; }
  details.plate input[type=search] { margin: .6rem 0; padding: .45rem .7rem; font-size: .92rem; }
  /* one line a word, the frame's whole width: the hints' 75ch cut a
     word's line of variants in two on a wide screen (2026-10-22) */
  #counted { margin-top: .5rem; max-width: none; }
  #counted p { margin: .2rem 0; }
  .lang-menu { position: relative; }
  .lang-menu summary { list-style: none; cursor: pointer; font-weight: 600; font-size: .8rem;
    border: 1px solid var(--border); border-radius: 999px; height: 2.1rem; min-width: 2.1rem;
    box-sizing: border-box; display: inline-grid; place-items: center; padding: 0 .6rem; }
  .lang-menu summary:hover, .theme-toggle:hover { border-color: var(--muted); }
  .lang-menu summary::-webkit-details-marker { display: none; }
  /* the languages in columns, and a scroll on a short screen */
  .lang-menu ul { position: absolute; inset-inline-end: 0; top: 2.1rem; z-index: 5; list-style: none; margin: 0;
    padding: .35rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px -12px var(--shadow); min-width: 9rem;
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows2), auto);
    /* every column as wide as the widest (one width each, they looked
       uneven, 2026-10-28); short of room, they wrap, never out of the box */
    grid-auto-columns: minmax(0, 1fr);
    width: max-content; max-width: 92vw; max-height: 75vh; overflow-y: auto; }
  /* a wide table scrolls sideways on a phone, its cells whole, never
     broken letter by letter (the Mails tab, 2026-10-23) */
  .table-scroll { overflow-x: auto; }
  .proposals { border: 0; padding: 0; margin: 0; display: grid; gap: .8rem; max-width: 46rem; min-width: 0; }
  .proposal { display: block; min-width: 0; }
  .figures { margin-top: .4rem; font-size: .9em; width: auto; }
  .figures th.num { text-align: right; }
  .figures td.word { font-weight: 600; white-space: nowrap; }
  .figures td.top { color: var(--ok); font-weight: 700; }
  .figures td.low { color: var(--bad); }
  .thumbs { white-space: nowrap; }
  [data-more] { min-height: 1px; }   /* the mark a growing list asks its next rows at */
  .thumbs img { margin-right: .25rem; vertical-align: top; }
  .table-scroll td, .table-scroll th { white-space: nowrap; }
  /* the heads on two or three lines: a column as wide as its figures, not
     as « Visiteurs ces 30 jours » (the Languages tab scrolled sideways for
     columns of one digit, 2026-10-28) */
  .table-scroll tr:first-child > th { white-space: normal; min-width: 4.5rem; vertical-align: bottom; }
  /* scrolled sideways, the row still says what it is: its first cell (the
     channel, the language) held on the left, as the heads at the top (the
     Downloads tab, rows of figures with no name, 2026-10-28) */
  .table-scroll tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 1px 0 0 var(--line); }
  .table-scroll tr:nth-child(odd):not(:first-child) > :first-child { background: var(--plate); }
  .table-scroll tr:first-child > :first-child { z-index: 2; }
  /* a bar beside its figures, not wider than them */
  .table-scroll progress { width: 4.5rem; vertical-align: middle; }
  /* a bar over its figures, the column half as wide (a fetch's progress:
     « 1 015 / 1 015 (100 %) » beside its bar made the table scroll,
     2026-10-30) */
  .two-lines { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
  .two-lines progress { width: 100%; min-width: 4.5rem; }
  .two-lines small { font-size: .82em; white-space: nowrap; }
  /* a long name (Chinese of Hong Kong, named by CLDR) on two lines, not the column wide */
  .table-scroll .wrap { display: inline-block; max-width: 16rem; white-space: normal; }
  /* the Generations tab within the screen (2026-10-31: « Slides » cut, the
     words one under the other): the date on two lines, the short columns'
     heads as narrow as their figures, the channels and words given room */
  #generations tr > td:first-child { white-space: normal; min-width: 5.5rem; }
  #generations tr:first-child > th { min-width: 0; }
  /* the kind, the state and the address on several lines when the screen
     is short (the PC's wider fonts went past it at 1280, 2026-10-31): no
     cell holds a width it does not need, the table shares out the rest */
  #generations td.kind, #generations td.state { white-space: normal; }
  /* an address on one line when the table has the room, cut at its @
     rather than anywhere (« destock / media@ / yahoo.fr », 2026-11-01) */
  #generations td.who { white-space: normal; overflow-wrap: break-word; min-width: 11rem; }
  .table-scroll summary .wrap { width: 16rem; vertical-align: top; }
  @media (min-width: 700px) { .lang-menu ul { grid-template-rows: repeat(var(--rows3), auto); } }
  @media (min-width: 1000px) { .lang-menu ul { grid-template-rows: repeat(var(--rows4), auto); } }
  @media (min-width: 1250px) { .lang-menu ul { grid-template-rows: repeat(var(--rows5), auto); } }
  @media (min-width: 1500px) { .lang-menu ul { grid-template-rows: repeat(var(--rows6), auto); } }
  /* a phone: the button can sit on the left once the menu bar wraps, and
     the list hung from it went off the screen (2026-10-23): it opens over
     the page, the screen's width */
  @media (max-width: 600px) {
    .lang-menu ul { position: fixed; inset-inline: 3vw; top: 12vh; width: auto; max-width: none; max-height: 80vh;
      z-index: 50; column-gap: .5rem; grid-template-rows: repeat(var(--rows2), auto); }
  }
  /* a channel's @handle reads left to right in a right-to-left page: its @
     was thrown to the end ("luisitocomunica@") */
  .ch-name, .handle { unicode-bidi: isolate; direction: ltr; }
  .lang-menu li a { display: block; padding: .3rem .75rem; margin: 0 .3rem; border-radius: 6px;
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: .92rem; line-height: 1.25;
    white-space: normal; overflow-wrap: anywhere; }   /* a long name on two lines, not over the column beside */
  /* the page's name for it, under its own, small and grey */
  .lang-menu li a small { display: block; font-size: .74rem; font-weight: 400; color: var(--muted); }
  /* every row as tall as one with its second name: the columns' lines even */
  .lang-menu li a { min-height: 2.3rem; box-sizing: border-box; }
  .lang-menu li a:hover { background: var(--plate); }
  .lang-menu ul { padding: .5rem .2rem; column-gap: .2rem; }
  /* the language being read, found at a glance among 45 (asked 2026-10-23):
     bold, the links' colour and a bar on its side; no tick, which a
     face without it draws as nothing */
  .lang-menu li a[aria-current] { background: var(--plate); color: var(--link); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent); }
  pre.mail { white-space: pre-wrap; font: inherit; margin: 0; }
  .mail-head { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: 0 0 1rem;
    padding-bottom: .8rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
  .mail-head dt { color: var(--muted); font-weight: 600; }
  .mail-head dd { margin: 0; overflow-wrap: anywhere; }
  .lang-tag { font-size: .7rem; font-weight: 700; border: 1px solid var(--border); border-radius: 4px;
    padding: 0 .25rem; color: var(--muted); }
  .field-error { color: var(--bad); font-size: .88rem; font-weight: 400; margin: .35rem 0 0; }
  [aria-invalid="true"]:not([type=checkbox]) { border-color: var(--bad) !important;
    box-shadow: 0 0 0 1px var(--bad); outline-color: var(--bad); }
  .channels label.full { opacity: .45; cursor: not-allowed; }
  .error { color: var(--bad); font-weight: 600; }
  .ready { color: var(--ok); font-weight: 600; }      /* an account set up, a thing in place (asked 2026-11-04) */
  /* a word that says what was done instead (a deck shown, not made again) */
  .lang-pick { font-size: .9rem; color: var(--muted); margin: 2rem 0 1rem; }
  .lang-pick .lang-menu { display: inline-block; vertical-align: middle; }
  .lang-pick .lang-menu ul { inset-inline-end: auto; inset-inline-start: 0; }
  /* the account's open sessions: one line each, its button at the end */
  ul.sessions { list-style: none; padding: 0; margin: .5rem 0 1rem; max-width: 34rem; }
  ul.sessions li { display: flex; gap: .75rem; align-items: center; justify-content: space-between;
    padding: .6rem 0; border-bottom: 1px solid var(--border); }
  /* the two-step sign-in's backup codes, shown once: two columns to copy */
  .backup-codes { columns: 2; list-style: none; padding: 0; margin: .5rem 0 0; }
  .backup-codes li { margin: .2rem 0; }
  .backup-codes code { font-size: 1.05rem; letter-spacing: .05em; }
  .notice { background: var(--plate); border-inline-start: 3px solid var(--accent); border-radius: 6px;
    padding: .6rem .9rem; }
  .hint { color: var(--muted); font-size: .9rem; }
  label .hint { font-weight: 400; }     /* « (facultatif) » beside a field's name, not as bold as it */
  form.again { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .2rem 0 1rem; }
  .deck-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    flex-wrap: wrap; margin: 1rem 0; }
  .deck-downloads { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
  ul.decks { list-style: none; padding: 0; margin: 1rem 0; }
  ul.decks li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: .75rem 1.5rem; margin: .6rem 0; }
  .deck-what { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 16rem;
    overflow-wrap: anywhere; }
  .deck-what strong { font-size: 1.05rem; }
  .deck-do { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .sort-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
  .sort-choices { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .5rem; }
  .sort-choices .sort-row { margin-top: 0; }
  .sort-hint { margin: .2rem 0 0; }
  .sort-row:not(:has(> :not([hidden]):not(.behind))) { display: none; }
  /* buttons side by side for a choice, the one taken filled */
  .segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; background: var(--surface); margin-top: .4rem; }
  .segmented[hidden] { display: none; }
  /* buttons for a choice made here, links for pages to go to (the
     example's kinds): the same look */
  .segmented :is(button, a) { background: none; color: var(--ink); border: 0; border-radius: 0; font-weight: 600;
    padding: .55rem .95rem; text-decoration: none; }
  .segmented :is(button, a) + :is(button, a) { border-inline-start: 1px solid var(--border); }
  .segmented :is(button, a):hover { background: var(--plate); }
  .segmented :is(button[aria-checked=true], a[aria-current=page]) { background: var(--accent); color: #fff; }
  .segmented.small :is(button, a) { padding: .4rem .75rem; font-size: .9rem; }
  /* on a phone, a row too long for it: one choice under the other, each
     the whole width (wrapped, they came in uneven pieces, 2026-10-24) */
  @media (max-width: 600px) {
    .segmented { display: flex; flex-direction: column; width: 100%; }
    .segmented :is(button, a) { text-align: start; }
    .segmented :is(button, a) + :is(button, a) { border-inline-start: 0; border-top: 1px solid var(--border); }
  }
  /* the select a row of buttons stands for: the form's field, out of sight */
  select.behind { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; opacity: 0;
    pointer-events: none; }   /* at its row's start: at its end it made a phone's page wider (2026-10-24) */
  .sort-row select[hidden] { display: none; }
  /* the word's menu as tall as the direction's buttons beside it, on their line */
  .sort-row .segmented { margin-top: 0; }
  .sort-row select { width: auto; font-size: .9rem; font-weight: 600; padding: .4rem 2rem .4rem .75rem;
    border-radius: 10px; }
  .sort-label { font-size: .9rem; color: var(--muted); }
  .sort-row .sort-label:has(+ select[hidden]) { display: none; }
  @media (max-width: 600px) { .sort-row select { flex: 1 1 8rem; } }   /* beside its label, the rest of the line */
  .years-row select { flex: none; }     /* a year: four digits, on a phone too */
  .years-all { display: inline-flex; gap: .4rem; align-items: center; margin: 0 0 .5rem; cursor: pointer; }
  .examples-teaser h2 { margin-top: 0; }
  .examples-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  /* the site's question (siteConfirm): a title saying the action, what it
     does under it, the action's button first then « Annuler » */
  .ask-box { border: 0; border-radius: 14px; padding: 1.5rem 1.5rem 1.25rem; width: min(28rem, 92vw);
             background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
  .ask-box[open] { animation: ask-in .14s ease-out; }
  @keyframes ask-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
  @media (prefers-reduced-motion: reduce) { .ask-box[open] { animation: none; } }
  .ask-box::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
  .ask-box h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .5rem; }
  .ask-box h2:empty { display: none; }
  .ask-box #ask-text { margin: 0 0 1.4rem; line-height: 1.5; color: var(--muted); }
  .ask-box h2:empty + #ask-text { color: var(--ink); }
  .ask-box .actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
  .ask-box .actions button { padding: .55rem 1.1rem; }
  .ask-box button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
                                  outline-offset: 2px; }
  @media (max-width: 30rem) { .ask-box .actions button { flex: 1 1 100%; } }
  .example-card { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
  .example-card > a:not([hidden]) { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: inherit; min-width: 0; }
  .examples-row img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
  .example-card > a:hover strong { text-decoration: underline; }
  .examples-row .card-words { color: var(--ok); font-weight: 600; font-size: .9rem; }
  .example-kinds { margin: .2rem 0 1.2rem; }
  .back-link { margin: 0 0 .4rem; font-size: .95rem; }
  .back-link a { text-decoration: none; }
  .back-link a:hover { text-decoration: underline; }
  .pricing-facts { margin: 1.25rem 0; padding-inline-start: 1.2rem; }
  .pricing-facts li { margin: .3rem 0; }
  /* the deck's shape, in sight while the form is filled and over nothing:
     a column beside the form on a wide screen, kept in view as the page
     scrolls; a bar along the bottom of a narrow one, folded away at will */
  .shape-preview { margin: 0; padding: .75rem; }
  .shape-preview .title { margin: 0 0 .4rem; font-size: .85rem; }
  .shape-preview .examples-row { display: flex; gap: .4rem; }
  .shape-preview figure { margin: 0; flex: 1; min-width: 0; position: relative; }
  /* said on the image itself: an example, not the slides asked for */
  .shape-preview figure::before { content: attr(data-badge); position: absolute; top: 5px; inset-inline-start: 5px;
    background: rgba(17, 19, 26, .62); color: #fff; font-size: .62rem; font-weight: 600;
    padding: .08rem .4rem; border-radius: 999px; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .shape-preview figure[hidden] { display: none; }
  .shape-preview figcaption { font-size: .7rem; line-height: 1.2; }
  .shape-preview.picked figcaption { display: none; }
  .shape-preview img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
  .shape-preview .hint { font-size: .72rem; margin: .4rem 0 0; }
  #shape-said { font-weight: 600; font-size: .85rem; margin: .4rem 0 0; }
  #shape-said:empty, #shape-on:empty, #shape-plan:empty, #shape-order:empty { display: none; }
  #shape-on { margin: .2rem 0 0; font-size: .75rem; }
  .shape-preview .no-link { font-size: .68rem; }
  .examples-teaser .no-link { margin: .75rem 0 0; font-size: .8rem; }
  #shape-plan { margin: .4rem 0 0; padding-inline-start: 1.3rem; font-size: .75rem; }
  #shape-order { margin: .3rem 0 0; font-size: .75rem; font-weight: 600; }
  #shape-fold { display: none; }
  @media (min-width: 1100px) {
    #deck-form:has(#shape) { display: grid; grid-template-columns: minmax(0, 1fr) 250px;
      column-gap: 1.25rem; align-items: start; }
    #deck-form:has(#shape) > * { grid-column: 1; }
    #deck-form > #shape { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 1rem; }
  }
  @media (max-width: 1099px) {
    .shape-preview { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; border-radius: 12px 12px 0 0;
      box-shadow: 0 -4px 16px var(--shadow); background: var(--surface); border: 1px solid var(--line);
      padding: .5rem 2.6rem .5rem 1rem; display: grid; grid-template-columns: auto 1fr;
      column-gap: .75rem; align-items: center; }
    .shape-preview .title { grid-column: 2; margin: 0; }
    .shape-preview .examples-row { grid-row: 1 / span 4; grid-column: 1; }
    .shape-preview figure { width: 44px; flex: none; }
    .shape-preview figcaption, .shape-preview figure::before { display: none; }
    .shape-preview .hint, #shape-said, #shape-on, #shape-order { grid-column: 2; margin: 0; }
    #shape-plan { display: none; }
    #shape-fold { display: block; position: absolute; top: .35rem; inset-inline-end: .5rem; }
    /* folded: its title alone, the page under it free */
    .shape-preview.folded > :not(.title):not(#shape-fold) { display: none; }
    .shape-preview.away { display: none; }
    .shape-preview .hint { display: none; }      /* the title and the thumbnails: a bar, not a page */
    body:has(#shape:not(.folded)) footer { padding-bottom: 7rem; }
  }
  .cover-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
  .cover-choice { display: block; width: 100%; padding: 0; background: none; border: 2px solid var(--line);
                  border-radius: 10px; overflow: hidden; }
  .cover-choice img { display: block; width: 100%; height: auto; }
  .cover-choice:hover, .cover-choice:focus-visible { border-color: var(--link); }
  .cover-choice[aria-checked=true] { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
  details.menu { position: relative; }
  details.menu summary { list-style: none; }      /* its look: .button's */
  details.menu summary::-webkit-details-marker { display: none; }
  details.menu summary::after { content: ""; display: inline-block; margin-inline-start: .5rem; vertical-align: middle;
    border: .3rem solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
  details.menu[open] summary::after { transform: rotate(180deg); }
  .menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + .35rem); z-index: 5; min-width: 15rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .3rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
  .menu-list a, .menu-list button { display: block; width: 100%; padding: .5rem .7rem; border-radius: 7px;
    text-decoration: none; color: var(--ink); font: inherit; font-weight: 600; text-align: start;
    background: none; border: 0; cursor: pointer; }
  .menu-list a:hover, .menu-list a:focus-visible,
  .menu-list button:hover, .menu-list button:focus-visible { background: var(--plate); }
  details.account summary { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
  details.account .menu-list { min-width: 12rem; }
  details.account .menu-email { display: none; padding: .4rem .7rem; overflow-wrap: anywhere; }   /* the address, where the header hides it */
  .menu-list small { display: block; font-weight: 400; color: var(--muted); }
  /* a box a choice (theme_picker): the whole line ticks it */
  .menu-list label { display: flex; align-items: center; justify-content: flex-start; gap: .6rem;
    padding: .45rem .7rem; border-radius: 7px; cursor: pointer; font-weight: 600; text-align: start;
    white-space: nowrap; }
  /* a box its own size: a form row's fields grow (.row input), not a box (2026-10-28,
     the boxes stretched over 12rem, the themes pushed right and wrapped) */
  .menu-list input[type=checkbox] { flex: none; width: auto; margin: 0; }
  .menu-list label:hover, .menu-list label:focus-within { background: var(--plate); }
  @media (max-width: 600px) {     /* the menu spans the buttons' row instead of hanging off one */
    .deck-downloads { position: relative; }
    details.menu { position: static; }
    .menu-list { left: 0; right: 0; min-width: 0; }
    /* the account's hangs off its icon, now on the logo's line near the
       end: opened towards the start, inside the screen */
    details.account { position: relative; }
    details.account .menu-email { display: block; }
    details.account .menu-list { left: auto; right: 0; inset-inline-start: auto; inset-inline-end: 0; min-width: 12rem; }
  }
  footer.site .copyright { display: block; margin-top: .35rem; }
  /* the deck: a strip that swipes like the carousel, then a lightbox */
  .strip { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 18px;
    scroll-snap-type: x mandatory; }
  .strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; }
  .strip img { width: min(340px, 78vw); height: auto; display: block; cursor: zoom-in;
    border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 40px -22px var(--shadow); }
  .strip figcaption { text-align: center; font-size: .8rem; color: var(--muted); padding-top: 6px; }
  #box { position: fixed; inset: 0; background: rgba(12, 12, 18, .94); display: flex;
    flex-direction: column; align-items: center; justify-content: center; z-index: 50; }  /* over the floating card */
  /* taps in quick succession move the slides, never zoom the page: a
     double tap on ‹ › enlarged it on a phone (2026-10-27); two fingers
     still zoom (manipulation keeps the pinch) */
  #box, button { touch-action: manipulation; }
  #box .nav { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  #box[hidden] { display: none !important; }
  #box:focus { outline: none; }
  #box img { max-height: calc(100vh - 70px); max-width: calc(100vw - 140px); width: auto; height: auto;
    border-radius: 10px; }
  #box .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
    border-radius: 50%; padding: 0; color: #fff; font-size: 28px;
    /* seen on a light slide as on a dark one: dark, with a light rim */
    background: rgba(17, 19, 26, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
  /* a real pointer only: a touch screen keeps the last tapped button
     "hovered", and a light hover made it vanish on a light slide */
  @media (hover: hover) { #box .nav:hover { background: rgba(17, 19, 26, .72); } }
  #prev { left: 18px; } #next { right: 18px; }
  /* over an example's slides: whose they are, not the visitor's */
  /* above the slide, never over it: the slide comes down to leave it room */
  #box-note { margin: 0 0 .6rem; max-width: calc(100% - 140px); background: rgba(255, 255, 255, .12);
    color: #fff; font-size: .9rem; padding: .35rem .9rem; border-radius: 999px; text-align: center;
    border: 1px solid rgba(255, 255, 255, .25); }
  #box:has(#box-note:not([hidden])) img { max-height: calc(100vh - 130px); }
  #close { position: absolute; top: 10px; right: 14px; background: none; color: #fff;
    font-size: 32px; padding: 0 .4rem; }
  #where { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
    color: #fff; font-size: .85rem; }
  #where a { color: #fff; }
  /* a part of a page set apart from the lists around it (the passages,
     2026-11-01): tinted, ruled in the accent */
  .featured { background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-left: 5px solid var(--accent); border-radius: 12px; padding: .4rem 1.2rem 1.1rem; margin: 1.5rem 0; }
  .featured h2 { color: var(--accent); }
  .featured h2 svg { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .3rem; }
  /* the one thing to do here, seen at once (asked 2026-11-01: « pas très
     visible »): larger, ringed in white over the dark, the slide raised
     to leave it room under it */
  #box-pick { background: var(--accent); color: #fff; border: 0; border-radius: 999px;
    padding: .6rem 1.5rem; font-size: 1.05rem; font-weight: 700; margin-left: .4rem;
    box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(0, 0, 0, .45); }
  #box-pick:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  #box:has(#box-pick-row:not([hidden])) img { max-height: calc(100vh - 110px); }
  #box:has(#box-pick-row:not([hidden])):has(#box-note:not([hidden])) img { max-height: calc(100vh - 170px); }
  @media (max-width: 600px) {
    header .email { display: none; }
    #box img { max-width: 100vw; border-radius: 0; }
    #box-note { max-width: calc(100% - 24px); font-size: .8rem; }
    #box .nav { width: 40px; height: 40px; font-size: 22px; }
    #prev { left: 6px; } #next { right: 6px; }
  }
  .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; }
  /* the header, more like the big sites' (asked 2026-10-24): quiet links
     in the text's colour, the accent for the page one is on and the one
     call to action; a line under it; the settings apart from the links */
  header { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    max-width: var(--page); margin: 0 auto; padding: .9rem clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  /* the logo, a picture (static/brand-logo*.png, deploy/brand_logo.py): the
     same on every device, one for each theme. The name was text in the
     system's face, unlike the logo given to Stripe (2026-10-21) */
  header a.brand { display: inline-flex; align-items: center; }
  header a.brand img { height: 2rem; width: auto; }
  header a.brand .on-dark, :root[data-theme=dark] header a.brand .on-light { display: none; }
  :root[data-theme=dark] header a.brand .on-dark { display: inline; }
  header nav { display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; }
  /* the page's links all look alike; the page one is on is marked, and
     not a link to itself */
  header nav a, header nav .link { white-space: nowrap; color: var(--muted); text-decoration: none;
    font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s; }
  header nav a:hover, header nav .link:hover { color: var(--ink); border-bottom-color: var(--border); }
  header nav a[aria-current="page"] { color: var(--ink); font-weight: 600;
    border-bottom-color: var(--accent); pointer-events: none; }
  /* a link is as wide as in bold on every page, so that marking it moves
     nothing: its label again, bold, takes the room and is not seen */
  header nav a { display: inline-grid; }
  header nav a::after { content: attr(data-label); font-weight: 600; height: 0;
    visibility: hidden; overflow: hidden; }
  header nav a.pill { padding: .2rem .75rem; border: 2px solid transparent; color: var(--ink); }
  header nav a.pill.credits { text-align: center; font-variant-numeric: tabular-nums; box-sizing: content-box; }
  header nav a.pill:hover { border-color: var(--border); }
  header nav a.pill.signup { background: var(--accent); color: #fff; padding: .4rem 1rem; }
  header nav a.pill.signup:hover { border-color: transparent; filter: brightness(1.1); }
  /* the credits a new account gets, on its button: a small round count */
  .gift-badge { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px;
                background: #fff; color: var(--accent); font-size: .8em; font-weight: 700; line-height: 1.4; }
  /* the same offer, above the home page's form */
  .welcome-offer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
                   border-left: 4px solid var(--accent); }
  .welcome-offer p { margin: 0; flex: 1 1 18rem; }
  header nav a.pill[aria-current="page"] { border-color: var(--accent); }
  header form { margin: 0; }
  header .settings { display: inline-flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
  /* the language and the theme set apart from the page's links: a line
     between, on a screen wide enough to have them on one row */
  @media (min-width: 601px) {
    header nav .settings { margin-inline-start: .4rem; padding-inline-start: 1.4rem;
      border-inline-start: 1px solid var(--line); }
  }
  /* on a phone: the logo, the language and the theme on the first line,
     the page's links under them */
  @media (max-width: 600px) {
    header { row-gap: .5rem; justify-content: flex-start; column-gap: 1.1rem; }
    header nav { display: contents; }
    header .settings { order: 1; }
    header::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
    header nav > :not(.settings) { order: 3; }
    /* the account's menu up there too, before the language: not alone on a third line */
    header nav > details.account { order: 1; margin-inline-start: auto; }
    header:has(details.account) .settings { margin-inline-start: 0; }
  }
  .link { background: none; color: var(--link); padding: 0; font-weight: 400; }
  .theme-toggle { background: none; color: var(--ink); padding: 0; display: inline-grid; place-items: center;
    width: 2.1rem; height: 2.1rem; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 999px; }
  .theme-toggle svg { width: 18px; height: 18px; }
  /* the icon of the theme a click switches to */
  .theme-toggle .sun, :root.dark .theme-toggle .moon { display: none; }
  :root.dark .theme-toggle .sun { display: block; }
  .pill { white-space: nowrap; background: var(--plate); border-radius: 999px; padding: .2rem .75rem; color: var(--ink);
    text-decoration: none; font-weight: 600; }
  .packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
  .pack { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.25rem; text-align: center; }
  .pack .price { font-size: 1.8rem; font-weight: 700; }
  .ok { color: var(--ok); font-weight: 600; }
  table { border-collapse: collapse; width: 100%; }
  td, th { text-align: start; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
  /* a long word breaks, with a hyphen in the page's language, rather than
     push a table past a phone's edge (the privacy policy's three columns
     on an iPhone SE: 83 px too wide, 2026-10-21) */
  table:not([class]) td, table:not([class]) th { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  /* the legal pages' tables of long text above (no class); a table of the
     site's own never cuts a word: between words only, and wider
     than the screen it scrolls sideways in its box (.table-fit, put round
     it by dataTables). Cut anywhere, a column went down to one letter a
     line on a phone, a date written downwards, « Rembou-rsés » (2026-10-27) */
  .table-fit { overflow-x: auto; }
  .dev { border: 2px dashed #c48a00; background: var(--dev-bg); }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* sharing (_share.html) and the referral box */
  .share .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .copy-field, .social { margin: .9rem 0; }
  .copy-field .label, .social .label { display: block; font-size: .78rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
  /* the value and its buttons in one bordered box, as wide as it needs */
  .copybox { display: flex; flex-wrap: wrap; gap: 1px; align-items: stretch; max-width: 34rem;
    background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .copybox:focus-within { border-color: var(--accent); }
  .copybox input[type=text] { flex: 1 1 10rem; min-width: 0; width: auto; border: 0; border-radius: 0;
    background: var(--surface); color: var(--ink); text-overflow: ellipsis; }
  .copybox input[type=text]:focus { outline: none; }
  .copybox strong.code { flex: 1 1 auto; display: flex; align-items: center; padding: 0 .9rem;
    background: var(--surface); line-height: 1; }
  /* the link and the code boxes the same height, their labels on one line */
  .copybox > input[type=text], .copybox > strong.code { box-sizing: border-box; min-height: 2.75rem; }
  .copybox button { flex: none; border: 0; border-radius: 0; padding: .55rem 1rem; }
  /* a text of several lines: as wide as the column, its button under it
     as wide as its word (it filled the column, 2026-10-25) */
  .copy-text { margin: .6rem 0 1rem; }
  .copy-text textarea { display: block; box-sizing: border-box; width: 100%; max-width: none;
    margin: 0 0 .6rem; border: 1px solid var(--border); border-radius: 8px; padding: .75rem .9rem;
    background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem;
    line-height: 1.5; resize: vertical; }
  .copy-text textarea:focus { outline: none; border-color: var(--accent); }
  /* a phone: the value on its line, its buttons below it, side by side */
  @media (max-width: 40rem) {
    .copybox input[type=text], .copybox strong.code { flex-basis: 100%; }
    .copybox button { flex: 1 1 0; } }
  strong.code { font-family: "IBM Plex Mono", monospace; letter-spacing: .22em; font-size: 1.3rem; }
  /* the referral box: the rewards as three figures, then the link and the code side by side */
  .rewards { list-style: none; padding: 0; margin: 1rem 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; max-width: 46rem; }
  .rewards li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: .7rem .9rem; text-align: center; }
  .rewards .n { display: block; font-size: 1.25rem; font-weight: 700; color: var(--accent); }
  .rewards .on { display: block; font-size: .85rem; color: var(--muted); }
  .ref-grid { display: grid; grid-template-columns: minmax(0, 3fr) auto minmax(0, 2fr); gap: 0 1rem;
    align-items: end; max-width: 48rem; }
  /* "or" between the link and the code: either one is enough */
  .ref-grid .or { align-self: end; margin: .9rem 0; padding: .55rem 0; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .ref-grid .copybox { max-width: none; }
  /* a phone: the rewards as three short lines, the link and the code one under the other */
  @media (max-width: 40rem) {
    .ref-grid, .rewards { grid-template-columns: 1fr; }
    .ref-grid .or { margin: 0; padding: 0; text-align: center; }
    .rewards { gap: .4rem; }
    .rewards li { text-align: start; padding: .5rem .8rem; }
    .rewards .n, .rewards .on { display: inline; }
    .rewards .n { font-size: 1.05rem; margin-inline-end: .35rem; } }
  /* the networks: small outlined pills, one line where it fits */
  .plate > p.social { max-width: none; }
  .social a, button.pill { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .3rem .35rem 0; padding: .22rem .75rem .22rem .6rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--ink); text-decoration: none; font-size: .88rem; white-space: nowrap; }
  .social a:hover, .social a:focus-visible, button.pill:hover, button.pill:focus-visible {
    border-color: var(--accent); color: var(--accent); }
  .social a[hidden], button.pill[hidden] { display: none; }
  button.pill { font-weight: 400; line-height: inherit; }
  .net-icon { flex: none; }
  /* a referee who has bought nothing yet: what their first pack brings them */
  .invite-banner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1rem;
    margin: 0; padding: .55rem 1rem; background: var(--mine); color: var(--ink); text-align: center; font-weight: 600; }
  .invite-banner a { font-weight: 600; }
  /* a speech bubble: help said to the reader, its tip toward what it
     speaks of (the link-sent page's « Vous ne le voyez pas ? », 2026-10-29) */
  .bubble { position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: .9rem 1.1rem .4rem; margin: .6rem 0 1rem;
    box-shadow: 0 6px 18px -12px var(--shadow); max-width: var(--measure); }
  .bubble::before { content: ""; position: absolute; top: -8px; inset-inline-start: 1.6rem;
    width: 14px; height: 14px; background: var(--surface); border-top: 1px solid var(--border);
    border-left: 1px solid var(--border); transform: rotate(45deg); }
  .bubble .title { margin-top: 0; }
  .invite-banner.nudge input[type=password] { width: 14rem; max-width: 100%; padding: .3rem .6rem; font-weight: 400; }
  /* the owner's pill beside the logo, out of the header's flow: a customer's
     header is the same, the menu opens over the page */
  .brand-wrap { position: relative; display: inline-flex; align-items: center; }
  /* the owner's icon: right of the theme's button, in the page's margin
     (the header's own padding), out of the layout */
  .toggle-wrap { position: relative; display: inline-flex; }
  .owner-tools { position: absolute; inset-inline-start: calc(100% + .6rem); top: 50%;
    transform: translateY(-50%); z-index: 40; }
  /* where the margin is too narrow for it (a phone, a tablet): in the row,
     last, after the theme's button; set over it, it covered it, and
     between the language's and the theme's it parted them (2026-10-27) */
  @media (max-width: 1300px) {
    .owner-tools { position: static; transform: none; margin-inline-start: .4rem; align-self: center; }
  }
  /* discreet (asked 2026-10-22): a small grey outline, the accent only on hover */
  .admin-badge, .dev-mails { display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border: 1px solid var(--line); border-radius: 999px;
    text-decoration: none; background: none; color: var(--muted); }
  .admin-badge svg, .dev-mails svg { width: 1rem; height: 1rem; }  /* as big as the theme button beside it */
  .admin-badge:hover, .dev-mails:hover { color: var(--accent); border-color: currentColor; }
  .admin-badge.locked { border-style: dashed; }
  form.inline { display: inline; margin: 0; }
  .nowrap { white-space: nowrap; }      /* a name and its button kept together */
  .skip-row { margin: .5rem 0; line-height: 2.2; }
  .online { color: var(--ok); }
  .admin-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }
  .admin-tools > form { flex: 1 1 22rem; max-width: 30rem; margin: 0; }
  @media (max-width: 720px) { .admin-tools { grid-template-columns: 1fr; } }
  .admin-tools .plate h2 { margin-top: 0; font-size: 1.1rem; }
  .admin-tools label { display: block; margin: .6rem 0 .25rem; font-weight: 600; }
  .admin-tools input:not([type=number]) { width: 100%; box-sizing: border-box; }

  h2.customer { margin: .2rem 0 .8rem; overflow-wrap: anywhere; }
  .facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
  .facts div { background: var(--plate); border-radius: 10px; padding: .5rem .8rem; min-width: 8rem; }
  .facts dt { color: var(--muted); font-size: .8rem; }
  .facts dd { margin: 0; font-weight: 700; }
  .in-page { margin: 0 0 1.2rem; font-size: .95rem; }
  table.totals th:first-child { text-align: start; }
  .quotas input { width: 7rem; }
  /* a table per group, their columns under each other (2026-10-26) */
  table.quotas:not(.domains) { table-layout: fixed; width: 100%; min-width: 46rem; }
  table.quotas:not(.domains) th:nth-child(1) { width: 38%; }
  table.quotas:not(.domains) th:nth-child(2) { width: 22%; }
  table.quotas:not(.domains) th:nth-child(3), table.quotas:not(.domains) th:nth-child(4) { width: 9%; }
  table.quotas:not(.domains) th:nth-child(5) { width: 12%; }
  table.quotas:not(.domains) td:first-child { white-space: normal; }   /* a long label on two lines */
  .domains-fold > summary { cursor: pointer; }
  .domains-fold > summary h2 { display: inline; }
  .quotas tr.changed td:first-child { font-weight: 700; }
  .quotas tr.removed { opacity: .6; }
  .quotas td.reached { color: var(--bad); font-weight: 700; }
  /* the free preview against the deck paid for, side by side (2026-10-22) */
  .preview-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.4rem; }
  @media (max-width: 640px) { .preview-banner { grid-template-columns: 1fr; } }
  .preview-banner .side { border-radius: 12px; padding: 1rem 1.2rem; border: 2px solid; }
  .preview-banner .this { border-color: #c8323c; background: light-dark(#fdf0f1, #2a1416); }
  .preview-banner .paid { border-color: var(--ok); background: light-dark(#eefaf4, #10241b); }
  .preview-banner h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
  .preview-banner .this h2 { color: light-dark(#a3212b, #ff8a92); }
  .preview-banner .paid h2 { color: var(--ok); }
  .preview-banner ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .3rem; font-weight: 600; }
  .preview-banner .actions { margin: 0; }
  .fill-sample { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 1rem; }
  .admin-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line);
    margin: 0 0 1.4rem; }
  .admin-tabs a { padding: .5rem .9rem; text-decoration: none; border-bottom: 2px solid transparent;
    margin-bottom: -1px; font-weight: 600; }
  .admin-tabs .dev-tab { margin-inline-start: auto; color: var(--muted); }   /* apart, at the end */
  .admin-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  /* on a phone the tabs are one line that scrolls sideways, the open one
     brought to the middle (_admin.html): on four lines they took a screen
     before the page's content (2026-10-27) */
  @media (max-width: 700px) {
    .admin-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .admin-tabs a { white-space: nowrap; padding: .5rem .65rem; }
  }
  .pack .gift { margin: .2rem 0 .5rem; color: var(--ok); font-weight: 700; font-size: .92rem; }
  /* a box a digit over one real field (_ui.html code_input): shown once the
     script has made them live (.otp.live), the plain field otherwise */
  /* a fetch's states, the colours of the terminal's table (watch_fetch.py
     COLOURS, fetch_state.kind_of): green served, red failed, yellow waiting
     or retried, blue no subtitles, cyan geo/recovered, magenta walls/rotating */
  .fk-ok, .fk-done { color: var(--ok); } .fk-done, .fk-fail { font-weight: 700; }
  .fk-fail, .fk-trouble { color: var(--bad); }
  .fk-again, .fk-defer, .fk-prog { color: light-dark(#8a5a00, #f0c060); }
  .fk-nosubs { color: light-dark(#1d4fc4, #8fb0ff); }
  .fk-geo, .fk-recover { color: light-dark(#0b6e7a, #6fd6e0); }
  .fk-wall, .fk-rotate, .fk-blocked { color: light-dark(#8a2b8f, #e09ae4); }
  .otp-field { position: relative; display: inline-block; }
  .otp-boxes { display: none; gap: .5rem; }
  .otp.live .otp-boxes { display: flex; }
  /* the real field over the boxes, there but unseen: its text, background
     and caret transparent, NOT opacity: 0, which took the phone's « Coller »
     menu away on a long press (2026-10-27); 16px: no zoom on focus */
  .otp.live .otp-field input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1;
    font-size: 16px; border: 0; padding: 0; caret-color: transparent; color: transparent;
    background: transparent; outline: none; box-shadow: none; -webkit-text-fill-color: transparent; }
  .otp.live .otp-field input::selection { background: transparent; }
  .otp-boxes span { box-sizing: border-box; width: 2.75rem; height: 3.25rem; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    font: 600 1.5rem "IBM Plex Mono", monospace; color: var(--ink); }
  .otp.live .otp-field:focus-within .otp-boxes span.at { border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
  @media (max-width: 380px) { .otp-boxes { gap: .35rem; } .otp-boxes span { width: 2.4rem; } }
  /* the robot check: apart from the field above it */
  div[data-sitekey] { margin-top: .9rem; }