/* HEAT Padel Series · components · v1.0 (Документ 03)
   Требует heat-tokens.css. Префикс h-. Без скруглений, без теней: иерархия через размер, цвет и линии.
   Режимы: ночной по умолчанию; .heat-paper / [data-mode="paper"] переключает токены на контейнере. */

/* ---------- base ---------- */
.h-root { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
.h-root *, .h-root *::before, .h-root *::after { box-sizing: border-box; }
.h-root img, .h-root svg, .h-root canvas { display: block; max-width: 100%; }
.h-root a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.h-root a:hover { color: var(--accent); }
.h-root :focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type roles ---------- */
.h-display-xl, .h-display-l, .h-display-s { font-family: var(--font-display); margin: 0; }
.h-display-xl { font-weight: 900; font-size: var(--text-display-xl); letter-spacing: var(--track-display-xl); line-height: var(--leading-display); text-transform: uppercase; }
.h-display-l { font-weight: 700; font-size: var(--text-display-l); letter-spacing: var(--track-display-l); line-height: 1; }
.h-display-s { font-weight: 400; font-size: var(--text-display-s); letter-spacing: var(--track-display-s); line-height: var(--leading-tight); }
.h-label { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.2; }
.h-label--l { font-size: var(--text-label-l); }
.h-data { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); font-variant-numeric: tabular-nums; line-height: 1.3; }
.h-data--l { font-size: var(--text-data-l); }
.h-body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--measure); }
.h-body--s { font-size: var(--text-body-s); }
.h-muted { color: var(--muted); }
.h-accent { color: var(--accent); }
.h-kicker { composes: h-label; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.h-tabular { font-variant-numeric: tabular-nums; }

/* ---------- level: dot + name. data-level="1…4|max" or --lvl ---------- */
.h-level { --lvl: var(--level-1); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.h-level::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--lvl); border-radius: var(--radius-dot); }
.h-level[data-level="1"] { --lvl: var(--level-1); } .h-level[data-level="2"] { --lvl: var(--level-2); } .h-level[data-level="3"] { --lvl: var(--level-3); }
.h-level[data-level="4"] { --lvl: var(--level-4); } .h-level[data-level="5"], .h-level[data-level="max"] { --lvl: var(--level-max); }
.h-level--box { border: var(--hairline) solid var(--border); padding: 10px 14px; }
.h-level--mono { font-family: var(--font-mono); letter-spacing: var(--track-data); text-transform: none; }

/* ---------- wordmark ---------- */
.h-mark { display: inline-block; color: var(--fg); line-height: 0; }
.h-mark svg { width: 100%; height: auto; fill: currentColor; }
.h-mark--80 { width: 80px; } .h-mark--120 { width: 120px; } .h-mark--200 { width: 200px; } .h-mark--320 { width: 320px; }
.h-mark-filled { position: relative; aspect-ratio: 368 / 100; clip-path: url(#heat-wm-clip); background: var(--fg); }
.h-mark-filled canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-mark-filled.is-heating canvas { animation: heat-in var(--dur-heat) var(--ease-heat) both; }
@keyframes heat-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- buttons ---------- */
.h-btn { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; background: var(--btn-bg); color: var(--btn-fg); border: var(--hairline) solid var(--btn-bd); border-radius: var(--radius); font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.h-btn:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); color: var(--btn-fg); }
.h-btn:active { transform: translateY(1px); }
.h-btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg); }
.h-btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-bd: var(--fg); }
.h-btn--quiet { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--border); }
.h-btn--quiet:hover { --btn-bg: var(--surface-2); --btn-bd: var(--border); }
.h-btn--s { min-height: 40px; padding: 0 16px; font-size: var(--text-label); }
.h-btn--l { min-height: 64px; padding: 0 32px; font-size: 1.125rem; }
.h-btn[disabled], .h-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.h-btn .h-arrow::after { content: "→"; font-family: var(--font-mono); }

/* ---------- forms (registration landing) ---------- */
.h-field { display: grid; gap: 8px; }
.h-field > label, .h-field > .h-field__label { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.h-input, .h-select { width: 100%; min-height: 52px; padding: 0 16px; background: var(--surface); color: var(--fg); border: var(--hairline) solid var(--border); border-radius: var(--radius); font: inherit; font-size: var(--text-body); transition: border-color var(--dur) var(--ease); }
.h-input::placeholder { color: var(--muted); }
.h-input:hover, .h-select:hover { border-color: var(--muted); }
.h-input:focus, .h-select:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.h-input[aria-invalid="true"] { border-color: var(--heat-4); }
.h-field__hint { font-size: var(--text-body-s); color: var(--muted); }
.h-field__error { font-size: var(--text-body-s); color: var(--heat-4); }
.h-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.h-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: var(--hairline) solid var(--border); font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.h-choice:hover { border-color: var(--muted); }
.h-choice:has(input:checked), .h-choice[aria-pressed="true"] { border-color: var(--accent); background: oklch(from var(--accent) l c h / 0.12); }
.h-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.h-choices { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- score ---------- */
.h-score { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display-l); line-height: .95; font-variant-numeric: tabular-nums; display: flex; gap: .35em; flex-wrap: wrap; }
.h-score--stack { flex-direction: column; gap: 0; }
.h-score--xl { font-weight: 900; font-size: var(--text-display-xl); letter-spacing: var(--track-display-xl); }
.h-score--l { font-size: var(--text-display-l); }
.h-score--inline { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-data-l); letter-spacing: var(--track-data); line-height: 1.2; }
.h-score .set.lost { color: var(--muted); }

