/* RSSDŽ — Rukometni savez splitsko-dalmatinske županije.
   Design system "TRAG", from Handoffs/RSSDŽ/RSSDZ-WEB-DESIGN-SPEC.md.

   ⚠ THIS FILE NAMES NO COLOUR. Every value comes from a custom property written into the
   page head by `buildRssdzPaletteCss()`. A test fails on a hex literal here. The only
   exceptions are `transparent` and `currentColor`, which are roles rather than colours,
   and the `@media print` block, where a printed page has no brand ground.

   ⚠ INK IS INHERITED, NOT SET PER COMPONENT. A band declares --ink-head/--ink-body/
   --ink-meta/--ink-rule; components read them. `.rs-band--tinta p` and `.rs-card p` would
   otherwise tie on specificity and source order would decide — which is how another site
   in this studio shipped three sections of body copy the same colour as the band behind it.

   Made by sorich.hr (https://sorich.hr/#top) */

/* ═══════════════════════════════════════════════════════════════════════════
   0 · RESET AND BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* A cheap guard against a decorative element widening the document. It does NOT fix a
     rotated reveal (see the TRAG block below) — Chrome still reports the grown
     scrollWidth — but it costs nothing and `clip` does not make the body a scroll
     container, so the sticky header keeps working. `hidden` here would break it. */
  overflow-x: clip;
  background: var(--rs-bijela);
  color: var(--rs-tinta);
  font-family: var(--rs-font-ui);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ⚠ RESTORE THE `hidden` ATTRIBUTE.

   The UA stylesheet gives `[hidden]` `display: none`, but at the LOWEST specificity — any
   author rule that sets `display` on the same element silently beats it. This file sets
   `display` on almost everything, so `hidden` had quietly stopped working: the caret menu
   rendered permanently open, the send channels showed on step one, and the "Natrag" button
   was visible on the first screen with nowhere to go back to.

   It is invisible to a test that asks `el.hasAttribute("hidden")` — the attribute IS there,
   it just does nothing. Only a computed-style check catches it, which is how it was found:
   the screenshot showed the menu hanging open under a nav nobody had clicked.

   `!important` because the whole point is to outrank the component rules below. */
[hidden] {
  display: none !important;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--rs-more-700);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--rs-tinta);
}

button {
  font: inherit;
  color: inherit;
}

/* Visible focus everywhere, and NEVER `outline: none` without a replacement.
   On ink the ring flips to coral: sea on tinta is 2.6:1 and disappears. */
:focus-visible {
  outline: 2px solid var(--rs-more);
  outline-offset: 3px;
  border-radius: 2px;
}

.rs-band--tinta :focus-visible,
.rs-band--tinta-900 :focus-visible,
.rs-nav :focus-visible,
.rs-foot :focus-visible {
  outline-color: var(--rs-koralj);
}

.rs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  padding: 12px 20px;
  border-radius: 0 0 var(--rs-r-md) 0;
  font-weight: 600;
}

.rs-skip:focus {
  left: 0;
}

.rs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-in {
  width: 100%;
  max-width: var(--rs-wrap);
  margin-inline: auto;
  padding-inline: var(--rs-gutter);
}

.rs-in--wide {
  max-width: var(--rs-wrap-wide);
}

.rs-band {
  position: relative;
  padding-block: var(--rs-sec-y);
  /* Every band declares its own ink. Components inherit and never name a role colour. */
  --ink-head: var(--rs-tinta);
  --ink-body: var(--rs-siva-600);
  --ink-meta: var(--rs-siva-700);
  --ink-rule: var(--rs-magla-300);
  --ink-eyebrow: var(--rs-koralj-700);
  --ink-card: var(--rs-bijela);
  color: var(--ink-body);
}

.rs-band--bijela {
  background: var(--rs-bijela);
}

.rs-band--magla {
  background: var(--rs-magla);
  --ink-card: var(--rs-bijela);
}

.rs-band--tinta {
  background: var(--rs-tinta);
  --ink-head: var(--rs-bijela);
  --ink-body: var(--rs-ink-on-tinta);
  --ink-meta: var(--rs-ink-on-tinta);
  --ink-rule: var(--rs-rule-on-tinta);
  --ink-eyebrow: var(--rs-koralj);
  --ink-card: var(--rs-tinta-700);
}

.rs-band--tinta-900 {
  background: var(--rs-tinta-900);
  --ink-head: var(--rs-bijela);
  --ink-body: var(--rs-ink-on-tinta);
  --ink-meta: var(--rs-ink-on-tinta);
  --ink-rule: var(--rs-rule-on-tinta);
  --ink-eyebrow: var(--rs-koralj);
  --ink-card: var(--rs-tinta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · TYPE

   Design spec §3.3. Archivo is variable on wght AND wdth, so `font-stretch`
   really interpolates — see scripts/fetch-rssdz-fonts.ts. Never below wdth 100:
   condensed Archivo does not belong to this identity.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-display-xl,
.rs-display-l,
.rs-display-m,
.rs-eyebrow,
.rs-data-xl {
  font-family: var(--rs-font-display);
  font-synthesis: none;
}

.rs-display-xl {
  /* ⚠ FLOOR LOWERED FROM the spec's 2.75rem. The 8vw term only overtakes the floor above
     ~550px, so every phone renders the floor — and at 44px the longest unbreakable word in
     the Croatian H1, "dalmatinske", measures 301px inside a 288px column at 320px. The
     alternatives were worse: breaking a display headline mid-word, or hyphenation Croatian
     browsers apply inconsistently. 36px fits with room and still reads as a display size.
     Measured, not guessed — verify-rssdz.mjs catches it if it regresses. */
  font-size: clamp(2.25rem, 8vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-stretch: 118%;
  font-weight: 800;
  color: var(--ink-head);
  margin: 0;
  text-wrap: balance;
}

.rs-display-l {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-stretch: 112%;
  font-weight: 800;
  color: var(--ink-head);
  margin: 0;
  text-wrap: balance;
}

.rs-display-m {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-stretch: 100%;
  font-weight: 700;
  color: var(--ink-head);
  margin: 0;
}

/* The ONE place coral is allowed to be a letterform: always caps, always short,
   always ≥ large-text equivalent. On white it uses koralj-700 (5.2:1); on ink,
   plain koralj, which is 4.9:1 there. */
.rs-eyebrow {
  display: block;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.18em;
  font-stretch: 120%;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-eyebrow);
  margin: 0 0 18px;
}

.rs-data-xl {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-stretch: 100%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-head);
}

.rs-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 62ch;
  margin: 20px 0 0;
}

