/* The bench (tickets/T41-le-banc-public.md, third storey): a stack of faces in
   the bar, next to your own key, and the names under it on a press. */

.bench { position: relative; flex: none; }
.bench[hidden] { display: none; }
.bench__key { width: auto; grid-auto-flow: column; gap: 6px; color: var(--ink); }
.bench__n { font-size: 12px; line-height: 16px; text-box: trim-both cap alphabetic; }

.bench__faces { display: flex; }
/* Faces overlap like people on a bench: each one a little over the last,
   the page's own colour cut round it so the stack reads as heads, not a blot. */
.bench__faces .bench__face + .bench__face { margin-left: -6px; }
.bench__faces .bench__face { box-shadow: 0 0 0 2px var(--bg); }
.bench__face { position: relative; }
/* Landed once, never again (player/bench.js): over .face.is-on's arrival,
   this sheet being linked after more.css. */
.bench__face.is-seated { animation: none; }
/* Your own seat carries the house's colour round it — the one way to find
   yourself in the stack without a word. */
.bench__face.is-you { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--primary); }

/* A heart on a face, at the LEFT corner: the next face in a stack covers the
   right one. In the stack it is a moment, not a state — it comes with the heart
   and goes with the name under the stack; four hearts parked under four faces
   read as a smudge. Who hearts what, for good, is the list's to say. */
.bench__face > .bench__heart {
  position: absolute; left: -3px; bottom: -3px; z-index: 1;
  color: var(--primary);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.3s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.bench__face.is-heart:not(.bench__faces > *) > .bench__heart { opacity: 1; transform: none; }
/* In the list the row says it at its end; the badge would say it twice. */
.bench__row .bench__face > .bench__heart { display: none; }

/* --- A heart just given ------------------------------------------------------
   Slow and soft, never a flash: the badge springs in past its size and
   settles, and a second heart rises off the face and thins into the air. The
   face itself does not move — it is a person, not a button. */
.bench__face.is-liking > .bench__heart:not(.bench__rise) { animation: bench-badge 3.2s var(--ease-soft) both; }
@keyframes bench-pop {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: none; }
}
/* The badge's own life, as long as the name under the stack: it grows in and
   decelerates to its size — no overshoot, nothing that bounces — holds, and
   thins out with the name. */
@keyframes bench-badge {
  0% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  16%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.bench__rise {
  position: absolute; left: 50%; top: 0; z-index: 2;
  margin-left: -6px;
  color: var(--primary);
  pointer-events: none;
  animation: bench-rise 1.6s var(--ease-soft) forwards;
}
@keyframes bench-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.9); }
}
/* In the open list: the row's heart springs in the same way. */
.bench__row .bench__heart.is-new { animation: bench-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Who it was, under the stack: it comes down into place, holds three seconds
   past the last heart, and goes. A transition and not a keyframe run, so a
   burst changes the words without the line leaving and coming back. */
.bench__whisper {
  position: absolute; top: calc(100% + 14px); right: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; line-height: 16px; white-space: nowrap;
  color: var(--ink);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}
.bench__whisper .bench__heart { color: var(--primary); }
.bench__whisper.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bench__rise { visibility: hidden; }   /* hidden, not gone: its end is what tidies it away */
  .bench__row .bench__heart.is-new { animation: none; }
  .bench__whisper { transform: none; transition: opacity 0.5s linear; }
}

/* Your own key's face, when the heart rises off it (the radio is not playing,
   so you are not in the stack). */
.hit--me .face { position: relative; }

/* --- The names, on a press ---------------------------------------------------
   One <dialog>: a card hung under the stack above a phone, a sheet from the
   bottom on one. The dialog's own box is only ever the frame (or, on a phone,
   the veil); .bench__card is what is drawn. */
.bench__sheet {
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  max-width: none; max-height: none; overflow: visible;
}
.bench__sheet:not([open]) { display: none; }
/* The head stays, the list scrolls: 120 people on the bench is a list you
   move through, not a card as tall as the window. */
