/* site/app/screens/event.css — the live session screen. Scoped under `.ev`.
 *
 * ⚠ EVERY RULE IS UNDER `.ev`, AND THAT LINE IS WHAT MAKES IT TRUE. Seven screens load seven
 *   stylesheets into one document and this file uses names that read generically — .ev-p,
 *   .ev-chip, .ev-score. Unscoped, any of them collides with another screen's idea of the
 *   same word, which is the bug proshop.css records against `.pcard` and cafe.js against
 *   `.step`.
 */

.ev { padding-bottom: 8px; }

/* ── The session's own header ────────────────────────────────────────────── */
.ev .ev-head { padding: 4px 20px 16px; }
.ev .ev-title {
  margin: 10px 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: 27px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.ev .ev-sub {
  margin: 5px 0 0; font: 500 14px/1.4 var(--font-ui); color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.ev .ev-sec { margin-bottom: 22px; }
.ev .ev-fine {
  margin: 10px 20px 0; font: 400 12.5px/1.45 var(--font-ui); color: var(--ink-tertiary);
}

/* ── A person, as a row ──────────────────────────────────────────────────── */
.ev .ev-q { display: grid; gap: 6px; padding: 0 16px; }
.ev .ev-p {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--tap-min); padding: 9px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* ⚠ YOUR OWN ROW IS FILLED, NOT TINTED. In a list of ten names read at arm's length beside a
   court, "which one is me" has to survive being glanced at — and a background tint two shades
   from its neighbour does not. Same decision as the selected tab in the floating nav. */
.ev .ev-p.is-me { border-color: var(--selected-edge); background: var(--selected-soft-bg); }
.ev .ev-p.is-dim { opacity: .55; }
.ev .ev-p-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ev .ev-p-n {
  font: 600 15px/1.25 var(--font-ui); letter-spacing: -.006em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev .ev-p-s {
  font: 500 12.5px/1.2 var(--font-ui); color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev .ev-p-tag { flex: none; }

/* Initials, not a photo. A roster of ten photos is ten requests on venue wifi for information
   two letters already carry at this size. */
.ev .ev-av {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--selected-soft-bg); color: var(--selected-soft-ink);
  font: 700 12.5px/1 var(--font-ui); letter-spacing: .02em;
}
.ev .ev-av-s { width: 26px; height: 26px; font-size: 10px; }

/* ══ THE PAGE ═══════════════════════════════════════════════════════════════
   Syd, 2026-09-03: "i want the event page to be an actual dedicated page, not a popup."

   ⚠ z-index 65 — OVER THE NAV (60) AND THE FLOATING PILL (59), ON PURPOSE. While you are in a
     live session this is the app; leaving the tab bar visible underneath would offer six ways
     out of a screen whose one exit is Back.
   ⚠ IT ENTERS FROM THE RIGHT AND LEAVES TO THE RIGHT. Spatial consistency: a page that
     arrives one way and departs another reads as two unrelated screens crossing, and destroys
     the sense that what you were on is still behind it.
   ⚠ THE OFFSET LIVES IN @starting-style, NOT IN AN INLINE STYLE CLEARED BY rAF. rAF does not
     run in a backgrounded tab, so an offset cleared there leaves the resting layout
     conditional on a callback of ours having run — the same note cafe.css carries. */
.screen > .ev-page {
  position: absolute; inset: 0; z-index: 65;
  display: flex; flex-direction: column;
  background: var(--bg);
  opacity: 1; transform: translate3d(0, 0, 0);
}
[data-ready] .screen > .ev-page {
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
  will-change: transform, opacity;
}
@starting-style {
  .screen > .ev-page.enter { opacity: 0; transform: translate3d(38px, 0, 0); }
}
.screen > .ev-page.is-out { opacity: 0; transform: translate3d(38px, 0, 0); pointer-events: none; }

/* ⚠ THE BAR DOES NOT SCROLL AND THE BODY DOES. That split is the whole reason this stopped
   feeling stuck: as a sheet, one element was both the scroller and the drag-to-dismiss
   surface, so every flick had to be disambiguated. Here the bar is flex:none, the body is
   flex:1 with its own scrollport, and nothing has to guess. */
.ev-page .ev-bar {
  flex: none; display: flex; align-items: center;
  padding: calc(6px + var(--safe-top, 0px)) 10px 6px;
}
.ev-page .ev-back {
  display: inline-flex; align-items: center; gap: 3px;
  min-height: var(--tap-min); padding: 8px 12px 8px 6px;
  border: 0; background: transparent; cursor: pointer; color: var(--ink);
  font: 600 16px/1 var(--font-ui); letter-spacing: -.01em;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ev-page .ev-back svg { width: 21px; height: 21px; display: block; }
.ev-page > .ev { flex: 1 1 auto; min-height: 0; display: flex; }
.ev-page > .ev > .pane-scroll { flex: 1 1 auto; }

/* ══ THE FLOOR ══════════════════════════════════════════════════════════════
   Four courts in ONE card. Syd: "in the size of one card. i want to see an illustration of 4
   courts all with players in it with the scores."

   ⚠ TWO ACROSS, ALWAYS. One column makes each court wide and the card three screens tall,
     which is the four-separate-cards problem with extra steps. Four across on a phone gives
     each court about 78px, at which the initials stop being legible at any font size. */
.ev .ev-floor { margin: 0 16px; padding: 12px; }
.ev .ev-cts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@container (min-width: 560px) { .ev .ev-cts { grid-template-columns: repeat(4, 1fr); } }

/* ⚠⚠ `.ev-ct`, AND IT WAS `.ev-mini` UNTIL IT COLLIDED WITH THE SHUFFLE BUTTON IN THIS SAME
   FILE. I named the little outline button `.ev-mini` for the teams section, then named the
   court cell `.ev-mini` too — so every court inherited `border-radius: 999px` and a hairline
   border and each one wore a faint pill-shaped outline about 13px larger than the drawing
   inside it. It looked like a rendering artefact and I spent three passes hunting it in the
   SVG. The header of this file already warns that these names read generically and collide
   ACROSS screens; it turns out one file is quite capable of colliding with itself.
   The cell is `.ev-ct` now, which also matches the parts it already owns — .ev-ct-floor,
   .ev-ct-line, .ev-ct-net, .ev-ct-p — and the button is `.ev-btn-mini`. */
.ev .ev-ct { min-width: 0; }
.ev .ev-ct-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  margin-bottom: 4px;
}
.ev .ev-ct-name {
  font: 700 9px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠ THE SERVING SIDE'S NUMBER IS THE DARK ONE. Only the serving side can score, so "who is
   serving" and "whose number moves next" are the same fact — saying it on the score rather
   than only on the court means the answer is where the eye already is. */
.ev .ev-ct-score {
  flex: none; font: 600 12px/1 var(--font-ui); color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}
.ev .ev-ct-score b { font-weight: 600; }
.ev .ev-ct-score b.is-serving { color: var(--ink); font-weight: 700; }

.ev .ev-ct-svg { display: block; width: 100%; height: auto; }
/* The court surface: a shade, not a colour. Four saturated rectangles in one card would be the
   loudest thing on a screen whose subject is the people standing on them.
   ⚠ THE LINES ARE --ink-tertiary, NOT --rule. `--rule` is a 20%-alpha hairline meant for
     separating rows of text on a flat background; at 0.9 units inside an 88-wide viewBox that
     is a quarter-opacity half-pixel, and the court came out as a grey smudge with no lines
     visible in it at all. A court whose lines cannot be seen is a rectangle, and a rectangle
     answers none of the three questions this drawing exists to answer. */
.ev .ev-ct-floor { fill: var(--bg-sunken); stroke: var(--ink-tertiary); stroke-width: .8; }
.ev .ev-ct-kitchen { fill: color-mix(in srgb, var(--ink) 11%, transparent); }
.ev .ev-ct-line { stroke: var(--ink-tertiary); stroke-width: .8; opacity: .75; }
.ev .ev-ct-net { stroke: var(--ink); stroke-width: 1.5; }

/* ⚠⚠ `.ev-ct-disc`, NOT A BARE `circle`, BECAUSE THERE ARE TWO CIRCLES IN A SEAT NOW. The
   private board gives every seat a second, invisible circle at r 9 to stand as the tap target
   — see the note in event.js — and a bare `circle` selector painted that one too, so each
   seat wore a 68px filled disc with the real mark lost inside it. A selector that matches by
   ELEMENT rather than by role is fine right up until a second element of that type arrives.
   ⚠ AND THE FONT SIZE IS NOT SET HERE. It comes from the `font-size` attribute in event.js,
     which is derived from the seat radius so the same drawing works at both sizes. Written as
     the `font` SHORTHAND this rule silently overrode that attribute — CSS beats a presentation
     attribute — and the private board's initials came out at the lobby's 5.4px inside a mark
     twice that size. Set the parts, never the shorthand. */
.ev .ev-ct-disc { fill: var(--bg-raised); stroke: var(--ink-tertiary); stroke-width: .8; }
.ev .ev-ct-hit { fill: transparent; stroke: none; }
.ev .ev-ct-p text {
  font-weight: 700; font-family: var(--font-ui); fill: var(--ink-secondary);
  letter-spacing: .01em;
}
/* Serving pair: filled, so the pair reads as one unit rather than two marked players. */
.ev .ev-ct-p.is-serving .ev-ct-disc { fill: var(--selected-soft-bg); stroke: var(--selected-soft-ink); }
.ev .ev-ct-p.is-serving text { fill: var(--selected-soft-ink); }

/* ── An empty seat is a seat, not a missing player ──────────────────────────
   ⚠ DASHED, AND WITH A "+" IN IT. A blank gap where a mark should be reads as the drawing
     having failed; a dashed outline reads as a place for somebody. The glyph is what makes it
     pressable rather than merely absent — DESIGN.md §2, a state gets a colour, a word and a
     glyph, and here the glyph is doing all the work because there is no room for the word. */
.ev .ev-ct-p.is-empty .ev-ct-disc {
  fill: none; stroke: var(--ink-tertiary); stroke-width: .9;
  stroke-dasharray: 2.6 2.2; opacity: .8;
}
.ev .ev-ct-p.is-empty text { fill: var(--ink-tertiary); font-weight: 500; }

/* Live seats — the private board only. The lobby's four minis are a picture and nothing in
   them is pressable, so nothing there should suggest it is. */
.ev .ev-ct-svg.is-live .ev-ct-p { cursor: pointer; }
.ev .ev-ct-svg.is-live .ev-ct-p:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 50%;
}
@media (hover: hover) {
  .ev .ev-ct-svg.is-live .ev-ct-p:hover .ev-ct-disc { stroke: var(--ink); opacity: 1; }
}
/* ⚠ YOU ARE CHARTREUSE AND ALSO RINGED. Colour alone fails the same three readings it always
   does here — greyscale, colourblind, sunlight — so the mark that says "this one is you"
   carries a second, non-colour signal, exactly as the queue paddle does. */
.ev .ev-ct-p.is-me circle { fill: var(--live); stroke: var(--navy); stroke-width: 1.6; }
.ev .ev-ct-p.is-me text { fill: var(--navy); }
.ev .ev-ct.is-mine .ev-ct-name { color: var(--ink); }

/* ── The queue card. The pager's card, with people in it. ────────────────── */
.ev .ev-qcard { margin: 0 16px 12px; padding: 16px 18px 14px; }
.ev .ev-qcard-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ev .ev-qcard-lab, .ev .ev-qcard-of {
  font: 700 10.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-dim);
}
.ev .ev-qcard-big { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.ev .ev-qcard-n {
  font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: .95;
  letter-spacing: -.03em; color: var(--on-navy); font-variant-numeric: tabular-nums;
}
.ev .ev-qcard-w {
  font: 700 10.5px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-dim);
}

.ev .ev-rack { display: flex; align-items: flex-end; gap: 2px; margin-top: 12px; height: 40px; }
.ev .ev-pad { flex: none; width: 20px; height: 34px; opacity: .55; }
.ev .ev-pad svg { width: 100%; height: 100%; display: block; fill: var(--on-navy); }
.ev .ev-pad.is-behind { opacity: .26; }
/* ⚠ YOUR PADDLE IS CHARTREUSE, TALLER AND UPRIGHT — three signals, not one colour. The queue
   rack in pager.js carries the long note on why: this app is read in sunlight by people who
   may not separate chartreuse from cream. */
.ev .ev-pad.is-me { opacity: 1; width: 23px; height: 40px; }
.ev .ev-pad.is-me svg { fill: var(--live); }

/* ── Your turn ───────────────────────────────────────────────────────────── */
.ev .ev-turn {
  margin: 0 16px 20px; padding: 18px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--live) 20%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--live) 55%, transparent);
}
.ev .ev-turn.is-done {
  background: var(--bg-raised); border-color: var(--rule);
}
.ev .ev-turn-t {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px;
  line-height: 1.1; letter-spacing: -.018em; color: var(--ink);
}
.ev .ev-turn-s {
  margin: 6px 0 0; font: 500 13.5px/1.45 var(--font-ui); color: var(--ink-secondary);
}
.ev .ev-count { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev .ev-turn-alt { margin-top: 14px; }

/* ⚠ THE PLATE IS CREAM AND THE CODE IS DRAWN ONTO IT, quiet zone included — the canvas paints
   its own margin so the code survives a screenshot, a crop and any later restyling of this
   box. The same reasoning, and the same renderer, as the ticket: site/app/qr.js. */
.ev .ev-qr {
  display: grid; justify-items: center; gap: 8px; margin-top: 14px; padding: 14px;
  border-radius: var(--r-md); background: var(--bg-sunken);
}
.ev .ev-qr-canvas {
  display: block; width: min(210px, 100%); height: auto; aspect-ratio: 1;
  border-radius: var(--r-sm);
}
.ev .ev-qr-code {
  font: 700 13px/1 var(--font-ui); letter-spacing: .1em; color: var(--ink-secondary);
}

/* ⚠ THE SLIDE IS THE CAFE'S SLIDE-TO-PAY, AND THE SHARED RULE IS THE POINT: the two
   irreversible things in this app both take a gesture rather than a press. `touch-action:
   none` on the knob or the browser scrolls the page instead of moving it. */
.ev .ev-slide {
  position: relative; display: flex; align-items: center;
  height: 56px; margin-top: 16px; padding: 4px;
  border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden;
}
.ev .ev-slide-fill {
  position: absolute; left: 4px; top: 4px; bottom: 4px; width: 52px;
  border-radius: var(--r-full); background: color-mix(in srgb, var(--live) 55%, transparent);
}
.ev .ev-slide-lab {
  position: absolute; left: 0; right: 0; text-align: center;
  font: 700 13px/1 var(--font-ui); letter-spacing: .04em; color: var(--ink-secondary);
  pointer-events: none;
}
.ev .ev-knob {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; cursor: grab;
  background: var(--ink); color: var(--bg);
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.ev .ev-knob:active { cursor: grabbing; }
.ev .ev-knob svg { width: 20px; height: 20px; }

/* ── Preview control ─────────────────────────────────────────────────────── */
/* Dashed, and labelled "preview", exactly like the pager's. Nothing that only exists because
   there is no desk yet may look like part of the product. */
.ev .ev-pv {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 4px 20px 8px; padding: 12px 14px;
  border: 1px dashed var(--rule); border-radius: var(--r-md);
}
.ev .ev-pv-lab {
  font: 700 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-tertiary);
}
.ev .ev-pv-btn { flex: none; }

/* ── Teams ───────────────────────────────────────────────────────────────── */
.ev .ev-teams {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px;
  padding: 0 16px;
}
.ev .ev-team {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 10px;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--bg-raised);
}
.ev .ev-team.is-serving { border-color: var(--ink-tertiary); }
.ev .ev-team-lab {
  font: 700 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-tertiary); margin-bottom: 2px;
}
.ev .ev-chip-btn { border: 0; cursor: pointer; justify-content: flex-start; }
.ev .ev-slot {
  min-height: 34px; border-radius: var(--r-full); cursor: pointer;
  border: 1px dashed var(--rule); background: transparent; color: var(--ink-tertiary);
  font: 600 12px/1 var(--font-ui);
}
.ev .ev-vs {
  align-self: center;
  font: 600 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-tertiary);
}
.ev .ev-btn-mini {
  border: 1px solid var(--rule); border-radius: var(--r-full); background: transparent;
  padding: 6px 12px; cursor: pointer; color: var(--ink-secondary);
  font: 600 12px/1 var(--font-ui);
}

