/* HEAT 01 · registration landing · v1.7. Layout only: colour, type, spacing and motion come from design-system tokens and h-* components. Prefix l-. Mobile first. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100svh; }
.l-skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 12px 16px; background: var(--accent); color: var(--on-accent); }
.l-skip:focus { top: 12px; }
.h-root .l-skip, .h-root .l-skip:hover { color: var(--on-accent); text-decoration: none; } /* outweighs the base link rule (.h-root a, 0,1,1) */
.l-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.l-section { padding-block: var(--space-section); border-top: var(--hairline) solid var(--border); }
.l-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); min-width: 0; container-type: inline-size; }
.l-head > p { margin: var(--space-3) 0 0; max-width: var(--measure); }
.l-head > *, .l-hero__copy > * { min-width: 0; overflow-wrap: anywhere; }
/* section headings: never above the hero headline, never broken inside a word (12cqi keeps CATEGORIES, the longest word, on its line), balanced lines.
   The hero headline is 10cqi of the hero column (max 4.5rem); --l-hero-cap is 97 % of that, from the viewport: the full wrap below 960, the 1.15fr column of the two-column hero above it */
:root { --l-hero-cap: calc((100vw - 2 * var(--gutter)) * .097); }
@media (min-width: 960px) { :root { --l-hero-cap: calc((min(var(--container), 100vw - 2 * var(--gutter)) - var(--space-8)) * 1.15 / 2.15 * .097); } }
.l-head .h-display-l, #pack-h, .l-fans__copy .h-display-l { font-size: min(clamp(2.25rem, 1.4rem + 3vw, 3.85rem), 12cqi, var(--l-hero-cap)); overflow-wrap: normal; text-wrap: balance; }
/* running text: no one-word last lines; date and code pairs are bound with no-break spaces in the copy */
.h-body, .h-body--s, .l-step p, .l-form__lock span, .l-cal__what, .l-faq p, .h-field__hint, .h-field__error { text-wrap: pretty; }
.l-nowrap { white-space: nowrap; }
.l-head .h-display-l { text-transform: uppercase; font-weight: 900; letter-spacing: var(--track-display-xl); }

/* top bar */
.l-top { position: sticky; top: 0; z-index: 10; background: oklch(from var(--bg) l c h / .88); backdrop-filter: blur(10px); border-bottom: var(--hairline) solid var(--border); }
.l-top__in { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; }
.l-top .h-mark { width: 88px; flex: none; }
.l-top nav { display: none; gap: var(--space-5); }
.l-top nav a { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--muted); white-space: nowrap; }
.l-top nav a:hover { color: var(--fg); }
.l-top .h-level { display: none; margin-left: auto; }
.l-top .h-btn { margin-left: auto; }
/* nav from 860, the level chip from 1000: below that the row has no room for logo + nav + chip + Register. Without Register (held states) the chip has the room from 860 */
@media (min-width: 860px) { .l-top nav { display: flex; } :is([data-state="soon"], [data-state="closed"], [data-state="draw"], [data-state="live"], [data-state="done"]) .l-top .h-level { display: inline-flex; } }
@media (min-width: 1000px) { .l-top .h-level { display: inline-flex; } .l-top .h-level + .h-btn { margin-left: 0; } }

/* hero */
.l-hero { padding-block: var(--space-7) var(--space-8); display: grid; gap: var(--space-7); align-items: center; }
/* the copy column is a container: the title is sized to it, so its longest word (REGISTRATION) always fits on one line */
.l-hero__copy { display: grid; gap: var(--space-6); container-type: inline-size; }
.l-hero__copy > p { margin: 0; }
.l-hero .l-meta { max-width: 56ch; }
/* primary lockup, brand spec: descriptor caps 30 % and gap 22 % of the mark height (mark = 368 : 100, so 22 % = 6cqw).
   cq units on the container itself resolve against the viewport, so the gap lives on the descriptor; 1.75cqw is its line box above the caps.
   More air under the lockup than inside it, so PADEL SERIES reads with the mark, not with the headline. */
.l-lockup { container-type: inline-size; display: grid; width: 100%; max-width: 560px; margin-bottom: var(--space-5); }
.l-lockup .h-mark-filled { width: 100%; }
.l-lockup .l-desc { display: flex; justify-content: space-between; margin-top: calc(6cqw - 1.75cqw); font-family: var(--font-label); font-weight: 600; font-size: 11cqw; line-height: 1; text-transform: uppercase; color: var(--fg); }
.l-hero__copy > .l-hero__title { font-size: min(4.5rem, 10cqi); overflow-wrap: normal; text-transform: uppercase; font-weight: 900; letter-spacing: var(--track-display-xl); max-width: 14ch; text-wrap: balance; }
.l-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* a data line of items (key dates, pass facts, early heat, fan pass): an item moves to the next line whole (flex items wrap as units); the dot before an item that starts a line is clipped away (negative start margin + clip-path).
   Each item is itself a flex row (dot, text), so an item wider than the line wraps inside its text, after the dot, never into the clipped strip */