.rs-body {
  color: var(--ink-body);
  margin: 0 0 16px;
  max-width: 68ch;
}

.rs-caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--ink-meta);
}

/* Every figure in a table, a score or a date is tabular. Columns line up for free. */
.rs-num {
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · BUTTONS

   §3.2 — the rule that stops the mark and the call to action fighting:
   PRIMARY IS INK, not coral. The mark is coral; two coral focal points and the
   logo loses. Coral is reserved for signal.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--rs-r-md);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    transform var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-btn:active {
  transform: scale(0.985);
}

.rs-btn--primary {
  background: var(--rs-tinta);
  color: var(--rs-bijela);
}

.rs-btn--primary:hover {
  background: var(--rs-tinta-700);
  color: var(--rs-bijela);
}

/* On ink the primary inverts — a white plate with ink type. */
.rs-band--tinta .rs-btn--primary,
.rs-band--tinta-900 .rs-btn--primary,
.rs-hero .rs-btn--primary {
  background: var(--rs-bijela);
  color: var(--rs-tinta);
}

.rs-band--tinta .rs-btn--primary:hover,
.rs-band--tinta-900 .rs-btn--primary:hover,
.rs-hero .rs-btn--primary:hover {
  background: var(--rs-magla);
  color: var(--rs-tinta);
}

.rs-btn--ghost {
  background: transparent;
  border-color: var(--rs-magla-300);
  color: var(--rs-tinta);
}

.rs-btn--ghost:hover {
  border-color: var(--rs-tinta);
  color: var(--rs-tinta);
}

.rs-band--tinta .rs-btn--ghost,
.rs-band--tinta-900 .rs-btn--ghost,
.rs-hero .rs-btn--ghost {
  border-color: var(--rs-border-ghost);
  color: var(--rs-bijela);
}

.rs-band--tinta .rs-btn--ghost:hover,
.rs-band--tinta-900 .rs-btn--ghost:hover,
.rs-hero .rs-btn--ghost:hover {
  border-color: var(--rs-bijela);
  color: var(--rs-bijela);
}

/* The one coral button the design allows, once per screen. koralj-700 with white
   type is 5.2:1; plain koralj with white is 3.0:1 and must never carry a label. */
.rs-btn--koralj {
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
}

.rs-btn--koralj:hover {
  background: var(--rs-koralj);
  color: var(--rs-bijela);
}

.rs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* A text link that behaves like a control — the "Cijeli raspored →" pattern. */
/* ⚠ padding-block is a TAP TARGET, not spacing. Unpadded this renders 23px tall, under
   WCAG 2.5.8's 24px floor, and it is the section-level "Cijeli raspored" / "Sva
   natjecanja" link a parent reaches for on a phone. 9px each side clears 40. */
.rs-link {
  display: inline-flex;
  align-items: center;
  padding-block: 9px;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--rs-more-700);
}

.rs-link::after {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-link:hover::after {
  width: 26px;
}

.rs-band--tinta .rs-link,
.rs-band--tinta-900 .rs-link {
  color: var(--rs-more);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · HEADER — the crest strip and the sticky nav
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-crests {
  background: var(--rs-tinta-900);
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

.rs-crests-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 54px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rs-crests-row::-webkit-scrollbar {
  display: none;
}

.rs-crest {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A width, not a square: the tiles carry "U13 Ž" / "KUP M" rather than a bare
     number, so they have to fit a short label. A real crest replaces the label
     once the club register arrives, and then the square comes back. */
  /* 40px tall: these are TAPS on a phone, not decoration. 44 is the guidance and the
     strip cannot afford it (23 tiles), but 32x30 is a miss on a moving thumb. */
  min-width: 40px;
  padding-inline: 10px;
  height: 40px;
  white-space: nowrap;
  border-radius: var(--rs-r-sm);
  background: var(--rs-tinta);
  border: 1px solid var(--rs-rule-on-tinta);
  color: var(--rs-ink-on-tinta);
  font-family: var(--rs-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    color var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-crest:hover {
  color: var(--rs-bijela);
  border-color: var(--rs-koralj);
}

.rs-crests-note {
  flex: 0 0 auto;
  padding-left: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
  white-space: nowrap;
}

.rs-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--rs-tinta);
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

.rs-nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  flex-wrap: wrap;
  row-gap: 0;
}

.rs-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--rs-bijela);
  min-height: 76px;
  margin-right: auto;
}

/* The ball anchors the hero animation. It has a fixed box BEFORE the logo is
   visible so "Bacanje" has somewhere to land and nothing shifts (spec §6.2). */
#rs-logo-slot {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#rs-logo-slot img {
  width: 34px;
  height: 34px;
  display: block;
}

.rs-brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.rs-brand-name b {
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--rs-bijela);
}

.rs-brand-name span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rs-ink-on-tinta);
  font-weight: 600;
}

.rs-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-nav-links a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--rs-r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rs-ink-on-tinta);
  white-space: nowrap;
  transition: color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-nav-links a:hover {
  color: var(--rs-bijela);
}

.rs-nav-links a[aria-current="page"] {
  color: var(--rs-bijela);
  position: relative;
}

.rs-nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--rs-koralj);
}

.rs-nav-end {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
}

