/* ============================================================
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, care desenează aceeași semnătură (muchia colorată) fără pastilă. */
.style-pill, .cat-strip__item {
--style-s: 70%; --style-l-bg: 90%; --style-l-fg: 30%; --style-l-accent: 45%;
}
.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 {
--style-s: 55%; --style-l-bg: 22%; --style-l-fg: 82%; --style-l-accent: 62%;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .style-pill,
:root:not([data-theme]) .cat-strip__item {
--style-s: 55%; --style-l-bg: 22%; --style-l-fg: 82%; --style-l-accent: 62%;
}
}
/* ---- 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;
}
/* hover flat: contur lime instant (fără lift, fără umbră) */
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;
}
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) ---- */
body.kf .ccard > .ccat,
body.kf .ccard .ccat {
background: var(--kf-surface-bright);
border: 0; border-radius: 0;
margin: 0 var(--kf-4) var(--kf-3);
padding: var(--kf-3) var(--kf-4);
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;
}
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); }
body.kf .ccat__l1 { display: flex; flex-wrap: wrap; align-items: center; gap: .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). */
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;
}
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: .05em;
}
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: .03em;
}
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; }
/* 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;
}
body.kf .ccat__cta:hover,
body.kf .ccat__cta[aria-expanded="true"] {
background: var(--kf-primary-solid); color: var(--kf-on-solid);
}
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) ---- */
body.kf .ccat-form {
background: var(--kf-surface-2);
margin: 0 var(--kf-4) var(--kf-4);
border: 0; border-radius: 0;
padding: var(--kf-4);
}
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);
}
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