.l-meta { list-style: none; margin: 0 0 0 -2.4ch; padding: 0; display: flex; flex-wrap: wrap; row-gap: var(--space-1); clip-path: inset(0 0 0 2.4ch); color: var(--muted); }
.l-meta[hidden] { display: none; }
.l-meta li { display: flex; }
.l-meta li::before { content: "·"; content: "·" / ""; flex: none; width: 2.4ch; text-align: center; }
/* a held call to action is a status, not a dead blue button: hero, fans and the locked form share it */
:is(.l-hero__cta, .l-fans__cta) .h-btn[aria-disabled="true"], .l-form.is-locked .h-btn { --btn-bg: transparent; --btn-fg: var(--muted); --btn-bd: var(--border); opacity: 1; cursor: default; }
.l-court { aspect-ratio: 2 / 1; border: var(--hairline) solid var(--border); background: var(--bg); position: relative; overflow: hidden; isolation: isolate; }
.l-court canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.l-court__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 5% 10%; background-position: -1px -1px; }
.l-court__safe { position: absolute; inset: 6%; display: grid; grid-template-rows: auto 1fr auto; }
.l-court__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.l-court__safe > .l-court__row:last-child { align-items: last baseline; }
.l-court__msg { text-align: right; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; }
@media (min-width: 960px) { .l-hero { grid-template-columns: 1.15fr 1fr; min-height: min(calc(100svh - 64px), 860px); gap: var(--space-8); } }
@media (max-width: 639px) { .l-court__msg { font-size: var(--text-label); } .l-court__row .h-code { font-size: .75rem; white-space: nowrap; } .l-court__safe { inset: 5%; } }

/* facts */
.l-facts { display: grid; gap: 1px; background: var(--border); border: var(--hairline) solid var(--border); }
.l-fact { background: var(--bg); padding: var(--space-5) var(--space-5) var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.l-fact .h-display-l { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); text-transform: uppercase; }
@media (min-width: 640px) { .l-facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .l-facts { grid-template-columns: repeat(3, 1fr); } }
.l-venue { display: grid; gap: var(--space-6); margin-top: var(--space-8); align-items: start; }
.l-venue .h-photo { aspect-ratio: 4 / 3; }
.l-venue .h-photo picture { display: contents; }
.l-venue__copy { display: grid; gap: var(--space-4); }
.l-venue__copy > p { margin: 0; }
.l-venue__copy > .h-display-s + p { margin-top: var(--space-2); }
.l-venue__copy .h-display-s { text-transform: uppercase; font-weight: 700; }
@media (min-width: 860px) { .l-venue { grid-template-columns: 7fr 5fr; } .l-venue .h-photo { aspect-ratio: 16 / 9; } }

/* calendar */
.l-cal { display: grid; }
.l-cal__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-4); border-top: var(--hairline) solid var(--border); border-left: 3px solid transparent; transition: background var(--dur) var(--ease); }
.l-cal__row:last-child { border-bottom: var(--hairline) solid var(--border); }
.l-cal__row.is-current { background: var(--surface); border-left-color: var(--lvl, var(--accent)); }
.l-cal__row.is-past { color: var(--muted); }
.l-cal__row.is-past .h-level { opacity: .55; }
.l-cal__date { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); }
.l-cal__date small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.l-cal__msg { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; }
.l-cal__what { color: var(--muted); font-size: var(--text-body-s); }
.l-cal__row.is-current .l-cal__what { color: var(--fg); }
@media (min-width: 860px) { .l-cal__row { grid-template-columns: 176px 194px 1fr; align-items: baseline; } .l-cal__what { grid-column: 3; } .l-cal__msg { grid-column: 3; } .l-cal__lvl { grid-column: 2; grid-row: 1 / 3; } .l-cal__date { grid-row: 1 / 3; } }