.rs-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rs-border-ghost);
  border-radius: var(--rs-r-sm);
  background: transparent;
  color: var(--rs-bijela);
  cursor: pointer;
}

.rs-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.rs-burger span::before,
.rs-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.rs-burger span::before {
  top: -6px;
}

.rs-burger span::after {
  top: 6px;
}

.rs-navpanel {
  display: none;
  width: 100%;
  padding: 8px 0 20px;
  border-top: 1px solid var(--rs-rule-on-tinta);
}

.rs-navpanel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-navpanel a:not(.rs-btn) {
  display: block;
  padding: 13px 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rs-ink-on-tinta);
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

.rs-navpanel a:not(.rs-btn):hover {
  color: var(--rs-bijela);
}

.rs-navpanel .rs-btn {
  width: 100%;
  margin-top: 16px;
}

/* ⚠ THE BURGER THRESHOLD IS 1180px, AND IT IS MEASURED, NOT PICKED.
   Six Croatian nav labels ("Suci i delegati" is 15 characters) + the two-line
   wordmark + the coral CTA need ~1120px at this gutter. Below that the row must
   not try to fit. Draženović shipped a dead zone twice by moving one and not the
   other — the panel's own breakpoint in inline.js MUST match this number. */
@media (max-width: 1180px) {
  .rs-nav-links {
    display: none;
  }

  .rs-burger {
    display: inline-flex;
  }

  .rs-nav-row {
    flex-wrap: wrap;
  }

  html.rs-js .rs-navpanel {
    display: none;
  }

  html.rs-js .rs-nav[data-open="1"] .rs-navpanel {
    display: block;
  }

  /* No script? The panel is simply always open — a visible menu beats an inert
     burger, which is indistinguishable from a broken page. */
  html:not(.rs-js) .rs-navpanel {
    display: block;
  }

  html:not(.rs-js) .rs-burger {
    display: none;
  }
}

@media (min-width: 1181px) {
  .rs-navpanel {
    display: none !important;
  }
}

/* Below 380 the wordmark's unbreakable string pushes the document sideways.
   The ball carries the identity there. WCAG 1.4.10 puts the floor at 320px. */
@media (max-width: 379px) {
  .rs-brand-name {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · HERO — the one signature moment
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--rs-tinta-700) 0%, transparent 55%),
    linear-gradient(180deg, var(--rs-tinta) 0%, var(--rs-tinta-900) 100%);
  color: var(--rs-bijela);
  --ink-head: var(--rs-bijela);
  --ink-body: var(--rs-ink-on-tinta);
  --ink-eyebrow: var(--rs-koralj);
  --ink-rule: var(--rs-rule-on-tinta);
  padding-block: clamp(72px, 12vh, 132px) clamp(56px, 9vh, 96px);
}

.rs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 900px) {
  .rs-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rs-hero h1 {
  margin: 0;
}

.rs-hero .rs-lead {
  color: var(--rs-ink-on-tinta);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  max-width: 46ch;
}

/* The trail, laid behind the headline at low contrast. It is the mark's own
   geometry — never repeated, never a background pattern (brand rules §5). */
.rs-hero-trag {
  position: absolute;
  top: 8%;
  right: -4%;
  width: min(760px, 78%);
  color: var(--rs-koralj);
  opacity: 0.13;
  pointer-events: none;
}

@media (max-width: 900px) {
  .rs-hero-trag {
    top: auto;
    bottom: -6%;
    right: -18%;
    width: 120%;
    opacity: 0.09;
  }
}

.rs-hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
}

.rs-hero-scroll i {
  width: 34px;
  height: 1px;
  background: var(--rs-koralj);
  display: block;
}

/* ── the countdown card (HBC Nantes) ─────────────────────────────────────── */

.rs-count {
  background: var(--rs-tinta-700);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-xl);
  padding: 28px;
}

.rs-count-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rs-rule-on-tinta);
}

.rs-count-teams {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
}

.rs-count-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.rs-count-team b {
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.9375rem;
  color: var(--rs-bijela);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-count-x {
  flex: 0 0 auto;
  font-family: var(--rs-font-display);
  font-weight: 700;
  color: var(--rs-koralj);
  font-size: 0.875rem;
}

.rs-count-clock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}

.rs-count-cell {
  background: var(--rs-tinta-900);
  border-radius: var(--rs-r-md);
  padding: 14px 6px;
}

.rs-count-cell b {
  display: block;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1;
  color: var(--rs-bijela);
}

.rs-count-cell span {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
}

.rs-count-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rs-rule-on-tinta);
  font-size: 0.8125rem;
  color: var(--rs-ink-on-tinta);
}

.rs-count-empty {
  color: var(--rs-ink-on-tinta);
  font-size: 0.9375rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · SECTION HEADS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.rs-head-main {
  min-width: 0;
}

.rs-head .rs-lead {
  margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · ROUND STRIP — the match carousel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ MUST wrap. "Zadnji rezultati" + "Sljedeće utakmice" side by side need 327px, so at
   320px the pill pushed the document sideways. It only appears once there ARE fixtures —
   the empty state renders no tabs at all — which is why the demo dataset is what found
   it. Croatian labels are long; assume every inline row wraps. */
.rs-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  background: var(--rs-tinta);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-pill);
}

.rs-tab {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--rs-r-pill);
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-ink-on-tinta);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--rs-t-ui) var(--rs-ease-ui);
}

.rs-tab[aria-selected="true"] {
  background: var(--rs-tinta-700);
  color: var(--rs-bijela);
  box-shadow: inset 0 -2px 0 0 var(--rs-koralj);
}

.rs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(286px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.rs-rail > * {
  scroll-snap-align: start;
}

@media (min-width: 1100px) {
  .rs-rail {
    grid-auto-columns: minmax(300px, 1fr);
  }
}

.rs-match {
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  padding: 20px;
  /* Same grid-blowout guard as .rs-card — a card whose min-content exceeds the track
     makes the track grow and the grid overflow its container. */
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-match:hover {
  transform: translateY(-2px);
  border-color: var(--rs-koralj);
}

.rs-match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--rs-r-pill);
  border: 1px solid var(--ink-rule);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-meta);
  white-space: nowrap;
}

