/*
 * ============================================================================
 * THE FRONT DOOR — the shell redesign, 2026-09 (front-door workstream)
 * ============================================================================
 *
 * The landing, the shelf's rows, the join screen's words, the "You" page, the
 * header's You door and the note a room shows after joining from a remembered
 * name. `docs/redesign-2026-09.md` is the brief; `docs/design.md` is still the
 * law for ink, surfaces, contrast and controls, and nothing here introduces a
 * colour — every value is a token from `tokens.css`.
 *
 * A file of its own, linked after `components.css`, rather than a block inside
 * it: the room workstream is restyling the room in that file at the same time,
 * and two people appending to one 13,000-line sheet is how a class gets taken
 * over by a newcomer (`a-class-keeps-its-position.test.ts` has the story). The
 * old front-door rules in `components.css` (`.portal-*`, `.catalogue`,
 * `.game-card`, `.finder-*`) are left where they are: the room's picker still
 * builds `.catalogue .game-card` from them. This file's selectors carry an
 * `.fd` class or an `.fd-*` / `.you-*` name, and where they meet an older
 * rule of the same specificity they win by coming later.
 *
 * Three rules this file keeps, because the guards read them:
 *   - every `:hover` is inside `@media (hover: hover)`, and every control that
 *     has one has an `:active` too (`hover-is-guarded.test.ts`);
 *   - no `color:` names a surface token (`ink-is-not-ground.test.ts`), and a
 *     raised `--panel` surface carries `--dim: var(--dim-lift)` so its quiet
 *     ink is cut against the panel and not the table;
 *   - a row that wraps is never also a column (`a-column-does-not-wrap`): where
 *     a layout changes axis, it is a grid.
 */

/* ------------------------------------------------------------ the rail */

/*
 * YOU — the header's door to the page about the person. A disc with the
 * name's initials and the word, because a disc alone is a guess.
 *
 * The drawn object stays the rail's size and the target is `--tap-min`, the
 * same overlay the lamps it replaced used: nothing in the rail grows.
 */
.door--you {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  transition: color var(--fast) var(--ease);
}

.door--you::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, var(--tap-min));
  height: var(--tap-min);
  transform: translate(-50%, -50%);
}

.door-you-mark {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-chip);
  background: var(--cardback);
  color: var(--cardback-ink);
  border: var(--rim-hair) solid var(--rim);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

/* No name yet: an empty ring, drawn in the rail's own ink. */
.door-you-mark[data-empty="true"] {
  background: transparent;
  color: inherit;
  border: 1.5px dashed currentColor;
}

@media (hover: hover) {
  .door--you:hover {
    color: var(--on-table-strong);
  }
}

.door--you:active {
  color: var(--on-table-strong);
}

.door--you[data-here="true"] {
  color: var(--on-table-strong);
}

.door--you[data-here="true"] .door-you-mark {
  outline: 2px solid var(--flourish);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ the hero */

/*
 * THE HEADLINE, THE PROMISE, AND THE WAY IN WITH A CODE.
 *
 * One column, left-aligned on the page's own edge. The headline is the
 * platform's and it no longer counts the games — the shelf underneath says how
 * many by being a shelf, and "59" was the first word a visitor read. One line
 * at a desk, two on a phone.
 */
.fd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s6) var(--s5) var(--s5);
}

.fd-pitch {
  display: grid;
  gap: var(--s3);
}

.fd .fd-title {
  font-size: clamp(1.75rem, 3.7vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: none;
  color: var(--on-table-strong);
}

.fd .fd-lead {
  max-width: 40rem;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--on-table);
}

/*
 * THE ONE DOOR THAT IS NOT A GAME. "Play a game" stood beside it until
 * 2026-09-23; the shelf under the hero is that door, and it needs no button
 * that only scrolls to it (`screens.js`, `portalHero`).
 */
.fd-doors {
  display: grid;
  gap: var(--s3);
  grid-template-columns: minmax(0, 27rem);
  justify-content: start;
  align-items: start;
}

/*
 * JOIN WITH A CODE — one object: the words, the field and the button in one
 * rimmed tray. The field is cut into it (`--table`, a shade into the panel),
 * so it reads as the place to type.
 */
.fd-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  min-width: 0;
}

/*
 * FOLDED UNTIL IT IS WANTED (2026-09-23): one button in the tray's place, and
 * the tray only once it is pressed (`screens.js`, `joinShortcut`). The class
 * gives the form a `display`, so `[hidden]` needs its own rule to win.
 */
.fd-join[hidden] {
  display: none;
}