/* categories */
.l-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--hairline) solid var(--border); border-left: var(--hairline) solid var(--border); }
.l-cat { background: var(--bg); padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-2); text-align: left; border: 0; border-right: var(--hairline) solid var(--border); border-bottom: var(--hairline) solid var(--border); color: var(--fg); font: inherit; cursor: pointer; transition: background var(--dur) var(--ease); align-content: start; }
.l-cat:hover { background: var(--surface); }
.l-cat:focus-visible { position: relative; z-index: 1; } /* the ring sits outside the tile: lift it over the neighbours that touch it */
/* while the form is locked a tile is information, not a control (landing.js does not take it to the form) */
:is([data-state="soon"], [data-state="closed"], [data-state="draw"], [data-state="live"], [data-state="done"]) .l-cat { cursor: default; }
:is([data-state="soon"], [data-state="closed"], [data-state="draw"], [data-state="live"], [data-state="done"]) .l-cat:hover { background: var(--bg); }
.l-cat.is-selected { background: oklch(from var(--accent) l c h / 0.12); box-shadow: inset 0 0 0 1px var(--accent); }
.l-cat b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); letter-spacing: var(--track-display-l); line-height: 1; white-space: nowrap; }
@media (max-width: 359px) { .l-cat { padding-inline: var(--space-3); } }
@media (min-width: 768px) { .l-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .l-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.l-cat span { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.l-cats__note { margin: var(--space-5) 0 0; color: var(--muted); max-width: var(--measure); }

/* welcome pack */
.l-pack { display: grid; gap: var(--space-7); align-items: center; }
.l-pack__copy { display: grid; gap: var(--space-5); container-type: inline-size; }
.l-pack__copy > p { margin: 0; }
.l-pack__copy > .h-kicker, .l-fans__copy > .h-kicker { margin-bottom: calc(var(--space-3) - var(--space-5)); }
.l-pack__copy > .h-btn { justify-self: start; padding-block: var(--space-3); }
.l-pack__items { display: grid; gap: var(--space-4); }
.l-tee { position: relative; background: var(--surface); border: var(--hairline) solid var(--border); padding: var(--space-6); display: grid; grid-template-columns: 1fr; justify-items: center; }
.l-tee__back { position: relative; width: min(100%, 260px); aspect-ratio: 2 / 3; }
.l-tee__back canvas { width: 100%; height: 100%; display: block; }
.l-tee__back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-tee__back svg * { fill: none; stroke: var(--fg); stroke-width: .06; opacity: .7; }
.l-tee__name { margin-top: var(--space-4); display: grid; gap: 4px; text-align: center; width: 100%; }
.l-tee__name b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.l-tee__name span { font-family: var(--font-mono); font-size: var(--text-data); color: var(--muted); letter-spacing: var(--track-data); }
@media (min-width: 960px) { .l-pack { grid-template-columns: 1fr 1fr; } }

/* register */
.l-reg { display: grid; gap: var(--space-7); }
.l-form { display: grid; gap: var(--space-5); }
/* the form is a container: two players side by side only when the form itself is wide enough */
.l-form { container-type: inline-size; }
.l-fs { display: grid; gap: var(--space-4); min-width: 0; }
.l-team { display: grid; gap: var(--space-6); min-width: 0; }
.l-person { display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding-top: var(--space-4); border-top: var(--hairline) solid var(--border); }
.l-person__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.l-person__name { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; }
.l-person__tag { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--muted); text-align: right; }
.l-person__tag.is-set { color: var(--accent); }
.l-catgroups { display: grid; gap: var(--space-3); }
.l-catgroup { display: grid; gap: var(--space-2); align-items: center; }
.l-catgroup__name { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--muted); }
.h-choice:has(input:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); } /* the radio itself is hidden, the chip carries its focus */
@container (min-width: 440px) { .l-catgroup { grid-template-columns: 104px 1fr; } }
/* side by side the two players share rows (subgrid: head + 4 fields), so an error message under one field moves both columns together; fields keep their height */
@container (min-width: 480px) { .l-team { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); gap: var(--space-4) var(--space-6); } .l-person { grid-row: span 5; grid-template-rows: subgrid; } .l-person > .h-field { align-content: start; } }
/* locked form (before 21.10 and after 09.01): the notice is the first thing, the fields are visibly inactive */
.l-form__lock { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: var(--hairline) solid var(--accent); border-left-width: 4px; }
.l-form__lock b { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); }
.l-form__lock span { color: var(--muted); font-size: var(--text-body-s); }
.l-form.is-locked .l-fs, .l-form.is-locked .l-team, .l-form.is-locked > .h-field__hint, .l-form.is-locked .l-form__fee, .l-form.is-locked .l-form__legal { opacity: 0.38; }
.l-form.is-locked .h-input, .l-form.is-locked .h-choice, .l-form.is-locked .h-btn { cursor: not-allowed; }
/* errors live under the field they belong to */
.is-invalid > label, .is-invalid > .h-field__label, .is-invalid > .l-person__head .l-person__name { color: var(--heat-4); }
.is-invalid .h-input { border-color: var(--heat-4); }
.is-invalid .h-choice:not(:has(input:checked)) { border-color: oklch(from var(--heat-4) l c h / 0.55); }
.l-form__foot { display: grid; gap: var(--space-4); }
.l-form__fee { margin: 0; font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.l-form__legal { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--text-body-s); }
.l-form__legal a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.l-form__legal a:hover { text-decoration-color: var(--heat-4); }
.l-form__status { margin: 0; color: var(--muted); font-size: var(--text-body-s); min-height: 1.5em; }
.l-form__status:empty { position: absolute; } /* kept in the DOM (live region) but out of the grid, so it takes no row and no gap until it speaks */
.l-form__status.is-error { color: var(--heat-4); }
.l-steps { display: grid; align-content: start; }
.l-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--hairline) solid var(--border); }
.l-step:last-child { border-bottom: var(--hairline) solid var(--border); }
.l-step i { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 1.25rem; line-height: 1.2; }
.l-step b { display: block; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 4px; }
.l-step p { margin: 0; color: var(--muted); font-size: var(--text-body-s); }
@media (min-width: 960px) { .l-reg { grid-template-columns: 7fr 5fr; gap: var(--space-9); } }