/* Colour never carries meaning alone: the dot AND the word "UŽIVO" (WCAG 1.4.1). */
.rs-badge--uzivo {
  border-color: var(--rs-koralj);
  color: var(--rs-koralj);
}

.rs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-koralj);
  animation: rs-pulse 2s var(--rs-ease-ui) infinite;
}

@keyframes rs-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.rs-match-when {
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-meta);
}

.rs-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-side b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-head);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-score {
  flex: 0 0 auto;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--ink-head);
}

.rs-score--muted {
  color: var(--ink-meta);
  font-size: 0.9375rem;
  font-weight: 600;
}

.rs-match-foot {
  border-top: 1px solid var(--ink-rule);
  padding-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-meta);
}

/* A small circular crest placeholder — real crests replace it when they arrive. */
.rs-shield {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs-r-sm);
  border: 1px solid var(--ink-rule);
  font-family: var(--rs-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 100%;
  color: var(--ink-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · EMPTY STATES — every one offers a way out
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-empty {
  border: 1px dashed var(--ink-rule);
  border-radius: var(--rs-r-lg);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
}

.rs-empty p {
  margin: 0 auto 20px;
  max-width: 56ch;
  color: var(--ink-body);
}

.rs-empty .rs-display-m {
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · COUNTERS (Montpellier)
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}

@media (max-width: 780px) {
  .rs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rs-stat {
  padding: clamp(28px, 4vw, 48px) 14px;
  text-align: center;
  position: relative;
}

.rs-stat + .rs-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--ink-rule);
}

@media (max-width: 780px) {
  .rs-stat:nth-child(3)::before {
    display: none;
  }
}

.rs-stat b {
  display: block;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 105%;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-head);
}

.rs-stat span {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-meta);
}

.rs-stats-note {
  margin: 18px 0 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 · CHIPS AND CARD GRIDS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.rs-chip {
  appearance: none;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--rs-r-pill);
  border: 1px solid var(--ink-rule);
  background: var(--ink-card);
  color: var(--ink-body);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    border-color var(--rs-t-micro) var(--rs-ease-ui),
    color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-chip:hover {
  border-color: var(--rs-koralj);
  color: var(--ink-head);
}

.rs-chip[aria-pressed="true"] {
  background: var(--rs-tinta);
  border-color: var(--rs-tinta);
  color: var(--rs-bijela);
}

/* ⚠ THE `min()` IS LOad-BEARING — `minmax(300px, 1fr)` ALONE OVERFLOWS.
   A bare minmax floor is a HARD minimum: at a 288px content width (a 320px
   viewport, which is WCAG 1.4.10's floor and also 200% zoom on a 720px screen)
   the track is still forced to 300/320/400px, the grid grows wider than its
   container and the whole document scrolls sideways.
   `min(<floor>, 100%)` lets the track collapse to the container when the
   container is the smaller of the two. Measured: 16px of sideways scroll at
   320px before this, 0 after. */
.rs-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.rs-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}

.rs-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* ⚠ AND the `min()` is still not enough on its own, which is why this block exists.
   During the INTRINSIC sizing pass the grid's container width is indefinite, so the `100%`
   in `min(320px, 100%)` cannot resolve and the floor falls back to the full 320px. The
   grid's own min-content width therefore stays 320px, it blows past a 288px content box,
   and the document scrolls sideways by a few pixels — small enough to miss by eye and
   still a WCAG 1.4.10 failure at the 320px floor.
   One column below 420px removes the floor entirely. Measured across all 27 pages at
   twelve widths: 320/360/390 went 5/3/2px → 0. */
@media (max-width: 420px) {
  .rs-grid,
  .rs-grid--2,
  .rs-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* `min-width: 0` + `overflow-wrap` are the second half of the grid-blowout fix above.
   A `1fr` track is `minmax(auto, 1fr)`, and that `auto` minimum is the item's MIN-CONTENT
   width — so a card whose longest unbreakable run exceeds the track makes the track grow,
   and the grid overflows its container even though the floor is already `min(…, 100%)`.
   Measured: 2px of sideways scroll at 390px from exactly this. */
.rs-card {
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  padding: 26px;
  min-width: 0;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform var(--rs-t-micro) var(--rs-ease-ui),
    border-color var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-card:hover {
  transform: translateY(-2px);
  border-color: var(--rs-koralj);
}

.rs-card p {
  color: var(--ink-body);
  margin: 0;
}

.rs-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.rs-card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* The competition card's own age plate — the one place a number is allowed to
   be large in a card, because an age group IS the identity of the league. */
.rs-uzrast {
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rs-koralj-700);
}

.rs-band--tinta .rs-uzrast,
.rs-band--tinta-900 .rs-uzrast {
  color: var(--rs-koralj);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 · AGE LADDER
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-ladder li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.875rem;
  color: var(--ink-head);
}

.rs-ladder li::after {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--rs-koralj);
}

.rs-ladder li:last-child::after {
  display: none;
}

.rs-ladder-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-rule);
}

.rs-ladder-row > b {
  min-width: 78px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · MAP AND CLUB LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

@media (max-width: 980px) {
  .rs-map-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rs-map {
  background: var(--rs-tinta-700);
  border: 1px solid var(--rs-rule-on-tinta);
  border-radius: var(--rs-r-xl);
  padding: 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs-map svg {
  width: 100%;
  height: auto;
}

.rs-pin {
  fill: var(--rs-koralj);
  cursor: pointer;
  transition: fill var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-pin:hover {
  fill: var(--rs-bijela);
}

.rs-search {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--rs-r-sm);
  border: 1px solid var(--ink-rule);
  background: var(--ink-card);
  color: var(--ink-head);
  font: inherit;
  font-size: 0.9375rem;
}

.rs-search::placeholder {
  color: var(--ink-meta);
}

.rs-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.rs-list li {
  border-bottom: 1px solid var(--ink-rule);
}

.rs-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--ink-head);
  font-weight: 500;
}

.rs-list a:hover {
  color: var(--rs-koralj);
}

.rs-list small {
  margin-left: auto;
  color: var(--ink-meta);
  font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13 · DOCUMENT ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--ink-rule);
  text-decoration: none;
  color: var(--ink-head);
}