/* ── The scoreboard ──────────────────────────────────────────────────────── */
.ev .ev-board {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 0 16px;
}
.ev .ev-board.is-idle { opacity: .45; }
.ev .ev-board-c { display: grid; justify-items: center; gap: 7px; }
.ev .ev-board-lab {
  font: 700 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-tertiary);
}
/* ⚠ THE WHOLE NUMBER IS THE BUTTON, AND IT IS THIS BIG BECAUSE OF WHERE IT IS USED. Between
   points, one-handed, without looking down properly. A 44px target beside a number would be
   correct on a desk and wrong at the side of a court. */
.ev .ev-board-btn {
  width: 100%; min-height: 96px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--bg-raised);
  font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ev .ev-board-c.is-serving .ev-board-btn { border-color: var(--ink); }
.ev .ev-board-d { font: 500 20px/1 var(--font-ui); color: var(--ink-tertiary); }
.ev .ev-actions { display: flex; gap: 8px; margin: 14px 20px 0; }
/* ⚠⚠ SMALLER THAN A FULL .btn, AND MEASURED RATHER THAN EYEBALLED. Two of these sit side by
   side inside a court card: 375 phone − 40 page gutters − 28 card padding − 8 gap leaves
   about 149px each. "Undo a point" at ui.css's 17px is ~105px of text inside 44px of
   horizontal padding = 149 — exactly at the limit, which in practice means it wrapped onto two
   lines and the pair rendered as four lines of tall buttons. At 15px with 15px of padding it
   is 121px and there is room to spare in both. The 44px tap height is untouched: .btn's
   min-height still holds, and only the type and the side padding come down. */
