/* ============================================================
   SK Lázně Bělohrad – slovník zápasů
   ------------------------------------------------------------
   Karty zápasů, tabulky, odznaky, sestavy, tabulka soutěže.
   Tohle je ta HLASITÁ část webu: zbytek stránek je záměrně tichý,
   ale výsledek zápasu má být vidět na první pohled.

   Linkuje se AŽ ZA app.css, takže ho přebíjí. „Pozdější vyhrává"
   ale platí jen při stejné nebo vyšší specificitě – proto jsou
   selektory přepsané doslova tak, jak jsou v app.css.

   Barvy tříd win/draw/loss a comp-pohar/comp-turnaj generuje C#
   (Models/Match.cs, Models/CompetitionType.cs) – jména těch tříd
   se NESMÍ přejmenovat bez zásahu do C#.
   ============================================================ */

/* ---------- Jedna karta pro deset jmen ----------
   Dřív měl každý typ karty vlastní recept a nahodilou akcentní hranu
   (3px/4px/5px, nahoře/vlevo, u .match-card dokonce obojí najednou).
   Teď je základ jeden a liší se jen tím, co má lišit. */
.panel,
.match-card,
.week-card,
.news-card,
.hof-card,
.contact-card,
.photo-album-card,
.leader-card,
.admin-card,
.bug-card,
.ticket,
.topscorer-hero,
.match-detail-head,
.summary-row,
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-2);
}

/* Jeden pohyb pro všechno interaktivní – dřív 9 variant hoveru,
   4 vzdálenosti nadzvednutí a 2 délky přechodu. */
.match-card,
.week-card,
.news-card,
.hof-card,
.photo-album-card,
.ticket,
.stat-card {
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.week-card:hover,
.news-card:hover,
.hof-card:hover,
.photo-album-card:hover,
.ticket:hover,
.stat-card:hover {
    transform: translateY(var(--lift));
    box-shadow: var(--e-3);
}

/* ---------- Karta zápasu ---------- */
.match-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.match-card {
    /* --result nastavují třídy níže; bez něj (neznámý stav) je hrana tichá. */
    border-left: 5px solid var(--result, var(--border));
    border-top: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
}
.match-card.win { --result: var(--win); }
.match-card.draw { --result: var(--draw); }
.match-card.loss { --result: var(--loss); }
.match-card.upcoming { --result: var(--info); }

/* Typ soutěže (pohár/turnaj) byl dřív TŘETÍ hranou na téže kartě.
   Teď ho nese jen odznak nahoře – karta má hran méně, ne víc. */
.match-card { border-top-color: var(--border); }

.match-card:hover {
    transform: translateY(var(--lift));
    box-shadow: var(--e-3);
    border-color: color-mix(in srgb, var(--result, var(--green)) 45%, var(--border));
}
.match-card.is-highlight {
    box-shadow: 0 0 0 2px var(--gold), var(--e-2);
}

.match-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: var(--pad-card);
    border-radius: 0;
    transition: background var(--dur) var(--ease);
}
.match-card__link:hover {
    background: color-mix(in srgb, var(--green) var(--tint-1), transparent);
}

.match-card__top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-2xs);
    color: var(--muted);
    /* Odsazení nahoře i po stranách, dole nula – hlavička karty tak sedí
       v odsazeném rámečku a nelepí se na horní hranu ani na okraje karty. */
    margin: var(--sp-2) var(--sp-2) 0;
}
/* min-width: 0 je nutné, jinak flex/grid položka odmítá zúžit pod šířku
   svého (nezalomitelného) obsahu a ellipsis se u dlouhých textů neuplatní. */
.match-card__top .cat-pill { flex-shrink: 0; }
.match-card__comp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-card__date { flex-shrink: 0; font-weight: var(--fw-semibold); white-space: nowrap; color: var(--ink-2); }

.match-card__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-2);
}

.team {
    min-width: 0;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    vertical-align: middle;
    max-width: 100%;
}
.team.ours { color: var(--green-dark); font-weight: var(--fw-bold); }
.team__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }

/* ---------- Týmy v kartě zápasu: velký znak, název POD ním ----------
   Vodorovné uspořádání (znak vedle jména) zůstává v tabulkách, kde je řádek
   nízký. V kartě má hlavní slovo znak klubu, proto sloupec a 64px logo.
   Scope přes .match-card__teams je záměrný – .team se sdílí s .matches-table. */
.match-card__teams .team {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--sp-2);
    align-self: stretch;
}

/* Čtverec, ne kolečko: klubové znaky jsou většinou štíty, takže je kruhový
   výřez po stranách uřezával. object-fit: contain (místo cover) navíc znak
   celý vejde dovnitř – nic se neořízne, jen se doplní bílé okolí. */