.rs-doc:hover {
  color: var(--rs-koralj);
}

/* The hexagon marker — from the ball's seam. One of only four places the shape is
   allowed to appear (design spec §4); it is not an icon set. */
.rs-hex {
  flex: 0 0 auto;
  width: 12px;
  height: 14px;
  background: var(--rs-koralj);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.rs-doc-main {
  min-width: 0;
  flex: 1 1 auto;
}

.rs-doc-main b {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Type and size are IN the link text, never a bare "Preuzmi" (WCAG 2.4.4). */
.rs-doc-main small {
  display: block;
  margin-top: 3px;
  color: var(--ink-meta);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14 · PULT — three columns
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-pult {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 980px) {
  .rs-pult {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15 · FAQ / ŠKOLA
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-qa {
  border-top: 1px solid var(--ink-rule);
  padding: 24px 0;
}

.rs-qa h3 {
  margin: 0 0 10px;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.0625rem;
  color: var(--ink-head);
}

.rs-qa p {
  margin: 0;
  color: var(--ink-body);
  max-width: 62ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16 · PARTNERS
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.rs-partner {
  flex: 1 1 200px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-head);
}

/* Gold marks the TIER, never the partner's own logo (brand rules). 5.0:1 on ink. */
.rs-tier {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rs-zlato);
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17 · FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-foot {
  position: relative;
  overflow: hidden;
  /* The hero's gradient, mirrored: the page opens on a lift at the top-left and closes
     on one at the bottom-right, so the two ink bands read as a pair bracketing the
     content rather than as a header and an unrelated slab. */
  background:
    radial-gradient(120% 90% at 88% 100%, var(--rs-tinta-700) 0%, transparent 58%),
    linear-gradient(180deg, var(--rs-tinta) 0%, var(--rs-tinta-900) 62%);
  color: var(--rs-ink-on-tinta);
  padding-block: clamp(48px, 7vw, 80px) 32px;
  --ink-rule: var(--rs-rule-on-tinta);
}

/* ── FOOTER ────────────────────────────────────────────────────────────────
   LEFT-ALIGNED on desktop, because every other band on this site is — a
   centred footer read as a different page stapled to the bottom. Still
   CENTRED on a phone, which is the arrangement Ante said he liked.
   ────────────────────────────────────────────────────────────────────────── */

.rs-foot-top {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(32px, 5vw, 52px);
}

.rs-foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rs-foot-mark {
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rs-bijela);
}

.rs-foot-full {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--rs-ink-on-tinta);
  max-width: 30ch;
}

/* The one line of brand on the whole site. Coral clears 5.17:1 on the footer
   floor; on the lighter ink it is 3.90:1 and could not carry this at any size. */
.rs-foot-slogan {
  margin: 24px 0 0;
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rs-koralj);
}

.rs-foot-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.rs-foot-group h2 {
  margin: 0 0 14px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rs-foot-head);
}

/* Every contact detail and every link is its OWN line and its own tap target.
   The previous version ran them together with dots, which wrapped into four
   lines of mush and gave a thumb nothing to aim at. */
.rs-foot-group a,
.rs-foot-row {
  display: block;
  padding-block: 7px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--rs-ink-on-tinta);
  text-decoration: none;
}

.rs-foot-group a:hover,
.rs-foot-row:hover {
  color: var(--rs-bijela);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ── the base: three lines, each doing one job ─────────────────────────── */

.rs-foot-base {
  display: grid;
  gap: 10px;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rs-rule-on-tinta);
  font-size: 0.8125rem;
  color: var(--rs-foot-head);
}

.rs-foot-ids,
.rs-foot-legal,
.rs-foot-sig {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
}

.rs-foot-ids {
  font-variant-numeric: tabular-nums;
}

.rs-foot-ids a,
.rs-foot-legal a,
.rs-foot-sig a {
  color: inherit;
  text-decoration: none;
}

/* Every link in the base is a tap target, the identifiers row included — it was the one
   left out and it came back at 21px, under the 24px floor. */
.rs-foot-ids a,
.rs-foot-legal a,
.rs-foot-sig a {
  display: inline-block;
  padding-block: 6px;
}

.rs-foot-ids a:hover,
.rs-foot-legal a:hover,
.rs-foot-sig a:hover,
.rs-foot-legal a:focus-visible,
.rs-foot-sig a:focus-visible {
  color: var(--rs-bijela);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ── desktop: the footer joins the page's own left-aligned rhythm ──────── */

@media (min-width: 860px) {
  .rs-foot-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .rs-foot-groups {
    justify-items: start;
  }

  /* The signature sits opposite the identifiers rather than under them —
     the base is wide enough here to read as one line instead of three. */
  .rs-foot-sig {
    justify-content: space-between;
  }
}

/* ── phone: the arrangement Ante kept ─────────────────────────────────── */

@media (max-width: 859px) {
  .rs-foot-top,
  .rs-foot-base {
    justify-items: center;
    text-align: center;
  }

  .rs-foot-brand {
    justify-content: center;
  }

  .rs-foot-full {
    margin-inline: auto;
  }

  /* The PAIR is centred; the lists inside are not. A column of items with a ragged
     centre axis is harder to scan than the same column with a left edge — centring is
     right for the mark and the slogan above, wrong for a list of five links. */
  .rs-foot-groups {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    text-align: left;
  }

  .rs-foot-ids,
  .rs-foot-legal,
  .rs-foot-sig {
    justify-content: center;
  }
}

/* Two groups side by side stop working below ~360px, where each gets 150px
   and "Suci i delegati" wraps to three lines. */
@media (max-width: 380px) {
  .rs-foot-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   18 · THE WIZARD
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-wiz {
  background: var(--ink-card);
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-xl);
  padding: clamp(24px, 4vw, 40px);
  max-width: 620px;
  /* Centred on a wide screen. A 620px card pinned to the left of a 1600px band reads as
     the leftovers of a two-column layout that never arrived. */
  margin-inline: auto;
}

.rs-wiz-step {
  display: none;
}

.rs-wiz-step[data-active="1"] {
  display: block;
}

/* No script: every step is visible and the whole thing is a plain form the visitor
   can read top to bottom, with a real wa.me link at the end. */
html:not(.rs-js) .rs-wiz-step {
  display: block;
  border-bottom: 1px solid var(--ink-rule);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

html:not(.rs-js) .rs-wiz-nav {
  display: none;
}

.rs-wiz-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-meta);
}

