/* A copy of frontend/src/components/sign-in/sign-in.css for the public site (ADR 0147). Generated by scripts/site-ds.mjs: do not edit. */
/* The lobby (ADR 0145, DESIGN.md §2.1, §3.5): every screen before a restaurant opens, on the brand's night.
 *
 * The room: the indigo night, lit by two violet lights drifting slowly and a cool glint; behind the column, the beam of a
 * door left ajar; across it the ledger's ruled lines, fading out toward the edges. On it: the mark, whose double rule
 * draws itself on the first paint (the product's signature), the wordmark, and one card of the night's glass.
 *
 * Motion answers the person: the room enters once, as the frame first paints (the layout keeps it across the screens, so
 * the light never restarts); a screen's card rises in, its contents in turn; a field lights up when it is chosen; the
 * one action catches the light under a hand; a form on its way draws the double rule running and the beam leans in; an
 * error shakes the card once. The lights drift on a 30-second breath and nothing else loops. Only opacity and transform
 * travel. Less motion (the device's, or the reader's own `data-motion`): every travel goes, the fades stay, the light
 * holds still. Less transparency: the glass turns solid.
 *
 * iPhone first: every field 16 px (Safari zooms into anything smaller), every target ≥ 44 px, nothing sideways on a
 * 320-px phone, the column clear of the notch and the home bar. Every colour is a token (app/ds/tokens.css: the lobby's
 * palette and the roles it re-tunes), every pair measured in tokens.test.ts. */
