/* ============================================================
Split din app.css pe layer/audienta (audit 2026-08-06 SF, ADR 0023).
Precedenta layerelor (ultimul castiga): vendor < app < kf (tokens..utilities).
Ordinea @layer e declarata IDENTIC in capul fiecarui fisier -
prima declaratie stabileste ordinea, repetarea e no-op.
ATENTIE: ordinea -urilor e CONTRACT de cascada (intra-layer
castiga ultimul incarcat): tokens, scoreboard, components, admin,
base-layout, kf-skin; pagina juratului: tokens, judge, base-layout.
NU adauga/reordona -uri fara audit de coliziuni (ADR 0023).
kf-skin.css - re-skin Kinetic Flow: @layer base (scope body.kf) +
@layer components (body.kf; exceptii globale: .style-pill).
(:focus-visible global a fost mutat in base-layout.css.)
============================================================ */
@layer vendor, app, tokens, base, layout, components, utilities;
@layer base {
/* Scop opt-in: paginile migrate primesc body class `kf` → look nou.
NU atinge paginile legacy (care n-au clasa). */
/* Fundalul html = ACELAȘI cu al body-ului kf — altfel sub conținutul scurt (și la overscroll)
se vedea --paper (kf-surface), o nuanță diferită = „pată" sub ultimele div-uri. */
html:has(> body.kf) { background: var(--kf-bg); }
body.kf {
background: var(--kf-bg);
min-height: 100dvh; /* body-ul acoperă viewportul chiar și cu conținut scurt */
color: var(--kf-text);
font-family: var(--kf-font);
font-size: var(--kf-fs-body);
line-height: 1.5;
}
body.kf .text-muted { color: var(--kf-text-variant) !important; }
}
/* ===== LAYOUT — composition primitives (scoped la body.kf) ===== */
/* ===== COMPONENTS — Kinetic Flow (scoped la body.kf, bate legacy) ===== */
@layer components {
/* ---- Dance-style pill — hue din name|style_hue (SSOT: StyleColorExtension) ----
Culoare distinctă + stabilă per nume stil, număr nelimitat. Single inline
`--style-h` = excepția dinamică permisă (ca --w%/--fill%). NU e scoped kf →
se aplică și pe paginile legacy (live/results/category show). */
/* Scara de culoare a stilului de dans e declarată pe o LISTĂ de consumatori, nu copiată la fiecare:
hue-ul vine din markup (`--style-h`), saturația/luminozitatea din temă. Al doilea consumator e
banda de categorii, al treilea cardul de categorie de pe /edit — ambele desenează aceeași
semnătură (muchia colorată) fără pastilă. */
/* `--style-s-chip` = saturația cipurilor de înscriși: același pas tonal ca pastila
(`--style-l-bg`), dar spălat, ca zona „Înscriși" să fie ÎN culoarea categoriei fără să
concureze pastila. E declarat pe toată lista, deși doar `.ccat--enroll`/`.cat-entries-row`
îl citesc: o singură bifurcație de temă, nu trei. `.cat-entries-row` e scopat kf (spre
deosebire de primii trei selectori) — clasa există doar pe pagina categoriei, mereu kf.
`--style-l-fg` 30% → 24% (light): textul pastilei e `hsl(h 70% L-fg)` pe `hsl(h 70% 90%)`,
iar la hue galben (~60) 30% dădea 3.74:1 — SUB pragul de 4.5:1 pentru text. La 24% → 5.4:1.
Fix la TOKEN, nu la componentă, deci prinde și `.ecat__title`/`.ecat__meta` din admin.
Dark (82% pe 22%) e deja la 8.3:1 → neatins. Calculat de mână: `hsl()` din variabile e
unghiul mort al lui contrast-audit.php. */
.style-pill, .cat-strip__item, .ecat,
body.kf .ccat--enroll, body.kf .ccat-form, body.kf .cat-entries-row {
--style-s: 70%; --style-l-bg: 90%; --style-l-fg: 24%; --style-l-accent: 45%;
--style-s-chip: 40%;
}
.style-pill {
display: inline-flex; align-items: center; gap: .25rem;
padding: .12rem .5rem .12rem .42rem; border-radius: 999px;
background: hsl(var(--style-h) var(--style-s) var(--style-l-bg));
color: hsl(var(--style-h) var(--style-s) var(--style-l-fg));
border: 1px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent) / .55);
border-left: 3px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent));
font-weight: 600; line-height: 1.25; white-space: nowrap;
}
[data-theme="dark"] .style-pill, [data-theme="dark"] .cat-strip__item, [data-theme="dark"] .ecat,
[data-theme="dark"] body.kf .ccat--enroll, [data-theme="dark"] body.kf .ccat-form,
[data-theme="dark"] body.kf .cat-entries-row {
--style-s: 55%; --style-l-bg: 22%; --style-l-fg: 82%; --style-l-accent: 62%;
--style-s-chip: 30%;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .style-pill,
:root:not([data-theme]) .cat-strip__item,
:root:not([data-theme]) .ecat,
:root:not([data-theme]) body.kf .ccat--enroll,
:root:not([data-theme]) body.kf .ccat-form,
:root:not([data-theme]) body.kf .cat-entries-row {
--style-s: 55%; --style-l-bg: 22%; --style-l-fg: 82%; --style-l-accent: 62%;
--style-s-chip: 30%;
}
}
/* ---- Page head → Archivo Black uppercase ---- */
body.kf .page-head {
font-family: var(--kf-font-display);
font-weight: 900;
font-size: var(--font-8xl);
letter-spacing: .01em;
text-transform: uppercase;
color: var(--kf-text);
line-height: .98;
margin: 0;
}
/* ---- Folder tabs → segmented flat, divizor 1px subțire ---- */
body.kf .folder-tabs {
display: flex; flex-wrap: wrap; gap: 0;
border: var(--kf-border); margin-bottom: var(--kf-5);
background: var(--kf-surface-bright);
padding: 0;
border-radius: var(--kf-r-sm);
width: fit-content;
overflow: hidden;
}
body.kf .folder-tab {
border: 0; border-right: 1px solid var(--kf-line); margin: 0;
border-radius: 0;
padding: .5rem 1.1rem;
font-family: var(--kf-font-mono);
/* .06em = tracking-ul rolului de ETICHETĂ (components.css § 18b). Mărimea rămâne `--font-sm`:
un tab de PAGINĂ are voie să fie mai mare decât o etichetă de grup — rolul deține familia,
cazul și tracking-ul, nu treapta. */
font-weight: 700; font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .06em;
color: var(--kf-text-variant);
background: transparent;
display: inline-flex; align-items: center; gap: .4rem;
transition: none;
}
body.kf .folder-tab:last-child { border-right: 0; }
body.kf .folder-tab:hover { color: var(--kf-text); background: var(--kf-surface-2); }
body.kf .folder-tab.active {
background: var(--kf-primary);
color: var(--kf-on-primary);
}
/* ---- Masonry gutter (coloane independente construite de masonry-columns.js) ----
Gutterul stă pe GRILĂ, nu ca padding pe coloane: cu padding, jumătate de gutter se pierdea la
fiecare margine EXTERIOARĂ a grilei (2×12px de lățime de card degeaba, exact unde e mai scump —
pe ecrane mici). `gap` pune distanța doar ÎNTRE coloane. */
body.kf .bcast-grid,
body.kf .bcast-grid.is-masonry { gap: var(--kf-gutter); }
body.kf .bcast-col { gap: var(--kf-gutter); }
/* ---- Concurs card (FLAT, sharp, hairline subțire) ----
FĂRĂ overflow:hidden (vezi .ccard din components.css): dropdown-ul de autocomplete trebuie
să iasă din card; hero-ul de mai jos își face singur clip-ul. */
body.kf .ccard {
background: var(--kf-surface);
border: var(--kf-border);
border-radius: var(--kf-r-sm);
display: flex; flex-direction: column;
transition: border-color .1s;
/* Inseturile laterale ale rândurilor (.ccat/.ccat-form) sunt fluide cu VW, nu cqi, deși
cardul E container: masonry face 2 coloane peste 760px, deci un card de desktop la
viewport 761-850px are lățimea unui card de telefon — containerul nu poate distinge
„ecran scump" de „desktop îngust". Doar viewportul o spune. Max = valorile de azi,
atinse până în ~500px → desktop pixel-identic. */
--ccat-mx: clamp(.125rem, 12vw - 2.75rem, 1rem); /* margine laterală rând în card */
--ccat-px: clamp(.375rem, 9vw - 1.75rem, 1rem); /* padding lateral interior rând */
}
/* hover flat: contur olive instant (fără lift, fără umbră).
DOAR pe device cu hover real: pe touch, :hover rămâne „lipit" după tap pe element + toți
strămoșii → rama olive se aprindea pe TOT cardul și rămânea acolo (bug raportat pe mobil).
Standardul: hover decorativ = @media (hover: hover); :focus-visible (tastatură) rămâne global. */
@media (hover: hover) {
body.kf .ccard:hover { border-color: var(--kf-primary-solid); }
}
/* hero poster band + overlay — grayscale → color la hover (brutalist) */
body.kf .ccard__hero {
position: relative; height: 190px; overflow: hidden;
background: var(--kf-surface-3); cursor: pointer;
}
/* Cu program, overlay-ul mai poartă și linia de timp între titlu și rândul de locație/dată.
Overlay-ul crește în SUS din marginea de jos și e clipuit de `overflow: hidden`, deci la 190px
un titlu pe două rânduri ar tăia programul. Banda alternată (oră sus / oră jos) e cu ~25px mai
înaltă decât varianta pe un singur nivel — de aici 265, nu 250. Doar cardurile cu program plătesc. */
body.kf .ccard__hero:has(.tline) { height: 265px; }
body.kf .ccard__hero img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1) contrast(1.05); transition: filter .25s;
}
@media (hover: hover) {
body.kf .ccard:hover .ccard__hero img { filter: grayscale(0) contrast(1); }
}
/* SCRIM plin ACOLO UNDE E TEXTUL. Varianta veche mergea de la .82 jos la TRANSPARENT sus — iar
titlul e PRIMUL copil al suprapunerii, deci cădea exact în zona cea mai transparentă: pe un afiș
încărcat numele concursului se pierdea în imagine (raport user 2026-08-16). Scrim-ul era tare
unde nu trebuia.
Acum: plin până peste titlu, stins în ultimii ~12% — care cad în `padding-top` (`--kf-5`), adică
DEASUPRA numelui. `color-mix` peste tokenul de cerneală, nu `rgba()` literal.
Scrim PINNAT (identic pe ambele teme) fiindcă textul de deasupra e pinnat alb. */
body.kf .ccard__hero-ov {
position: absolute; inset: auto 0 0 0;
padding: var(--kf-5) var(--kf-4) var(--kf-3);
background: linear-gradient(to top,
color-mix(in srgb, var(--c-ink-900) 88%, transparent) 0%,
color-mix(in srgb, var(--c-ink-900) 88%, transparent) 72%,
color-mix(in srgb, var(--c-ink-900) 55%, transparent) 88%,
transparent 100%);
}
body.kf .ccard__title {
font-family: var(--kf-font-display); font-weight: 900; font-size: var(--font-5xl);
line-height: .95; color: var(--c-white); letter-spacing: .01em; text-transform: uppercase;
}
body.kf .ccard__herometa {
display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .35rem;
font-family: var(--kf-font-mono); font-size: var(--font-md); color: rgba(255,255,255,.82);
}
body.kf .ccard__hero-badges {
position: absolute; top: var(--kf-3); right: var(--kf-3);
display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2;
}
body.kf .ccard__zoom {
position: absolute; top: var(--kf-3); left: var(--kf-3); z-index: 2;
width: 32px; height: 32px; border-radius: var(--kf-r-sm);
background: rgba(255,255,255,.85); color: var(--kf-text);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .18s;
}
body.kf .ccard__hero:hover .ccard__zoom { opacity: 1; }
/* status badge / countdown → fill plat pătrat (flat, fără border) */
body.kf .badge-status, body.kf .cbc-days {
border: 0; border-radius: 0;
padding: .22rem .55rem; font-size: var(--font-xs); font-weight: 700;
font-family: var(--kf-font-mono); letter-spacing: .06em; text-transform: uppercase;
display: inline-flex; align-items: center;
}
body.kf .badge-status--open { background: var(--kf-tint); color: var(--kf-on-tint); }
body.kf .badge-status--active { background: var(--kf-secondary); color: var(--kf-on-secondary); }
body.kf .badge-status--done { background: var(--kf-surface-inset); color: var(--kf-text-variant); }
body.kf .cbc-days { background: var(--kf-alert-soft); color: var(--kf-on-alert-soft); }
body.kf .cbc-days--today { background: var(--kf-alert); color: var(--c-white); }
/* ---- Categorie (rând în card) ----
Rama hairline e purtătoarea distincției între rânduri (common region): albul rândului pe
cardul --kf-surface dă doar 1.10:1 (light) / 1.15:1 (dark) — tenta+spațiul singure nu se văd.
Hairline #cdd0bd pe alb = 1.57:1, pe card = 1.43:1 (dark: 1.55 / 1.46) — separator decorativ
dublat de tentă+spațiu, nu element UI (WCAG 1.4.11 nu cere 3:1 aici); e EXACT rama cardului
.ccard, un nivel mai jos. Strip-ul ::before (left:0) stă în padding-box → nu atinge rama. */
body.kf .ccard > .ccat,
body.kf .ccard .ccat {
background: var(--kf-surface-bright);
border: var(--kf-border); border-radius: 0;
margin: 0 var(--ccat-mx) var(--kf-3);
padding: var(--kf-3) var(--ccat-px);
position: relative; overflow: hidden;
transition: background .1s;
}
body.kf .ccard .ccat:first-of-type { margin-top: var(--kf-4); }
body.kf .ccard a.ccat { display: block; color: inherit; text-decoration: none; }
body.kf .ccat::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: var(--kf-marker); opacity: 0; transition: opacity .15s;
}
@media (hover: hover) {
body.kf .ccat:hover { background: var(--kf-surface-2); }
body.kf .ccat:hover::before { opacity: 1; }
}
/* Categoria care se dansează ACUM: banda laterală de hover devine PERMANENTĂ. Zero mecanism nou —
marcajul de „uite unde ești" exista deja, îl aprindem. Scris sub `body.kf` fiindcă regula de bază
e aici, în `@layer components`: un modifier din `@layer app` ar pierde tăcut. */
body.kf .ccat--now::before { opacity: 1; }
body.kf .ccat--now { background: var(--kf-surface-2); }
/* Rândul cu formularul LUI deschis: rama se deschide în jos și spațiul dintre frați dispare →
rând + formular = O cutie (common region). .collapsing acoperă și animația Bootstrap
(Bootstrap scoate .show abia la finalul închiderii). NU refolosim .ccat--now (strip+surface-2):
ăla înseamnă „se dansează ACUM". Specificitate (0,4,1) > baza (0,3,1). */
body.kf .ccat--enroll:has(+ .ccat-form.show),
body.kf .ccat--enroll:has(+ .ccat-form.collapsing) {
margin-bottom: 0;
border-bottom: 0;
}
/* Ghidul „aici te înscrii": șina stânga preia CULOAREA categoriei (hue-ul pastilei, --style-h
pus pe rând în Twig) și CONTINUĂ pe formular → o singură unitate marcată. Rețeta S/L = aceeași
ca .style-pill/.cat-strip__item (lista de consumatori de sus, theme-aware). Specificitatea
:has(...)::before bate baza .ccat::before → pe rândul deschis șina e hue, nu olive-ul de hover.
Contrast (unghiul mort al contrast-audit.php — calculat manual, worst case hue 60 galben):
L45/S70 pe rând alb ≈ 1.85:1, pe form s3 ≈ 1.65:1 — sub 3:1 pe galbenuri, ACCEPTAT: șina nu e
singurul semnal (acordeon + CTA stins + pastila din titlu); hue-urile tipice dau 2.5-4.5:1.
Dark: L62/S55 pe #1a1c17 ≈ 3.7:1 worst case. */
/* Lățimea șinei = 3px, NU 5px-ul strip-ului de hover: pe mobil --ccat-px cade la .375rem (6px)
și 5px lăsa textul lipit de bandă; degajarea prin padding în plus e INTERZISĂ (pixelii
orizontali de mobil câștigați la B60 nu se dau înapoi). 3px = lățimea standard a muchiei de
stil în tot sistemul (.style-pill border-left, .cat-strip__item) → 3px aer din padding-ul
existent, zero pixeli de conținut pierduți. */
body.kf .ccat--enroll:has(+ .ccat-form.show)::before,
body.kf .ccat--enroll:has(+ .ccat-form.collapsing)::before {
opacity: 1;
width: 3px;
background: hsl(var(--style-h) var(--style-s) var(--style-l-accent));
}
body.kf .ccat-form::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: hsl(var(--style-h) var(--style-s) var(--style-l-accent));
}
/* Gap asimetric: cu titlul promovat, rândul se rupe mai des pe telefon — rândul suplimentar
trebuie să coste mai puțin pe verticală decât pe orizontală. */
body.kf .ccat__l1 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin-bottom: .6rem; }
/* Rândul de meta (JURIU / LINE-UP / ÎNSCRIȘI / ACȚIUNI) = `
` cu două span-uri:
eticheta + clusterul de valori. Markupul stivuiește fără probleme; ce împiedica valorile să coboare
era GRILA de aici (`grid-template-columns: 4.5rem 1fr`): într-o grilă cu 2 coloane declarate,
al doilea element e pironit în coloana 2 oricât s-ar îngusta rândul.
Implicitul e acum STIVUIT (etichetă deasupra, valorile pe tot rândul); alăturat se activează doar
când CARDUL ÎNSUȘI are loc — măsurat cu `@container`, nu pe viewport. Motivul e o cifră,
nu o preferință: `.ccat__row` are ~350px într-o coloană de desktop și ~330-375px pe telefon, deci
lățimea ECRANULUI nu spune nimic despre cât loc are rândul (cardul de desktop e mai îngust decât
un telefon mare). Pragul de reglat = `27rem` din `@container` (o condiție de container query NU
poate citi o variabilă CSS, deci numărul stă scris acolo).
Containerul e `.ccard`, NU `.ccat`: rândul de program (`_schedule_list`) folosește tot `.ccat__row`
dar stă în card, în afara blocului de categorie — pe `.ccat` n-ar fi avut ce interoga și ar fi
rămas stivuit permanent. Pragul include deci și paddingul lui `.ccat` (~1,3rem — devenit fluid
via --ccat-px; la lățimile unde cade flipul clamp-ul e aproape de max, deci pragul rămâne valid). */
body.kf .ccard { container-type: inline-size; }
body.kf .ccat__row {
display: flex; flex-direction: column; align-items: flex-start;
gap: .15rem; margin-top: .45rem;
}
body.kf .ccat__lbl {
font-family: var(--kf-font-mono); font-size: var(--font-xs); font-weight: 700;
/* .06em = tracking-ul rolului de ETICHETĂ (components.css § 18b) — o singură valoare pentru
uppercase-ul de etichetă în toată aplicația. */
text-transform: uppercase; letter-spacing: .06em; color: var(--kf-text-variant);
margin: 0; padding-top: 0; white-space: nowrap;
}
/* valorile = cluster wrap (wrapper .ccat__vals sau .e-chip-list). Fără `width: 100%`: într-un flex
column cu align-items:flex-start lățimea e deja fit-content, deci se împachetează pe lățimea
disponibilă — iar `.ccat__vals` e refolosit și în `.res-jury`, unde o lățime forțată ar strica. */
body.kf .ccat__vals, body.kf .ccat__row .e-chip-list {
display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0;
}
/* Card LAT → etichetă lângă valori, coloană de etichete aliniată vertical (densitatea de dinainte). */
@container (min-width: 27rem) {
body.kf .ccat__row {
display: grid; grid-template-columns: 4.5rem 1fr;
align-items: start; gap: .25rem .5rem;
}
body.kf .ccat__lbl { grid-column: 1; align-self: start; justify-self: start; padding-top: .28rem; }
body.kf .ccat__vals, body.kf .ccat__row .e-chip-list { grid-column: 2; }
}
/* `body.kf .res-jury--stacked > .ccat__vals` (coloană stivuită) = ȘTERSĂ 2026-08-15 odată cu
modificatorul `--stacked`. Line-up + Juriu vor acum exact ce dă regula generală de mai sus:
un RÂND care se înfășoară. Cu rândul de titlu eliberat, pastilele au loc pe orizontală, iar
antetul câștigă înălțime în loc s-o cheltuie pe o coloană de nume. */
/* style-pill pe kf → PĂSTREAZĂ hue-ul (tentă + strip stânga), dar brutalist:
mono uppercase, plat, sharp. Iese în evidență față de format/TOP gri. */
body.kf .style-pill {
border-radius: 0; border: 0;
border-left: 4px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent));
background: hsl(var(--style-h) var(--style-s) var(--style-l-bg));
color: hsl(var(--style-h) var(--style-s) var(--style-l-fg));
font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
text-transform: uppercase; letter-spacing: .04em;
padding: .2rem .5rem .2rem .42rem;
}
/* Aceeași pastilă pe linia de timp a programului, strânsă la lățimea unei coloane de stop.
Declarată AICI, nu lângă restul lui `.tline` din components.css: regula de mai sus e în
@layer components, deci ar bate orice variantă din @layer app pe `display`/`font-size`,
indiferent de specificitate (UI_RULES, „capcana body.kf la variante/modifiere"). */
body.kf .tline__cat {
font-size: var(--font-2xs);
border-left-width: 3px;
padding: .1rem .34rem .1rem .26rem;
letter-spacing: .02em;
}
/* Tracking .04em (era .05): B51 aliniase grupul meta la o singură valoare, dar scrisese în
@layer app — iar regulile de aici, din @layer components, îl băteau. Livrarea era inertă exact
pe /concursuri, pagina pentru care fusese făcută. Cu titlul la .02em, o a patra valoare pe
același rând ar fi readus fix problema pe care B51 o închidea. */
body.kf .badge-battle-fmt {
border: 0; border-radius: 0;
background: var(--kf-surface-inset); color: var(--kf-text-variant);
font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
padding: .2rem .5rem; text-transform: uppercase; letter-spacing: .04em;
}
body.kf .badge-top-n {
border: 0; border-radius: 0;
background: var(--kf-tint); color: var(--kf-on-tint);
font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
padding: .2rem .5rem; letter-spacing: .04em;
}
/* ---- Linia de titlu a categoriei (L1) — stil + format = TITLUL cardului ----
Rețeta = ROL SUBTITLU (components.css § 18b: display 900 uppercase .02em). NU poate fi condusă
din lista rolului: `.style-pill` are regulă `body.kf` globală (mai sus), folosită și pe admin —
care nu e pagină kf — și ca `.tline__cat`; scoaterea familiei de acolo le-ar rupe pe amândouă.
Deci copie scopată, în ACELAȘI layer, pe combinator COPIL (un wrapper viitor în L1 nu trebuie
să tragă alte pastile înăuntru).
De ce familia și abia apoi mărimea: pe kf toate cele patru elemente din L1 erau deja mono 700
la --font-xs, deci „mai bold" nu mai avea unde urca — linia se citea plat fiindcă nimic din ea
nu folosea fața de titlu. Familia costă ~0 lățime, mărimea costă rânduri.
Mărimea e FLUIDĂ din container (`.ccard` e container-type: inline-size): la 360px lățimea utilă
a rândului e ~322px, unde un 13px fix ar face ruperea pe două linii regula, nu excepția.
~12px pe telefon → ~14px pe desktop: STRÂNGE apoi TRAGE. Pașii din clamp sunt tokeni (gate-ul
css-no-literal-font-size nu se uită în clamp — regula rămâne). */
body.kf .ccat__l1 > .style-pill {
font-family: var(--kf-font-display); font-weight: 900;
font-size: clamp(var(--font-sm), 3cqi, var(--font-base));
letter-spacing: .02em;
}
/* `color` schimbat → `background` RESTATUIT (regula perechii jumătate-rescrisă din UI_RULES):
ink plin pe --kf-surface-inset = 13.3:1 light / 10.8:1 dark, și formatul citește ca parte din
titlu, nu ca meta gri. */
body.kf .ccat__l1 > .badge-battle-fmt {
font-family: var(--kf-font-display); font-weight: 900;
font-size: clamp(var(--font-xs), 2.4cqi, var(--font-sm));
letter-spacing: .02em;
background: var(--kf-surface-inset); color: var(--kf-text);
}
/* /arhiva ia DOAR fața de titlu, nu și mărimea: lățimea utilă din `.arch-cats` e ~209px (posterul
ia partea lui) și cardul are până la 6 categorii — un pas de mărime acolo adaugă rânduri întregi
de cipuri sub poster. Archivo 900 e mai îngust decât Space Mono, deci cipurile chiar se strâng. */
body.kf .arch-cat .style-pill {
font-family: var(--kf-font-display); font-weight: 900; letter-spacing: .02em;
}
body.kf .ccat .badge.bg-secondary {
border-radius: 0; background: var(--kf-info-soft) !important;
color: var(--kf-info); font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
}
/* juriu / staff / înscriși → fill plat pătrat (fără border) */
body.kf .j-pill, body.kf .e-chip {
border: 0; border-radius: 0;
background: var(--kf-surface-2); color: var(--kf-text);
font-size: var(--font-xs); padding: .2rem .55rem; display: inline-flex; align-items: center; gap: .3rem;
}
/* numele juratului prelua --primary-strong (remapat la olive) → olive-pe-surface ilizibil.
→ text on-surface normal, lizibil pe chip. */
body.kf .j-pill__n { color: var(--kf-text); }
body.kf .j-pill__m, body.kf .e-city { color: var(--kf-text-variant); font-family: var(--kf-font-mono); font-size: var(--font-xs); }
body.kf .s-pill { background: var(--kf-surface-inset); }
/* rolul (DJ/Host/oră) = text accent DIRECT pe chip (bg transparent) — bg-ul inverse din regula
de bază dădea olive-pe-negru ilizibil pe light. Pe dark accentul olive nu ține → lime-dim. */
body.kf .s-pill__r {
background: transparent;
font-family: var(--kf-font-mono); font-size: var(--font-2xs); font-weight: 700;
text-transform: uppercase; color: var(--kf-accent); letter-spacing: .04em;
}
[data-theme="dark"] body.kf .s-pill__r { color: var(--c-kf-lime-dim); }
body.kf .e-chip-list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
/* Cipurile de ÎNSCRIȘI iau culoarea categoriei — zona pe care publicul o caută vizual („cine
s-a înscris") era gri-pe-alb și se pierdea. Fill DESATURAT (`--style-s-chip`) la aceeași
luminozitate ca pastila: aceeași familie cromatică, rang vizibil mai jos, deci pastila
stilului rămâne unicul element cu hue plin + text colorat.
Șina de 2px NU e decor: pe dark un fill în hue e practic invizibil (`hsl(240 30% 22%)` pe
`--kf-surface-bright` #1a1c17 = 1.21:1, sub cipul gri de azi) — pastila însăși se vede pe
dark doar prin muchia colorată. Fără șină, „cipuri în culoarea categoriei" n-ar exista pe
dark pentru hue-urile reci, adică pentru majoritatea stilurilor.
Tenta se MOȘTENEȘTE din strămoș (`--style-h` pe rând), nu se pune pe cip → cipurile
adăugate prin Turbo Stream (_register.stream) sunt colorate fără cod în partial.
Contrast calculat de mână (hsl() din variabile = unghiul mort al lui contrast-audit.php),
cel mai rău hue: text `--kf-text` pe fill 12.6:1 light / 8.2:1 dark · `.e-city`
(`--kf-text-variant`) 6.9:1 light / 4.8:1 dark · șina pe dark ≈3.7:1. Fill-ul vs suprafața
cardului e 1.36:1 light / 1.21:1 dark — grupare decorativă, textul poartă înțelesul. */
body.kf .ccat__row--entries .e-chip,
body.kf .cat-entries-row .e-chip {
background: hsl(var(--style-h, 0) var(--style-s-chip, 40%) var(--style-l-bg, 90%));
border-left: 2px solid hsl(var(--style-h, 0) var(--style-s, 70%) var(--style-l-accent, 45%));
color: var(--kf-text);
padding-left: .42rem;
}
/* CTA înscriere → lime plat (SINGURUL lime), hover invert instant */
body.kf .ccat__cta {
margin-top: var(--kf-4);
background: var(--kf-primary); color: var(--kf-on-primary);
border: 0; border-radius: 0;
padding: .7rem 1rem;
font-family: var(--kf-font-mono);
font-weight: 700; font-size: var(--font-md); text-transform: uppercase; letter-spacing: .06em;
display: flex; align-items: center; justify-content: center; gap: .5rem;
transition: none;
}
@media (hover: hover) {
body.kf .ccat__cta:hover { background: var(--kf-primary-solid); color: var(--kf-on-solid); }
}
/* DESCHIS = pressed neutru, NU olive: olivul aparține DOAR submitului (ADR 0031 — un singur
primar pe vedere; CTA-ul olive era identic cu „Confirmă înregistrarea" de sub el). Chevronul
rotit rămâne semnalul „închide". Text pe inset: 13.3:1 light / 10.8:1 dark; hover s3: 14.0/11.6.
Ordinea contează: la specificitate egală cu :hover, regula de mai jos câștigă când e deschis. */
body.kf .ccat__cta[aria-expanded="true"] { background: var(--kf-surface-inset); color: var(--kf-text); }
@media (hover: hover) {
body.kf .ccat__cta[aria-expanded="true"]:hover { background: var(--kf-surface-3); }
}
body.kf .ccat__cta .bi-chevron-down { margin-left: auto; }
body.kf .ccat__cta[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
/* ---- Formular înscriere inline (flat) ----
s3, nu s2: s2 pe card dădea 1.06:1 (invizibil). Scara tonală, o treaptă pe nivel:
rând=bright · chips=s2 · formular=s3 (1.23:1 vs rând light, 1.31:1 dark) · CTA apăsat=inset.
Rama continuă rama rândului deschis (border-top: 0 — cusătura o închide R-ul de containment
de pe .ccat--enroll:has(+ .ccat-form.show)); shorthand ÎNTÂI, longhand după. */
body.kf .ccat-form {
background: var(--kf-surface-3);
margin: 0 var(--ccat-mx) var(--kf-4);
border: var(--kf-border); border-top: 0; border-radius: 0;
padding: var(--kf-4) var(--ccat-px);
position: relative; /* ancora șinei ::before (colorată cu hue-ul categoriei) */
}
body.kf .pc-form-title {
font-family: var(--kf-font-display); font-weight: 900; font-size: var(--font-xl);
text-transform: uppercase; letter-spacing: .02em;
color: var(--kf-text); margin-bottom: var(--kf-3);
display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
body.kf .ac-hint, body.kf .dancer-lbl {
font-family: var(--kf-font-mono); font-size: var(--font-xs); text-transform: uppercase;
letter-spacing: .04em; color: var(--kf-text-variant);
}
/* inputuri → hairline 1px plat, focus = contur lime instant */
body.kf .ccat-form .form-control,
body.kf .ccat-form .form-select {
background-color: var(--kf-surface-bright); /* background-color (NU background) — nu șterge săgeata select */
border: 1px solid var(--kf-line);
border-radius: 0;
color: var(--kf-text); font-family: var(--kf-font-mono); font-size: var(--font-md);
box-shadow: none; transition: border-color .1s;
}
body.kf .ccat-form .form-control::placeholder { color: var(--kf-outline); }
body.kf .ccat-form .form-control:focus,
body.kf .ccat-form .form-select:focus {
background-color: var(--kf-surface-bright);
border-color: var(--kf-primary-solid);
box-shadow: inset 2px 0 0 var(--kf-marker);
}
body.kf .ccat-form .dob-row select { font-family: var(--kf-font-mono); }
/* Formular înscriere — strip „left-strip" DASHED pe stânga + colțuri rotunjite (nu cutie completă).
Bordura e doar pe stânga; border-radius rotunjește boxul (fundal + capetele strip-ului) = look cool.
SSOT prin clasa .entry-form pe