.rs-wiz-bar {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 3px;
  background: var(--ink-rule);
  overflow: hidden;
}

.rs-wiz-bar i {
  display: block;
  height: 100%;
  background: var(--rs-koralj);
  transition: width var(--rs-t-ui) var(--rs-ease-trag);
}

.rs-field {
  display: block;
  margin-bottom: 18px;
}

.rs-field > span {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-head);
}

.rs-input,
.rs-textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-sm);
  background: var(--rs-bijela);
  color: var(--rs-tinta);
  font: inherit;
  font-size: 1rem;
}

.rs-textarea {
  min-height: 110px;
  resize: vertical;
}

.rs-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-opt {
  position: relative;
}

.rs-opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.rs-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-body);
}

.rs-opt input:checked + span {
  background: var(--rs-tinta);
  border-color: var(--rs-tinta);
  color: var(--rs-bijela);
}

.rs-opt input:focus-visible + span {
  outline: 2px solid var(--rs-more);
  outline-offset: 3px;
}

/* MUST wrap. The last step shows "Natrag" beside "Otvori WhatsApp s porukom", and that
   second label is 131px on its own — at 320px the row overflowed the card by 69px and
   pushed the whole document sideways. Croatian button labels are long; assume they wrap. */
.rs-wiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.rs-err {
  margin: 8px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-koralj-700);
}

.rs-wiz-note {
  margin: 20px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   19 · REVEAL — the TRAG entrance

   The ramp from the mark (§5.2), amplitude reduced: 0.27→1.0 is right for a
   logo and far too much for a paragraph. Only transform and opacity animate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠ THERE IS NO `rotate()` HERE, AND IT MUST NOT COME BACK.
   Design spec §5.2 specifies `rotate(-1.2deg)` in the entrance ramp. It cannot ship on
   block-level wrappers: a rotated box's BOUNDING RECT is wider than its layout box by
   roughly height x sin(angle), so a 288px-wide, ~900px-tall section measured 329px until
   the IntersectionObserver reached it — widening the document and producing a real
   horizontal scrollbar at 320/360/390px (5/3/2px). Small enough to miss by eye, and still
   a WCAG 1.4.10 failure at the 320px floor, which is also 200% zoom on a 720px screen.
   The tilt is invisible at 1.2 degrees on a 620ms fade; the scrollbar is not. Opacity,
   translate and scale carry the whole effect and none of them widens the box.
   (`overflow-x: clip` on body was tried first and does NOT fix it — Chrome still reports
   the grown scrollWidth. It stays as a cheap guard against future decorative overflow.) */
html.rs-js [data-rs-reveal] {
  opacity: 0.56;
  transform: translateY(14px) scale(0.94);
  transition:
    opacity var(--rs-t-reveal) var(--rs-ease-trag),
    transform var(--rs-t-reveal) var(--rs-ease-trag);
  transition-delay: var(--rs-delay, 0ms);
}

html.rs-js [data-rs-reveal][data-rs-in="1"] {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20 · REDUCED MOTION — tested, not assumed
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html.rs-js [data-rs-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rs-dot {
    animation: none;
    opacity: 1;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21 · PRINT

   A printed page has no brand ground, so this block names neutral values on
   purpose — the one documented exception to the no-literals rule. A fixtures
   list and a delegation table WILL be printed and pinned to a notice board.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .rs-crests,
  .rs-nav,
  .rs-burger,
  .rs-navpanel,
  .rs-hero-trag,
  .rs-wiz-nav {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .rs-band,
  .rs-hero,
  .rs-foot {
    background: #fff !important;
    color: #000 !important;
    padding-block: 12pt !important;
    --ink-head: #000;
    --ink-body: #222;
    --ink-meta: #444;
    --ink-rule: #bbb;
    --ink-card: #fff;
  }

  .rs-foot a,
  .rs-foot-mark,
  .rs-foot-slogan,
  .rs-foot h2,
  .rs-foot h3,
  .rs-foot-dot {
    color: #000 !important;
  }

  .rs-card,
  .rs-match,
  .rs-empty,
  .rs-wiz,
  .rs-count {
    border-color: #bbb !important;
    border-radius: 0 !important;
    break-inside: avoid;
  }

  .rs-rail {
    display: block;
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22 · DEMO MODE

   Only ever rendered when the demo dataset is explicitly switched on. It is
   loud on purpose — a subtle watermark survives neither a screenshot nor a
   forward, and the whole point is that nobody mistakes a fabricated league
   table for a real one.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-demo {
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  position: relative;
  z-index: 50;
}

.rs-demo-in {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 12px;
}

.rs-demo-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--rs-r-sm);
  background: var(--rs-bijela);
  color: var(--rs-koralj-700);
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.rs-demo-text {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.rs-demo-text b {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23 · TABLES — standings and scorers
   ═══════════════════════════════════════════════════════════════════════════ */

/* The wrapper scrolls, never the page. A standings table has nine columns and a
   phone has 320px; letting the DOCUMENT scroll sideways to fit it is the bug
   this whole file has been careful to avoid. */
.rs-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--ink-rule);
  border-radius: var(--rs-r-lg);
  background: var(--ink-card);
}

.rs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.rs-table caption {
  text-align: left;
}

.rs-table th,
.rs-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink-rule);
  white-space: nowrap;
}

.rs-table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-meta);
  background: var(--ink-card);
  position: sticky;
  top: 0;
}

.rs-table tbody th {
  font-weight: 600;
  color: var(--ink-head);
  white-space: normal;
}

.rs-table tbody tr:last-child th,
.rs-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Zebra, at a weight that survives both grounds. */
.rs-table tbody tr:nth-child(odd) th,
.rs-table tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--ink-rule) 26%, transparent);
}