/* faq */
.l-faq { border-top: var(--hairline) solid var(--border); }
.l-faq:last-child { border-bottom: var(--hairline) solid var(--border); }
.l-faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-weight: 500; font-size: var(--text-body); }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); font-size: 1.25rem; text-align: center; }
.l-faq[open] summary::after { content: "−"; }
.l-faq summary:hover { color: var(--accent); }
.l-faq p { margin: 0 0 var(--space-4); color: var(--muted); max-width: var(--measure); }
.l-faq p:last-child { margin-bottom: var(--space-5); }

/* fans: secondary audience, one ghost link; the pass preview is the shared mock fans/fanpass.css */
.l-fans__in { display: grid; gap: var(--space-7); align-items: center; }
.l-fans__copy { display: grid; gap: var(--space-5); max-width: var(--measure); min-width: 0; container-type: inline-size; }
.l-fans__copy > p { margin: 0; }
.l-fans__copy > * { min-width: 0; overflow-wrap: anywhere; }
.l-fans__copy .h-display-l { text-transform: uppercase; font-weight: 900; letter-spacing: var(--track-display-xl); }
.l-fans__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 960px) { .l-fans__in { grid-template-columns: 7fr 5fr; gap: var(--space-9); } }
[data-fans="done"] .l-fans__cta { display: none; }

/* player pass (on both sites since 2026-10-12): the fans layout, a list of the pass states and the check-in QR under the mock */
.l-pass__states { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--border); }
.l-pass__states li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--border); }
.l-pass__states li > span:last-child { text-wrap: pretty; }
.l-pass__qr { display: grid; justify-items: center; gap: 8px; padding: 2px 16px 20px; }
.l-pass__qr svg { width: 116px; padding: 9px; background: #f2f0ec; border-radius: 8px; fill: #090909; shape-rendering: crispEdges; }
.l-pass__qr span { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--track-data); color: var(--muted); }

/* partners, footer */
.l-partners[hidden] { display: none; }
.l-foot { border-top: var(--hairline) solid var(--border); padding-block: var(--space-8) var(--space-6); }
.l-foot__in { display: grid; gap: var(--space-6); }
.l-foot img { width: 160px; height: auto; }
.l-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.l-foot nav a { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--muted); }
.l-foot nav a:hover { color: var(--fg); }
.l-foot__line { color: var(--muted); font-size: var(--text-body-s); display: grid; gap: var(--space-2); }
@media (min-width: 860px) { .l-foot__in { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-9); row-gap: var(--space-5); } .l-foot img { grid-row: 1 / span 2; } .l-foot__line { grid-column: 2; } }

/* state hooks */
[data-state="soon"] .l-only-open, [data-state="closed"] .l-only-open, [data-state="draw"] .l-only-open, [data-state="live"] .l-only-open, [data-state="done"] .l-only-open { display: none; }

/* ---------- registration service (dev.heatseries.com, 2026-10-12): honeypot, sending state, confirmation ---------- */
.l-form[hidden], .l-form__lock[hidden], .l-done[hidden] { display: none; }
.l-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.l-form.is-sending .h-btn { opacity: 0.6; cursor: progress; }
.l-done { scroll-margin-top: calc(64px + var(--space-4)); display: grid; gap: var(--space-5); align-content: start; outline: none; animation: l-done-in var(--dur, 300ms) var(--ease, ease-out) both; }
.l-done > p { margin: 0; }
.l-done__kicker { color: var(--accent); }
.l-done__team { border-top: var(--hairline) solid var(--border); }
.l-done__row { display: grid; grid-template-columns: minmax(9ch, auto) 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--border); }
.l-done__row b { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: var(--track-display-s); text-transform: uppercase; overflow-wrap: anywhere; }
.l-done__row .h-label { color: var(--muted); }
@keyframes l-done-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .l-done { animation: none; } }
body:not([data-state="early"]) .l-only-early { display: none; }