.ev .ev-act {
  flex: 1 1 0; min-width: 0;
  font-size: 15px; letter-spacing: -.008em; padding-inline: 15px;
}
/* Inside a court card the row is already inset by the card's own padding. */
.ev .ev-bc .ev-actions { margin: 12px 0 0; }
.ev .ev-scan { margin: 12px 20px 0; width: calc(100% - 40px); }

/* ── The new-match and scan sheets ───────────────────────────────────────── */
.ev-new, .ev-scan-sheet { padding: 4px 4px 12px; }
.ev-new .ev-new-now {
  margin: 0 16px 14px; font: 500 13.5px/1.4 var(--font-ui); color: var(--ink-secondary);
}
.ev-new .ev-opt {
  display: flex; align-items: center; width: calc(100% - 32px); margin: 0 16px 8px;
  min-height: var(--tap-min); padding: 13px 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--bg-raised); color: var(--ink);
}
.ev-new .ev-opt-t { display: grid; gap: 3px; }
.ev-new .ev-opt-n { font: 600 15px/1.2 var(--font-ui); color: var(--ink); }
.ev-new .ev-opt-s { font: 400 12.5px/1.35 var(--font-ui); color: var(--ink-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .ev .ev-p, .ev .ev-board-btn, .ev .ev-opt { transition-property: background-color, border-color; }
}
@media (prefers-contrast: more) {
  .ev .ev-p, .ev .ev-team, .ev .ev-board-btn { border-color: var(--ink); }
  .ev .ev-ct-floor, .ev .ev-ct-line { stroke: var(--ink); }
  .ev .ev-ct-p circle { stroke: var(--ink); }
}

/* ══ THE PRIVATE SESSION'S BOARDS ═══════════════════════════════════════════
   One card per booked court. Syd, 2026-09-04: "the private session also needs to be able to
   accomodate multiple courts (like score controls and everything) … each court booked will
   show up in the session page for private bookings."

   ⚠ A CARD PER COURT, WHERE THE LOBBY USES ONE CARD FOR ALL FOUR — and that is not an
   inconsistency, it is the difference between watching and running. In the lobby the subject
   is the FLOOR, taken in at a glance, so four courts share one card. Here the subject is one
   MATCH at a time: you fill its seats, you score it, you start its next game, and the next
   court over is a separate job with its own score that must never be one tap from the wrong
   one. Two boards in one card would put two "New match" buttons side by side. */
.ev .ev-bc { margin: 0 16px 12px; padding: 14px 14px 12px; }
.ev .ev-bc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.ev .ev-bc-name {
  font: 600 17px/1.2 var(--font-ui); letter-spacing: -.01em; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev .ev-bc-match { flex: none; }
/* The drawing sits in its own band so the score below is not crowded against the baseline. */
.ev .ev-bc .ev-ct-svg { margin-bottom: 12px; }

/* ── The picker, and the invite field ─────────────────────────────────────── */
.ev-pick .ev-pick-h { margin-top: 18px; }

/* ⚠ THE INVITE PICKER'S OWN RULES LIVE IN shell.css UNDER `.invite`, NOT HERE. It is shared
   with book.js's paid sheet (see invite.js), and a stylesheet scoped to `.ev` cannot reach a
   sheet the Courts tab opened — the picker would have rendered as unstyled rows there and
   nothing would have said why. Shared markup, shared stylesheet. */