.match-card__teams .team-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--r-sm);
    object-fit: contain;
    padding: var(--sp-1);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* V kartě se název zalomí na víc řádků – ellipsis dává smysl na řádku
   tabulky, ne pod velkým znakem, kde je na text celá šířka sloupce. */
.match-card__teams .team__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* ---------- Skóre – hlavní hlas karty ----------
   Kondenzovaný řez + tabulkové číslice, aby skóre mezi řádky neposkakovalo. */
.match-card__mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 68px;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--result, var(--muted)) var(--tint-1), transparent);
}

.score {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.score .sep { margin: 0 0.12em; color: var(--muted); font-weight: var(--fw-semibold); }

.kickoff-time {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--info-dark);
}
.kickoff-rel { font-size: var(--fs-3xs); color: var(--muted); margin-top: var(--sp-1); }

.result-badge {
    margin-top: var(--sp-1);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0 var(--sp-2);
    line-height: 1.5;
}
.result-badge.win, .form-dot.win { background: var(--win); }
.result-badge.draw, .form-dot.draw { background: var(--draw); color: var(--on-draw); }
.result-badge.loss, .form-dot.loss { background: var(--loss); }

.match-card__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: var(--fs-2xs);
    color: var(--muted);
}
.match-card__bottom .venue { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ---------- Odznaky a pilulky ----------
   Dřív 9 samostatných receptů s padding .1–.18rem a fontem .7–.78rem.
   Jeden tvar, jedna velikost, liší se jen barvou. */
.cat-pill,
.comp-badge,
.ha-badge,
.role-pill,
.status-pill,
.player-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* .cat-pill – kompaktní pilulka podle zadání (drobná, plná barva kategorie).
   Barva je ZÁMĚRNĚ plná --accent, ne ztmavená: zadavatel chtěl přesně tenhle
   svítivý odstín. Aby bílý text na světlejších kategoriích (jantarová
   přípravka, tyrkysová st. přípravka) zůstal čitelný, nese pilulka tučný řez
   a jemný tmavší obrys – ten odděluje světlou barvu od bílého podkladu karty.
   Pozn.: u nejsvětlejších kategorií je kontrast textu pod WCAG AA 4.5:1;
   je to vědomý kompromis ve prospěch vzhledu. */
.cat-pill {
    background: var(--accent, var(--green));
    color: #fff;
    font-weight: var(--fw-bold);
    padding: 0.35rem 0.85rem;
    min-height: 28px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--green)) 55%, #000);
    text-decoration: none;
}
.cat-pill.sm { font-size: var(--fs-3xs); padding: 0.2rem 0.55rem; min-height: 22px; }

/* Kategorie, jejichž barva je pro bílý text moc světlá, mají ztmavenou
   variantu POUZE tady v pilulce (viz --cat-*-pill v tokens.css). Nemění se
   ani rozměr, ani odsazení – jen výplň, takže rozvržení zůstává beze změny.

   Kdo tu není a proč (změřeno s bílým textem):
     mladší dorost  #7b2cbf  7.11:1  – splňuje
     starší dorost  #9b51e0  4.52:1  – splňuje
     MUŽI A         #1f9d55  3.49:1  – NESPLŇUJE 4.5:1, ale zelená A-týmu
                                       zůstává schválně beze změny (commit
                                       b8648e7). Chceš-li to dorovnat, přidej
                                       .cat-pill--muzi-a s color-mix(… 78%, #000)
                                       jako u ostatních – vyjde 5.35:1. */
.cat-pill--muzi-b { background: var(--cat-muzi-b-pill); }
.cat-pill--starsi-zaci { background: var(--cat-starsi-zaci-pill); }
.cat-pill--mladsi-zaci { background: var(--cat-mladsi-zaci-pill); }
.cat-pill--starsi-pripravka { background: var(--cat-starsi-pripravka-pill); }
.cat-pill--mladsi-pripravka { background: var(--cat-mladsi-pripravka-pill); }

/* Stejné ztmavení jako u .cat-pill – zlatá --comp-pohar má s bílým textem
   sama o sobě kontrast jen 3.25:1. */
.comp-badge { padding: 0 var(--sp-2); min-height: 24px; color: #fff; background: var(--muted); }
.comp-badge.comp-pohar { background: var(--comp-pohar-pill); }
.comp-badge.comp-turnaj { background: var(--comp-turnaj); }

.ha-badge { padding: 0 var(--sp-2); min-height: 24px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }

.form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    color: #fff;
}

