/* =====================================================================
   Mapa Sędziów — arkusz główny
   Identyfikacja wizualna: Ink / Canvas / Corner Red /
   Championship Gold / Slate. Element sygnaturowy: ścięty narożnik
   (nawiązanie do karty sędziowskiej) — realizowany przez clip-path.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fonty
   Hostowane lokalnie (public/assets/fonts) — bez Google Fonts CDN:
   `font-src` w CSP zostaje przy 'self', a IP odwiedzających nie trafia
   do zewnętrznego serwisu. Wszystkie trzy kroje są na licencji SIL OFL 1.1.

   Podzbiory latin + latin-ext. Oba są konieczne: polskie znaki
   (ą, ć, ę, ł, ń, ś, ź, ż) leżą w latin-ext, a przeglądarka pobiera
   drugi plik dopiero gdy któryś z tych znaków wystąpi na stronie.

   Inter i JetBrains Mono to fonty zmienne — jeden plik obsługuje cały
   zakres wag, więc 400/500/600/700 nie wymagają osobnych plików
   (deklaracja `font-weight: 100 900` włącza interpolację osi wagi).
   Z Oswalda ściągamy tylko wagę 700 (Bold) — jedyną, jakiej używamy
   na nagłówkach.
   ------------------------------------------------------------------ */

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    /* latin */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-700-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    /* latin-ext */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-variable-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* latin */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-variable-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* latin-ext */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    /* latin */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-variable-latin-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    /* latin-ext */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F;
}

/* ---------------------------------------------------------------------
   2. Tokeny
   ------------------------------------------------------------------ */

:root {
    --ink: #17181C;
    --canvas: #F1F1EC;
    --red: #C1272D;
    --gold: #C89B3C;
    --slate: #5B5F66;

    --surface: #FFFFFF;
    --ink-soft: #24262C;
    --line: rgba(23, 24, 28, 0.14);
    --line-dark: rgba(241, 241, 236, 0.16);

    --red-dark: #A11F25;

    /* Ścięcie narożnika — element sygnaturowy */
    --cut: 14px;
    --cut-sm: 9px;

    --font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    --wrap: 1180px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ---------------------------------------------------------------------
   3. Reset
   ------------------------------------------------------------------ */

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

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

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; cursor: pointer; }

h1, h2, h3 { margin: 0; line-height: 1.05; }

p { margin: 0 0 1rem; }

p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   4. Typografia
   ------------------------------------------------------------------ */

.mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Adresy e-mail i numery telefonu zostawiamy tak, jak je wpisano —
   wersaliki z .mono zmieniałyby treść, a nie tylko wygląd. */
.mono--as-is {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.eyebrow {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid currentColor;
    color: var(--gold);
    font-size: 0.72rem;
}

/* ---------------------------------------------------------------------
   5. Układ
   ------------------------------------------------------------------ */

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

.wrap--narrow { max-width: 760px; }

main { display: block; min-height: 50vh; }

.section-head { margin-bottom: 2rem; }

.section-head__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    text-transform: uppercase;
    letter-spacing: 0;
}

.section-head__note {
    margin-top: 0.6rem;
    max-width: 60ch;
    color: var(--slate);
}

/* ---------------------------------------------------------------------
   6. Element sygnaturowy: ścięty narożnik
   ------------------------------------------------------------------ */

.cut {
    clip-path: polygon(
        0 0,
        calc(100% - var(--cut)) 0,
        100% var(--cut),
        100% 100%,
        0 100%
    );
}

.btn.cut { --cut: var(--cut-sm); }

/* ---------------------------------------------------------------------
   7. Przyciski
   ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: 2px solid transparent;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary { background: var(--red); color: var(--canvas); }
.btn--primary:hover { background: var(--red-dark); }

.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--canvas); }

.btn--ghost { color: inherit; background: transparent; border-color: transparent; }
.btn--ghost:hover { color: var(--gold); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.78rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   8. Nagłówek
   ------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    color: var(--canvas);
    border-bottom: 1px solid var(--line-dark);
}

.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(23, 24, 28, 0.25); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.brand__logo {
    width: 44px;
    height: 44px;
    flex: none;
    object-fit: contain;
}

.brand__logo--lg { width: 56px; height: 56px; }

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand__meta {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
}

.site-nav { display: flex; align-items: center; gap: 2rem; }

.site-nav__list { display: flex; align-items: center; gap: 1.5rem; }

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2.4rem;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(241, 241, 236, 0.82);
}

.site-nav__link:hover { color: var(--canvas); }

.site-nav__link.is-active { color: var(--canvas); }

.site-nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--gold);
}

.site-nav__actions { display: flex; align-items: center; gap: 0.75rem; }

.site-nav__actions .btn { height: 2.4rem; }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid var(--line-dark);
    color: var(--canvas);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nav-toggle__bars {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* ---------------------------------------------------------------------
   9. Hero
   ------------------------------------------------------------------ */