@layer components {
  /* --- the frame and the room ------------------------------------------------------------------------------------- */
  .ds-signin {
    position: relative;
    isolation: isolate;
    display: grid;
    min-block-size: 100dvh;
    place-items: center;
    padding: max(40px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom));
    background-color: var(--color-lobby-deep);
    color: var(--color-ink);
  }
  .ds-lobby__sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
    background-image: radial-gradient(130% 85% at 50% -12%, var(--color-lobby-night), var(--color-lobby-deep) 72%);
  }
  .ds-lobby__sky > i {
    position: absolute;
    display: block;
  }
  .ds-lobby__light {
    border-radius: 50%;
    will-change: transform;
  }
  .ds-lobby__light--a {
    inline-size: 82vmax;
    block-size: 82vmax;
    inset-block-start: -34vmax;
    inset-inline-start: -26vmax;
    background-image: radial-gradient(closest-side, color-mix(in oklab, var(--color-lobby-violet) 58%, transparent), transparent);
    animation:
      ds-lobby-dawn 2400ms var(--ease-ds-out) both,
      ds-lobby-drift-a 30s var(--ease-ds-io) 2400ms infinite alternate;
  }
  .ds-lobby__light--b {
    inline-size: 74vmax;
    block-size: 74vmax;
    inset-block-end: -36vmax;
    inset-inline-end: -24vmax;
    background-image: radial-gradient(closest-side, color-mix(in oklab, var(--color-lobby-orchid) 40%, transparent), transparent);
    animation:
      ds-lobby-dawn 2800ms var(--ease-ds-out) 200ms both,
      ds-lobby-drift-b 36s var(--ease-ds-io) 3000ms infinite alternate;
  }
  .ds-lobby__light--c {
    inline-size: 46vmax;
    block-size: 46vmax;
    inset-block-start: 38%;
    inset-inline-end: -18vmax;
    background-image: radial-gradient(closest-side, color-mix(in oklab, var(--color-glow) 11%, transparent), transparent);
    animation:
      ds-lobby-dawn 3200ms var(--ease-ds-out) 400ms both,
      ds-lobby-drift-c 42s var(--ease-ds-io) 3600ms infinite alternate;
  }
  /* the door left ajar: a tall, soft light behind the column; it opens from a sliver on arrival */
  .ds-lobby__beam {
    inset-block: 0;
    left: 50%;
    inline-size: min(680px, 150vw);
    background-image: radial-gradient(50% 48% at 50% 50%, color-mix(in oklab, var(--color-glow) 17%, transparent), color-mix(in oklab, var(--color-lobby-violet) 13%, transparent) 46%, transparent);
    transform: translateX(-50%);
    transition: scale var(--dur-slow) var(--ease-ds-out);
    animation: ds-lobby-open 1700ms var(--ease-ds-out) 120ms both;
  }
  /* the pool of light the open door spills on the floor */
  .ds-lobby__floor {
    inset-block-end: -26vh;
    left: 50%;
    inline-size: max(150vw, 900px);
    block-size: 62vh;
    border-radius: 50%;
    background-image: radial-gradient(closest-side, color-mix(in oklab, var(--color-lobby-violet) 42%, transparent), color-mix(in oklab, var(--color-lobby-orchid) 16%, transparent) 55%, transparent);
    transform: translateX(-50%);
    animation: ds-lobby-pool 2200ms var(--ease-ds-out) 500ms both;
  }
  /* a form on its way: the light leans toward the card */
  .ds-lobby__beam::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(closest-side, color-mix(in oklab, var(--color-glow) 16%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-ds-out);
  }
  .ds-lobby:has([aria-busy="true"]) .ds-lobby__beam {
    scale: 1.18 1;
  }
  .ds-lobby:has([aria-busy="true"]) .ds-lobby__beam::after {
    opacity: 1;
  }
  /* the ledger's ruled lines, under everything, fading out toward the edges */
  .ds-lobby__rules {
    inset: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0 39px, color-mix(in oklab, var(--color-glow) 5%, transparent) 39px 40px);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, var(--color-ink) 10%, transparent 74%);
    animation: ds-lobby-fade 1600ms var(--ease-ds-out) 300ms both;
  }

  .ds-signin__column {
    position: relative;
    display: grid;
    gap: 24px;
    inline-size: 100%;
    max-inline-size: 25rem;
  }

  /* --- the brand: the mark, the wordmark, the line ------------------------------------------------------------------ */
  .ds-lobby__brand {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }
  .ds-lobby__mark {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 60px;
    block-size: 60px;
    margin-block-end: 6px;
    border-radius: 18px;
    background-image: linear-gradient(160deg, var(--color-layer-2), var(--color-lobby-night) 72%);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--color-glow) 30%, transparent),
      inset 0 1px 0 color-mix(in oklab, var(--color-on-layer) 14%, transparent),
      0 16px 44px -10px color-mix(in oklab, var(--color-lobby-violet) 75%, transparent);
    animation: ds-lobby-mark 900ms var(--ease-spring-pop) 80ms both;
  }
  /* the mark's light: it blooms once the rules are drawn, and stays a little */
  .ds-lobby__mark::before {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: 28px;
    background-image: radial-gradient(closest-side, color-mix(in oklab, var(--color-lobby-violet) 60%, transparent), transparent);
    animation: ds-lobby-halo 1800ms var(--ease-ds-out) 1000ms both;
  }
  .ds-lobby__mark-rules {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }
  .ds-lobby__mark-rule {
    fill: none;
    stroke: var(--color-glow);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ds-lobby-draw 620ms var(--ease-ds-out) 420ms forwards;
  }
  .ds-lobby__mark-rule--2 {
    animation-delay: 700ms;
  }
  /* DESIGN.md §2: the wordmark is "morest" in Plex 600 — the product's name stays "Morest" in the text (the browser's
   * title, a screen reader, a copy), drawn lowercase — here lit from above, ink fading into the glow */
  .ds-signin__wordmark {
    margin: 0;
    font-size: var(--text-title-page);
    line-height: var(--text-title-page--line-height);
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    animation: ds-lobby-word 1000ms var(--ease-ds-out) 340ms both;
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .ds-signin__wordmark {
      background-image: linear-gradient(180deg, var(--color-on-layer) 35%, var(--color-glow));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
  .ds-lobby__tagline {
    margin: 0;
    font-size: var(--text-label);
    line-height: var(--text-label--line-height);
    font-weight: 400;
    color: var(--color-ink-3);
    animation: ds-lobby-fade 900ms var(--ease-ds-out) 640ms both;
  }

  /* --- the card: a pane of the night's glass ------------------------------------------------------------------------ */
  .ds-signin__card {
    --ds-lobby-glass: color-mix(in oklab, var(--color-raised) 86%, transparent);
    position: relative;
    display: grid;
    gap: 18px;
    padding: 28px 24px 24px;
    border: 1px solid color-mix(in oklab, var(--color-glow) 16%, transparent);
    border-radius: var(--radius-card);
    background-color: var(--ds-lobby-glass);
    box-shadow: var(--elev-pop), var(--elev-highlight);
    animation: ds-lobby-rise 640ms var(--ease-ds-out) 100ms both;
  }
  /* where a hand and a mouse draw it, the glass blurs the light behind it; a phone keeps the light still behind a pane */
  @media (hover: hover) and (pointer: fine) {
    .ds-signin__card {
      --ds-lobby-glass: color-mix(in oklab, var(--color-raised) 78%, transparent);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
    }
  }
  /* the light along the card's top edge: it opens from the middle on arrival, and runs while a form is on its way */
  .ds-signin__card::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 14%;
    block-size: 1px;
    background-image: linear-gradient(90deg, transparent, var(--color-glow), transparent);
    animation: ds-lobby-edge 1100ms var(--ease-ds-out) 520ms both;
  }
  .ds-signin__card:has([aria-busy="true"])::before {
    animation: ds-lobby-wait 1100ms var(--ease-ds-io) infinite alternate;
  }
  /* the card's own light, from its top */
  .ds-signin__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: radial-gradient(70% 45% at 50% 0%, color-mix(in oklab, var(--color-glow) 9%, transparent), transparent);
    pointer-events: none;
  }
  /* an error shakes the card once — a "no" the eye catches before the words; the same error again (the same address, so
   * nothing re-renders) shakes it again: the waiting button flips `data-attempt` (./islands.tsx) */
  .ds-signin__card:has(> [role="alert"]) {
    animation:
      ds-lobby-rise 640ms var(--ease-ds-out) 100ms both,
      ds-lobby-shake-a 560ms var(--ease-ds-out) 120ms;
  }
  .ds-signin__card[data-attempt="even"]:has(> [role="alert"]) {
    animation:
      ds-lobby-rise 640ms var(--ease-ds-out) 100ms both,
      ds-lobby-shake-b 560ms var(--ease-ds-out);
  }
  .ds-signin__card[data-attempt="odd"]:has(> [role="alert"]) {
    animation:
      ds-lobby-rise 640ms var(--ease-ds-out) 100ms both,
      ds-lobby-shake-c 560ms var(--ease-ds-out);
  }
  /* the card's contents arrive in turn, after it */
  .ds-signin__card > *,
  .ds-signin__form > *,
  .ds-signin__choices > li {
    animation: ds-lobby-in 520ms var(--ease-ds-out) calc(200ms + var(--ds-lobby-i, 0) * 60ms) backwards;
  }
  .ds-signin__card > :nth-child(2),
  .ds-signin__form > :nth-child(1),
  .ds-signin__choices > li:nth-child(1) {
    --ds-lobby-i: 1;
  }
  .ds-signin__card > :nth-child(3),
  .ds-signin__form > :nth-child(2),
  .ds-signin__choices > li:nth-child(2) {
    --ds-lobby-i: 2;
  }
  .ds-signin__card > :nth-child(4),
  .ds-signin__form > :nth-child(3),
  .ds-signin__choices > li:nth-child(3) {
    --ds-lobby-i: 3;
  }
  .ds-signin__card > :nth-child(n + 5),
  .ds-signin__form > :nth-child(n + 4),
  .ds-signin__choices > li:nth-child(n + 4) {
    --ds-lobby-i: 4;
  }

  /* the screen's sign above its title (the second factor's lock) */
  .ds-lobby__glyph {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid color-mix(in oklab, var(--color-glow) 26%, transparent);
    border-radius: 14px;
    background-color: color-mix(in oklab, var(--color-glow) 10%, transparent);
    color: var(--color-glow);
    box-shadow: 0 0 28px -6px color-mix(in oklab, var(--color-lobby-violet) 70%, transparent);
  }
  .ds-signin__title {
    margin: 0;
    font-size: var(--text-title-pane);
    line-height: 1.25;
    font-weight: 500;
    color: var(--color-ink);
  }

  /* one sentence: the error (an alert) or the notice (a status), its mark before its words — never colour alone */
  .ds-signin__line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: var(--text-body);
    line-height: 1.5;
    font-weight: 500;
  }
  .ds-signin__line > .ds-icon {
    flex: none;
    margin-block-start: 3px;
  }
  .ds-signin__line--down {
    border-color: color-mix(in oklab, var(--color-down) 28%, transparent);
    background-color: var(--color-down-wash);
    color: var(--color-down);
  }
  .ds-signin__line--up {
    border-color: color-mix(in oklab, var(--color-up) 28%, transparent);
    background-color: var(--color-up-wash);
    color: var(--color-up);
  }

  /* --- the form ---------------------------------------------------------------------------------------------------- */
  .ds-signin__form {
    display: grid;
    gap: 16px;
  }
  .ds-signin__field .ds-field__label {
    color: var(--color-ink-2);
    transition: color var(--dur-fast) var(--ease-ds-out);
  }
  .ds-signin__field:focus-within .ds-field__label {
    color: var(--color-glow);
  }
  /* 16 px in every field: Safari zooms into anything smaller */
  .ds-lobby :is(.ds-signin__input, .ds-acct__input) {
    inline-size: 100%;
    block-size: 48px;
    min-block-size: 44px;
    padding-inline: 14px;
    border: 1px solid color-mix(in oklab, var(--color-glow) 20%, transparent);
    border-radius: 12px;
    background-color: color-mix(in oklab, var(--color-lobby-deep) 42%, transparent);
    color: var(--color-ink);
    caret-color: var(--color-glow);
    font-size: calc(var(--text-body) * 16 / 15);
    transition:
      border-color var(--dur-fast) var(--ease-ds-out),
      background-color var(--dur-base) var(--ease-ds-out),
      box-shadow var(--dur-base) var(--ease-ds-out);
  }
  .ds-lobby :is(.ds-signin__input, .ds-acct__input):hover {
    border-color: color-mix(in oklab, var(--color-glow) 38%, transparent);
  }
  /* chosen: the edge lights up, a ring of the glow around it, and the violet light gathers under it */
  .ds-lobby :is(.ds-signin__input, .ds-acct__input):focus-visible {
    outline: none;
    border-color: var(--color-glow);
    background-color: color-mix(in oklab, var(--color-lobby-deep) 72%, transparent);
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--color-glow) 26%, transparent),
      0 8px 36px -8px color-mix(in oklab, var(--color-lobby-violet) 80%, transparent);
  }
  /* a browser's autofill paints its own pale ground: kept to the night, the words in ink */
  .ds-lobby :is(.ds-signin__input, .ds-acct__input):-webkit-autofill {
    -webkit-text-fill-color: var(--color-ink);
    box-shadow: inset 0 0 0 40px var(--color-raised);
    transition: background-color 600s step-end;
  }
  .ds-lobby :is(.ds-signin__input, .ds-acct__input):-webkit-autofill:focus-visible {
    box-shadow:
      inset 0 0 0 40px var(--color-raised),
      0 0 0 3px color-mix(in oklab, var(--color-glow) 26%, transparent);
  }
  /* the second factor's code: a figure read back from the authenticator — large, spaced, centred */
  .ds-lobby .ds-lobby__code {
    block-size: 60px;
    padding-inline-start: calc(14px + 0.3em);
    font-size: var(--text-figure-m);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* the password's reveal, once the page is live: a 44-px target inside the field's left end (the typed text runs
   * left to right, so the field gives it its room there) */
  .ds-lobby__secret {
    position: relative;
  }
  .ds-lobby .ds-lobby__secret[data-live] .ds-signin__input {
    padding-left: 52px;
  }
  .ds-lobby .ds-lobby__reveal {
    position: absolute;
    inset-block-end: 2px;
    left: 2px;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 10px;
    color: var(--color-ink-3);
    animation: ds-lobby-fade var(--dur-base) var(--ease-ds-out) both;
  }
  .ds-lobby .ds-lobby__reveal:hover {
    background-color: color-mix(in oklab, var(--color-glow) 10%, transparent);
    color: var(--color-ink);
  }
  .ds-lobby .ds-lobby__reveal[aria-pressed="true"] {
    background-color: transparent;
    color: var(--color-glow);
  }
  .ds-lobby .ds-lobby__reveal:focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: -4px;
  }

  /* what a screen reader hears while the form is on its way: out of the form's flow */
  .ds-lobby__status {
    position: absolute;
  }

  /* --- the one action: the glow, lit from its far side; it catches the light under a hand ------------------------ */
  .ds-signin__submit {
    inline-size: 100%;
    min-block-size: 44px;
    justify-content: center;
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary) {
    position: relative;
    overflow: hidden;
    block-size: 48px;
    margin-block-start: 4px;
    border: 0;
    border-radius: 12px;
    background-color: var(--color-glow);
    background-image: linear-gradient(120deg, var(--color-glow) 20%, var(--color-lobby-orchid-light));
    color: var(--color-on-brand);
    font-size: var(--text-body);
    font-weight: 600;
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--color-on-layer) 55%, transparent),
      0 0 0 1px color-mix(in oklab, var(--color-glow) 40%, transparent),
      0 14px 34px -12px color-mix(in oklab, var(--color-lobby-violet) 90%, transparent);
    transition:
      transform var(--dur-press) var(--ease-ds-out),
      box-shadow var(--dur-base) var(--ease-ds-out);
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary):hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--color-on-layer) 60%, transparent),
      0 0 0 1px color-mix(in oklab, var(--color-glow) 60%, transparent),
      0 18px 44px -12px var(--color-lobby-violet);
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary):active {
    transform: translateY(0) scale(0.98);
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary):focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: 3px;
  }
  /* the sheen: a band of light crossing the button the way the line reads, once per hover */
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary)::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(100deg, transparent 35%, color-mix(in oklab, var(--color-on-layer) 60%, transparent) 50%, transparent 65%);
    transform: translateX(115%);
    pointer-events: none;
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary):hover::after {
    transform: translateX(-115%);
    transition: transform 900ms var(--ease-ds-out);
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary) .ds-btn__label {
    position: relative;
  }
  /* waiting: the words stay, the mark's double rule runs before them (it replaces the ring) */
  .ds-lobby .ds-lobby__submit.ds-btn--busy {
    opacity: 1;
    transform: none;
  }
  .ds-lobby .ds-lobby__submit .ds-btn__spin {
    position: relative;
    inline-size: 18px;
    block-size: 10px;
    border: 0;
    border-radius: 0;
    animation: none;
  }
  .ds-lobby .ds-lobby__submit .ds-btn__spin::before,
  .ds-lobby .ds-lobby__submit .ds-btn__spin::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    block-size: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transform-origin: right;
    animation: ds-lobby-rule 1000ms var(--ease-ds-io) infinite;
  }
  .ds-lobby .ds-lobby__submit .ds-btn__spin::before {
    inset-block-start: 1px;
    inline-size: 18px;
  }
  .ds-lobby .ds-lobby__submit .ds-btn__spin::after {
    inset-block-start: 7px;
    inline-size: 12px;
    animation-delay: 140ms;
  }

  /* --- the ways out under the card ---------------------------------------------------------------------------------- */
  .ds-signin__aside {
    display: flex;
    justify-content: center;
    animation: ds-lobby-fade 700ms var(--ease-ds-out) 700ms both;
  }
  .ds-signin__quiet-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 8px;
    color: var(--color-ink-2);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--color-glow) 32%, transparent);
    text-underline-offset: 5px;
    transition:
      color var(--dur-fast),
      text-decoration-color var(--dur-fast);
  }
  .ds-signin__quiet-link:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-glow);
  }
  .ds-lobby .ds-signin__quiet-button {
    min-block-size: 44px;
  }
  .ds-lobby :is(.ds-signin__quiet-link, .ds-signin__quiet-button, .ds-signin__choice):focus-visible {
    outline: 2px solid var(--color-glow);
    outline-offset: 2px;
  }

  /* --- the restaurant picker: each restaurant a row of the glass, its initial on a night tile ------------------- */
  .ds-signin__choices {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ds-lobby .ds-signin__choice {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 64px;
    padding: 10px 12px;
    justify-content: flex-start;
    gap: 14px;
    border: 1px solid color-mix(in oklab, var(--color-glow) 12%, transparent);
    border-radius: 14px;
    background-color: color-mix(in oklab, var(--color-wash) 70%, transparent);
    font-size: var(--text-body);
    text-align: start;
    white-space: normal;
    transition:
      border-color var(--dur-fast) var(--ease-ds-out),
      background-color var(--dur-fast) var(--ease-ds-out),
      transform var(--dur-press) var(--ease-ds-out);
  }
  .ds-lobby .ds-signin__choice:hover {
    border-color: color-mix(in oklab, var(--color-glow) 42%, transparent);
    background-color: var(--color-wash-2);
  }
  .ds-signin__choice .ds-btn__label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 14px;
    min-inline-size: 0;
  }
  .ds-lobby__initial {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid color-mix(in oklab, var(--color-glow) 22%, transparent);
    border-radius: 12px;
    background-image: linear-gradient(160deg, var(--color-layer-2), var(--color-lobby-night));
    color: var(--color-glow);
    font-weight: 600;
    transition: box-shadow var(--dur-base) var(--ease-ds-out);
  }
  .ds-signin__choice:hover .ds-lobby__initial {
    box-shadow: 0 0 24px -4px color-mix(in oklab, var(--color-lobby-violet) 80%, transparent);
  }
  .ds-lobby__choice-name {
    flex: 1;
    min-inline-size: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
  }
  .ds-lobby__choice-go {
    flex: none;
    color: var(--color-ink-3);
    transition:
      transform var(--dur-base) var(--ease-spring),
      color var(--dur-fast);
  }
  .ds-signin__choice:hover .ds-lobby__choice-go {
    color: var(--color-glow);
    transform: translateX(-4px);
  }

  /* --- the invitation: which restaurant, which role ------------------------------------------------------------------ */
  .ds-signin__invited {
    display: grid;
    gap: 4px;
    justify-items: start;
  }
  .ds-signin__quiet {
    margin: 0;
    color: var(--color-ink-2);
    font-size: var(--text-label);
    line-height: var(--text-label--line-height);
  }
  .ds-signin__restaurant {
    margin: 0;
    font-size: var(--text-title-pane);
    line-height: 1.25;
    font-weight: 600;
  }
  .ds-lobby__role {
    margin: 6px 0 0;
    padding: 4px 12px;
    border: 1px solid color-mix(in oklab, var(--color-glow) 24%, transparent);
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--color-glow) 10%, transparent);
    color: var(--color-glow);
    font-size: var(--text-label);
    line-height: var(--text-label--line-height);
    font-weight: 500;
  }

  /* --- the person's own pages while no restaurant is open (the enrolment, the backup codes): the same room ------- */
  .ds-acct.ds-lobby {
    position: relative;
    isolation: isolate;
    background-color: var(--color-lobby-deep);
  }
  .ds-acct.ds-lobby .ds-acct__bar {
    border-block-end-color: color-mix(in oklab, var(--color-glow) 10%, transparent);
    background-color: color-mix(in oklab, var(--color-lobby-deep) 72%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .ds-acct.ds-lobby .ds-acct__wordmark {
    text-transform: lowercase;
  }
  .ds-acct.ds-lobby .ds-acct__card {
    position: relative;
    border-color: color-mix(in oklab, var(--color-glow) 16%, transparent);
    background-color: color-mix(in oklab, var(--color-raised) 86%, transparent);
    box-shadow: var(--elev-pop), var(--elev-highlight);
    animation: ds-lobby-rise 700ms var(--ease-ds-out) 120ms both;
  }
  .ds-acct.ds-lobby .ds-acct__card::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 14%;
    block-size: 1px;
    background-image: linear-gradient(90deg, transparent, var(--color-glow), transparent);
    animation: ds-lobby-edge 1100ms var(--ease-ds-out) 420ms both;
  }

  @media (max-width: 480px) {
    .ds-signin__column {
      gap: 20px;
    }
    .ds-signin__card {
      padding: 24px 18px 20px;
    }
    .ds-lobby__mark {
      inline-size: 48px;
      block-size: 48px;
      border-radius: 14px;
    }
  }

  /* --- less transparency: the glass turns solid ---------------------------------------------------------------- */
  @media (prefers-reduced-transparency: reduce) {
    .ds-signin__card,
    .ds-acct.ds-lobby .ds-acct__card {
      --ds-lobby-glass: var(--color-raised);
      background-color: var(--color-raised);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  /* --- forced colours: the focus the glow drew is the system's ring ------------------------------------------- */
  @media (forced-colors: active) {
    .ds-lobby :is(.ds-signin__input, .ds-acct__input):focus-visible {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }
  }

  /* --- the keyframes -------------------------------------------------------------------------------------------------- */
  @keyframes ds-lobby-fade {
    from {
      opacity: 0;
    }
  }
  @keyframes ds-lobby-dawn {
    from {
      opacity: 0;
      transform: scale(0.82);
    }
  }
  @keyframes ds-lobby-drift-a {
    to {
      transform: translate3d(9vmax, 7vmax, 0) scale(1.12);
    }
  }
  @keyframes ds-lobby-drift-b {
    to {
      transform: translate3d(-8vmax, -9vmax, 0) scale(1.08);
    }
  }
  @keyframes ds-lobby-drift-c {
    to {
      transform: translate3d(-12vmax, 6vmax, 0) scale(1.2);
    }
  }
  @keyframes ds-lobby-open {
    from {
      opacity: 0;
      transform: translateX(-50%) scaleX(0.03);
    }
    35% {
      opacity: 1;
    }
  }
  @keyframes ds-lobby-pool {
    from {
      opacity: 0;
      transform: translateX(-50%) scaleX(0.4);
    }
  }
  @keyframes ds-lobby-mark {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
  }
  @keyframes ds-lobby-halo {
    from {
      opacity: 0;
      transform: scale(0.7);
    }
    40% {
      opacity: 1;
      transform: scale(1.15);
    }
    to {
      opacity: 0.45;
      transform: scale(1);
    }
  }
  @keyframes ds-lobby-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes ds-lobby-word {
    from {
      opacity: 0;
      letter-spacing: 0.22em;
      filter: blur(6px);
    }
  }
  @keyframes ds-lobby-rise {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.985);
    }
  }
  @keyframes ds-lobby-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
  @keyframes ds-lobby-edge {
    from {
      opacity: 0;
      transform: scaleX(0);
    }
  }
  @keyframes ds-lobby-wait {
    from {
      opacity: 0.25;
      transform: scaleX(0.4);
    }
  }
  @keyframes ds-lobby-rule {
    0% {
      transform: scaleX(0);
    }
    45%,
    60% {
      transform: scaleX(1);
      opacity: 1;
    }
    100% {
      transform: scaleX(1);
      opacity: 0;
    }
  }
  /* three names for one shake, so a second and a third error each play it from the start */
  @keyframes ds-lobby-shake-a {
    15% {
      transform: translateX(-9px);
    }
    35% {
      transform: translateX(7px);
    }
    55% {
      transform: translateX(-4px);
    }
    75% {
      transform: translateX(2px);
    }
  }
  @keyframes ds-lobby-shake-b {
    15% {
      transform: translateX(-9px);
    }
    35% {
      transform: translateX(7px);
    }
    55% {
      transform: translateX(-4px);
    }
    75% {
      transform: translateX(2px);
    }
  }
  @keyframes ds-lobby-shake-c {
    15% {
      transform: translateX(-9px);
    }
    35% {
      transform: translateX(7px);
    }
    55% {
      transform: translateX(-4px);
    }
    75% {
      transform: translateX(2px);
    }
  }
}

