/* ==========================================================================
   FT48 — warstwa projektowa karty głosowania wyborczego
   Dopisać na KOŃCU assets/ballot-ft5.css. Nie zmienia istniejących reguł.

   Kotwica specyficzności `.csp-ce-ballot.csp-ce-ballot` zastępuje usunięte
   w FT47 `!important` — style wtyczki wygrywają z motywem bez wyścigu
   ważności. Projekt zatwierdzony przez Marcina 2026-08-20.
   ========================================================================== */

/* 1. Neutralizacja dziedziczenia z motywu -------------------------------- */
.csp-ce-ballot.csp-ce-ballot button,
.csp-ce-ballot.csp-ce-ballot code,
.csp-ce-ballot.csp-ce-ballot legend,
.csp-ce-ballot.csp-ce-ballot small {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background: none;
    text-transform: none;
    letter-spacing: normal;
}

/* 2. Powłoka karty ------------------------------------------------------- */
.csp-ce-ballot.csp-ce-ballot {
    position: relative;
    overflow: hidden;
    border: 1px solid #e3e6ef;
    border-radius: 16px;
    background: #fff;
}
.csp-ce-ballot.csp-ce-ballot::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #5b13a5, #784af0 55%, #19baab);
}

/* 3. Nagłówek — jedna linia statusu, tytuł, metadane --------------------- */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__header {
    padding: 18px 18px 0;
    border-bottom: 0;
    background: none;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__utility {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 0;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__identity > small {
    flex: 0 1 auto;
    color: #5f43c5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    background: #e7f7f2;
    color: #08766c;
    font-size: 11px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__state-icon {
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__state-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__deadline {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid #ded8f3;
    border-radius: 99px;
    color: #514575;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__header h3 {
    margin: 12px 0 0;
    color: #171b35;
    font-size: clamp(19px, 2.4vw, 23px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-wrap: pretty;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__reference {
    margin: 8px 0 0;
    color: #8b93a5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

/* 4. Organizator — jedna linia ------------------------------------------ */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 18px 0;
    padding: 9px 11px;
    border: 0;
    border-radius: 11px;
    background: #faf9fd;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer > span {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer small {
    color: #747b90;
    font-size: 12px;
    font-weight: 400;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer strong {
    margin: 0;
    color: #171b35;
    font-size: 12px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer code {
    padding: 0;
    border: 0;
    color: #8b93a5;
    font-size: 11px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__organizer a {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #5831c9;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

/* 5. Wiersz wyniku — całe tło jest paskiem ------------------------------ */
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e0dcf0;
    border-radius: 12px;
    background: #fbfaff;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row > i {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    height: auto;
    border-radius: 0;
    background: none;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row > i > b {
    display: block;
    height: 100%;
    border-radius: 0;
    background: #f0ebff;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row.is-winner {
    border-color: #cfe8e0;
    background: #f4fbf9;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row.is-winner > i > b {
    background: #e2f5ee;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 12px 13px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading > span {
    flex: 1 1 auto;
    min-width: 0;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading strong {
    display: block;
    color: #2b2350;
    font-size: 13px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading small {
    display: block;
    color: #7b7395;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading em {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #d9f2ea;
    color: #0d6d5e;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row__heading > b {
    flex: 0 0 auto;
    color: #4b2bb4;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-result-row.is-winner .csp-ce-result-row__heading > b {
    color: #0d6d5e;
}

/* 6. Podsumowanie frekwencji -------------------------------------------- */
.csp-ce-ballot.csp-ce-ballot [data-ce-turnout] {
    display: block;
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 11px;
    background: #f4fbf9;
    color: #0f4f45;
    font-size: 12px;
    font-weight: 700;
}

/* 7. Stopka — odnośniki tekstowe, nie bloki ----------------------------- */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 18px 16px;
    padding-top: 13px;
    border-top: 1px solid #f0eef6;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-integrity-trigger.csp-ce-integrity-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    max-width: 320px;
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid #e0dcf0;
    border-radius: 11px;
    background: #fbfaff;
    color: #30264d;
    box-shadow: none;
    text-align: left;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-integrity-trigger__shield {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    background: #efeaff;
    color: #6239d7;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-integrity-trigger strong {
    display: block;
    color: #30264d;
    font-size: 11px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-integrity-trigger small {
    display: block;
    color: #8b8397;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-manage-toggle.csp-ce-manage-toggle {
    min-height: 0;
    margin-left: auto;
    padding: 6px 2px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #8b93a5;
    font-size: 12px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-manage-toggle.csp-ce-manage-toggle:hover,
.csp-ce-ballot.csp-ce-ballot .csp-ce-manage-toggle.csp-ce-manage-toggle:focus-visible {
    color: #5831c9;
}

/* 8. Jeden akcent — przycisk oddania głosu ------------------------------ */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__submit {
    display: block;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 13px;
    background: #5b13a5;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__submit:disabled {
    background: #f0f0f5;
    color: #98a0b0;
    cursor: not-allowed;
}

/* 9. Wiersz kandydata --------------------------------------------------- */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot-candidate {
    border: 1px solid #e4e6ed;
    border-radius: 12px;
    background: #fff;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot-candidate:has(input:checked) {
    border: 2px solid #8f72e7;
    background: #f7f4ff;
}


/* ==========================================================================
   FT48-HF1 — nagłówek karty i atrybut hidden
   Warstwa FT48 neutralizowała tło, obramowanie i marginesy, ale nie `display`.
   Motyw ustawia `display` na elemencie <header>, przez co eyebrow, tytuł
   i metadane układały się w trzy kolumny zamiast jedna pod drugą.
   ========================================================================== */

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__header {
    display: block;
}

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__utility {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__header h3 {
    display: block;
    width: 100%;
    max-width: 100%;
}

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__reference {
    display: block;
    width: 100%;
}

/* Atrybut `hidden` to tylko display:none z arkusza przeglądarki i przegrywa
   z regułami motywu. Jedna reguła zamiast listy wyjątków — musi być ostatnia. */
.csp-ce-ballot.csp-ce-ballot [hidden] {
    display: none;
}

/* ==========================================================================
   FT48-HF2 — okładka wychodziła poza kartę
   `ballot-ft5.css` ustawia min-height: clamp(210px, 46vw, 420px), a starszy
   `ballot.css` ustawia aspect-ratio: 16/9. Razem wysokość 420px wymuszała
   szerokość 746px na karcie szerokiej na 548px — obraz był przycinany.
   Wysokość ma wynikać z szerokości, nie odwrotnie.
   ========================================================================== */

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover {
    width: auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.is-portrait {
    width: min(320px, 100%);
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    aspect-ratio: 9 / 16;
    background-size: contain;
    background-repeat: no-repeat;
}

.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video {
    min-height: 0;
}

/* ==========================================================================
   FT48-HF3 — hierarchia akcji pokwitowania i odstępy w bloku protokołu
   ========================================================================== */

/* 1. Pokwitowanie: „Zmień głos" jest jednorazowy i nieodwracalny, więc nie
      może wyglądać identycznie jak kopiowanie tekstu do schowka. Kopiowanie
      i podgląd są ciche; zmiana stoi osobno, po prawej, w barwie ostrzegawczej. */
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions button {
    width: auto;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #cfe0da;
    border-radius: 10px;
    background: #fff;
    color: #0f4f45;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions button:hover,
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions button:focus-visible {
    border-color: #0d6d5e;
    background: #f4fbf9;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions button[data-ce-change-vote] {
    margin-left: auto;
    border-color: #e5c9ae;
    background: #fff8ef;
    color: #8a4b1e;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions button[data-ce-change-vote]:hover,
.csp-ce-ballot.csp-ce-ballot .csp-ce-receipt__actions button[data-ce-change-vote]:focus-visible {
    border-color: #b9762f;
    background: #fff2e2;
}

/* 2. Blok protokołu i pobrań nie miał żadnych reguł w tym pliku — plakietki
      i odnośniki sklejały się w jeden ciąg. */
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__protocol,
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__protocol > * {
    padding: 5px 10px;
    border-radius: 99px;
    background: #f2f0f8;
    color: #4b4470;
    font-size: 11px;
    font-weight: 700;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads a {
    padding: 7px 11px;
    border: 1px solid #ded8f3;
    border-radius: 10px;
    background: #fff;
    color: #5831c9;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* ==========================================================================
   FT48-HF4 — menu organizatora, odstępy nagłówka, miniatura filmu
   ========================================================================== */

/* 1. Menu „Zarządzaj" było obcinane, bo karta miała overflow:hidden.
      Przycinanie było potrzebne tylko dla okładki wychodzącej poza kartę —
      po HF2 okładka mieści się, więc przycinanie jest zbędne.
      Pasek akcentu dostaje własne zaokrąglenie. */
.csp-ce-ballot.csp-ce-ballot {
    overflow: visible;
}
.csp-ce-ballot.csp-ce-ballot::before {
    border-radius: 16px 16px 0 0;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-manage-menu {
    z-index: 20;
}

/* 2. Odstępy: tytuł ↔ metadane oraz okładka ↔ opis. */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__header h3 {
    margin-bottom: 2px;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__reference {
    margin-top: 10px;
    line-height: 1.6;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__description {
    margin-top: 16px;
    line-height: 1.65;
}

/* 3. Miniatura filmu: cały kadr, nie przycięty.
      Pionowy materiał 9:16 w kadrze 16:9 był kadrowany do paska. */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video {
    background-color: #0f1420;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    place-items: center;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video.is-portrait {
    aspect-ratio: 16 / 9;
    width: auto;
    max-width: 100%;
    margin-inline: 20px;
}

/* 4. Przycisk odtwarzania na środku kadru zamiast odnośnika w rogu. */
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video > a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: center;
    max-width: calc(100% - 40px);
    padding: 12px 20px 12px 16px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
    color: #20263c;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(8, 5, 26, .35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video > a::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #5b13a5;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video > a:hover,
.csp-ce-ballot.csp-ce-ballot .csp-ce-ballot__cover.has-video > a:focus-visible {
    background: #fff;
    box-shadow: 0 12px 34px rgba(8, 5, 26, .45);
}

/* ==========================================================================
   FT48-HF6 — hierarchia w bloku protokołu (po zakończeniu głosowania)

   Zwykły wyborca chce jednej rzeczy: protokołu w PDF. JSON i kontrola
   integralności to narzędzia weryfikatora — zostają dostępne, ale przestają
   konkurować o uwagę. Nic nie znika, zmienia się waga.
   Reguła `[hidden][hidden]` z HF5 jest niżej w pliku i nadal wygrywa.
   ========================================================================== */

.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-pdf-download] {
    padding: 9px 14px;
    border: 1px solid #cfc6ea;
    border-radius: 11px;
    background: #f6f2ff;
    color: #4b2bb4;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-json-download],
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-integrity-open] {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #8b93a5;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-json-download]:hover,
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-integrity-open]:hover,
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-json-download]:focus-visible,
.csp-ce-ballot.csp-ce-ballot .csp-ce-results__downloads [data-ce-integrity-open]:focus-visible {
    color: #5831c9;
}

/* ==========================================================================
   FT48-HF5 — atrybut `hidden` musi wygrywać z każdą regułą układu

   HF1 dodał `.csp-ce-ballot.csp-ce-ballot [hidden]{display:none}` (0-3-0),
   ale HF3 nadał protokołowi i pobraniom `display:flex` z tą samą
   specyficznością i późniejszą pozycją w pliku — więc ukryte elementy
   wracały. Podwojony atrybut daje 0-4-0 i wygrywa niezależnie od kolejności.
   Ta reguła musi zostać ostatnia w pliku.
   ========================================================================== */

.csp-ce-ballot.csp-ce-ballot [hidden][hidden] {
    display: none;
}