.hero {
    position: relative;
    background: var(--ink);
    color: var(--canvas);
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
    overflow: hidden;
}

/* Delikatne ukośne pasy — nawiązanie do taśmy narożnika ringu.
   Kontrast celowo bardzo niski (0.02), żeby nie konkurował z tekstem
   hero — tytuł dostaje własny text-shadow zamiast polegać na tym, że
   deseń w tle jest wystarczająco cichy. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(241, 241, 236, 0.02) 0 2px,
        transparent 2px 14px
    );
    pointer-events: none;
}

.hero__inner { position: relative; }

.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    /* Dolna granica 2rem, nie 2.5rem: na wąskich telefonach (~320-375px)
       to jedyny rozmiar, przy którym którakolwiek z trzech linii jeszcze
       nie zawija się dodatkowo sama. */
    font-size: clamp(2rem, 8.5vw, 5.25rem);
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow: 0 2px 16px rgba(23, 24, 28, 0.55);
}

.hero__title-accent { color: var(--gold); }

.hero__lead {
    margin-top: 1.75rem;
    max-width: 58ch;
    font-size: 1.1rem;
    color: rgba(241, 241, 236, 0.78);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }

.hero .btn--outline { border-color: var(--canvas); color: var(--canvas); }
.hero .btn--outline:hover { background: var(--canvas); color: var(--ink); }

/* ---------------------------------------------------------------------
   10. Statystyki
   ------------------------------------------------------------------ */

.stats { padding-block: clamp(2rem, 5vw, 3rem); }

.stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
}

.stat__value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    text-transform: none;
    line-height: 1;
}

.stat__value--word { font-size: 1.4rem; }

.stat__label {
    font-size: 0.85rem;
    color: var(--slate);
}

/* ---------------------------------------------------------------------
   11. Mapa Polski
   ------------------------------------------------------------------ */

.map-section { padding-block: clamp(2.5rem, 6vw, 4rem); }

.map {
    position: relative;
    max-width: 780px;
    margin-inline: auto;
}

.map__svg {
    width: 100%;
    height: auto;
    /* Powiększony region wychodzi poza swój obszar — nie obcinamy go. */
    overflow: visible;
}

.map__link { cursor: pointer; }

.map__region {
    fill: var(--surface);
    stroke: var(--ink);
    stroke-width: 1.1;
    stroke-linejoin: round;
    transition: fill 0.18s ease;
}

/* Województwo, w którym są już sędziowie — odrobinę cieplejsze tło. */
.map__region[data-has-judges='1'] { fill: #E3E7EE; }

.map__link:hover .map__region,
.map__link:focus-visible .map__region { fill: var(--red); }

.map__link:focus-visible { outline: none; }

.map__link:focus-visible .map__region {
    stroke: var(--gold);
    stroke-width: 3;
}

/* Warstwa podświetlenia: kopia kształtu rysowana NA WIERZCHU pozostałych
   regionów. Dzięki niej powiększenie nie chowa się pod sąsiadem, a przy
   tym nie przestawiamy elementów interaktywnych w trakcie najechania. */
.map__highlight {
    fill: var(--red);
    stroke: var(--ink);
    stroke-width: 1.1;
    stroke-linejoin: round;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.045);
    filter: drop-shadow(0 6px 14px rgba(23, 24, 28, 0.35));
    transition: transform 0.18s ease;
}

.map__highlight[hidden] { display: none; }

.map__tooltip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.85rem;
    background: var(--ink);
    color: var(--canvas);
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -135%);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    box-shadow: 0 10px 24px rgba(23, 24, 28, 0.28);
}

.map__tooltip[hidden] { display: none; }

.map__tooltip-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.map__tooltip-count {
    font-size: 0.68rem;
    color: var(--gold);
}