/* ---------- Týdenní karta ---------- */
.week-card__top { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--muted); }
.week-card__top .cat-pill { flex-shrink: 0; }
.week-card__comp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-card__date { flex-shrink: 0; font-weight: var(--fw-semibold); white-space: nowrap; }
.week-card__team-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1.25; overflow-wrap: anywhere; }
.week-card__team.ours .week-card__team-name { color: var(--green-dark); font-weight: var(--fw-bold); }
.week-card.is-highlight { box-shadow: 0 0 0 2px var(--gold), var(--e-2); }
.week-card.is-highlight:hover { box-shadow: 0 0 0 2px var(--gold), var(--e-3); }

/* ---------- Tabulky ----------
   Dřív existovaly DVĚ téměř shodné tabulkové soustavy (.data-table
   a .matches-table), lišící se o setinu rem. Teď jeden základ. */
.table-wrap,
.matches-table-wrap {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--e-2);
}

.data-table,
.matches-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.data-table th, .data-table td,
.matches-table th, .matches-table td {
    padding: var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.data-table thead th,
.matches-table thead th {
    background: var(--surface-2);
    color: var(--ink-2);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-2xs);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.data-table tbody tr:last-child td,
.matches-table tbody tr:last-child td { border-bottom: none; }

/* Čísla v tabulkách musí být stejně široká, jinak sloupce „tančí". */
.data-table td, .matches-table td { font-variant-numeric: tabular-nums; }

.matches-table th, .matches-table td { white-space: nowrap; }
.matches-table__row { cursor: pointer; transition: background var(--dur) var(--ease); border-left: 3px solid transparent; }
.matches-table__row:hover { background: color-mix(in srgb, var(--green) var(--tint-1), transparent); }
.matches-table__row.win { border-left-color: var(--win); }
.matches-table__row.draw { border-left-color: var(--draw); }
.matches-table__row.loss { border-left-color: var(--loss); }
.matches-table__match { white-space: normal; min-width: 180px; }
.matches-table__sep { color: var(--muted); margin: 0 var(--sp-1); }
.matches-table__round, .matches-table__result { text-align: center; }
.matches-table .team.ours { color: var(--green-dark); font-weight: var(--fw-bold); }
.matches-table .result-badge { margin-left: var(--sp-1); }

/* Body v tabulce soutěže – jediné další místo (vedle skóre), kde je 800 na místě. */
.data-table .pts,
.standings-table .pts {
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---------- Statistické dlaždice ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.stat-card { border-top: 3px solid var(--accent, var(--green)); padding: var(--pad-card); }
.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent, var(--green)) var(--tint-2), transparent);
    color: var(--accent, var(--green));
    font-size: 1.15rem;
    margin-bottom: var(--sp-2);
}
.stat-card__value {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    line-height: 1.05;
}
.stat-card__label { font-size: var(--fs-xs); color: var(--muted); }
.stat-card__sub { font-size: var(--fs-xs); color: var(--accent, var(--green)); font-weight: var(--fw-semibold); margin-top: var(--sp-1); }