.fd-join-door {
  display: grid;
  justify-items: start;
  min-width: 0;
}

.fd-join-door > .fd-join {
  justify-self: stretch;
}

.fd .fd-join-open {
  min-height: 3rem;
  padding-inline: var(--s5);
}

.fd-join-row {
  --dim: var(--dim-lift);
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 3.5rem;
  padding: var(--s1) var(--s1) var(--s1) var(--s4);
  background: var(--panel);
  border: var(--rim-w) solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--glaze-line), var(--lift-xs);
}

.fd-join-label {
  flex: none;
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--on-table-strong);
  white-space: nowrap;
}

.fd-code {
  flex: 1 1 6.5rem;
  width: 6.5rem;
  min-width: 0;
  height: var(--tap-min);
  padding: 0 var(--s3);
  background: var(--table);
  border: var(--hair-strong);
  border-radius: var(--r-control);
  box-shadow: inset 0 2px 3px 0 rgb(8 22 29 / 0.1);
  color: var(--on-table-strong);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*
 * THE HINT IS OBVIOUSLY A HINT: lighter than typed text, and "ABC123" can
 * never be a code (a 1 is not in the alphabet). `--dimmer` on a placeholder is
 * the one use of that token `ink-is-not-ground` licenses.
 */
.fd-code::placeholder {
  color: var(--dimmer);
  letter-spacing: 0.16em;
}

.fd-code[aria-invalid="true"] {
  border-color: var(--stamp);
  box-shadow: 0 0 0 1px var(--stamp);
}

.fd-join-go {
  flex: none;
  border-radius: var(--r-control);
  padding-inline: var(--s4);
}

/* The refusal, where the eye already is: under the field that refused. */
.fd-join-error:empty {
  display: none;
}

.fd-join-error {
  padding-left: var(--s4);
  border-left: 3px solid var(--stamp);
  color: var(--on-table-strong);
  font-size: var(--t-small);
}

/* The rooms this device has sat in: a quiet row under the two doors. */
.fd-rooms {
  display: grid;
  gap: var(--s2);
}

.fd-rooms-say {
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--on-table);
}

/*
 * A kept room is a small raised tile — its name or code, when it was, and who
 * is there now — with Name and Forget beside it. Not a full-width slab: it is
 * a shortcut under the two doors, not a third door.
 */
.fd-rooms .portal-tables-list {
  gap: var(--s2) var(--s4);
}

.fd-rooms .portal-table {
  flex: 0 1 auto;
  grid-template-columns: auto auto auto;
}

.fd-rooms .portal-table-go {
  --dim: var(--dim-lift);
  min-width: 11rem;
  background: var(--panel);
  color: var(--on-table-strong);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  box-shadow: var(--lift-xs);
}

@media (hover: hover) {
  .fd-rooms .portal-table-go:hover {
    background: var(--panel);
    border-color: var(--rim);
  }
}

.fd-rooms .portal-table-go:active {
  background: var(--panel-soft);
  box-shadow: none;
}

/* ------------------------------------------------------------ the shelf */

