/* ===========================================================
   TRM - Live Cupping | corrections

   A layer loaded after the brand sheets and scoped to things
   those sheets could not have known about: a phone that has to
   scroll, and a venue wifi with fifty people on it at once.

   Same contract as rtl.css - trm.css, host.css, player.css and
   control.css stay byte-identical to the handover pack, and
   anything that has to change is overridden here instead.
   =========================================================== */

/* -- the fonts ---------------------------------------------
   The handover declares all three faces `font-display:block`,
   which holds text invisible until the font arrives. That is
   the right call on a projector plugged into ethernet with a
   warm cache. It is the wrong one for fifty phones scanning the
   same QR in the same minute over venue wifi: 386KB of OTF
   before a single word appears, and a guest looking at a blank
   bone screen assumes the link is broken and scans again.

   Redeclared rather than edited. A later @font-face for the
   same family, weight and style replaces the earlier one, so
   these three lines are all it takes to turn the blank screen
   into the system face for a moment and then the brand's. */

@font-face{
  font-family:'Komet';
  src:url('../fonts/Komet-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Komet';
  src:url('../fonts/Komet-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Regeneration';
  src:url('../fonts/CCRegeneration.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* -- the phone has to scroll -------------------------------
   `body{overflow:hidden}` in trm.css takes the document
   scroller away - correct for the projector, which must never
   move. `.ph` is meant to be the phone's scroller in its place,
   but `min-height:100%` lets it grow to its own content, so it
   is never taller than itself and its `overflow-y:auto` never
   engages. The result is a page with no scroller at all: a cup
   with three questions is about a thousand pixels past the
   bottom of a small iPhone, and the guest can answer question
   one and then reach neither question two nor the way back.

   A height rather than a min-height, and the sheet inside it
   measured against the same box, so short screens still fill
   the viewport and long ones scroll. */

.ph{
  height:100%;
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.sheet{ min-height:100%; }

/* Android reloads the page on an over-swipe at the top. Every
   downward swipe on a cup page is one, and a reload costs the
   guest their place in the tasting. */
html, body, .ph{ overscroll-behavior-y:contain; }

/* -- the host's own screen ---------------------------------
   The content fields are 13.6px, which is under the 16px iOS
   zooms in on. TRM may well be authoring the coffees on an
   iPad. Only on touch, so the panel is unchanged on a laptop. */
@media (pointer:coarse){
  .addF input{ font-size:16px; }
}

/* -- ten cups on the projector -----------------------------
   The handover's grid knows two columns and three; the real
   cupping has ten cups, which as 3+3+3+1 leaves one cup alone
   on the last row. Five and five. */
.opts[data-n="5"]{ grid-template-columns:repeat(5,1fr); }

/* -- names and long answers (layout audit, 2026-09-15) ------
   Measured with 47 in the room and 24-character names. The
   handover's grids size their name columns to the content, so
   a long name pushed rank, score and the closing mark off the
   projector, and pushed every score off the phone's board. */

/* The champion: the name column may shrink and wrap; the row
   never leaves the screen. Size steps down inline for very long
   names (projector.ts). */
.fin{ grid-template-columns:minmax(0,1fr); }
.fin > *{ max-width:100%; }
.fin__n{ overflow-wrap:anywhere; }
.fin__row{ grid-template-columns:calc(6 * var(--u)) minmax(0,1fr) auto; }
.fin__row .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The phone's board: a long name gets an ellipsis, the score stays on screen. */
.ph .mini__row{ grid-template-columns:1.6rem minmax(0,1fr) auto; }
.ph .mini__row .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* The phone's answer tile: the answer gets the width; its second
   reading (the trailing .opt__i, never the leading index) yields. */
.ph .opt__t{ flex:1 1 auto; min-width:0; }
.ph .opt__t ~ .opt__i{ flex:0 1 auto; min-width:0; }

/* A three-question cup on the projector: 5u shorter, so the block
   clears the top rail and the footer rule at 1920×1080 and 1280×720. */
.opts[data-n="3"] .q{ font-size:calc(7.4 * var(--u)); margin-bottom:calc(4 * var(--u)); }
.opts[data-n="3"] .dist{ gap:calc(2 * var(--u)); }

/* The lobby roster: room for 26 chips of 24-character names, so the
   "+N" head count is never the thing that gets clipped. */
.roster{ max-height:calc(26 * var(--u)); }