.bench__card {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px;
  max-height: min(480px, 70vh);
  padding: 16px;
  background: var(--bg); border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--ink-muted), 0 12px 32px rgba(0, 0, 0, 0.12);
}
.bench__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bench__kicker { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; text-transform: uppercase; text-box: trim-both cap alphabetic; }
.bench__close { display: none; position: relative; width: var(--icon); height: var(--icon); color: var(--ink); }
.bench__close::before { content: ""; position: absolute; inset: -14px; }   /* 44 for a finger */
.bench__close .icon { display: block; }
.bench__kicker .bench__heart { color: var(--primary); }
/* A list that scrolls clips at its box: the faces' badges and your ring stick out
   of them by a few pixels, and the last row lost its badge. Room on every side,
   given back by the margin: nothing moves, nothing is cut. */
.bench__list {
  display: grid; align-content: start; gap: 12px; margin: -6px; padding: 6px; list-style: none;
  overflow: auto; overscroll-behavior: contain;
  scrollbar-width: none;   /* it still scrolls, it never shows a bar: the column's rule (more.css) — a bar in a two-name list was all anyone saw */
}
.bench__list::-webkit-scrollbar { display: none; }
.bench__row { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 16px; white-space: nowrap; }
.bench__row .bench__heart { color: var(--primary); }
.bench__you { font-size: 10px; text-transform: uppercase; color: var(--primary); }
/* The level, after the name (T84): the size of « you », in the ink of a word. */
.bench__lv { font-size: 10px; text-transform: uppercase; color: var(--ink); }

/* Above a phone: under the stack, right edges aligned, the page live around it. */
.bench__sheet:not(:modal) {
  position: absolute; inset: auto; top: calc(100% + 16px); right: 0; z-index: 2;
  min-width: 220px;
  animation: surface 0.4s var(--ease-soft) both;
}

/* ---------- The phone ---------------------------------------------------------
   The bar keeps the bench — who is here is worth a place even in 390 — but
   smaller: three faces, not four, and 16 to the account key rather than the
   desktop's 24, so the pair reads as the one group it is ("us"). The list
   becomes the account's sheet: up from the bottom, top corners turned, the
   page veiled behind and the radio's keys still under the thumb. */
@media (max-width: 640px) {
  .bench { margin-right: -8px; }   /* .theme's 24, minus 8 */
  .bench__key { gap: 4px; }
  .bench__faces .bench__face:nth-child(n + 4) { display: none; }
  /* The name under the stack stays: it is the only word the heart gets. It
     hangs right, clear of the headline on the left. */
  .bench__whisper { top: calc(100% + 12px); }

  .bench__sheet:modal {
    position: fixed; inset: auto 0 0 0;
    width: 100%;
  }
  .bench__sheet::backdrop { background: rgba(11, 10, 10, 0.3); animation: bench-veil 0.4s var(--ease-soft) both; }
  .bench__sheet:modal .bench__card {
    gap: 24px;
    max-height: 70dvh;
    padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom));
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--ink-muted);
    animation: bench-sheet-up 0.6s var(--ease-soft) both;
  }
  .bench__sheet:modal .bench__close { display: block; }
  /* Rows at the house's list size: 14 words (Body, as in the account's
     sheet), faces at 20 to sit on them, 12 between face and name, and 20
     between rows — a 36 pitch. The rows are read, not pressed: nothing on
     them asks for a finger's 44. */
  .bench__sheet:modal .bench__list { gap: 20px; }
  .bench__sheet:modal .bench__row { gap: 12px; min-height: 20px; font-size: 14px; line-height: 16px; }
}
/* Narrow phones. From 360 to 374 the stack sits 16 from the theme keys, not 24.
   Under 360 there are 42 pixels missing, so the stack shows one face and the
   count, and the gaps of the bar close up by a notch. The count is the last
   thing to go: it is the answer to "is anybody here". */
@media (max-width: 374px) {
  .theme:has(> .bench:not([hidden])) { gap: 16px; }
  .bench { margin-right: -4px; }
}
@media (max-width: 359px) {
  .bench__faces .bench__face:nth-child(n + 2) { display: none; }
  .theme:has(> .bench:not([hidden])) { gap: 12px; margin-left: 0; }
  .bench { margin-right: 0; }
  .bar:has(.bench:not([hidden])) .deck { gap: 8px; }
}

@keyframes bench-sheet-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes bench-veil { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bench__sheet:not(:modal), .bench__sheet:modal .bench__card, .bench__sheet::backdrop { animation: none; }
  .bench__face.is-liking > .bench__heart:not(.bench__rise) { animation: bench-badge-still 3.2s linear both; }
  @keyframes bench-badge-still { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }
}