.rs-t-num {
  text-align: right;
  font-family: var(--rs-font-display);
  font-variant-numeric: tabular-nums;
  font-stretch: 100%;
  font-weight: 600;
  color: var(--ink-body);
}

.rs-table tbody .rs-t-num b {
  color: var(--ink-head);
  font-weight: 800;
}

.rs-t-club {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The crest must not stop the NAME from wrapping. Without min-width:0 the flex item
     refuses to shrink past its content and "RK Salonitanski most" holds the whole table
     open at 320px, pushing the points column into a scroll. */
  min-width: 0;
}

.rs-t-club > span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Secondary columns fold away on a phone rather than forcing a scroll. */
@media (max-width: 640px) {
  .rs-t-hide {
    display: none;
  }

  .rs-table th,
  .rs-table td {
    padding: 10px 8px;
  }
}

.rs-crest-svg {
  flex: 0 0 auto;
  display: block;
}

.rs-crest--img {
  padding-inline: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24 · CLUB PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-klub-head {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
}

.rs-klub-crest {
  flex: 0 0 auto;
  display: inline-flex;
}

.rs-kv {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-rule);
  font-size: 0.9375rem;
}

.rs-kv b {
  flex: 0 0 clamp(64px, 22vw, 92px);
  color: var(--ink-meta);
  font-weight: 600;
}

.rs-kv span {
  color: var(--ink-head);
  /* An IBAN is a single unbreakable 21-character token. In a 274px card at 320px it
     held the row open and scrolled the document; `anywhere` is the one place breaking
     mid-token is right, because the alternative is a number nobody can read at all. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ⚠ The competition badge on a match card carries a FULL competition name — "Mini
   rukometna liga SDŽ U10 — muški" is 35 characters. `.rs-badge` is `white-space: nowrap`,
   which is right for "UŽIVO" and "Odgođeno" and very wrong here: it set a 386px
   min-content floor on the card, blew out the grid track and scrolled the page sideways
   by 91px at 320px. Only the card's own label wraps; the state badges beside it keep
   their nowrap, because a wrapped "UŽIVO" reads as two words. */
.rs-match-top .rs-badge:first-child {
  white-space: normal;
  text-align: left;
}

/* A step now holds a GROUP of fields, so it needs to say what the group is about —
   otherwise two screens of unlabelled inputs read as one form split in half. */
.rs-wiz-step-title {
  margin: 0 0 18px;
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.0625rem;
  color: var(--ink-head);
}

/* The per-field error sits under its own field, not at the end of the screen. */
.rs-field + .rs-err {
  margin: -10px 0 16px;
}

/* ⚠ COLUMN PRIORITY. A standings table has nine columns and a phone has 360px, so some
   have to go — and WHICH ones is the whole question. Position, club and POINTS are what
   the table exists to answer; played and goal difference are how you read it; W/D/L and
   the goals-for:against pair are detail.

   The first version folded only goals and average, which left nine minus one — still too
   wide, so the wrapper scrolled and "Bod" sat off the right edge. The column a parent came
   for was the one you had to discover a sideways scroll to reach. Fold W/D/L too and the
   remaining five fit: # · klub · OU · +/− · Bod. */
@media (max-width: 520px) {
  .rs-t-wdl {
    display: none;
  }
}

/* 4px over at 320px, entirely in cell padding: five columns x 16px of it. Six pixels a
   side keeps the numerals from touching and brings the table inside the wrapper, so even
   at the WCAG floor the points column is visible without a sideways scroll. */
@media (max-width: 380px) {
  .rs-table th,
  .rs-table td {
    padding: 10px 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   25 · THE SEND CHANNELS

   Four ways to send the same answers, revealed together on the last screen.
   Stacked, not a row: the labels are Croatian sentences ("Radije nazovi savez"
   is 19 characters) and a row of four would wrap into rubble at 320px. A stack
   also makes the ORDER carry the recommendation, which a row cannot.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-wiz-send {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-rule);
}

.rs-wiz-send-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-meta);
}

/* The call sits apart from the three that carry the message — it is a different
   action, not a fourth way to submit, and the gap says so before the label does. */
.rs-wiz-send [data-rs-send="tel"] {
  margin-top: 6px;
}

/* No script: every channel is a real link already, so the box must not stay hidden. */
html:not(.rs-js) .rs-wiz-send[hidden] {
  display: grid;
}

/* ═══════════════════════════════════════════════════════════════════════════
   26 · THE SPLIT CTA

   "Upiši dijete" plus a caret. Most visitors are parents, so the main action
   keeps its one tap and full label; the caret carries everything else the
   federation can be contacted about.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-cta {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.rs-cta-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-inline: 22px;
}

.rs-cta-more {
  display: inline-grid;
  place-items: center;
  /* 44px wide: this is the one control on the page a thumb hits by mistake if it is
     narrow, and hitting it by mistake navigates away from the form. */
  width: 44px;
  min-height: 48px;
  border-radius: 0 var(--rs-r-md) var(--rs-r-md) 0;
  background: var(--rs-koralj-700);
  color: var(--rs-bijela);
  text-decoration: none;
  /* A hairline so the two halves read as one control with two jobs, rather than
     as a button that happens to touch another button. */
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  transition: background var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-cta-more:hover {
  background: var(--rs-koralj);
  color: var(--rs-bijela);
}