/* --- less motion: every travel goes, the fades stay, the light holds still (DESIGN.md §3.5). Twice, word for word: the
 * device's preference, and the reader's own choice on the root (`data-motion`, @/lib/motion-choice). --- */
@media (prefers-reduced-motion: reduce) {
  .ds-lobby .ds-lobby__light,
  .ds-lobby .ds-lobby__rules,
  .ds-lobby .ds-lobby__beam,
  .ds-lobby .ds-lobby__floor,
  .ds-lobby .ds-lobby__mark,
  .ds-lobby .ds-lobby__mark::before,
  .ds-lobby .ds-signin__wordmark,
  .ds-lobby .ds-signin__card,
  .ds-lobby .ds-signin__card::before,
  .ds-lobby .ds-acct__card,
  .ds-lobby .ds-acct__card::before,
  .ds-lobby :is(.ds-signin__card, .ds-signin__form) > *,
  .ds-lobby .ds-signin__choices > li {
    animation-name: ds-lobby-fade;
    animation-iteration-count: 1;
  }
  .ds-lobby .ds-lobby__mark::before {
    opacity: 0.45;
  }
  .ds-lobby .ds-lobby__mark-rule {
    animation: ds-lobby-fade 400ms var(--ease-ds-out) 200ms both;
    stroke-dashoffset: 0;
  }
  .ds-lobby .ds-signin__card:has([aria-busy="true"])::before {
    animation: none;
  }
  .ds-lobby .ds-lobby__submit .ds-btn__spin::before,
  .ds-lobby .ds-lobby__submit .ds-btn__spin::after {
    transform: none;
    animation-name: ds-lobby-fade;
    animation-direction: alternate;
  }
  .ds-lobby :is(.ds-lobby__submit, .ds-acct__submit.ds-btn--primary):hover::after {
    transition: none;
  }
  .ds-lobby .ds-signin__choice:hover .ds-lobby__choice-go {
    transform: none;
  }
}
:root[data-motion="reduced"] .ds-lobby .ds-lobby__light,
:root[data-motion="reduced"] .ds-lobby .ds-lobby__rules,
:root[data-motion="reduced"] .ds-lobby .ds-lobby__beam,
:root[data-motion="reduced"] .ds-lobby .ds-lobby__floor,
:root[data-motion="reduced"] .ds-lobby .ds-lobby__mark,
:root[data-motion="reduced"] .ds-lobby .ds-lobby__mark::before,
:root[data-motion="reduced"] .ds-lobby .ds-signin__wordmark,
:root[data-motion="reduced"] .ds-lobby .ds-signin__card,
:root[data-motion="reduced"] .ds-lobby .ds-signin__card::before,
:root[data-motion="reduced"] .ds-lobby .ds-acct__card,
:root[data-motion="reduced"] .ds-lobby .ds-acct__card::before,
:root[data-motion="reduced"] .ds-lobby :is(.ds-signin__card, .ds-signin__form) > *,
:root[data-motion="reduced"] .ds-lobby .ds-signin__choices > li {
  animation-name: ds-lobby-fade;
  animation-iteration-count: 1;
}
:root[data-motion="reduced"] .ds-lobby .ds-lobby__mark::before {
  opacity: 0.45;
}
:root[data-motion="reduced"] .ds-lobby .ds-lobby__mark-rule {
  animation: ds-lobby-fade 400ms var(--ease-ds-out) 200ms both;
  stroke-dashoffset: 0;
}
:root[data-motion="reduced"] .ds-lobby .ds-signin__card:has([aria-busy="true"])::before {
  animation: none;
}
:root[data-motion="reduced"] .ds-lobby .ds-lobby__submit .ds-btn__spin::before,
:root[data-motion="reduced"] .ds-lobby .ds-lobby__submit .ds-btn__spin::after {
  transform: none;
  animation-name: ds-lobby-fade;
  animation-direction: alternate;
}
:root[data-motion="reduced"] .ds-lobby .ds-lobby__submit:hover::after {
  transition: none;
}
:root[data-motion="reduced"] .ds-lobby .ds-signin__choice:hover .ds-lobby__choice-go {
  transform: none;
}
/* a scroll's overshoot shows the night, not the old kit's grey (the old kit's `body` rule is unlayered, and so is this) */
body:has(.ds-lobby) {
  background-color: var(--color-lobby-deep);
}