.map__status {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.68rem;
    color: var(--slate);
}

.map__status:empty { display: none; }

/* --- Lista województw (wersja bez mapy) ------------------------------ */

.region-list { margin-top: 2.5rem; }

.region-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 0.6rem;
}

.region-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.region-list__item:hover,
.region-list__item:focus-visible,
.region-list__item.is-highlighted {
    border-color: var(--red);
    background: #FBF7F7;
}

.region-list__name { font-size: 0.95rem; }

.region-list__count { color: var(--slate); font-size: 0.72rem; }

@media (max-width: 620px) {
    .map { max-width: 100%; }
    .map__tooltip { transform: translate(-50%, -145%); }
    .map__tooltip-name { font-size: 0.95rem; }
}

/* ---------------------------------------------------------------------
   12. Kroki
   ------------------------------------------------------------------ */

.steps { padding-block: clamp(2.5rem, 6vw, 4rem); }

.steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    counter-reset: step;
}

.step {
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
}

.step__no {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.02em;
}

.step__title {
    margin-bottom: 0.6rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.25rem;
}

.step__text { color: var(--slate); font-size: 0.98rem; }

/* ---------------------------------------------------------------------
   13. Pasek CTA
   ------------------------------------------------------------------ */

.cta-band {
    background: var(--ink);
    color: var(--canvas);
    padding-block: clamp(2.5rem, 6vw, 3.5rem);
}

.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cta-band__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: 0;
}

.cta-band__text { margin-top: 0.5rem; color: rgba(241, 241, 236, 0.85); }

/* ---------------------------------------------------------------------
   14. Strony treściowe
   ------------------------------------------------------------------ */

.page { padding-block: clamp(2.5rem, 7vw, 4.5rem); }

.page__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: 0;
}

.page__lead {
    margin-top: 1.1rem;
    font-size: 1.12rem;
    color: var(--slate);
}

.page__heading {
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.page__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

.page--error .eyebrow { color: var(--red); }

.panel {
    margin-top: 2rem;
    padding: 1.6rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
}

.panel__title {
    margin-bottom: 0.6rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------
   14b. Formularze
   ------------------------------------------------------------------ */

.wrap--form { max-width: 560px; }

.form { margin-top: 2rem; }

.field { margin-bottom: 1.5rem; }

.field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field__input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 2px solid var(--line);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

.field__input:focus {
    outline: none;
    border-color: var(--ink);
}

.field__input:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 1px;
}

.field--error .field__input { border-color: var(--red); }

.field__error {
    margin: 0.45rem 0 0;
    color: var(--red);
    font-size: 0.88rem;
    font-weight: 600;
}

.field__hint {
    margin: 0.45rem 0 0;
    color: var(--slate);
    font-size: 0.85rem;
}

.field--check { margin-bottom: 1.75rem; }

.check {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.5;
}

.check input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--red);
}

.form__foot {
    margin-top: 1.5rem;
    color: var(--slate);
    font-size: 0.92rem;
}

.form__foot a { color: var(--ink); text-underline-offset: 3px; }

/* Pole-pułapka na boty. Ukryte tak, żeby czytniki ekranu też je pomijały
   (kontener ma aria-hidden), ale bez display:none — część botów pomija
   pola całkowicie ukryte. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-nav__actions form { margin: 0; }

/* ---------------------------------------------------------------------
   14c. Formularz profilu: dyscypliny, podpowiedzi miast, zdjęcie
   ------------------------------------------------------------------ */

.form__summary {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.2rem;
    background: var(--surface);
    border-left: 3px solid var(--red);
    color: var(--red);
    font-weight: 600;
}

.fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; }

.fieldset legend { padding: 0; }

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem 1.25rem;
    margin-top: 0.35rem;
}

.field__textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.field__file { padding: 0.65rem 0.75rem; background: var(--surface); }

/* --- Pole z podpowiedziami (miejscowość) ---------------------------- */

.field--combo { position: relative; }

/* position/left/top/width nadpisywane inline przez city-autocomplete.js
   (position: fixed, liczone z getBoundingClientRect() inputu) — patrz
   komentarz przy reposition() w tym pliku. Wartości poniżej to tylko
   bezpieczny stan początkowy, zanim skrypt pierwszy raz otworzy listę. */
