/* HEAT · Fan Pass mock (.fp-*) · a static preview of the Fan Pass day state, shared by the landing, the fans page and the hub. Colours and type from tokens; the field is drawn by heat.js (data-field on the canvas). */
.fp-wrap { display: grid; gap: var(--space-3); justify-items: center; width: 100%; }
.fp { container-type: inline-size; position: relative; width: min(375px, 100%); background: #090909; color: #f2f0ec; border: var(--hairline) solid var(--border); border-radius: 14px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -30px oklch(0% 0 0 / .8); }
.fp small { display: block; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.fp b { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display-l); line-height: 1; }
.fp__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 14px 16px 12px; }
.fp__top .h-mark { width: 92px; }
.fp__hdr { text-align: right; display: grid; gap: 2px; }
.fp__hdr b { font-size: 1.125rem; }
.fp__strip { position: relative; aspect-ratio: 375 / 123; isolation: isolate; }
.fp__strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.fp__strip::after { content: ""; position: absolute; inset: 42% 0 0; z-index: -1; background: linear-gradient(to top, rgba(9,9,9,.82), rgba(9,9,9,0)); }
.fp__primary { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid; gap: 4px; }
.fp__primary b { font-size: clamp(1.5rem, 9.7cqi, 2.25rem); } /* the card is the container: 36 px on a 375 card, smaller on a narrow phone (NEXT MATCH stays one line down to a 280 screen) */
.fp__rows { padding: 14px 16px 18px; display: grid; gap: 12px; }
.fp__row b, .fp__aux b { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-data-l); letter-spacing: var(--track-data); margin-top: 3px; }
.fp__aux { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; }
/* one line each, sized to the room inside the 16 px paddings: 15.5em holds 'Your pair · time · court' (14.9em in JetBrains Mono) */
.fp__row b, .fp__aux b { white-space: nowrap; font-size: min(var(--text-data-l), calc((100cqi - 32px) / 15.5)); }
@container (max-width: 285px) { .fp__aux small { letter-spacing: .02em; } } /* screens under 320: tighter labels keep the values apart ('6 of 19   4 of 6') */
.fp__note { color: var(--muted); font-size: .6875rem; }