.fd-shelf {
  display: grid;
  /* One column that may not be pushed wider than the page by anything in it:
     an implicit `auto` track grows to the widest child's min-content, and a
     narrowed finder's count took the whole shelf past a phone's edge. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) var(--s5) var(--s6);
  scroll-margin-top: var(--s3);
}

.fd-shelf:focus {
  outline: none;
}

/*
 * THE FINDER: "How many of you?" as a row of chips, and everything else behind
 * one button. A hairline above it, so the shelf starts somewhere.
 */
.fd-find {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: var(--hair);
}

.fd-seats {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.fd-seats-say {
  flex: none;
  font-weight: 600;
  color: var(--on-table-strong);
  white-space: nowrap;
}

.fd-chips {
  display: flex;
  gap: 0.375rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* Room for the focus ring and the press, which a scroller would clip. */
  padding: 4px 2px;
  margin: -4px -2px;
}

.fd-chips::-webkit-scrollbar {
  display: none;
}

.fd-chip {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: var(--tap-min);
  height: var(--tap-min);
  padding: 0 var(--s3);
  background: transparent;
  border: var(--rim-hair) solid var(--rule-strong);
  border-radius: var(--r-control);
  color: var(--on-table-strong);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
    transform var(--press) var(--ease);
}

@media (hover: hover) {
  .fd-chip:hover {
    background: var(--panel);
    border-color: var(--rim);
  }
}

.fd-chip:active {
  background: var(--panel-soft);
  transform: translateY(1px);
}

/* The answer given. The primary pair, which the house guarantees at 4.5:1. */
.fd-chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.fd-find-end {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.fd-count {
  color: var(--dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fd .fd-clear {
  min-height: var(--tap-min);
  white-space: nowrap;
}

.fd-more {
  border-radius: var(--r-control);
  padding-inline: var(--s4);
}

/* An answer is set behind the button: say so on the button. */
.fd-more[data-active="true"]::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--r-pill);
  background: var(--flourish);
}

.fd-more-panel {
  --dim: var(--dim-lift);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
  gap: var(--s3) var(--s4);
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
}

.fd-field {
  display: grid;
  gap: var(--s1);
  min-width: 0;
}

.fd-field-say {
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--on-table-strong);
}

.fd .fd-search,
.fd .fd-kind {
  min-height: var(--tap-min);
  padding: var(--s2) var(--s3);
  background: var(--table);
  border: var(--rim-hair) solid var(--rim);
}

.fd .fd-surprise {
  justify-self: start;
  border-radius: var(--r-control);
}

.fd-empty:empty {
  display: none;
}

.fd-empty {
  margin: 0;
  padding: var(--s4);
  border-left: 3px solid var(--flourish);
  background: var(--panel);
  color: var(--on-table-strong);
}

/* ---- the groups and the rows ---- */

.fd-group {
  display: grid;
  gap: var(--s3);
}

.fd-group + .fd-group {
  margin-top: var(--s3);
}

.fd-group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
}

.fd-group-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--on-table-strong);
}

.fd-group-note {
  font-size: var(--t-small);
  color: var(--dim);
}

.fd-group-link {
  color: var(--on-table-strong);
  text-underline-offset: 0.2em;
}

/*
 * THE BOXES ARE THE `.catalogue`'S — 2026-09-23.
 *
 * For a day the shelf was rows here: a 6rem picture, the words, and a Play pill
 * at the end of each. The owner's verdict was the box "too small, I liked the
 * old better" and Play "repeated all over the screen", so the list is a
 * `.catalogue` again and the box is `components.css`'s `.game-card`, which the
 * room's picker had kept alive: the picture across the top, the name with its
 * two facts, one line — two to five across by width, a strip on a phone.
 * This keeps only what a `<ul>` brings that the grid does not want.
 */
.fd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------- the foot */

/*
 * THE FOOT: the other ways in, said once, after the games — a recess into the
 * ground (`--table-deep`) rather than another box on the shelf.
 */
.fd-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--s3);
  margin: 0 var(--s5) var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--table-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
}

@media (min-width: 48rem) {
  .fd-foot {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: end;
  }
}

.fd-foot-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.fd-foot-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  font-size: var(--t-small);
}

.fd-foot-modes a {
  color: var(--dim);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  .fd-foot-modes a:hover {
    color: var(--on-table-strong);
    text-decoration-color: currentColor;
  }
}

.fd-foot-modes a:active {
  color: var(--on-table-strong);
}

.fd-foot-sep {
  color: var(--dimmer);
}

/* ------------------------------------------------------- phone, and short */

@media (max-width: 599px) {
  .fd-hero {
    gap: var(--s3);
    padding: var(--s4) var(--s4) var(--s3);
  }

  .fd-join-row {
    min-height: 3.25rem;
  }

  .fd .fd-lead {
    font-size: var(--t-body);
  }

  .fd-shelf {
    padding: var(--s2) var(--s4) var(--s5);
  }

  /*
   * The question on its own line and the chips under it; the filter button
   * beside the question. The chips run the width that is left — six of the
   * ten on the glass and the rest a sideways flick away, the edge fading to
   * say so. The count appears only once it has narrowed the shelf.
   */
  .fd-find {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: var(--s2);
    padding-top: var(--s3);
  }

  .fd-seats {
    grid-column: 1;
    grid-row: 1;
  }

  /* The end of the bar comes apart on a phone: the filter button beside the
     question, the count and Clear on a line of their own once there is
     something to count — never beside the chips, where they cost the chips
     their width. */
  .fd-find-end {
    display: contents;
  }

  .fd-more {
    grid-column: 2;
    grid-row: 1;
  }

  .fd-count,
  .fd .fd-clear {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .fd-count {
    align-self: center;
  }

  .fd .fd-clear {
    justify-self: end;
  }

  .fd-seats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }

  .fd-seats-say {
    font-size: var(--t-small);
    line-height: var(--tap-min);
    height: var(--tap-min);
  }

  .fd-chips {
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }

  .fd-find-end {
    gap: var(--s2);
  }

  .fd-count[data-narrowed="false"] {
    display: none;
  }

  .fd-more {
    padding-inline: var(--s3);
  }

  .fd-more span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fd-foot {
    margin: 0 var(--s4) var(--s5);
    padding: var(--s4);
  }

  /* The two links wrap onto a line each here, and a dot left at the end of
     the first line separates nothing. Their underlines already part them. */
  .fd-foot-sep {
    display: none;
  }
}