.combo {
    position: absolute;
    z-index: 200;
    left: 0;
    right: 0;
    max-height: 17rem;
    margin: 0;
    overflow-y: auto;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-top: 0;
}

.combo[hidden] { display: none; }

.combo__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.combo__item:hover,
.combo__item.is-active { background: var(--ink); color: var(--canvas); }

.combo__name { font-weight: 600; }

.combo__meta {
    flex: none;
    font-size: 0.72rem;
    color: var(--slate);
    text-align: right;
}

.combo__item:hover .combo__meta,
.combo__item.is-active .combo__meta { color: var(--gold); }

.combo__choices {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border-left: 3px solid var(--gold);
}

/* --- Obecne zdjęcie w formularzu edycji ----------------------------- */

.photo-current {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.9rem;
}

.photo-current__img { width: 120px; height: 120px; object-fit: cover; }

/* ---------------------------------------------------------------------
   14d. Podgląd własnego profilu
   ------------------------------------------------------------------ */

.status-line { margin: 0 0 1.75rem; }

.status {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: var(--ink);
    color: var(--canvas);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.status--pending  { background: var(--gold); color: var(--ink); }
.status--approved { background: #2E7D46; color: var(--canvas); }
.status--rejected { background: var(--red); color: var(--canvas); }
.status--hidden   { background: var(--slate); color: var(--canvas); }

.profile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.profile__photo { width: 180px; height: 180px; object-fit: cover; }

.profile__data {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    flex: 1 1 20rem;
    margin: 0;
}

.profile__data dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    padding-top: 0.2rem;
}

.profile__data dd { margin: 0; }

.profile__experience { white-space: normal; }

.tag {
    display: inline-block;
    margin: 0 0.35rem 0.35rem 0;
    padding: 0.2rem 0.6rem;
    background: var(--ink);
    color: var(--canvas);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.panel--warning { border-left: 3px solid var(--gold); }

.muted { color: var(--slate); }

/* Treść wyłącznie dla czytników ekranu (komunikaty o podpowiedziach). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   14e. Panel administratora
   Widoki panelu są gęstsze od reszty serwisu: to narzędzie pracy, nie
   witryna. Stąd tabele, mniejsze odstępy i kolumna z filtrami — ale ta
   sama paleta i ten sam ścięty narożnik.
   ------------------------------------------------------------------ */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.admin-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--slate);
    border: 1px solid transparent;
}

.admin-nav__link:hover { color: var(--ink); border-color: var(--line); }

.admin-nav__link.is-active {
    background: var(--ink);
    color: var(--canvas);
    border-color: var(--ink);
}

.admin-nav__badge {
    padding: 0.05rem 0.45rem;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-lead { margin-bottom: 1.5rem; color: var(--slate); font-size: 0.95rem; }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin-bottom: 2rem;
    background: var(--line);
    border: 1px solid var(--line);
}

.admin-stat { padding: 1rem 1.25rem; background: var(--surface); }

.admin-stat__value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.admin-stat__label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--slate);
}

/* --- Kolejka zgłoszeń ----------------------------------------------- */

.queue { display: grid; gap: 1rem; margin-bottom: 2.5rem; }

.queue__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
}

.queue__img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    background: var(--canvas);
}

.queue__img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: var(--slate);
    border: 1px dashed var(--line);
}

.queue__body { flex: 1 1 18rem; }

.queue__name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.2rem;
}

.queue__meta { margin: 0.35rem 0; font-size: 0.75rem; color: var(--slate); }

.queue__tags { margin: 0.5rem 0 0.35rem; }

.queue__date { margin: 0; font-size: 0.85rem; }

.queue__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

.queue__actions form { margin: 0; }

.queue__link {
    font-size: 0.8rem;
    color: var(--ink);
    text-underline-offset: 3px;
}

/* --- Filtry --------------------------------------------------------- */

.admin-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
}

.admin-filters__field { flex: 1 1 12rem; }

.admin-filters__field .field__input { margin-top: 0.25rem; }

.admin-filters__actions { display: flex; gap: 0.5rem; }

/* --- Tabele --------------------------------------------------------- */

/* Tabela musi mieć własny poziomy pasek przewijania — bez tego cała
   strona jeździłaby w bok na telefonie. */
