/* The waiting room's Discover band and temporary watchlist (R36, 4 October 2026).
   Lives inside Screen B (#position-view) and uses waitlist.css's own tokens and type:
   --ground, --ink, --paper, --blue, --blue-hover, --blue-light, --red, --serif, --sans.
   Rounding 1 (waitlist.css --r1), as on the rest of the page. Filled by waiting-room.js.

   Where it sits (U, 6 October 2026, Henry: "discover should occupy the right hand side
   of the view"): above 900px (1100px until 7 October), the right-hand column of Screen B's
   grid (waitlist.css .stage-position), with the temporary watchlist a drawer on the window's
   right edge, the app's Runs drawer (app.css .tray-dock) in this page's colours. At 900px and
   below the band follows the position column, one column, the list in the page under the deck. */

.wr { position: relative; z-index: 2; max-width: 620px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(243,242,242,.14); }
.wr [hidden] { display: none !important; }
.wr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the head ─────────────────────────────────────────────────────────── */
.wr-eyebrow { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,242,242,.65); }
.wr-title { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -.01em; color: #fff; }

.wr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; }
.wr-deck { width: min(100%, 460px); min-width: 0; }

/* ── the deck ─────────────────────────────────────────────────────────── */
/* The card behind sits exactly under the top one: the same size, in the same place, as bright as it. The lot
   that comes in is then already the size it stays at once the card above it has gone, so nothing about it
   jumps when it takes the top (10 October 2026). It had been drawn at 95.5% and 12px lower, with its text at
   55%, and was redrawn at full size when the stack was rebuilt. */
.wr-stack { position: relative; height: clamp(420px, 64vh, 580px); margin-bottom: 12px; }
/* the shadow stays inside the gap above Pass and Watch: the card is a positioned
   layer, so a deeper one would paint over the buttons */
.wr-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #1b1a19; border: 1px solid rgba(243,242,242,.16); box-shadow: 0 18px 36px -24px rgba(0,0,0,.85);
  transform-origin: 50% 100%;   /* the drag and the fly-out turn the card about its bottom edge */
  transition: transform .24s cubic-bezier(.2,.7,.2,1), opacity .24s ease; -webkit-user-select: none; user-select: none; }
.wr-card.top { z-index: 2; cursor: grab; touch-action: pan-y; }
.wr-card:not(.top) { z-index: 1; pointer-events: none; }
.wr-card.dragging { transition: none; cursor: grabbing; }
/* A decided card is gone almost as it lets go (11 October 2026, Carl: "the left right swipes should disappear much faster so
   the card doesnt swipe across page"). It fades out in a tenth of a second while it carries on 30% of its own width the way it
   was sent, from wherever the hand left it (--wr-dx, written while it is dragged; 0 for a key or a button), so it never
   crosses the page. It had flown 120% of its width over .24s. Rewind starts a lot from this state and lets it settle. */
.wr-card.go-right, .wr-card.go-left { opacity: 0; transition: transform .14s cubic-bezier(.2,.7,.2,1), opacity .1s ease-out; }
.wr-card.go-right { transform: translateX(calc(var(--wr-dx, 0px) + 30%)) rotate(14deg) !important; }
.wr-card.go-left { transform: translateX(calc(var(--wr-dx, 0px) - 30%)) rotate(-14deg) !important; }
.wr-card:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }

/* the photo: a landscape shot fills the frame; anything else is contained over a
   blurred copy of itself, so a dial is never cropped (the app's rule) */