/*
 * On the narrowest phones the words go above the field and the button beside
 * it, inside the same object: in one line the field would have to give up the
 * width its own hint needs ("ABC123", about 97px), and a hint cut in half is
 * the fault the hint exists to avoid.
 */
@media (max-width: 24rem) {
  .fd-join-row {
    flex-wrap: wrap;
    row-gap: var(--s1);
    padding: var(--s2) var(--s2) var(--s2) var(--s3);
    border-radius: var(--r-field);
  }

  .fd-join-label {
    flex-basis: 100%;
    padding-top: 2px;
  }
}

@media (max-height: 560px) and (min-width: 600px) {
  .fd-hero {
    gap: var(--s3);
    padding-top: var(--s4);
  }
}

/* ------------------------------------------------------ after a join */

/*
 * "IN AS ERIK · NOT YOU? CHANGE NAME" — fixed at the top of the glass, over
 * the room's own chrome and never over its foot, for a few seconds after a
 * room was joined from the remembered name. Above the sheet (90), under the
 * reconnecting banner (200).
 */
.fd-arrival {
  --dim: var(--dim-lift);
  position: fixed;
  /* Below the strip a room keeps its own top controls in (a rail, or a game
     band's corner buttons), over whatever picture is under that. */
  top: calc(var(--safe-t) + 4.5rem);
  left: var(--s3);
  right: var(--s3);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: fit-content;
  max-width: calc(100vw - 2 * var(--s3));
  margin-inline: auto;
  padding: var(--s1) var(--s1) var(--s1) var(--s2);
  background: var(--panel);
  color: var(--on-table-strong);
  border: var(--rim-w) solid var(--rim);
  border-radius: var(--r-panel);
  box-shadow: var(--glaze-line), var(--lift);
  font-size: var(--t-small);
  animation: fd-arrive var(--slow) var(--ease) both;
}

/* A lobby's note, never a game's: until the room says it is waiting it is not
   drawn, so it cannot stand over a control a round has put on the glass. The
   script closes it for good when the round starts (`showArrival`). */
:root:not([data-lobby="true"]) .fd-arrival {
  display: none;
}

@keyframes fd-arrive {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

.fd-arrival-mark {
  border-radius: var(--r-chip);
}

/* The name gives way before the way to change it does. */
.fd-arrival-say {
  display: flex;
  gap: 0.3em;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.fd-arrival-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 420px) {
  .fd-arrival-mark {
    display: none;
  }

  .fd-arrival {
    padding-left: var(--s3);
  }
}

/* On a phone the room's band — the game's name — fills the top of the glass,
   so the note sits low instead: above the bar a room keeps its Start in,
   over the settings rather than over the name of the game. ABOVE it, not
   across its rim: the bar's height is the game's (one line of prompt or two),
   and `room.js` publishes it as `--stage-foot` (the bar's own padding already
   holds the safe area); a fixed 6.5rem left the note straddling a 127px bar
   at 390×844. */
@media (max-width: 599px) {
  .fd-arrival {
    top: auto;
    bottom: calc(max(var(--safe-b), var(--stage-foot, 6.5rem)) + var(--s2));
  }

  @keyframes fd-arrive {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }
}

.fd .fd-arrival-change,
.fd-arrival .fd-arrival-change {
  flex: none;
  min-height: var(--tap-min);
  padding-block: 0;
  font-size: var(--t-small);
  color: var(--on-table-strong);
  border-bottom-color: var(--on-table);
}

.fd-arrival-close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-control);
  color: var(--dim);
  font-size: 1rem;
  cursor: pointer;
}

@media (hover: hover) {
  .fd-arrival-close:hover {
    color: var(--on-table-strong);
    background: var(--panel-soft);
  }
}

.fd-arrival-close:active {
  color: var(--on-table-strong);
  transform: translateY(1px);
}

/* ------------------------------------------------------ the join screen */

/*
 * The host's own room says "Your room is ready." and asks for a name; nobody
 * is asked "Not this room?" about a room they just made. The screen's layout
 * is still `.join` in `components.css`; only the words and the button moved.
 */