.admin-table__scroll { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.admin-table th {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    background: var(--canvas);
    white-space: nowrap;
}

.admin-table tr.is-editing { background: rgba(200, 155, 60, 0.12); }

.admin-table__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.admin-table__actions form { margin: 0; }

.admin-table__link {
    font-size: 0.8rem;
    color: var(--ink);
    text-underline-offset: 3px;
}

.admin-table__link--danger { color: var(--red); }

.admin-table__note { font-size: 0.75rem; border-bottom: 1px dotted var(--slate); cursor: help; }

.swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.4rem;
    vertical-align: baseline;
    border: 1px solid var(--line);
}

.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pager__info { font-size: 0.8rem; color: var(--slate); }

/* --- Dwie kolumny (lista + formularz) ------------------------------- */

.admin-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
}

.admin-columns__main { min-width: 0; }

.admin-columns__aside .form { margin-top: 0; }

.admin-box {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 0;
    border-left: 3px solid var(--gold);
}

.admin-box .field:last-child { margin-bottom: 0; }

/* --- Ślad decyzji --------------------------------------------------- */

.admin-log__list { display: grid; gap: 0.5rem; font-size: 0.85rem; }

.admin-log__date { color: var(--slate); font-size: 0.72rem; }

.admin-log__action { color: var(--gold); font-size: 0.72rem; }

.admin-log__note { color: var(--ink); }

@media (max-width: 900px) {
    .admin-columns { grid-template-columns: minmax(0, 1fr); }
    .queue__actions { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------
   14f. Listy publiczne: filtry i karty sędziów
   (/wojewodztwo/{slug}, /sedziowie)
   ------------------------------------------------------------------ */

/* Blok „Najbliżej” — wydzielony, wyróżniony akcentem Gold, bo to
   główna unikalna funkcja serwisu (sortowanie po odległości), nie
   trzecie pole w rzędzie obok województwa i dyscypliny. */
.filters-highlight {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 2px solid var(--gold);
}

.filters-highlight__title {
    margin: 0 0 0.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}

.filters-highlight__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

/* margin-bottom: 0 nadpisuje ogólną regułę .field (1.5rem, myślaną pod
   pola ułożone jedno pod drugim) — w tym rzędzie zostawiona zmieniała
   dolną krawędź flex-itemu o 24px, więc align-items: flex-end na
   .filters-highlight__row równał przycisk do tej fałszywej krawędzi,
   a nie do faktycznego dołu pola input. */
.filters-highlight__field { flex: 1 1 16rem; max-width: 26rem; margin-bottom: 0; }
.filters-highlight__field .field__input { margin-top: 0.25rem; }

/* Wysokość zrównana z .field__input (padding 0.8rem + obramowanie 2px +
   linia tekstu przy font-size 1rem = 3rem), żeby flex-end na rzędzie
   równał środek przycisku ze środkiem pola, nie tylko ich dolne krawędzie. */
.filters-highlight__submit { flex: none; height: 3rem; }

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
}

.filters__field { flex: 1 1 12rem; }
.filters__field .field__input { margin-top: 0.25rem; }
.filters__actions { display: flex; gap: 0.5rem; }

.judge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.judge-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
}

.judge-card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.judge-card__avatar {
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--canvas);
}

.judge-card__name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
}

.judge-card__city { margin-top: 0.3rem; color: var(--slate); }

.judge-card__distance { color: var(--gold); }

.judge-card__pills { margin: 0; }

.tag--role { background: var(--gold); color: var(--ink); }

.judge-card__experience { font-size: 0.92rem; color: var(--ink-soft); }

/* Obcinamy po LICZBIE WIERSZY, nie po liczbie znaków — tekst pisany
   krótkimi liniami (wyliczenia, enter po każdym punkcie) przy limicie
   znaków dawał kartę wielokrotnie wyższą niż sąsiednie, mimo krótkiego
   tekstu, i rozjeżdżał siatkę. -webkit-line-clamp ma dziś pełne wsparcie
   (Chrome/Edge/Safari na prefiksie, Firefox honoruje ten sam prefiks
   dla zgodności) — bez potrzeby JS-owego polyfillu. Zwykły `line-clamp`
   dokładamy obok, na przyszłość, gdy przeglądarki przestaną wymagać
   prefiksu; tam, gdzie NIE rozumieją żadnej z wersji, tekst po prostu
   pokazuje się w całości — patrz experience-clamp.js. */