/* ---------- Hlavička detailu zápasu ---------- */
.match-detail-head { border-left: 4px solid var(--result, var(--green)); padding: var(--pad-card); }
.match-detail-head__teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}
.match-detail-head__score {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ---------- Ikony uvnitř komponent ---------- */
.icon { flex: 0 0 auto; vertical-align: -0.125em; }
.icon--card-yellow { color: var(--draw); }
.icon--card-red { color: var(--loss); }
.icon--ball { color: var(--ink-2); }

/* Šipka u rozbalovací zprávy z utkání – CSS content: neumí nést SVG,
   takže ji dělá <Icon> a otáčíme ji odsud. */
.match-report__toggle { cursor: pointer; list-style: none; user-select: none; }
.match-report__toggle::marker { display: none; }
.match-report__toggle::-webkit-details-marker { display: none; }
.match-report__toggle::after { content: none; }
.match-report__toggle .icon--toggle { transition: transform var(--dur) var(--ease); margin-left: auto; }
details.match-report[open] > .match-report__toggle .icon--toggle { transform: rotate(180deg); }

/* ============================================================
   Responzivní chování
   Povolené breakpointy: 640 / 760 / 960 / 1080
   ============================================================ */

/* Výchozí stav (široká obrazovka) MUSÍ být deklarovaný PŘED media blokem –
   při stejné specificitě rozhoduje pořadí v souboru, takže pravidlo napsané
   za blokem by ho vždy přebilo a karty by se nezobrazily nikdy. */
.match-list--mobile { display: none; }
.standings-card-list { display: none; flex-direction: column; gap: var(--sp-2); }

/* Tabulka se nevejde → přepnout na karty.
   Používá se STEJNÝ mechanismus, jaký už na webu byl u .matches-table
   a u administrace – jen rozšířený i na tabulku soutěže. */
@media (max-width: 760px) {
    .matches-table-wrap--desktop { display: none; }
    .match-list--mobile { display: flex; }

    .table-wrap--desktop { display: none; }
    .standings-card-list { display: flex; }

    /* Pilulka zůstává drobná i na mobilu (viz komentář u .cat-pill výše) –
       hlavní dotykový cíl je celá karta, pilulka je jen doplňkový odkaz. */
    .data-table th, .data-table td,
    .matches-table th, .matches-table td { padding: var(--sp-2); }
}

@media (max-width: 640px) {
    .match-card__mid { min-width: 60px; padding: var(--sp-1) var(--sp-2); }
    .match-card__teams { gap: var(--sp-1); }

    /* Menší znak, ať na úzké obrazovce zbyde místo na skóre mezi nimi.
       Sloupcové uspořádání i zalomení názvu řeší základní pravidlo výše. */
    .match-card__teams .team-logo { width: 52px; height: 52px; }
    .match-card__teams .team { font-size: var(--fs-xs); }

    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .match-detail-head__teams { gap: var(--sp-2); }
}

/* ---------- Tabulka soutěže jako karty (pod 760px) ----------
   Devět sloupců se na telefon nevejde ani se skrytým skóre – dřív tabulka
   tiše přetékala bez jakéhokoli náznaku, že se dá posouvat. */
.standings-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.standings-card.is-ours {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) var(--tint-1), var(--surface));
}
.standings-card__pos {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-bold);
    color: var(--muted);
    min-width: 2ch;
}
.standings-card__team { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.standings-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.standings-card__pts {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}
.standings-card__meta {
    grid-column: 2 / -1;
    font-size: var(--fs-2xs);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.standings-card .pos-diff { color: var(--win); }
.standings-card .neg-diff { color: var(--loss); }

/* ---------- Portrét hráče (PlayerAvatar) ----------
   Jedno kolečko pro soupisky, tabulku střelců i hlavičku profilu – velikost
   přichází inline jako --photo-size, takže se stejná komponenta použije v
   26px řádku tabulky i v 96px hlavičce. Fotky jsou z FAČR a hodně hráčů je
   nemá, takže varianta s iniciálami musí vypadat stejně dobře jako fotka. */
.player-photo {
    --photo-size: 26px;
    width: var(--photo-size);
    height: var(--photo-size);
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
}
.player-photo--initials {
    display: grid;
    place-items: center;
    background: var(--accent, var(--green));
    color: #fff;
    font-weight: var(--fw-bold);
    /* Iniciály musí růst s kolečkem, jinak se u velkých avatarů ztratí. */
    font-size: calc(var(--photo-size) * 0.4);
    line-height: 1;
    box-shadow: none;
}

/* ---------- Odkaz na profil hráče v soupisce ---------- */
.lineup-table__link,
.lineup-table__plain {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.lineup-table__link { color: inherit; text-decoration: none; }
.lineup-table__link:hover span,
.lineup-table__link:focus-visible span { text-decoration: underline; color: var(--green-dark); }

/* ---------- Hráč v soupisce zápasu (LineupTable + PlayerAvatar) ----------
   Jméno je odkaz na profil, vedle něj kulatý portrét. Portrét má pevnou velikost
   i atributy width/height, aby při dotažení obrázku neposkočil zbytek řádku. */
.player-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
a.player-chip:hover .player-chip__name { color: var(--green-dark); text-decoration: underline; }

.player-chip__photo {
    --chip-size: 28px;
    width: var(--chip-size);
    height: var(--chip-size);
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surface-2);
}
/* Bez fotky se ukážou iniciály – ne prázdné kolečko. */
.player-chip__photo--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    color: var(--muted);
    border: 1px solid var(--border);
}
.player-chip__name { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Zelená jako TEXT musí být tmavší ----------
   Tyhle prvky psaly zelenou --green (nebo --win, což je táž barva) na světlé pozadí,
   což je kontrast 3.49:1 – pod hranicí 4.5:1. Barevný VÝZNAM zůstává (zelená = náš
   gól / postup / naskočil), jen v odstínu, který se dá přečíst. Výplně a rámečky
   se nemění, tam bílý text na plné zelené neleží.
   Viz --green-text v tokens.css. */
.timeline__minute { color: var(--green-text); }
.lineup-badge.badge-goal,
.lineup-badge.badge-sub-in { color: var(--green-text); }
.pos-diff,
.standings-card .pos-diff { color: var(--green-text); }

/* Pilulka A-týmu: bílý text na plné --green je taky 3.49:1. Ostatní světlé kategorie
   už ztmavenou variantu mají (--cat-*-pill výš), A-tým z toho dřív vypadl. */
.cat-pill--muzi-a { background: color-mix(in srgb, var(--cat-muzi-a) 78%, #000); }