.fd-join-screen .join-form .btn--primary {
  max-width: none;
}

/* ------------------------------------------------------------- "You" */

/*
 * ONE COLUMN, THREE SHORT SECTIONS: your name, how the room looks, your
 * record. Each a raised panel, so its quiet ink takes the panel's cut.
 */
.you {
  display: grid;
  gap: var(--s4);
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding: var(--s6) var(--s5) var(--s7);
}

.you-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--on-table-strong);
}

.you-card {
  --dim: var(--dim-lift);
  display: grid;
  gap: var(--s3);
  min-width: 0;
  padding: var(--s5);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--lift-xs);
}

/* `.record` is a page of its own in `components.css`; inside "You" it is one
   of the cards, so it gives up the page's column and gutter. */
.you .record {
  max-width: none;
  margin: 0;
  padding: var(--s5);
  gap: var(--s3);
}

.you-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--on-table-strong);
}

.you-sub {
  padding: 0;
  font-weight: 600;
  color: var(--on-table-strong);
}

.you-note {
  font-size: var(--t-small);
}

.you-name-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}

.you .you-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-card);
  font-size: var(--t-data);
}

.you-name-said {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-name);
  color: var(--on-table-strong);
  overflow-wrap: anywhere;
}

.you-name-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}

.you .you-name-input {
  flex: 1 1 12rem;
  min-height: var(--tap-min);
  padding: var(--s2) var(--s3);
  background: var(--table);
}

.you .you-name-save {
  min-height: var(--tap-min);
  padding: var(--s2) var(--s5);
}

.you-name-form .form-error {
  flex-basis: 100%;
}

/* ---- the light switch ---- */

.you-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
}

.you-row-words {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.you-row-name {
  font-weight: 600;
  color: var(--on-table-strong);
}

.you-row-note {
  font-size: var(--t-small);
}

.you-switch-state {
  font-family: var(--font-mono);
  font-size: var(--t-data-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dim);
}

/*
 * A switch: a track and a knob that crosses it. The drawn object is 3.25rem
 * by 2rem; the target is the house's 44px, overlaid so nothing moves.
 */
.you-switch {
  position: relative;
  flex: none;
  width: 3.5rem;
  height: 2rem;
  padding: 0;
  background: var(--control);
  border: var(--rim-hair) solid var(--rim);
  border-radius: var(--r-chip);
  box-shadow: inset 0 2px 3px 0 rgb(8 22 29 / 0.18);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}

.you-switch::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: calc(100% + 0.5rem);
  height: var(--tap-min);
  transform: translate(-50%, -50%);
}

.you-switch-knob {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 5px;
  background: var(--stock);
  color: var(--ink);
  border: var(--rim-hair) solid var(--rim);
  transform: translateY(-50%);
  transition: left var(--fast) var(--ease);
}

.you-switch-knob svg {
  width: 0.8rem;
  height: 0.8rem;
}

.you-switch[aria-checked="true"] {
  background: var(--primary);
}

.you-switch[aria-checked="true"] .you-switch-knob {
  left: calc(100% - 1.65rem);
}

@media (hover: hover) {
  .you-switch:hover {
    filter: brightness(1.06);
  }
}

.you-switch:active .you-switch-knob {
  transform: translateY(calc(-50% + 1px));
}

/* ---- the palettes, laid out ---- */

.you-palette {
  display: grid;
  gap: var(--s3);
  min-width: 0;
  margin: 0;
  padding: var(--s3) 0 0;
  border: 0;
  border-top: var(--hair);
}

.you-palette-group {
  display: grid;
  gap: var(--s2);
}

.you .picker-group {
  padding: 0;
  margin: 0;
  border: 0;
}

.you-palette-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--s2);
}

.you .picker-item {
  min-height: var(--tap-min);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
}

.you .picker-item .swatch {
  width: 2.75rem;
  height: 1.75rem;
}

.you .picker-item[aria-pressed="true"] {
  border-color: var(--rim);
  box-shadow: inset 0 0 0 1px var(--rim);
}

/* ---- the record inside You ---- */

.you .record-say {
  color: var(--on-table-strong);
}

.you .record-row-name {
  color: var(--on-table-strong);
}

@media (max-width: 599px) {
  .you {
    padding: var(--s4) var(--s4) var(--s6);
    gap: var(--s3);
  }

  .you-card,
  .you .record {
    padding: var(--s4);
  }

  .you-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .you-switch-state {
    display: none;
  }
}