.rs-cta-more svg {
  transition: transform var(--rs-t-ui) var(--rs-ease-ui);
}

.rs-cta-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.rs-cta-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 260px;
  display: grid;
  padding: 6px;
  border-radius: var(--rs-r-lg);
  /* Its own ground, not the band's: this opens over ink in the header and over paper
     in a section, and a translucent panel would read differently in each. */
  background: var(--rs-bijela);
  border: 1px solid var(--rs-magla-300);
  box-shadow: var(--e2);
}

.rs-cta-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--rs-r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rs-tinta);
}

.rs-cta-menu a:hover,
.rs-cta-menu a:focus-visible {
  background: var(--rs-magla);
  color: var(--rs-tinta);
}

/* No script: the caret is a plain link to /prijave, so the panel must never appear. */
html:not(.rs-js) .rs-cta-menu {
  display: none;
}

/* In the mobile panel the CTA is full width, so the caret goes with it. */
.rs-navpanel .rs-cta {
  display: flex;
  width: 100%;
  margin-top: 16px;
}

.rs-navpanel .rs-cta-main {
  flex: 1 1 auto;
}

.rs-navpanel .rs-cta-menu {
  right: 0;
  left: 0;
}

/* Three wizards, one centred column. Wide enough to read, narrow enough that a form
   still looks like a form rather than a page-width table of inputs. */
.rs-wiz-stack {
  display: grid;
  gap: clamp(20px, 4vw, 32px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   27 · THE FOOTER LOCKUP

   The ball plus the wordmark as live Archivo, per brand rules §6 — the delivered
   lockup carries the typeface embedded and weighs 239 KB, and this page already
   has Archivo loaded.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-foot-trag {
  position: absolute;
  left: -6%;
  bottom: -18%;
  width: min(620px, 70%);
  color: var(--rs-koralj);
  /* Lower than the hero's 13 %: the footer carries small print and legal identifiers,
     and a motif competing with an IBAN is a motif in the wrong place. */
  opacity: 0.07;
  pointer-events: none;
}

.rs-foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.rs-foot-mark {
  display: block;
  font-family: var(--rs-font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rs-bijela);
}

.rs-foot-full {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--rs-ink-on-tinta);
  max-width: 26ch;
}

/* The columns and the bottom bar sit above the motif. */
.rs-foot > .rs-in {
  position: relative;
  z-index: 1;
}

/* The single exception: with no script the send channels are the only way through, so
   the box must show even though the markup ships it hidden for the scripted path. */
html:not(.rs-js) .rs-wiz-send[hidden] {
  display: grid !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   28 · FLOATING ACTION BUTTON

   Four things somebody wants from a federation in a hurry: message, call,
   e-mail, directions.

   ⚠ `position: fixed` means the CONTAINING BLOCK matters. An ancestor with a
   `transform`, `filter`, `perspective` or `container-type` becomes the
   containing block for its fixed descendants, and this would pin itself to
   that band instead of the viewport — the exact bug another site in this
   studio shipped with a lightbox. The markup emits it at BODY level, outside
   every band. Do not move it inside one.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs-fab {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  /* Above the iOS home indicator, and above nothing else — the page has no bottom bar. */
  bottom: calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.rs-fab-items {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.rs-fab-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  min-height: 44px;
  border-radius: var(--rs-r-pill);
  background: var(--rs-bijela);
  border: 1px solid var(--rs-magla-300);
  box-shadow: var(--e2);
  color: var(--rs-tinta);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.rs-fab-item:hover {
  border-color: var(--rs-koralj);
  color: var(--rs-tinta);
}

.rs-fab-ico {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--rs-koralj-700);
}

.rs-fab-btn {
  display: inline-grid;
  place-items: center;
  /* 56px — the one control on the page that is always reachable, so it gets the full
     AAA target rather than the 24px AA floor. */
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--rs-koralj-700);
  /* Ink on coral, not white: white is 3.0:1 and this is a control, not decoration. */
  color: var(--rs-tinta-900);
  cursor: pointer;
  box-shadow: var(--e2);
  transition: background var(--rs-t-micro) var(--rs-ease-ui);
}

.rs-fab-btn:hover {
  background: var(--rs-koralj);
}

.rs-fab-close {
  display: none;
}

.rs-fab[data-open="1"] .rs-fab-open {
  display: none;
}

.rs-fab[data-open="1"] .rs-fab-close {
  display: grid;
  place-items: center;
}

/* No script: the four links stand open. A trigger that cannot fold them is not a
   trigger, so it goes away rather than sitting there doing nothing. */
html:not(.rs-js) .rs-fab-items[hidden] {
  display: grid !important;
}

html:not(.rs-js) .rs-fab-btn {
  display: none;
}

/* Printing a fixed control puts a coral circle over the fixtures list. */
@media print {
  .rs-fab {
    display: none !important;
  }
}

/* ⚠ NO GENERIC `.rs-foot a` RULE. There was one, and it set `display: inline-block` —
   same specificity as `.rs-foot-group a`, later in the file, so it won and every contact
   row and footer link ran together on one line: "Osječka ul. 11, 21000 Splitrs.split@hrs.hr".

   It also referenced `.rs-foot-nav` and `.rs-foot-reach`, classes the footer stopped
   emitting a rewrite ago. Every footer link now carries its own rule with its own padding
   — see .rs-foot-group a, .rs-foot-legal a and .rs-foot-sig a — so nothing generic is
   needed and nothing generic can out-rank them again. */

/* ⚠ The footer reserves room for the FAB. It is `position: fixed`, so it sits over
   whatever the page ends with — and what this page ends with is the signature line and the
   legal links. Measured against the control: 56px button + its 28px offset, plus air. */
.rs-foot {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}