.judge-card__experience-text {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.judge-card__experience-text.is-expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    overflow: visible;
}

/* Zabezpieczenie na wypadek, gdyby przeglądarka mimo wszystko owinęła
   fragment wolnego tekstu (np. coś, co wygląda jak numer albo data)
   we własny link — ma wyglądać jak reszta akapitu, nie jak odnośnik. */
.judge-card__experience a { color: inherit; text-decoration: none; }

/* Zwykły <button>, nie <details>/<summary>: przy line-clamp nie ma już
   osobnego, zduplikowanego bloku z pełnym tekstem do pokazania/ukrycia —
   ten sam akapit tylko traci/dostaje z powrotem clamp. JS (experience-clamp.js)
   pokazuje przycisk wyłącznie wtedy, gdy tekst faktycznie się nie mieści
   w 4 wierszach (scrollHeight > clientHeight) — domyślnie ukryty. */
.judge-card__more {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.judge-card__more[hidden] { display: none; }

.judge-card__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.contact-reveal {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
}

.contact-reveal__value {
    display: inline-block;
    max-width: 100%;
    padding: 0.5rem 0.85rem;
    background: var(--canvas);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.contact-reveal__value.cut { --cut: var(--cut-sm); }

.contact-reveal__value.is-visible { opacity: 1; transform: translateY(0); }

.judge-card__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.social-pill.cut { --cut: var(--cut-sm); }

.social-pill:hover,
.social-pill:focus-visible { color: var(--gold); border-color: var(--gold); }

.social-pill__icon { width: 0.85rem; height: 0.85rem; flex: none; }

/* ---------------------------------------------------------------------
   15. Komunikaty
   ------------------------------------------------------------------ */

.flash-stack { display: grid; gap: 0.75rem; padding-top: 1.5rem; }

.flash {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.9rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--slate);
}

.flash__label { flex: none; font-weight: 700; }

.flash__message { margin: 0; }

.flash--success { border-left-color: #2E7D46; }
.flash--success .flash__label { color: #2E7D46; }

.flash--error { border-left-color: var(--red); }
.flash--error .flash__label { color: var(--red); }

.flash--warning { border-left-color: var(--gold); }
.flash--warning .flash__label { color: #8A6A22; }

.flash--info { border-left-color: var(--slate); }
.flash--info .flash__label { color: var(--slate); }

/* ---------------------------------------------------------------------
   16. Stopka
   ------------------------------------------------------------------ */

.site-footer {
    margin-top: clamp(3rem, 8vw, 5rem);
    background: var(--ink);
    color: var(--canvas);
    padding-top: clamp(2.5rem, 6vw, 3.5rem);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.site-footer__brand { display: flex; align-items: center; gap: 1rem; max-width: 34ch; }

.site-footer__slogan {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
}

.site-footer__nav { display: flex; flex-wrap: wrap; gap: 3rem; }

.site-footer__heading {
    margin-bottom: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.site-footer__nav ul { display: grid; gap: 0.55rem; }

.site-footer__nav a {
    text-decoration: none;
    color: rgba(241, 241, 236, 0.78);
    font-size: 0.95rem;
}

.site-footer__nav a:hover { color: var(--canvas); text-decoration: underline; text-underline-offset: 4px; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--line-dark);
    color: var(--slate);
}

.site-footer__bottom p { margin: 0; font-size: 0.7rem; }

/* ---------------------------------------------------------------------
   17. Dostępność
   ------------------------------------------------------------------ */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

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

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------
   18. Responsywność
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.5rem var(--gutter) 2rem;
        background: var(--ink);
        border-bottom: 1px solid var(--line-dark);
    }

    .site-nav.is-open { display: flex; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0.25rem; }

    .site-nav__link { display: block; height: auto; padding: 0.7rem 0; font-size: 0.95rem; }

    .site-nav__link.is-active::after { bottom: 0; width: 34px; right: auto; }

    .site-nav__actions { flex-direction: column; align-items: stretch; }

    .site-nav__actions .btn { width: 100%; height: auto; }

    .site-header__inner { position: relative; flex-wrap: wrap; }
}

@media (max-width: 620px) {
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
    .site-footer__nav { gap: 2rem; }
    .btn { width: 100%; }
    .hero__actions .btn, .page__actions .btn { width: auto; }
}