.wr-photo { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wr-shot { position: absolute; inset: 0; overflow: hidden; }
.wr-shot::before { content: ""; position: absolute; inset: -8%; background-image: var(--shot); background-size: cover; background-position: center; filter: blur(18px) saturate(.75); opacity: .5; }
.wr-shot.landscape::before { display: none; }
.wr-shot img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.wr-shot.landscape img { object-fit: cover; }
.wr-nophoto { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 24px; text-align: center; font-size: 13px; letter-spacing: .02em; color: rgba(243,242,242,.5); background: rgba(243,242,242,.035); }
/* U, 6 October 2026 (Henry): the lot's photos, one after another: a dot for each at the top, and a
   button each side (circles, as the page's other round controls are) */
.wr-dots { position: absolute; top: 12px; left: 50%; z-index: 2; display: flex; gap: 5px; transform: translateX(-50%); pointer-events: none; }
.wr-dots i { display: block; width: 18px; height: 3px; border-radius: var(--r1); background: rgba(243,242,242,.35); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.wr-dots i.on { background: #fff; }
.wr-step { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid rgba(243,242,242,.3); border-radius: 50%; background: rgba(15,14,14,.62); color: #fff; transition: background .2s, border-color .2s; }
.wr-step.prev { left: 10px; }
.wr-step.next { right: 10px; }
.wr-step:hover { background: rgba(15,14,14,.88); border-color: rgba(243,242,242,.6); }
.wr-step:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }

/* the two drag stamps ride the gesture: --wr-drag is 0 to 1, --wr-dir is ±1 */
.wr-stamp { position: absolute; top: 14px; z-index: 2; padding: 6px 12px; border: 2px solid currentColor; background: rgba(15,14,14,.72); font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none; }
.wr-stamp.watch { left: 14px; color: var(--blue-light); opacity: calc(var(--wr-drag, 0) * max(var(--wr-dir, 0), 0)); }
.wr-stamp.pass { right: 14px; color: var(--paper); opacity: calc(var(--wr-drag, 0) * max(calc(var(--wr-dir, 0) * -1), 0)); }

/* the figures, in a band under the photo */
.wr-strip { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; background: #141312; border-top: 1px solid rgba(243,242,242,.08); }
.wr-when { align-self: flex-start; padding: 4px 8px; border: 1px solid rgba(243,242,242,.3); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--paper); font-variant-numeric: tabular-nums; }
.wr-when.soon { border-color: rgba(255,176,176,.55); color: #ffb0b0; }
.wr-when.far { color: rgba(243,242,242,.75); }
.wr-when.over { color: rgba(243,242,242,.55); }
.wr-card-title { margin: 2px 0 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-meta { margin: 0; font-size: 13px; color: rgba(243,242,242,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-dot { color: rgba(243,242,242,.4); }
.wr-figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin-top: 4px; }
.wr-fig b { display: block; font-weight: 600; font-size: 20px; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
.wr-fig span { display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,242,242,.55); }
.wr-fig.est b { font-size: 16px; color: rgba(243,242,242,.88); }
.wr-fig.none { font-size: 13px; color: rgba(243,242,242,.55); }

/* the deck's own states, a box the size of a card */
.wr-frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px; text-align: center; border: 1px dashed rgba(243,242,242,.25); background: rgba(243,242,242,.03); }
.wr-frame-head { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.15; color: #fff; }
.wr-frame-sub { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.5; color: rgba(243,242,242,.7); }
.wr-frame-btn { margin-top: 8px; height: 40px; padding: 0 18px; border: 1px solid rgba(243,242,242,.4); border-radius: var(--r1); background: transparent; color: var(--paper); font-weight: 600; font-size: 14px; transition: background .2s, border-color .2s; }
.wr-frame-btn:hover { background: rgba(243,242,242,.1); border-color: rgba(243,242,242,.75); }

/* The deck as Carl's mock draws it (10 October 2026, mock.png): behind the top card sit two sheets, each one step
   higher and one step narrower than the one in front, so the stack reads as a stack. The sheets are the stack's own
   ::before and ::after, not the cards behind: the card behind still sits exactly under the top one, the same size in
   the same place (see the note above .wr-stack), so nothing about the next lot moves or changes size when it takes
   the top, and the sheets stay where they are drawn until a card goes (they step forward then, below). renderDeck sets data-depth on the stack from the lots in hand behind
   the top card (stackDepth, 0 to 2), and a sheet shows only while there is a lot for it to stand for. The margin on
   the stack is the room the sheets rise into; the stack takes what is left of its column, so it gives that much of
   its height. Every edge in the deck is square, as the live deck's: the cards, the box for the deck's own states
   and the sheets take no rounding (Carl, with a screenshot of the live deck: "emulate the style of here,
   especially border edges"). The mock's rounding 2 (14px) was on them for a few hours that day. */
.wr-frame { z-index: 1; border-style: solid; }
.wr-stack { margin-top: 26px; }
/* The sheets carry the pictures of the lots they stand for (11 October 2026, Carl: "the cards in the back should stack
   images so you can see what's coming up a bit from the top"): the near sheet the lot under the top card, the far one the
   lot under that. Each is a short window onto the middle of its photo, filled at the sheet's own width: the top edge of
   a product shot is usually plain background, so the top edge showed a white bar where the middle shows the dial. The
   window is the band that shows (--rise, over --n for the far sheet, which the near one covers the lower half of) and 4px
   more, tucked under whatever sits in front, so no sheet is taller than the strip it fills. renderDeck writes --peek-1
   and --peek-2 on the stack (peekUrls); a lot with no photo leaves its sheet blank, as before. The sheets are still the
   stack's own, so no card changes. */
.wr-stack::before, .wr-stack::after { content: ""; position: absolute; z-index: 0; top: calc(var(--rise) * -1); left: var(--inset); right: var(--inset); box-sizing: border-box; height: calc(var(--rise) / var(--n) + 4px);
  border: 1px solid rgba(243,242,242,.16); background: rgba(243,242,242,.05); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
  opacity: 0; pointer-events: none; transition: opacity .24s ease; }
/* The sheets fade as they go back (11 October 2026, Carl: "Cards behind should fade linearly as they go back"). --back is a
   sheet's place behind the top card, 1 for the near one and 2 for the far one, and a sheet shows at 1 minus its place over 3:
   the top card is whole, the near sheet two thirds and the far one a third, in equal steps, and the next place back, which has
   no sheet, would be nothing. It is opacity, so a sheet's picture, tint and edge all go the same fraction of the way into what
   is behind the deck, which is why the far sheet has no tint of its own now: nothing but its place dims it. Only the sheets
   fade: the card behind the top one is still as bright as it (the note above .wr-stack). The near sheet is see-through, so it
   would show the 4px the far one tucks under it as a band along its top: the far sheet tucks 1px, the width of its own edge,
   which is still enough that no gap can open between the two (both are box edges, so they round alike). The near sheet's 4px
   stays: it is under the opaque top card. (Cutting the far sheet off at the 4px with clip-path was tried first: its edge is
   not snapped to the pixel grid, and it left a dark hairline between the sheets on 1.5x to 3x screens.) */
.wr-stack::after { --rise: 15px; --inset: 6%; --n: 1; --back: 1; background-image: var(--peek-1, none); }
.wr-stack::before { --rise: 30px; --inset: 12%; --n: 2; --back: 2; height: calc(var(--rise) / var(--n) + 1px); background-image: var(--peek-2, none); }
.wr-stack:is([data-depth="1"], [data-depth="2"])::after, .wr-stack[data-depth="2"]::before { opacity: calc(1 - var(--back) / 3); }
/* a short window: the sheets rise less (11 and 22px) and the room for them is smaller, so the photo keeps more of the card */
@media (max-height: 760px) { .wr-stack { margin-top: 14px; } .wr-stack::after { --rise: 11px; } .wr-stack::before { --rise: 22px; } }
@media (prefers-reduced-motion: reduce) { .wr-stack::before, .wr-stack::after { transition: none; } }

/* The stack steps forward when its top card goes (12 October 2026, Carl: "There should be a 'moving up animation' on the cards.
   When the top goes away, the others should push forward a bit to the front, more realistic cards"). Each sheet moves one place
   toward the front, as the lot it stands for is one place nearer once the top card has gone: the near sheet sinks behind the card
   its lot is about to be, which the top card's going uncovers, and the far sheet takes the near one's place, a step lower, a step
   wider and a step brighter (wrForward ends where the next place forward is drawn, worked out from the sheet's own --rise, --inset,
   --n and --back, so a short window's smaller steps come out right). Then the place at the back is filled (wrEnter), and the card
   that arrives there fades into view where it stands, out of nothing and slowly (Carl, the same day: "The furthest back card on
   tinder swiper shouold fade into view not drastically appear in an instant to give a smoother, calmer transition and animation").
   Both run on a curve that starts gently (the step is 5% of the way at a tenth of its time, where the card's exit curve is 36%
   there), so the stack settles instead of snapping. waiting-room.js puts .stepping on the stack as the top card starts to go and swaps it for
   .entering 400ms later. The cards are rebuilt a tenth of a second in, but the sheets keep the pictures they had (--held-1 and
   --held-2, written when the step starts) until the step is over, so no picture changes while one is moving, and when the far
   sheet's picture becomes the near sheet's it is in the same place at the same brightness. data-from is the depth the stack had
   when the step began: a sheet that was not there does not move. The cards do not move at all (the note above .wr-stack).
   Transitions are off while this runs, or the base rule's fade of the opacity would take it out of the animation's hands. */
.wr-stack.stepping::after { background-image: var(--held-1, none); }
.wr-stack.stepping::before { background-image: var(--held-2, none); }
.wr-stack.stepping::before, .wr-stack.stepping::after, .wr-stack.entering::before, .wr-stack.entering::after { transition: none; }
.wr-stack.stepping:is([data-from="1"], [data-from="2"])::after, .wr-stack.stepping[data-from="2"]::before { animation: wrForward .36s cubic-bezier(.3,0,.2,1) both; }
.wr-stack.entering::before { animation: wrEnter .5s cubic-bezier(.4,0,.2,1) backwards; }
@keyframes wrForward {
  from { top: calc(var(--rise) * -1); left: var(--inset); right: var(--inset); opacity: calc(1 - var(--back) / 3); }
  to { top: calc((var(--rise) - var(--rise) / var(--n)) * -1); left: calc(var(--inset) - var(--inset) / var(--n)); right: calc(var(--inset) - var(--inset) / var(--n)); height: calc(var(--rise) / var(--n) + 4px); opacity: calc(1 - (var(--back) - 1) / 3); }
}
@keyframes wrEnter {
  from { opacity: calc(1 - (var(--back) + 1) / 3); }
}
@media (prefers-reduced-motion: reduce) { .wr-stack.stepping:is([data-from="1"], [data-from="2"])::after, .wr-stack.stepping[data-from="2"]::before, .wr-stack.entering::before { animation: none; } }

/* Pass and Watch */
.wr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.wr-act { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: var(--r1); font-weight: 600; font-size: 15px; transition: background .2s, border-color .2s, opacity .2s; }
.wr-act.pass { border: 1px solid rgba(243,242,242,.4); background: rgba(15,14,14,.5); color: var(--paper); }
.wr-act.pass:hover:not([disabled]) { background: rgba(243,242,242,.1); border-color: rgba(243,242,242,.75); }
.wr-act.watch { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.wr-act.watch:hover:not([disabled]) { background: var(--blue-hover); border-color: var(--blue-hover); }
.wr-act[disabled] { opacity: .4; cursor: default; }
.wr-act:focus-visible, .wr-frame-btn:focus-visible, .wr-clear:focus-visible, .wr-move-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.wr-ico { flex: none; display: block; } /* U: a cross on Pass, a heart on Watch */
/* Rewind (10 October 2026, Carl): a small round button beside the row, to the left of Pass, bottom-aligned with
   it (the 3px puts a 44px circle on the middle of the 50px buttons). Pass and Watch keep their own grid (the
   golden 1 : 1.618 from 901px, position-golden.css) and take what is left of the width. */
.wr-actbar { display: flex; align-items: flex-end; gap: 10px; }
.wr-actbar .wr-acts { flex: 1 1 0; min-width: 0; }
.wr-rewind { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 3px; padding: 0; border: 1px solid rgba(243,242,242,.4); border-radius: 50%; background: rgba(15,14,14,.5); color: var(--paper); transition: background .2s, border-color .2s, opacity .2s; }
.wr-rewind:hover:not([disabled]) { background: rgba(243,242,242,.1); border-color: rgba(243,242,242,.75); }
.wr-rewind[disabled] { opacity: .4; cursor: default; }
.wr-rewind:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.wr-rewind-n { position: absolute; top: -7px; right: -7px; min-width: 18px; padding: 3px 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.wr-rewind-n:empty { display: none; }
.wr-hintline { margin: 12px 0 0; font-size: 12.5px; color: rgba(243,242,242,.5); }
/* 11 October 2026 (Carl: "Delete text saying Left arrow to pass right to watch"): the keyboard line is gone from the hint, so a mouse
   and keyboard screen shows no hint at all; a touch screen still gets its swipe line (waiting-room.js COPY.touch). */
.wr-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .wr-touch { display: inline; } }
.wr-say { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--blue-light); }

/* ── the temporary watchlist ──────────────────────────────────────────── */
.wr-list { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; background: rgba(243,242,242,.06); border: 1px solid rgba(243,242,242,.18); backdrop-filter: blur(8px); }
.wr-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wr-list-title { margin: 0; font-weight: 600; font-size: 17px; }
.wr-list-title:focus { outline: none; }
.wr-count { font-size: 12.5px; color: rgba(243,242,242,.65); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(243,242,242,.6); }
.wr-items { list-style: none; margin: 12px 0 0; padding: 0; max-height: 480px; overflow-y: auto; }
.wr-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(243,242,242,.1); }
.wr-thumb { display: block; width: 56px; height: 56px; object-fit: cover; background: rgba(243,242,242,.08); }
.wr-thumb.none { border: 1px solid rgba(243,242,242,.12); background: rgba(243,242,242,.035); }
.wr-item-body { min-width: 0; }
.wr-item-title { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-item-meta { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: rgba(243,242,242,.6); }
.wr-item-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-item-when.soon { color: #ffb0b0; }
.wr-item.closed .wr-thumb, .wr-item.closed .wr-item-title { opacity: .5; }
.wr-item.closed .wr-item-when { font-weight: 600; color: var(--paper); }
.wr-item-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wr-link, .wr-remove { font-size: 12.5px; white-space: nowrap; }
.wr-link { color: var(--blue-light); text-decoration: none; }
.wr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.wr-remove { padding: 0; border: 0; background: none; color: rgba(243,242,242,.6); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,242,242,.3); }
.wr-remove:hover { color: var(--paper); }
.wr-item.flash { animation: wrFlash 1.4s ease-out; }
@keyframes wrFlash { from { background: rgba(65,105,225,.3); } to { background: rgba(65,105,225,0); } }
.wr-items:empty { display: none; }
.wr-empty { margin: 12px 0 0; padding: 16px 0 4px; border-top: 1px solid rgba(243,242,242,.1); font-size: 13.5px; line-height: 1.5; color: rgba(243,242,242,.6); }
.wr-list-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(243,242,242,.1); font-size: 12.5px; color: rgba(243,242,242,.55); }
.wr-clear { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid rgba(243,242,242,.35); border-radius: var(--r1); background: transparent; color: var(--paper); font-size: 13px; transition: background .2s; }
.wr-clear:hover { background: rgba(243,242,242,.1); }

/* C3: once a product session is in this browser, the list can move to the account */
.wr-move { margin-top: 12px; padding: 14px; background: var(--paper); color: var(--ink); }
.wr-move-lead { margin: 0; font-size: 13.5px; line-height: 1.45; }
.wr-move-btn { margin-top: 10px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; transition: background .2s; }
.wr-move-btn:hover:not([disabled]) { background: var(--blue-hover); }
.wr-move-btn[disabled] { opacity: .6; cursor: default; }
.wr-move-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.wr-move-note:first-child { margin-top: 0; }
.wr-move-note a { color: var(--blue-hover); font-weight: 600; }

/* ── wide: the right-hand column, and the list a drawer on the window's edge ── */
@media (min-width: 901px) {
  /* no stacking context of its own (z-index auto), so the drawer below sits over the nav; the band
     still paints over the page's backdrop, which comes before it */
  .wr { z-index: auto; max-width: none; margin: 0; padding: 0; border-top: 0; }
  .wr-title { font-size: 40px; }
  .wr-grid { margin-top: 18px; }
  .wr-deck { width: 100%; }
  /* U, 7 October 2026 (Henry): one screen. The band fills its column of Screen B's row, which is the
     window's height (waitlist.css), and the card takes what the heading, Pass and Watch and the hint
     leave, from 240px to 600px. */
  .wr:not([hidden]) { display: flex; flex-direction: column; }
  .wr-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .wr-deck { display: flex; flex-direction: column; min-height: 0; }
  .wr-stack { flex: 1 1 auto; height: auto; min-height: 240px; max-height: 600px; }
  .wr-acts { margin-top: 16px; }
  /* the app's Runs drawer (app.css .tray-dock): the dock 0 wide while closed and 340px open, the panel
     inside always 340px and pinned to the dock's left edge, the handle hanging off that edge half way down */
  .wr-dock { position: fixed; top: 0; right: 0; bottom: 0; z-index: 4; width: 0; transition: width .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s cubic-bezier(.2,.7,.2,1); }
  .wr-dock.open { width: 340px; box-shadow: -30px 0 60px -24px rgba(0,0,0,.9); }
  .wr-clip { position: absolute; inset: 0; overflow: hidden; }
  .wr-handle { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 28px; padding: 12px 0; border: 1px solid rgba(243,242,242,.18); border-right: 0; border-radius: var(--r1) 0 0 var(--r1); background: #1b1a19; color: rgba(243,242,242,.75); font: 600 11.5px/1 var(--sans); box-shadow: -5px 4px 14px rgba(0,0,0,.35); transition: background .16s, color .16s; }
  .wr-handle:hover { background: #24221f; color: #fff; }
  .wr-handle:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -3px; }
  .wr-handle .lab { writing-mode: vertical-rl; }
  .wr-handle-n { min-width: 18px; padding: 3px 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
  .wr-handle-n:empty { display: none; }
  .wr-handle svg { flex: none; transition: transform .24s cubic-bezier(.2,.7,.2,1); }
  .wr-dock.open .wr-handle svg { transform: rotate(180deg); }
  .wr-handle.flash { animation: wrHandle 1.2s ease-out; }
  .wr-dock .wr-list { width: 340px; height: 100%; padding: 26px 20px 20px; border: 0; border-left: 1px solid rgba(243,242,242,.14); background: #141312; backdrop-filter: none; }
  .wr-dock .wr-items { flex: 1; min-height: 0; max-height: none; }
}
/* U, 7 October 2026: a short desktop window gives the card more of its column: a smaller heading, Pass and
   Watch a little lower, and no keyboard hint (the buttons still carry their keys, aria-keyshortcuts) */
@media (min-width: 901px) and (max-height: 760px) {
  .wr-title { font-size: 32px; }
  .wr-grid { margin-top: 14px; }
  .wr-acts { margin-top: 12px; }
  .wr-act { height: 44px; }
  .wr-rewind { width: 40px; height: 40px; margin-bottom: 2px; }
  .wr-hintline { display: none; }
}
@keyframes wrHandle { from { background: rgba(65,105,225,.55); color: #fff; } to { background: #1b1a19; } }
@media (max-width: 900px) { .wr-handle { display: none; } }

@media (max-width: 720px) {
  .wr { margin-top: 36px; padding-top: 24px; }
  .wr-head { text-align: center; } /* U, 6 October 2026 (Henry): the heading centred on a phone */
  .wr-title { font-size: 40px; }
  .wr-deck { width: 100%; }
  .wr-stack { height: clamp(420px, 66vh, 560px); }
  .wr-card-title { font-size: 21px; }
  .wr-list { padding: 14px; }
  .wr-item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .wr-thumb { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-card { transition: none; }
  .wr-item.flash, .wr-handle.flash { animation: none; }
  .wr-dock, .wr-handle svg { transition: none; }
}