/* ---------- surfaces ---------- */
.h-frame { position: relative; background: var(--bg); color: var(--fg); overflow: hidden; isolation: isolate; }
.h-frame__field { position: absolute; inset: 0; z-index: -1; }
.h-frame__field canvas { width: 100%; height: 100%; }
.h-frame__grid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .14; pointer-events: none; }
.h-frame__grid * { fill: none; stroke: var(--fg); stroke-width: .04; vector-effect: non-scaling-stroke; }
.h-frame__safe { position: absolute; inset: var(--safe-px, 6%); display: grid; }
.h-card { background: var(--surface); border: var(--hairline) solid var(--border); padding: var(--space-5); }
.h-card--raised { background: var(--surface-2); }
.h-rule { border: 0; border-top: var(--hairline) solid var(--border); margin: 0; }
.h-rule--strong { border-top-color: var(--fg); }
.h-strip { height: 6px; background: var(--spectrum); }
.h-strip--thin { height: 3px; }
.h-overlay { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, transparent, var(--overlay)); z-index: -1; }

/* ---------- lists and tables ---------- */
.h-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-s); }
.h-table th { text-align: left; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding: 12px 0; border-bottom: var(--hairline) solid var(--border); }
.h-table td { padding: 14px 16px 14px 0; border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
.h-table .h-data { font-size: var(--text-data); }
.h-rows { display: grid; }
.h-row { display: grid; grid-template-columns: var(--row-cols, 1fr auto); gap: 16px; align-items: baseline; padding: 14px 0; border-top: var(--hairline) solid var(--border); }
.h-row:last-child { border-bottom: var(--hairline) solid var(--border); }

/* ---------- broadcast: lower third ---------- */
.h-lower-third { display: grid; grid-template-columns: auto auto 1fr; align-items: stretch; background: oklch(14% 0 0 / .9); color: #f2f0ec; border-top: 2px solid var(--heat-1); min-height: 72px; }
.h-lower-third > * { display: flex; align-items: center; padding: 0 20px; }
.h-lower-third .lt-stage { font-family: var(--font-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; border-right: var(--hairline) solid oklch(100% 0 0 / .14); }
.h-lower-third .lt-score { font-family: var(--font-display); font-weight: 700; font-size: 1.6em; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; border-right: var(--hairline) solid oklch(100% 0 0 / .14); gap: .4em; }
.h-lower-third .lt-level { justify-content: flex-end; }
.h-lower-third .lt-level .h-level { color: #f2f0ec; }

/* ---------- partners ---------- */
.h-partners { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--hairline) solid var(--border); }
.h-partners > div { padding: 16px 18px; display: grid; gap: 10px; align-content: start; border-right: var(--hairline) solid var(--border); }
.h-partners > div:last-child { border-right: 0; }
.h-partners .slot { height: 44px; border: 1px dashed var(--border); }
.h-partners .h-label { color: var(--muted); }

/* ---------- court codes and category tags ---------- */
.h-code { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); text-transform: uppercase; }
.h-code--hot { color: var(--heat-4); }
.h-tag { display: inline-block; padding: 6px 10px; border: var(--hairline) solid var(--border); font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); line-height: 1; }
.h-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- photo modes ---------- */
.h-photo { position: relative; overflow: hidden; background: var(--surface); }
.h-photo img { width: 100%; height: 100%; object-fit: cover; }
.h-photo--night img { filter: grayscale(1) contrast(1.15) brightness(.78); }
.h-photo--thermal img { filter: url(#heat-thermal); }

/* ---------- layout helpers ---------- */
.h-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.h-section { padding-block: var(--space-section); }
.h-stack { display: grid; gap: var(--gap, var(--space-4)); }
.h-cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; }
.h-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap, var(--space-6)); }

/* narrow screens: partners wrap to two columns, lower third stacks */
@media (max-width: 640px) {
  .h-partners { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .h-partners > div { border-bottom: var(--hairline) solid var(--border); }
  .h-partners > div:nth-child(even) { border-right: 0; }
  .h-lower-third { grid-template-columns: 1fr 1fr; }
  .h-lower-third > * { padding: 10px 14px; }
}