/* ==========================================================================
   MonitorEnergie.ro — foaia de stil a frontend-ului
   1. Token-uri & teme      5. Grila de widget-uri
   2. Reset & baza          6. Widget-uri
   3. Animatii              7. Controale arhiva
   4. Layout & header       8. Responsive & print
   ========================================================================== */

/* ── 1. Token-uri & teme ─────────────────────────────────────────────────── */

:root {
	color-scheme: light dark;

	--accent: #ffb020;

	/* ── Culorile seriilor ────────────────────────────────────────────────
	   AICI e sursa de adevar. `colorFor()` din js/lib/palette.js citeste intai
	   `--c-<cheie>`, si abia daca lipseste cade pe culoarea scrisa in
	   `Catalog::SERIES` — care e tinuta identica cu blocul light de mai jos,
	   fiindca `:root` e declaratia de baza, iar dark e suprascrierea.

	   Fiecare pereche care poate ajunge pe acelasi grafic a fost masurata in
	   OKLab (distanta perceptuala) si la simulare de deuteranopie, in ambele
	   teme. Nu schimba o valoare fara sa refaci masuratoarea: doua albastre pot
	   fi departe in RGB si identice pentru ochi. Exact asa ajunsesera consumul
	   si eolianul sa fie acelasi `#4fa8e0` pe tema intunecata, si productia cu
	   regenerabilul acelasi verde — nu se vedea in cod, doar in pagina.

	   Conventiile respectate: soare = auriu, vant = cyan, hidro = albastru
	   adanc, nuclear = violet, gaz = portocaliu, carbune = gri-ardezie,
	   biomasa = verde-galbui, stocare = gri neutru. Import = portocaliu si
	   export = verde raman regula scrisa a site-ului, deci impart intentionat
	   culoarea cu soldul, respectiv cu productia. */
	--c-cons: #2f7fc4;
	--c-prod: #16a97a;
	--c-sold: #d98b12;
	--c-export: #16a97a;
	--c-import: #d98b12;
	--c-danger: #e2483c;

	/* Paleta mixului energetic */
	--c-foto: #eaa81f;
	--c-eolian: #12b3c4;
	--c-gaze: #d95a2b;
	--c-carb: #5f6b7a;
	--c-nucl: #7a5cf0;
	--c-ape: #15568f;
	--c-bmasa: #86bb3f;
	--c-stoc: #8e8a84;

	/* Agregatele si seriile din tabele proprii.
	   Pana acum n-aveau variabila deloc, deci cadeau pe culoarea din catalog —
	   una singura, aceeasi in ambele teme. De aici veneau doua probleme
	   vizibile: „regenerabil" desena exact verdele productiei, iar pe tema
	   deschisa lua o valoare gandita pentru fundal inchis si iesea spalacit.

	   Sunt subtotaluri, deci raman in familia intregului din care fac parte —
	   regenerabilul e un verde mai adanc decat productia, fosilul o caramizie
	   mai adanca decat gazul. Asa se citeste relatia dintre ele, nu doar
	   diferenta. */
	--c-regenerabil: #0b6b4a;
	--c-fosil: #8f3a1e;
	--c-temp: #d63b52;
	--c-price: #b32d86;

	/* Tipografie */
	/* Titlurile si textul stau pe aceeasi familie: Instrument Sans duce ambele
	   roluri, deci incarcam doua familii in loc de trei. Variabilele raman
	   separate ca sa putem schimba doar titlurile, fara sa umblam prin tot CSS-ul.
	   JetBrains Mono are acelasi advance ca IBM Plex Mono (0.6em, ca mai toate
	   monospace-urile), deci nu castigam latime; il alegem pentru x-height mai
	   mare si cifre mai distincte la corpuri mici. */
	--font-display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
	--font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

	/* Ritm & forme */
	/* Valoare de rezerva: paginile o primesc din Setări → „Lățimea paginii",
	   scrisa inline in <head>. Ramane aici ca sa arate bine si daca setarea
	   lipseste (baza de date inca nemigrata, de exemplu). */
	--shell: 1280px;
	--gap: clamp(12px, 1.6vw, 20px);
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 22px;

	/* Miscare */
	--ease: cubic-bezier(.22, .68, .28, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--dur: .45s;
}

/* Tema deschisa */
:root[data-theme="light"] {
	--bg: #f4f7fb;
	--bg-deep: #e9eef6;
	--surface: #ffffff;
	--surface-2: #f7f9fc;
	--surface-3: #eef2f8;
	--line: #dde5ef;
	--line-strong: #c6d2e2;
	--text: #0e1826;
	--text-2: #3c4a5a;
	--muted: #62738a;
	--shadow: 0 1px 2px rgba(16, 32, 56, .05), 0 12px 28px -12px rgba(16, 32, 56, .16);
	--shadow-lg: 0 2px 4px rgba(16, 32, 56, .05), 0 28px 60px -22px rgba(16, 32, 56, .26);
	--glow: 0 0 0 1px rgba(255, 176, 32, .18);
	--aurora-1: rgba(255, 176, 32, .20);
	--aurora-2: rgba(47, 143, 212, .18);
	--aurora-3: rgba(22, 169, 122, .14);
	--grid-line: rgba(16, 32, 56, .08);
	--on-accent: #1a1204;
}

/* Tema intunecata */
:root[data-theme="dark"] {
	--bg: #080d14;
	--bg-deep: #050910;
	--surface: #0f1824;
	--surface-2: #142132;
	--surface-3: #1a2b3f;
	--line: #1e2f43;
	--line-strong: #2c4159;
	--text: #e8eff7;
	--text-2: #b4c4d6;
	--muted: #7d92aa;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -18px rgba(0, 0, 0, .8);
	--shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 34px 70px -26px rgba(0, 0, 0, .9);
	--glow: 0 0 0 1px rgba(255, 176, 32, .22);
	--aurora-1: rgba(255, 176, 32, .16);
	--aurora-2: rgba(47, 143, 212, .16);
	--aurora-3: rgba(22, 169, 122, .12);
	--grid-line: rgba(255, 255, 255, .07);
	--on-accent: #1a1204;
}

/* In dark, culorile mixului au nevoie de mai multa luminozitate.
   Aceleasi hue-uri ca in light, ridicate; masurate cu aceeasi unealta. */
:root[data-theme="dark"] {
	--c-cons: #4fa8e0;
	--c-prod: #3ecf8e;
	--c-sold: #ffb020;
	--c-export: #3ecf8e;
	--c-import: #ffb020;
	--c-danger: #ff6b5e;
	--c-foto: #f5c242;
	--c-eolian: #35d3e6;
	--c-gaze: #e2683a;
	--c-carb: #7b8798;
	--c-nucl: #9b83ff;
	--c-ape: #3d7fd6;
	--c-bmasa: #88cf4f;
	--c-stoc: #b5aca0;

	/* Aici subtotalurile merg in sens invers fata de light: pe fundal inchis,
	   „mai adanc" inseamna mai stins, deci regenerabilul si fosilul se departeaza
	   de intreg urcand in luminozitate, nu coborand. */
	--c-regenerabil: #9df0c8;
	--c-fosil: #d97a4e;
	--c-temp: #ff6b7a;
	--c-price: #f078c8;
}

/* ── 2. Reset & baza ─────────────────────────────────────────────────────── */

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

* { margin: 0; padding: 0; }

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

body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color .4s var(--ease), color .4s var(--ease);
}

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

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

:where(a, button, input, select, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 6px;
}

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 999;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

.skip-link:focus { left: 16px; }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Fundal cu pete de lumina care se misca foarte lent */
.aurora {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.aurora span {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .9;
	will-change: transform;
}

.aurora span:nth-child(1) { width: 46vw; height: 46vw; top: -14vw; left: -8vw;  background: var(--aurora-1); animation: drift-a 34s var(--ease) infinite alternate; }
.aurora span:nth-child(2) { width: 40vw; height: 40vw; top: -6vw;  right: -10vw; background: var(--aurora-2); animation: drift-b 42s var(--ease) infinite alternate; }
.aurora span:nth-child(3) { width: 36vw; height: 36vw; top: 52vh;  left: 40vw;  background: var(--aurora-3); animation: drift-c 50s var(--ease) infinite alternate; }

@keyframes drift-a { to { transform: translate3d(6vw, 5vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-7vw, 8vh, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(-5vw, -7vh, 0) scale(1.2); } }

/* ── 3. Aparitia la scroll — SCOASA ──────────────────────────────────────────
 *
 * Carcasele intrau cu fade si cu o urcare de douazeci si sase de pixeli, pe
 * masura ce ajungeau in dreptul ochiului. S-a scos: pe o pagina cu treizeci de
 * widgeturi, derularea devenea un sir de lucruri care se aseaza, iar cine
 * cauta o cifra o astepta de fiecare data.
 *
 * CLASELE RAMAN, si dinadins. `View::widget()` scrie `anim anim--rise` din
 * coloana `animation` a fiecarui grafic, iar panoul o poate schimba. Sterse de
 * aici, ar fi trebuit scoase si din PHP, si din baza, si din panou — patru
 * locuri pentru o schimbare care incape in unul. Acum nu mai fac nimic.
 *
 * ANIMATIILE DIN WIDGETURI RAMAN: numerele care urca, pulsul soarelui, norii
 * care plutesc, liniile de pe harta, panglicile din bilant. Alea nu tin de
 * derulare, ci de ce arata graficul — vezi `--dur` si `[data-motion]` mai jos,
 * care le comanda mai departe.
 *
 * Nu mai depinde nimic de JS ca sa fie vizibil: inainte, `.anim` pornea cu
 * `opacity: 0` si astepta clasa pusa de `initReveal()`.
 */
.anim,
.anim.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}
[data-motion="off"] .aurora span { animation: none; }
[data-motion="subtle"] { --dur: .3s; }
[data-motion="lively"] { --dur: .62s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Tranzitia de tema, cu View Transitions unde exista suport */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ── 4. Layout & header ──────────────────────────────────────────────────── */

.site-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line);
}

/* Antetul are două rânduri: sus identitatea și starea, jos navigația. Vezi nota
   din `View::header()` pentru de ce — pe scurt, conținutul depășise lățimea
   paginii, iar sigla se rupea pe trei rânduri. */
.site-head__inner {
	display: block;

	/* Pragul meniului se ia dupa latimea ASTA, nu dupa a ferestrei: latimea
	   paginii e reglabila din Setari, iar cu prag pe viewport un site ingustat
	   la 1000px ar fi lasat meniul intins peste marginea lui pe un ecran lat. */
	container-type: inline-size;
	container-name: head;
}

/* Rândul de sus: siglă, starea (oră + vreme), uneltele. */
/* Marginile antetului, strânse pe desktop.
   `.shell` dă 32px de o parte și de alta — potrivit pentru un articol, unde
   textul are nevoie de aer, prea mult pentru o bară de unelte. Se recuperează
   32px pentru meniu și vreme, care chiar au ce face cu ei.

   Nu zero: lipite de marginea ecranului, sigla și pastilele ar arăta a eroare de
   randare, nu a alegere. Opt pixeli sunt destui cât să se vadă că e o margine,
   destul de puțini cât să nu se mai numească gol.

   Doar peste 1000px. Pe telefon cei 16px de acolo sunt tot ce ține conținutul
   să nu atingă rama, deci rămân neatinși.

   Plafonul paginii NU se schimbă: antetul se oprește unde se oprește și textul,
   deci sigla rămâne deasupra primului cuvânt din articol. S-a încercat și
   varianta fără plafon — pe un ecran de 1920 sigla ajungea la 32 iar textul la
   313, adică bara părea desprinsă de pagină. */
@media (min-width: 1000px) {
	.site-head .shell { padding-inline: 8px; }
}

.site-head__top {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 18px);
	min-height: 58px;
	padding-block: 9px;
	flex-wrap: wrap;
	row-gap: 8px;

	/* Contează doar pe rândul rupt. Cât timp totul încape pe o linie, marginea
	   automată a siglei înghite tot spațiul liber, iar `justify-content` nu mai
	   are ce împărți — regula flexbox e că marginile automate se servesc primele.
	   Când uneltele cad pe rândul al doilea, ele n-au nicio margine automată, deci
	   abia atunci intră asta în joc și le ține tot în dreapta, sub restul, în loc
	   să le lase singure în stânga, sub siglă. */
	justify-content: flex-end;
}

/* Ora ultimei citiri și vremea, împreună. Pe ecran lat stau lipite de unelte, în
   dreapta; pe telefon coboară amândouă pe un rând propriu — de-asta au nevoie de
   un înveliș comun, altfel s-ar fi rupt separat, pe două rânduri în loc de unul. */
.site-head__status {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 18px);
	flex-wrap: wrap;
	row-gap: 6px;
}

/* Rândul de jos: navigația, pe toată lățimea. Linia de deasupra o desparte de
   identitate fără să încarce — e mai slabă decât bordura antetului. */
.site-head__bottom {
	display: flex;
	align-items: center;
	/* Meniul în stânga, uneltele (limbă, accesibilitate, temă) în dreapta. */
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* Marginea automată stă pe siglă, nu pe grupul de stare: tot spațiul liber al
   rândului se adună imediat după ea, deci ora, vremea și uneltele pleacă
   împreună spre dreapta, ca un singur bloc. Pusă pe grupul de stare, ea
   despărțea uneltele de restul și lăsa pastilele lipite de siglă. */
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; white-space: nowrap; }

.brand__mark {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: 11px;
	background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #b45309));
	color: var(--on-accent);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
	flex: none;
}

.brand__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.brand__text small {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11.5px;
	color: var(--muted);
	letter-spacing: .01em;
}

.site-nav { display: flex; gap: 4px; }

.site-nav a {
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
	transition: color .2s var(--ease), background-color .2s var(--ease);
}

.site-nav a:hover { color: var(--text); background: var(--surface-2); }

.site-nav a[aria-current="page"] {
	color: var(--text);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Stins cât timp n-are ce arăta.
   Înăuntru e doar butonul de meniu, care apare abia sub 660px — vezi
   `@container head`. Peste prag rămânea un element flex de lățime zero, dar
   spațiul dintre el și vecin se aplica oricum: cei 18px de `gap` din rândul de
   sus. Se vedea de când uneltele au urcat acolo — se opreau cu 18px înaintea
   marginii, deci nu se mai aliniau cu vremea de sub ele. */
.head-tools { display: none; align-items: center; gap: 10px; flex: none; }

/* Butonul de meniu apare doar cand meniul intra in sertar. */
.nav-toggle {
	display: none;
	place-items: center;
	width: 38px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle__x { display: none; }

.site-head.is-nav-open .nav-toggle { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.site-head.is-nav-open .nav-toggle__bars { display: none; }
.site-head.is-nav-open .nav-toggle__x { display: block; }

/* `display` din regulile de mai jos ar invinge atributul `hidden` */
[hidden] { display: none !important; }

.live-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
}

/* ── Indicatorii meteo din antet ──────────────────────────────────────────────

   Discreți prin construcție: sunt context, nu conținut. Pe ecran îngust dispar
   întâi eticheta, apoi tot grupul — antetul are deja logo, navigație și butoane,
   iar acolo primele care trebuie să încapă sunt acelea. */
/* Aceeași pastilă ca „Actualizat" și ca butonul de temă: un singur contur în
   jurul grupului, nu trei. Indicatorii sunt un bloc de context, citit dintr-o
   privire — trei chenare separate ar fi făcut antetul să pară o bară de
   unelte, cu cinci pastile în loc de trei. Despărțitura dintre ei e o linie
   subțire, ca la comutatorul de temă. */
.sky {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
}

.sky__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 11px;
	cursor: help;
}

.sky__item + .sky__item { border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }

/* Pictograma e SVG, nu glifă de font: are dimensiuni proprii, ia culoarea
   textului prin `currentColor` și arată identic pe orice sistem. `grid` +
   `place-items: center` o centrează exact, fără să depindă de metricile vreunui
   font — sursa problemei de aliniere de dinainte. */
.sky__icon {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--muted);
}

.sky__icon .icon { width: 22px; height: 22px; }

.sky__text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sky__reading { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
/* Fără culoare proprie: moștenește `--muted` de pe `.sky`, adică exact culoarea
   etichetei de alături („Elevație soare"). Avea `--text`, mai apăsat, și ieșea o
   pereche în două culori într-un grup care e, tot, context — nu conținut. Se
   deosebește destul prin grosime și corp de literă. */
.sky__value { font-weight: 600; font-size: 13.5px; }
.sky__unit { opacity: .7; }

/* Etichetele se ascund pe îngust — dar NU cea a soarelui. Gradele de unghi și
   cele de temperatură folosesc același simbol, deci fără cuvântul „elevație”
   lângă ea, „49°” se citește ca vremea de afară. Aici eticheta nu e decor, e
   singurul lucru care dezambiguizează. */
.sky__label { display: none; }
.sky__label--scurt { display: none; }
.sky__item[data-sky-key="sun"] > .sky__text > .sky__label:not(.sky__label--scurt) { display: inline; }

@media (min-width: 1080px) {
	/* `:not(--scurt)`, altfel se văd amândouă: eticheta scurtă poartă și clasa
	   `.sky__label`, deci un selector simplu o prinde și pe ea. Cu aceeași
	   specificitate ca regula care o ascunde (0,1,0), câștigă cea scrisă mai
	   jos — adică asta — și pe lat apărea „Elevație soare Elevație”. */
	.sky__label:not(.sky__label--scurt) { display: inline; }
}

/* Pe orice ecran tactil, indicatorii primesc înălțime de deget — inclusiv pe
   tablete late, unde regula de lățime nu se declanșează. Criteriul corect nu e
   cât de lat e ecranul, ci cu ce îl atingi: pe o tabletă de 768px explicația se
   deschide tot cu degetul, iar o țintă de 22px nu se nimerește.

   `hover: none` pe lângă `pointer: coarse`, ca un laptop cu ecran tactil și mouse
   să rămână pe varianta compactă — acolo chiar există hover. */
@media (hover: none) and (pointer: coarse) {
	.sky__item { min-height: 44px; padding-block: 6px; }

	/* Pastila nu-și mai adaugă marginea ei peste ținta de 44px a indicatorilor:
	   altfel grupul ajungea la 54px, cu un cap peste „Actualizat" de alături. */
	.sky { padding-block: 0; }
}

/* Vremea nu se mai ascunde pe telefon: de la 660px în jos coboară pe rândul ei,
   sub siglă și unelte, unde încape confortabil. Vezi regula din
   `@container head (max-width: 660px)`. */

.live-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--c-prod);
	flex: none;
	animation: pulse 2.2s var(--ease) infinite;
}

/* Nu există stare „gri". Cât timp avem o oră de afișat, punctul rămâne verde și
   pulsează: pastila spune oricum din ce moment sunt datele, iar un punct stins
   pentru o citire veche de trei minute arăta ca un site picat, deși cifrele de
   pe ecran erau bune. Roșu rămâne doar pentru cazul în care chiar nu avem nimic
   de arătat. */
.live-dot.is-error { background: var(--c-danger); animation: none; }

@keyframes pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-prod) 55%, transparent); }
	70%  { box-shadow: 0 0 0 7px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Comutator de tema, 3 pozitii, cu pastila care aluneca */
.theme-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 3px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface-2);
}

.theme-switch button {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 30px; height: 26px;
	border-radius: 999px;
	color: var(--muted);
	transition: color .25s var(--ease);
}

.theme-switch button[aria-checked="true"] { color: var(--text); }

.theme-switch__thumb {
	position: absolute;
	top: 3px; left: 3px;
	width: 30px; height: 26px;
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--shadow);
	transition: transform .32s var(--ease-out);
	transform: translateX(calc(var(--thumb-index, 1) * 30px));
}

/* Comutatorul de limba. Aceeasi pastila ca la tema, ca sa formeze o pereche in
   dreapta antetului. Fara pastila mobila insa: „RO" nu e o optiune intre altele,
   e starea in care se afla pagina, iar „EN" e o plecare de pe domeniu. */
.lang-switch {
	display: inline-flex;
	align-items: center;
	padding: 3px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* Cele doua jumatati, identice ca forma. Una e `<button>`, cealalta `<a>`, deci
   li se sterg si stilurile de baza ale fiecareia — altfel butonul ar veni cu
   fundalul si conturul lui, iar legatura cu sublinierea. */
.lang-switch__opt {
	display: grid;
	place-items: center;
	min-width: 30px; height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	font: inherit;
	color: var(--muted);
	text-decoration: none;
	cursor: pointer;
	transition: color .25s var(--ease), background-color .25s var(--ease);
}

/* Limba pe care esti. Se muta numai evidentierea; pozitiile raman fixe. */
.lang-switch__opt.is-on {
	color: var(--text);
	background: var(--surface);
	box-shadow: var(--shadow);
	cursor: default;
}

.lang-switch__opt:not(.is-on):hover,
.lang-switch__opt:not(.is-on):focus-visible { color: var(--text); }

/* In subsol pastila sta intr-un rand de legaturi, deci ar fi mancat stilurile
   lor — 15px corp si padding de link, adica o pastila strambă langa una dreapta.
   Selectorul e mai specific decat `.site-foot__nav a`, deci castiga oriunde. */
.site-foot__nav .lang-switch__opt {
	padding: 0;
	min-width: 30px;
	height: 26px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}


/* Exemplarul de pe randul de stare: ascuns pe ecrane late, unde rolul lui il tine
   cel din antet, langa tema. Se aprinde in blocul `@container head` de mai jos,
   acolo unde antetul chiar se stramteaza.

   Toate cele trei exemplare comuta la ACELASI prag, si de-asta pragul e o
   interogare pe container, nu pe fereastra. Inainte, cel din antet se ascundea la
   560px de fereastra iar randul de stare se rupea la 660px de container: intre
   ele erau o suta de pixeli in care se vedeau doua comutatoare deodata. */
.lang-switch--stare { display: none; }

/* Hero */
.hero { padding: clamp(34px, 6vw, 68px) 0 clamp(20px, 3vw, 34px); }

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.hero__eyebrow::before {
	content: "";
	width: 22px; height: 1px;
	background: currentColor;
}

.hero h1 {
	font-size: clamp(30px, 5.2vw, 52px);
	max-width: 100%;
	background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 68%, var(--muted)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lead {
	margin-top: 16px;
	max-width: 100%;
	color: var(--muted);
	font-size: clamp(15px, 1.6vw, 17px);
}

.notice {
	display: none;
	margin-top: 20px;
	padding: 13px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid color-mix(in srgb, var(--c-danger) 34%, transparent);
	background: color-mix(in srgb, var(--c-danger) 10%, transparent);
	color: color-mix(in srgb, var(--c-danger) 82%, var(--text));
	font-size: 13.5px;
}

.notice.is-visible { display: block; }
.notice--info { border-color: var(--line-strong); background: var(--surface-2); color: var(--text-2); }

.site-foot {
	margin-top: clamp(40px, 6vw, 80px);
	padding-block: 26px 46px;
	color: var(--muted);
	font-size: 12.5px;
}

/* `align-items: center`, nu implicitul `stretch`.
   Cele două jumătăți au înălțimi diferite — fraza despre surse se rupe pe două
   rânduri pe ecran îngust, iar rândul de legături are înăuntru pastila RO|EN, de
   26px. Întinse, fiecare începea de sus și se termina unde apuca, deci textul din
   stânga și legăturile din dreapta nu stăteau niciodată pe aceeași linie. */
/* Două coloane egale, nu `space-between`.
   Cu flex, fiecare jumătate primea cât cerea conținutul ei, iar rândul de
   legături cere mult: patru intrări plus pastila RO|EN. Textul din stânga
   rămânea cu ce prisosea și se rupea pe două rânduri chiar și pe ecran lat,
   unde era loc berechet. Jumătate–jumătate, fiecare știe dinainte pe ce se
   poate baza. */
.site-foot__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 12px 16px;
	border-top: 1px solid var(--line);
	padding-top: 22px;
}

/* Legăturile sunt text de 12,5px, iar pastila de limbă are corp propriu. Fără
   centrare pe verticală, „Contact" se alinia la linia de bază, iar pastila ieșea
   cu câțiva pixeli mai jos — se vedea ca un rând strâmb.
   `min-height` cât pastila: așa rândul nu-și schimbă înălțimea dacă mai târziu
   se scoate comutatorul, și nu sare când se traduce în engleză. */
.site-foot__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px 16px;
	min-height: 26px;
}

/* Fraza din stânga: la fel, centrată față de rândul de legături, și cu spațiu de
   respirat între rânduri când se rupe.

   Fără `max-width`. Era 62ch, iar fraza are vreo 90 de caractere — deci plafonul
   o rupea în două indiferent cât spațiu avea, inclusiv pe ecrane late unde
   încăpea lejer. Lățimea o dă acum coloana, care e jumătate din subsol. */
.site-foot__inner > p {
	margin: 0;
	line-height: 1.6;
}

/* Sub pragul ăsta cele două jumătăți nu mai încap una lângă alta: legăturile
   s-ar rupe pe trei rânduri ca să încapă în 50%, ceea ce arată mai rău decât
   stivuit cinstit.

   Stivuite, se centrează. Aliniate la stânga, fraza despre surse se rupe pe două
   rânduri inegale, iar sub ea legăturile se rup pe alte două — patru margini
   drepte zdrențuite, una sub alta. Centrat, ruperea nu se mai vede ca o
   scăpare, ci ca o așezare. */
@media (max-width: 860px) {
	.site-foot__inner { grid-template-columns: 1fr; }

	.site-foot__inner > p { text-align: center; }

	.site-foot__nav { justify-content: center; }
}

.site-foot a { color: var(--accent); }

/* ── Meniul din antet ────────────────────────────────────────────────────────
   Pragurile se uita la latimea ANTETULUI (@container), nu a ferestrei: latimea
   paginii e reglabila din Setari, iar cu prag pe viewport un site ingustat la
   1000px ar fi lasat meniul intins peste marginea lui pe un ecran lat.

   De cand antetul are doua randuri, meniul are latimea intreaga pentru el
   singur: masurat, cele sapte intrari cer ~623px. Sertarul nu mai e nevoie
   decat pe telefon, unde chiar nu incap — nu si pe laptopurile inguste, unde
   inainte disparea desi era loc berechet.

   Eticheta „Actualizat:" ramane vizibila pe toata gama. Se ascundea sub 720px,
   dintr-o vreme cand antetul era pe un singur rand si pastila se bulucea intre
   sigla si unelte. Acum coboara pe randul ei si se intinde pe toata latimea
   (`.live-chip { width: 100% }`, sub 760px), asa ca are loc: masurat la 320px,
   textul intreg cere 261px din cei 288 disponibili. */

/* ── CALCULATORUL IN ANTET ───────────────────────────────────────────────────
   Pe ecran lat sta pe rândul de sus, lângă siglă, unde erau câteva sute de
   pixeli goi. În meniul de jos nu încape — vezi `Catalog::MENIU` pentru cifre.
   Sub 660px se stinge de aici și se aprinde în sertar, unde e loc. */
.head-calc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	margin-left: 4px;
	padding: 6px 13px;
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

.head-calc:hover {
	background: color-mix(in srgb, var(--accent) 22%, transparent);
	border-color: var(--accent);
}

.head-calc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.head-calc__icon { color: var(--accent); font-size: 14px; line-height: 1; }

/* Rândul de sus se îngustează devreme. Sub 1100px rămâne pastila cu pictograma,
   fără text: tot un buton apăsabil, dar de trei ori mai îngust. */
@media (max-width: 1100px) {
	.head-calc__text { display: none; }
	.head-calc { padding: 6px 10px; }
}

/* MENIUL ȘI VREMEA NU ÎNCAP ÎMPREUNĂ SUB ~1300 PX.
   Meniul are zece intrări (~730 px), vremea ~460 px; până la sertarul de
   telefon (660 px) rândul depășea, iar ultimele intrări — „Info", „Știri" —
   ieșeau din ecran fără nicio urmă. Vremea e informație, meniul e drumul:
   aici vremea coboară pe rândul ei, iar meniul rămâne întreg. */
@container head (min-width: 661px) and (max-width: 1099px) {
	.site-head__bottom { flex-wrap: wrap; row-gap: 4px; }
	.site-head__bottom .sky { order: 3; flex-basis: 100%; }
	/* Chiar deasupra sertarului nici meniul singur nu mai încape pe un rând:
	   atunci trece pe două, în loc să-și scoată ultimele intrări din ecran. */
	.site-nav { flex-wrap: wrap; row-gap: 2px; }
}

/* ANTETUL AERISIT — DOAR PE DESKTOP.
   Peste 1300 px meniul și vremea încap pe un singur rând, deci aici se poate
   da aer. Sub prag nu se atinge nimic: tableta își are blocul de mai sus,
   telefonul pe al lui, cu sertarul.

   AERUL E MAI MULT PE VERTICALĂ. Pe orizontală rândul de jos e plafonat de
   lățimea paginii (1280 px), iar meniul cu vremea îl umplu aproape tot.
   „Precipitații" devine „Ploaie" — explicația rămâne la hover. „Elevație
   soare" rămâne întreagă: fără ea gradele se citesc ca temperatură.

   SPAȚIEREA MENIULUI E STRÂNSĂ DINADINS (19 octombrie 2026). Cu „Gaze", a
   zecea intrare, și cu spațierea largă de dinainte, rândul cerea 837 + 16 +
   471 = 1.324 px din 1.264, iar vremea cădea pe rândul ei chiar pe ecrane
   late. Acum: 711 + 12 + 462, cu ~80 px rămași pentru valori mai lungi
   („Ploaie 100 %", „Vânt 136,2"). O intrare nouă în meniu cere măsurat din
   nou — pe site-ul adevărat, cu valori de vreme reale: local lipsesc și
   vremea pare cu 60 px mai îngustă.

   Plasa de siguranță e `flex-wrap`: dacă vremea tot n-ar încăpea — valori
   neobișnuit de lungi —, coboară pe rândul ei, ca pe tabletă, în loc să iasă
   din ecran. */
@container head (min-width: 1301px) {
	.site-head__top { min-height: 70px; padding-block: 12px; gap: 22px; }
	.brand { gap: 13px; }
	.brand__mark { width: 40px; height: 40px; border-radius: 12px; }
	.brand__text { font-size: 17px; }

	.site-head__bottom { min-height: 50px; gap: 12px; flex-wrap: wrap; row-gap: 6px; }
	.site-nav { gap: 6px; }
	.site-nav a { padding: 8px 10px; }

	.sky__item { padding: 0 8px; gap: 7px; }
	.sky__item[data-sky-key="rain"] > .sky__text > .sky__label:not(.sky__label--scurt) { display: none; }
	.sky__item[data-sky-key="rain"] > .sky__text > .sky__label--scurt { display: inline; }
}

/* Patru indicatori lângă meniu, inclusiv în antetele de 1100–1300 px. */
@container head (min-width: 1100px) {
    .site-head__bottom { gap: 8px; flex-wrap: wrap; row-gap: 6px; }
    .site-nav { gap: 2px; flex: none; }
    .site-nav a { padding: 8px 6px; font-size: 13px; }
    .sky { flex: none; font-size: 10.5px; padding: 3px; }
    .sky__item { padding: 0 5px; gap: 4px; }
    .sky__icon .icon { width: 17px; height: 17px; }
    .sky__text { gap: 3px; }
    .sky__reading { gap: 1px; }
    .sky__value { font-size: 12px; }
    .sky__item > .sky__text > .sky__label:not(.sky__label--scurt) { display: none; }
    .sky__item > .sky__text > .sky__label--scurt { display: inline; }
    /* Și eticheta lungă a soarelui: regula de sus care o arată pe îngust are specificitate mai mare (0,5,0),
       deci cea de mai sus (0,4,0) n-o prindea. Rămânea lângă cea scurtă: „Elevație soare Elevație”, iar din
       22.10.2026, când eticheta lungă a devenit tot „Elevație”, „Elevație Elevație”. Aceeași specificitate,
       scrisă mai jos, deci câștigă. Rămâne cea scurtă, „Elevație”, care deosebește unghiul de temperatură. */
    .sky__item[data-sky-key="sun"] > .sky__text > .sky__label:not(.sky__label--scurt) { display: none; }
}

/* În sertar, pe telefon. Ascunsă pe lat: acolo o face butonul de sus. */
.site-nav__calc { display: none; }

@container head (max-width: 660px) {
	/* Butonul de lângă siglă dispare — acolo e rândul cel mai înghesuit — și
	   intrarea urcă în sertar, care e o coloană și mai are loc. */
	.head-calc { display: none; }

	/* PASTILA PLINA, NU TEXT COLORAT.
	   Scrisă doar cu `color: var(--accent)`, se pierdea printre celelalte nouă
	   rânduri ale sertarului — pe tema deschisă, galbenul pe alb aproape că nu
	   se citea. Fundalul plin merge la fel pe amândouă temele fiindcă
	   `--on-accent` e aceeași culoare închisă în ambele: contrastul nu depinde
	   de temă. Vezi `:root` și `[data-theme]`. */
	/* `.site-nav a` are doua clase in selector, deci bate `.site-nav__calc` la
	   `color` si `font-weight`: fundalul se aplica (aia n-o pune nimeni altul),
	   dar textul ramanea gri-albastrui pe galben — adica exact perechea pe care
	   n-o poti citi. De aia selectorul e scris cu tot cu `a`. */
	.site-nav a.site-nav__calc {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 12px;
		padding: 12px 14px;
		border-radius: 10px;
		background: var(--accent);
		color: var(--on-accent);
		font-size: 14.5px;
		font-weight: 700;
	}

	/* `.site-nav a:hover` ar fi spălat pastila la atingere: pe telefon starea de
	   hover rămâne agățată după tap, deci butonul ar fi rămas gri după ce omul
	   îl apasă și se întoarce. */
	.site-nav a.site-nav__calc:hover,
	.site-nav a.site-nav__calc:focus-visible {
		background: var(--accent);
		color: var(--on-accent);
	}

	.site-nav__calc-icon { font-size: 15px; line-height: 1; }

	.nav-toggle { display: grid; }

	/* Aici chiar are ce arăta — butonul de meniu. Vezi `.head-tools` pentru de ce
	   e stins peste prag. */
	.head-tools { display: flex; }

	/* Rândul de jos NU se mai ascunde, dar se turtește la zero.
	   Ascunderea era corectă cât timp în el nu era decât meniul. Acum ține și
	   uneltele — limbă, accesibilitate, temă — iar un părinte cu `display:none`
	   își ascunde copiii oricât i-ai poziționa. Uneltele apăreau doar cu sertarul
	   deschis, adică exact unde nu le caută nimeni.
	   Așa că rămâne în pagină, dar fără înălțime, fără bordură și fără spațiu:
	   meniul din el e oricum poziționat absolut (sertarul), iar uneltele la fel
	   (urcă în golul de lângă siglă). Nimic nu mai ocupă loc în flux, deci nu
	   apare linia goală de care ne feream. */
	.site-head__bottom {
		min-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top: 0;
	}

	.site-head.is-nav-open .site-head__bottom { border-top: 0; min-height: 0; }

	/* Pe telefon antetul se citește de sus în jos: întâi cine ești și de unde
	   comanzi (siglă, temă, meniu), apoi în ce stare e sistemul (limba, ora
	   ultimei citiri, vremea). Starea trece pe rând propriu — `flex-basis: 100%`
	   o rupe după unelte, fără să fie nevoie de un element gol de spargere.

	   Fără linie deasupra: antetul avea deja bordura lui, rândul de navigație are
	   propria despărțitură, iar a treia linie pe un ecran de 375px tăia antetul în
	   felii în loc să-l organizeze. */
	.site-head__status {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		gap: 14px;
		padding-top: 2px;
	}

	/* Primul rând al stării: ora ultimei citiri în stânga, limba în dreapta.
	   Amândouă sunt „cât de proaspăt e și în ce limbă citesc" — se citesc
	   împreună, iar lipite la marginile ecranului nu se pot confunda cu vremea de
	   dedesubt.

	   Aici se face și schimbul: comutatorul din antet se stinge, cel de pe rândul
	   de stare se aprinde. Același prag pentru amândouă, deci nu există lățime la
	   care să se vadă două sau niciunul. */
	.head-tools .lang-switch { display: none; }

	/* Împins la marginea din dreapta de spațiul liber dintre el și pastilă. */
	.lang-switch--stare { display: inline-flex; order: 2; margin-left: auto; }

	/* Pastila ia rândul întreg și stă la mijloc.

	   ÎNAINTE ERA ÎNGHESUITĂ, și avea de ce: împărțea rândul cu un comutator de
	   limbă, iar amândouă nu încăpeau pe un telefon de 360px. De-aia stătea la
	   10,5px, cu paddingul strâns, iar sub 345px își pierdea și eticheta.

	   Comutatorul acela nu mai există — limba a trecut pe rândul meniului, în
	   `.nav-tools`, care rămâne vizibil și pe ecran îngust. Rândul de stare are
	   acum un singur locatar, deci constrângerea care îi ținea toate cele trei
	   reduceri a dispărut odată cu vecinul.

	   Măsurat: la 320px — cel mai îngust telefon pe care îl mai vezi — rândul are
	   288px utili, iar pastila întreagă la 11,5px cere 256. Încape cu tot cu
	   etichetă, deci nu mai e nevoie să cadă nimic la nicio lățime. */
	.site-head__status .live-chip {
		order: 1;
		width: 100%;
		justify-content: center;
		font-size: 11.5px;
		padding: 6px 12px;
		gap: 6px;
		min-width: 0;
	}

	/* Vremea trece dedesubt, pe toată lățimea.
	   Regula rămâne scrisă și pentru vechiul părinte: pe paginile unde pastila
	   „Actualizat" se vede, rândul de stare există și ea trebuie să stea sub el. */
	.site-head__status .sky { order: 3; flex-basis: 100%; }

	/* VREMEA A COBORÂT ÎN MARKUP pe rândul meniului — vezi `View::header()`.
	   Pe desktop asta era tot ce trebuia; pe telefon, unde meniul intră în
	   sertar, ea rămâne singură pe rând și trebuie să se poarte la fel ca înainte:
	   lățime întreagă, sub sigla și unelte. */
	.site-head__bottom { flex-wrap: wrap; }
	.site-head__bottom .sky { order: 3; flex-basis: 100%; }

	/* Rândul de stare, când n-a mai rămas nimic în el.
	   De când vremea a plecat, pe paginile fără pastilă containerul rămâne gol —
	   dar nu e `:empty`, fiindcă îi rămân copii ascunși. Fără regula asta ar fi
	   lăsat două rânduri de gol între siglă și vreme, adică o gaură pe care n-o
	   explică nimic. */
	.site-head__status:not(:has(.live-chip:not([hidden]))):not(:has(.lang-switch--stare)) {
		display: none;
	}

	/* Trei carduri pe un rând, fiecare cu pictograma deasupra și numele lângă
	   valoare, dedesubt.

	   Pe orizontală bugetul e strâmt — la 375px containerul are 343px, minus
	   două spații de 6px, minus câte 12px de padding: rămân ~98px de conținut
	   per card, iar toate trei încap doar dacă pictograma nu mai stă pe rândul
	   textului. Scoasă deasupra, ea eliberează cei ~21px care lipseau ca fiecare
	   indicator să-și poarte numele, nu doar cifra.

	   Pe verticală nu se pierde nimic: cardul rămâne la 44px, minimul de atins cu
	   degetul, pe care oricum îl impunea regula tactilă și când era pe un rând.
	   De aceea padding-ul e mic — înălțimea vine din țintă, nu din spațiere. */
	.sky {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		width: 100%;

		/* Pastila comună se desface aici: pe telefon fiecare indicator își are
		   propriul card, iar un contur în jurul lor ar fi fost un al doilea
		   chenar peste primul. */
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.sky__item + .sky__item { border-left: 1px solid var(--line); }

	/* `minmax(0, ...)`, nu doar fracțiuni: `1fr` înseamnă `minmax(auto, 1fr)`,
	   iar `auto` refuză să coboare sub lățimea conținutului. Fără el, cardul
	   soarelui își lua 195px și îi lăsa celui de ploaie 60. */

	/* PICTOGRAMA LÂNGĂ TEXT, NU DEASUPRA.
	   Stivuite, cele trei pastile cereau 44px înălțime pentru două rânduri de
	   conținut. Pe un rând intră în ~30px și rămâne loc lateral — chiar și pe
	   375px, fiindcă eticheta e deja varianta scurtă („ELEVAȚIE", nu „ELEVAȚIE
	   SOARE"). Pictograma stă în stânga, ca pe desktop — aceeași ordine de
	   citire pe orice ecran. */
	.sky__item {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 36px;
		padding: 5px 10px;
		border: 1px solid var(--line);
		border-radius: var(--radius-sm, 10px);
		background: var(--surface);
		overflow: hidden;
	}

	.sky__icon .icon { width: 17px; height: 17px; }

	.sky__text {
		flex: none;
		/* Nu mai e `width: 100%`: pe un rând, aia ar fi împins pictograma în
		   afara pastilei. Acum ocupă doar cât îi trebuie. */
		align-items: baseline;
		justify-content: center;
		gap: 3px;
		min-width: 0;
	}

	/* Ambele forme de selector, fiindcă regula de desktop care arată eticheta
	   lungă a soarelui folosește `:not(...)`, iar `:not` adaugă specificitatea
	   argumentului. Fără perechea de mai jos, ea rămânea câștigătoare și numele
	   lung „Elevație soare" continua să ocupe 54px în card — exact cât îi
	   lipseau celui scurt, care se strângea la zero. */
	.sky__item > .sky__text > .sky__label,
	.sky__item[data-sky-key="sun"] > .sky__text > .sky__label:not(.sky__label--scurt) { display: none; }

	/* Numele scurte, la toate trei: „Ploaie", nu „Precipitații". Aceeași
	   specificitate ca regula de ascundere de deasupra (0,3,0), deci câștigă
	   fiindcă e scrisă mai jos. */
	.sky__item > .sky__text > .sky__label--scurt {
		display: block;
		/* Poate să se strângă, dar valoarea nu: pe un ecran de 320px eticheta se
		   scurtează cu trei puncte, iar cifra rămâne întreagă. Invers ar fi fost
		   inutil — o valoare tăiată nu mai e o valoare. */
		min-width: 0;
		/* Nu monospațiat, ca restul indicatorilor: aici fiecare literă ar plăti
		   lățimea celei mai late, iar „ELEVAȚIE" cere cu ~12px mai mult decât
		   încape. Inter îngustează exact atât cât trebuie, iar grosimea 700 ține
		   eticheta lizibilă la 9,5px — la corpul ăsta, un font subțire se pierde
		   pe ecranele cu densitate mică. */
		font-family: var(--font-body);
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: -.005em;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sky__reading { flex: none; gap: 1px; }

	/* Aceeași familie ca eticheta, cu cifre de lățime fixă: altfel valoarea
	   sare lateral la fiecare actualizare, fiindcă „1" e mai îngust decât „8". */
	.sky__value {
		font-family: var(--font-body);
		font-size: 12.5px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: -.01em;
	}
	.sky__unit { font-family: var(--font-body); font-size: 9px; font-weight: 600; }

	/* Sub 360px bugetul se strânge cu încă ~8px pe card, adică exact cât ține
	   „ELEVAȚIE" întreg. Coboară spațiile înainte de corpul de literă: un card
	   mai strâmt se citește la fel, o etichetă tăiată nu. */
	/* Selectorii repetă lanțul de trei clase de mai sus: interogările de container
	   nu adaugă specificitate, deci un `.sky__label--scurt` simplu (0,1,0) ar fi
	   pierdut în fața regulii părinte (0,3,0) și corpul de literă n-ar fi coborât
	   deloc — verificat, la 288px eticheta rămânea pe 9,5px și se tăia. */
	@container head (max-width: 360px) {
		.sky { gap: 4px; }
		.sky__item { padding: 4px 6px; }
		.sky__item .sky__text { gap: 1px; }
		.sky__item > .sky__text > .sky__label--scurt { font-size: 9.5px; letter-spacing: -.01em; }
		/* Coboară și cifra, nu doar eticheta: la 320px cardul are 77px de
		   conținut, iar cazul cel mai lat — „-12,5°", noaptea, când soarele e
		   sub orizont — lăsa etichetei 39px din cei 40 de care are nevoie.
		   Un pixel, dar exact cât să apară trei puncte degeaba. */
		.sky__item .sky__value { font-size: 13px; }
		.sky__item .sky__unit { font-size: 9.5px; }
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: grid;
		gap: 2px;
		padding: 10px clamp(16px, 3vw, 32px) 16px;
		background: color-mix(in srgb, var(--bg) 96%, transparent);
		backdrop-filter: saturate(180%) blur(14px);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 40px -24px rgb(0 0 0 / .55);

		/* Ascuns, dar fara `display:none`: asa tranzitia are de la ce porni,
		   iar `visibility` il scoate din ordinea de tabulare.

		   `visibility` se comuta instant, nu pe durata: e o proprietate cu
		   valori discrete, iar tranzitionata pe 180ms ar aparea abia pe la
		   jumatatea estomparii. La inchidere primeste intarziere, ca sa apuce
		   sa se stinga inainte sa dispara. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
	}

	.site-head.is-nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
	}

	.site-nav a {
		padding: 11px 14px;
		border-radius: 10px;
		font-size: 15px;
	}

}

@media (prefers-reduced-motion: reduce) {
	/* Ambele selectoare, altfel regula pentru starea deschisa — mai specifica —
	   si-ar pastra tranzitia. */
	.site-nav,
	.site-head.is-nav-open .site-nav { transition: none; }
}

/* ── Cardurile mari cu explicații ────────────────────────────────────────── */

/* 196px, nu mai mult: cardurile sunt cinci, iar 5 × 200 + patru spații de 10
   încap în 1.040px. La 230 intrau doar patru pe rând în frontend, deși în
   panoul de administrare — unde containerul e mai lat — păreau că încap. */
.kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
	gap: 10px;
	height: 100%;
}

.kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}

.kpi__label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.kpi__value { display: flex; align-items: baseline; gap: 5px; margin: 0; }

.kpi__value b {
	font-family: var(--font-display);
	font-size: clamp(27px, 3.1vw, 38px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.kpi__value span { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.kpi__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.kpi__note b { color: var(--text); font-weight: 600; }

/* Linia ultimei ore. `preserveAspectRatio="none"` din SVG o întinde pe toată
   lățimea cardului, deci înălțimea o fixăm aici și nu ne mai interesează câte
   puncte are seria. Împinsă în jos cu `margin-top: auto`, ca ea și săgeata de
   sub ea să stea lipite de baza cardului oricât de lungă ar fi fraza. */
.kpi__spark-wrap {
	position: relative;
	margin: auto 0 0;
	color: var(--muted);
}

.kpi__spark {
	display: block;
	width: 100%;
	height: 26px;
	/* Se lasă strânsă dacă widget-ul e mai scund decât înălțimea din catalog —
	   tablourile salvate înainte păstrează înălțimea lor. Linia se subțiază;
	   fraza și săgeata rămân întregi, fiindcă textul nu coboară sub conținut. */
	min-height: 10px;
	overflow: visible;
}

/* Punctul de la capătul liniei — valoarea de acum. Pulsează încet, ca inelul
   unui semnal care se propagă: cifra de deasupra se schimbă la fiecare poll, iar
   asta e singura mișcare care spune că numărul e viu, nu înghețat. */
.kpi__spark-now {
	position: absolute;
	right: 0;
	width: 5px;
	height: 5px;
	margin: -2.5px -1px 0 0;
	border-radius: 50%;
	background: currentColor;
}

[data-anim="on"] .kpi__spark-now::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	animation: kpi-now 2.6s var(--ease-out) infinite;
}

@keyframes kpi-now {
	0%        { transform: scale(.35); opacity: .6; }
	70%, 100% { transform: scale(1.7);  opacity: 0; }
}

/* Perechea regulii globale de „mișcare redusă”: setarea din admin trebuie s-o
   poată stinge la fel, cum face deja pentru banda de flux. */
body[data-motion="off"] .kpi__spark-now::after { animation: none; opacity: 0; }

.kpi__spark-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Umplerea de sub linie: destul cât să dea direcția dintr-o privire, prea
   discretă cât să concureze cu cifra de deasupra. */
.kpi__spark-fill { fill: currentColor; stroke: none; opacity: .11; }

/* Tonul se pune pe înveliș, nu pe SVG: punctul „acum” e frate cu SVG-ul, nu
   copilul lui, iar `currentColor` trebuie să-i ajungă și lui. */
.kpi--cons .kpi__spark-wrap   { color: var(--c-cons, var(--accent)); }
.kpi--prod .kpi__spark-wrap   { color: var(--c-prod); }
.kpi--import .kpi__spark-wrap { color: var(--c-import, var(--accent)); }
.kpi--export .kpi__spark-wrap { color: var(--c-export, var(--c-prod)); }
.kpi--foto .kpi__spark-wrap   { color: var(--c-foto, var(--accent)); }
.kpi--nucl .kpi__spark-wrap   { color: var(--c-nucl, var(--muted)); }

.kpi__trend {
	margin: auto 0 0;
	font-family: var(--font-mono);
	font-size: 11.5px;
}

/* Când există linie, ea e cea împinsă în jos; săgeata o urmează la distanță
   fixă. Fără regula asta, două margini `auto` ar împărți spațiul liber între
   ele și linia ar pluti la mijlocul cardului. */
.kpi__spark-wrap + .kpi__trend { margin-top: 6px; }

.kpi__trend em { font-style: normal; color: var(--muted); }
.kpi__trend.is-up { color: var(--c-prod); }
.kpi__trend.is-down { color: var(--c-import, var(--accent)); }
.kpi__trend.is-flat, .kpi__trend.is-none { color: var(--muted); }

/* Dunga de jos dă tonul cardului, fără să coloreze tot fundalul. */
.kpi__bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--muted);
	opacity: .75;
}

.kpi--cons .kpi__bar   { background: var(--c-cons, var(--accent)); }
.kpi--prod .kpi__bar   { background: var(--c-prod); }
.kpi--import .kpi__bar { background: var(--c-import, var(--accent)); }
.kpi--export .kpi__bar { background: var(--c-export, var(--c-prod)); }
.kpi--foto .kpi__bar   { background: var(--c-foto, var(--accent)); }
.kpi--nucl .kpi__bar   { background: var(--c-nucl, var(--muted)); }

.kpi--import .kpi__value b { color: var(--c-import, var(--accent)); }
.kpi--export .kpi__value b { color: var(--c-export, var(--c-prod)); }
.kpi--foto .kpi__value b   { color: var(--c-foto, var(--accent)); }

/* Steagurile desenate (vezi js/lib/flags.js). Apar în lista de sub hartă, în
   cardurile pe țări și în selectorul din admin — un singur set de reguli, ca să
   stea la fel în toate trei.

   `flex: none` fiindcă unele dintre gazde sunt containere flex, iar acolo un SVG
   cu lățime fixă se lasă totuși strivit când numele țării e lung. */
.steag {
	flex: none;
	vertical-align: -1px;
	border-radius: 2px;
}

/* ── Harta fluxurilor ────────────────────────────────────────────────────── */

.sen-map {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 380px;
}


/* Caseta de la hover. Nu primește evenimente de mouse, altfel ar fugi de sub
   cursor în momentul în care apare sub el. */
.sen-map__tip {
	position: absolute;
	z-index: 3;
	min-width: 180px;
	max-width: 230px;
	padding: 10px 12px;
	border: 1px solid var(--line-strong, var(--line));
	border-radius: var(--radius-sm, 10px);
	background: var(--surface);
	box-shadow: var(--shadow-lg, 0 12px 30px -12px rgb(0 0 0 / .5));
	font-size: 12.5px;
	pointer-events: none;
}

.sen-map__tip strong { display: block; font-size: 13.5px; }
.sen-map__tip em { display: block; margin-top: 2px; font-style: normal; font-family: var(--font-mono); color: var(--muted); }

.sen-map__tip-points {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
}

.sen-map__tip-points span { display: flex; justify-content: space-between; gap: 10px; }

.sen-map__tip-note {
	margin: 8px 0 0;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--muted);
}
.sen-map__tip-points b { color: var(--text); font-weight: 600; }

/* Plafon de înălțime, ca harta să nu depășească un ecran de laptop, dar destul
   de generos cât să se vadă. Canvasul se desenează la dimensiunea reală a
   containerului, deci nu pierde din claritate când crește. */
/* Inaltimea o stabileste JS-ul, din latime, ca harta sa umple spatiul. */
.sen-map__canvas { display: block; width: 100%; }

/* Aici stăteau `.sen-map__land`, `__flow`, `__node`, `__wire`, `__head`, `__ro`,
   `__country`, `__value` și cele trei `@keyframes` ale lor — vreo șaizeci de
   linii rămase de pe vremea când harta era SVG. Versiunea pe canvas nu mai
   folosește niciuna dintre ele: conturul, săgețile, nodurile și textul se
   desenează în `js/widgets/sen-map.js`, iar „mișcare redusă” se respectă tot
   acolo, oprind faza de animație. Verificat că nu apar nicăieri în `js/`. */

/* Cifrele pe țări, sub hartă, doar pe ecran îngust. Clasa `is-compact` o pune
   JS-ul din lățimea CONTAINERULUI, nu un `@media` din lățimea ecranului: un
   widget pe jumătate de rând are aceeași problemă ca un telefon. */
.sen-map__list { display: none; }

.sen-map.is-compact .sen-map__list {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sen-map__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 2px;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.sen-map__list b {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.sen-map__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 0;
	font-size: 12px;
	color: var(--muted);
}

/* Pe telefon, cardul hărții iese din marginile paginii.
   Nu e o figură de stil: pe un ecran de 360 px, marginea shell-ului (16 de
   fiecare parte) plus padding-ul cardului (încă 16) lăsau desenului 294 px din
   360 — o șesime din ecran se ducea pe spațiu gol, de două ori, iar scara hărții
   se calculează tocmai din lățimea rămasă. Cu cardul tras în afară și cu
   padding-ul lui redus, desenul primește 326 px.
   Rămân 6 px până la marginea ecranului, ca să se vadă că e tot un card, și nici
   un pixel de derulare pe orizontală: marginea negativă e exact cât padding-ul
   pe care îl anulează. */
@media (max-width: 760px) {
	.widget--sen-map {
		margin-inline: calc(6px - clamp(16px, 3vw, 32px));
	}
}

.sen-map__legend span { display: inline-flex; align-items: center; gap: 7px; }

/* Rândul rețelei de 400 kV se ascunde când opțiunea e stinsă din admin. Regula
   asta e obligatorie, nu de prisos: `[hidden]` din foaia browserului are o
   specificitate mai mică decât `.sen-map__legend span` de mai sus, deci fără ea
   `hidden` n-ar face nimic și legenda ar explica un desen care nu există. */
.sen-map__legend span[hidden] { display: none; }

.sen-map__key {
	width: 16px;
	height: 3px;
	border-radius: 2px;
	background: var(--muted);
}

/* Culoarea o pune scriptul pe `background`, deci liniuțele se fac din mască, nu din fundal. */
.sen-map__key--lucru {
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
	mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
	border-radius: 0;
}

/* ── 5. Grila de widget-uri ──────────────────────────────────────────────── */

.board {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap);
	padding-bottom: 20px;
}

.widget {
	grid-column: span min(var(--span, 12), 12);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: clamp(16px, 1.8vw, 22px);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
	container-type: inline-size;
	transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.widget:hover { box-shadow: var(--shadow-lg); border-color: var(--line-strong); }

/* Widget-urile pur decorative nu au nevoie de rama */
.widget--flow-rail,
.widget--share-card,
.widget--stat-group,
.widget--text,
.widget--indemn-calc,
.widget--gaz-rezumat {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.widget--flow-rail:hover,
.widget--share-card:hover,
.widget--stat-group:hover,
.widget--text:hover,
.widget--indemn-calc:hover,
.widget--gaz-rezumat:hover { box-shadow: none; }

/* Caseta spre calculator e ea insasi un card, cu titlul si butonul ei. Antetul
   carcasei — „date live", descarca, distribuie — ar fi pus o rama goala in
   jurul ei, cu unelte de grafic pentru ceva care nu e grafic. */
.widget--indemn-calc .widget__head,
.widget--gaz-rezumat .widget__head { display: none; }
.widget--gaz-rezumat .gaz-rezumat { margin: 0; }

/* Indicatorul unic: rama o tine carcasa, nu cardul.
   La un GRUP de indicatori fiecare card are nevoie de rama lui, ca sa se
   deosebeasca intre ele — de aceea `.widget--stat-group` renunta la rama
   carcasei. Cand indicatorul e singur, aceeasi regula ar da ramă in ramă: titlul
   si butoanele afara, pe fundalul paginii, si o a doua cutie sub ele. Asa arata
   ca orice alt widget cu grafic — o singura cutie, cu titlul inauntru. */
.widget--stat .stat-card {
	border: 0;
	background: none;
	box-shadow: none;
	padding: 0;

	/* `overflow: hidden` exista ca sa taie dunga de accent la colturile rotunjite
	   ale cardului. Fara rama si fara padding, singurul lucru pe care il mai taie
	   e chiar continutul: eticheta de sus, pe care animatia de intrare o ridica
	   cu cativa pixeli, ramanea cu varful literelor retezat. */
	overflow: visible;
}

/* Tot ce se misca trece pe carcasa, fiindca ea e cutia pe care o vede omul.
   Cardul dinauntru n-are nici rama, nici fundal, nici umbra: ridicat la hover,
   se misca un dreptunghi invizibil peste unul care sta pe loc — exact ce se
   vedea, o animatie „doar pe interior”. */
.widget--stat .stat-card:hover { transform: none; box-shadow: none; }

/* Dunga de accent din partea de sus a cardului n-are ce cauta fara rama. */
.widget--stat .stat-card::after { display: none; }

/* …si reapare pe carcasa, la marginea ei de sus.
   `overflow: hidden` e aici ca dunga sa fie taiata de colturile rotunjite ale
   carcasei. Continutul nu risca sa fie retezat: carcasa are padding, deci
   eticheta ridicata de animatia de intrare are pe unde sa se miste. */
.widget--stat {
	position: relative;
	overflow: hidden;
}

/* `::before`, nu `::after`: al doilea e luat de dara de lumina care matura
   cardul (vezi `[data-anim="on"].widget--stat::after`, mai jos). Ordinea
   conteaza — un pseudo-element `::before` se deseneaza SUB continut, iar dunga
   asta sta oricum in padding-ul de sus, unde n-are ce acoperi. Lumina, in
   schimb, trebuie sa treaca PESTE cifre, altfel n-o vede nimeni. */
.widget--stat::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--tone, var(--accent)), transparent);
	opacity: .85;

	/* Altfel dunga ar sta peste butoanele de descarcare/distribuire din coltul
	   din dreapta sus si le-ar manca primii trei pixeli de zona de clic. */
	pointer-events: none;
}

/* `--tone` il scrie `statGroup()` pe carcasa, nu doar pe card: culoarea dungii
   urmeaza seria aleasa, iar la sold urmeaza sensul — verde la export,
   portocaliu la import. */
.widget--stat:hover { transform: translateY(-3px); }

.widget__head { display: flex; align-items: flex-start; gap: 12px; }

.widget__titles { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }

.widget__title { font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; }

.widget__sub { color: var(--muted); font-size: 13px; max-width: 100%; }

/* Pe ce perioada sunt cifrele. Monospace si litere mici, ca sa se citeasca a
   eticheta de date, nu a inca un rand de explicatie — subtitlul spune CE arata
   graficul, randul asta spune DE CAND. */
.widget__period {
	margin-top: 2px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--muted);
	opacity: .85;
}

/* Unelte per widget: descarcă / distribuie imaginea.

   Vizibile mereu, nu la hover. Stăteau ascunse (`opacity: 0`) și apăreau doar
   când treceai mouse-ul peste widget — adică nu le găsea nimeni care nu le
   căuta deja, iar pe telefon, unde hover nu există, rămâneau la 55% dintr-o
   culoare oricum ștearsă. O funcție pe care n-o vede nimeni e ca și cum n-ar
   fi. */
.widget__tools {
	display: flex;
	gap: 6px;
	flex: none;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 9px;
	color: var(--muted);
	transition: background-color .2s var(--ease), color .2s var(--ease);
}

.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: .5; cursor: progress; }

/* Butoanele din antetul widget-ului arată a butoane: contur, fundal, aceeași
   greutate vizuală ca pastilele din antetul paginii. Fără ele, două pictograme
   gri deschis peste fundalul cardului se citeau ca decor. Ținta e de 34px, ca
   să se nimerească și cu degetul. */
.widget__tools .icon-btn {
	width: 34px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text);
	transition: background-color .18s var(--ease), border-color .18s var(--ease),
		color .18s var(--ease), transform .18s var(--ease);
}

.widget__tools .icon-btn svg { width: 18px; height: 18px; }

.widget__tools .icon-btn:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
	color: var(--accent);
}

.widget__tools .icon-btn:active { transform: translateY(1px); }

.widget__tools .icon-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.snapshot-note {
	margin: 8px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--muted);
	text-align: right;
}

.widget__body { flex: 1; min-height: 0; min-width: 0; }

/* Rezumatul de deasupra graficului solar */
.solar-note {
	margin: 0 0 10px;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--muted);
}

.solar-note b {
	color: var(--text);
	font-weight: 700;
}

.solar-note small {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.6;
	opacity: .85;
}

/* Marcaj pentru cifrele deduse dintr-un model, nu masurate. */
.estimate-tag {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-sold);
	background: color-mix(in srgb, var(--c-sold) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--c-sold) 35%, transparent);
	vertical-align: 1px;
}

.widget__skeleton {
	height: var(--wh, 240px);
	border-radius: var(--radius-sm);
	background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
	background-size: 220% 100%;
	animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer { to { background-position: -220% 0; } }

.chart-holder { position: relative; height: var(--wh, 320px); min-width: 0; }

/* Prețul intervalului în curs, deasupra graficului pe sferturi de oră. */
.price-now {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-bottom: 10px;
}

.price-now__label {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	flex: 1 1 100%;
}

.price-now__value {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.price-now__unit { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* ── Straturile animate de peste donut și radar ────────────────────────────

   Sunt CSS pur, deasupra pânzei, nu redesenări ale graficului: o buclă pe canvas
   ar însemna redesenarea întregii pânze la 60 de cadre pe secundă cât stă pagina
   deschisă. Aici se mișcă doar un strat compus de placa video, iar Chart.js nu
   se atinge.

   Poziția și raza vin din `--geom-*`, pe care le scrie chiar Chart.js după
   fiecare desenare (vezi `geometrie()` din chartjs.js). Cercul NU e în mijlocul
   carcasei — legenda îi mănâncă o parte din lățime și se mută când o muți din
   admin — deci nu poate fi ghicit din CSS. */
.geom-donut::after,
.geom-radar::after {
	content: '';
	position: absolute;
	left: var(--geom-x, 50%);
	top: var(--geom-y, 50%);
	width: calc(var(--geom-r, 0px) * 2);
	height: calc(var(--geom-r, 0px) * 2);
	margin: calc(var(--geom-r, 0px) * -1) 0 0 calc(var(--geom-r, 0px) * -1);
	border-radius: 50%;
	pointer-events: none;
}

/* Donut: o sclipire care ocolește inelul. Decupată exact între raza interioară
   și cea exterioară, ca să nu treacă peste totalul scris în gol. */
[data-anim="on"] .geom-donut::after {
	background: conic-gradient(from 0deg,
		transparent 0 58%,
		rgba(255, 255, 255, .34) 74%,
		transparent 86%);
	-webkit-mask: radial-gradient(circle,
		transparent 0 calc(var(--geom-inner, 0px) + 1px),
		#000 calc(var(--geom-inner, 0px) + 2px) var(--geom-r, 0px),
		transparent calc(var(--geom-r, 0px) + 1px));
	mask: radial-gradient(circle,
		transparent 0 calc(var(--geom-inner, 0px) + 1px),
		#000 calc(var(--geom-inner, 0px) + 2px) var(--geom-r, 0px),
		transparent calc(var(--geom-r, 0px) + 1px));
	animation: chart-sweep 7s linear infinite;
}

/* Radar: măturarea unui radar adevărat. Aici imaginea chiar are un înțeles —
   e singurul grafic de pe site care seamănă cu un ecran de radar, așa că
   animația spune ce e, nu doar că se mișcă. */
[data-anim="on"] .geom-radar::after {
	background: conic-gradient(from 0deg,
		color-mix(in srgb, var(--accent) 55%, transparent) 0deg,
		transparent 62deg);
	/* Slabă cât să treacă peste valori fără să le ascundă: pânza de păianjen și
	   punctele trebuie să rămână citibile și în momentul în care mătura e peste
	   ele. */
	opacity: .34;
	animation: chart-sweep 4.5s linear infinite;
}

@keyframes chart-sweep { to { transform: rotate(1turn); } }

/* Pânza pe care se desenează lumina de pe linii și de pe bare. Stă exact peste
   pânza graficului, nu primește evenimente, deci hover-ul trece prin ea. */
.chart-glow {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	pointer-events: none;
}

/* Tooltipul. Element de pagină, nu desen pe pânză — deci nimic din ce se
   desenează pe grafic nu-l poate acoperi, oricâte straturi am mai adăuga.
   `z-index` mare și explicit, ca să treacă și peste widget-urile vecine când
   punctul e lângă marginea carcasei. */
.chart-tip {
	position: absolute;
	z-index: 9999;
	min-width: 120px;
	max-width: 280px;
	padding: 9px 11px;
	border: 1px solid var(--line-strong, var(--line));
	border-radius: var(--radius-sm, 10px);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.45;
	color: var(--text);
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
}

.chart-tip.is-on { opacity: 1; transform: translateY(0); }

/* Aceeași bulă, dar pentru indicatorii din interfață — antet, butoane, orice are
   `data-tip`. Singura diferență e ancorarea: `fixed`, față de fereastră, ca să
   nu poată fi tăiată de un părinte cu `overflow: hidden` și ca să nu ceară
   fiecărei gazde să fie poziționată. */
.ui-tip {
	position: fixed;
	max-width: 300px;
	/* `pre-line`: un `\n` din `data-tip` e un rând nou. Restul textelor curg ca înainte. */
	white-space: pre-line;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.5;
}

.chart-tip__title {
	margin-bottom: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--muted);
}

.chart-tip__row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }

.chart-tip__dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--muted);
}

.chart-tip__note {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--line);
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--muted);
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	.chart-tip { transition: none; }
}

@keyframes plot-sweep {
	0%        { background-position: -120% 0; }
	45%, 100% { background-position: 220% 0; }
}

body[data-motion="off"] .geom-donut::after,
body[data-motion="off"] .geom-radar::after { animation: none; opacity: 0; }

/* Lumina de pe linii și bare se oprește din JS (vezi `reducereMiscare()` în
   charts.js), nu de aici: e desenată pe pânză, iar o pânză n-are animație CSS
   pe care s-o poți stinge cu o regulă. */
body[data-motion="off"] .chart-glow { display: none; }

/* ── Același puls, pentru widget-urile care nu folosesc Chart.js ──────────────

   Ritmul e ținut deliberat identic cu al graficelor — douăsprezece secunde,
   creștere într-o secundă, apoi liniște. Widget-urile stau unul lângă altul pe
   aceeași pagină; dacă fiecare ar avea cadența lui, tabloul ar clipi permanent
   undeva, iar ochiul n-ar mai avea unde să se odihnească. */

/* Barele de proporție cresc din nou, exact ca barele din grafice. `scaleX`, nu
   `width`: lățimea e scrisă inline de JS la fiecare poll, iar o animație pe ea
   s-ar bate cap în cap cu datele. Transformarea stă deasupra și nu atinge
   layout-ul. */
@keyframes bar-grow {
	0%       { transform: scaleX(0); }
	8%, 100% { transform: scaleX(1); }
}

[data-anim="on"] .source-card__meter i,
[data-anim="on"] .dominant__bar i {
	transform-origin: left center;
	animation: bar-grow 12s var(--ease-out) infinite;
}

/* Suprafețele — tabel, heatmap, calendar, boxplot, bilanț, topuri și cele trei
   grile de carduri — primesc aceeași dâră de lumină ca graficele cu axe.
   Refolosește `plot-sweep`, deci nu costă un keyframe nou. */
.heatmap,
.calendar,
.boxplot,
.balance,
.top-grid,
.stats,
.source-grid,
.country-grid,
.data-table-wrap {
	position: relative;
}

[data-anim="on"] .heatmap::after,
[data-anim="on"] .calendar::after,
[data-anim="on"] .boxplot::after,
[data-anim="on"] .balance::after,
[data-anim="on"] .top-grid::after,
[data-anim="on"] .stats::after,
[data-anim="on"] .source-grid::after,
[data-anim="on"] .country-grid::after,
[data-anim="on"] .data-table-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 42%,
		color-mix(in srgb, var(--text) 10%, transparent) 50%,
		transparent 58%);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation: plot-sweep 9s linear infinite;
}

body[data-motion="off"] .source-card__meter i,
body[data-motion="off"] .dominant__bar i { animation: none; transform: none; }

body[data-motion="off"] .heatmap::after,
body[data-motion="off"] .calendar::after,
body[data-motion="off"] .boxplot::after,
body[data-motion="off"] .balance::after,
body[data-motion="off"] .top-grid::after,
body[data-motion="off"] .stats::after,
body[data-motion="off"] .source-grid::after,
body[data-motion="off"] .country-grid::after,
body[data-motion="off"] .data-table-wrap::after { animation: none; opacity: 0; }

/* Indicatorul unic face exceptie: la el, lumina trece pe CARCASA.
   `.stats` incepe sub antet, deci dara matura doar partea de jos a cutiei si se
   oprea intr-o muchie orizontala invizibila, exact sub titlu — se vedea ca o
   pata de lumina in mijlocul cardului, nu ca o trecere peste el. La un GRUP de
   indicatori nu e nimic de mutat: acolo carcasa n-are rama, iar grila chiar e
   toata cutia vizibila.
   Regulile stau aici, langa cele pe care le anuleaza, nu langa restul stilurilor
   de `.widget--stat`: au aceeasi specificitate, deci decide ordinea din fisier. */
.widget--stat .stats::after { display: none; }

[data-anim="on"].widget--stat::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 42%,
		color-mix(in srgb, var(--text) 10%, transparent) 50%,
		transparent 58%);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation: plot-sweep 9s linear infinite;
}

body[data-motion="off"] .widget--stat::after { animation: none; opacity: 0; }

.widget__error {
	display: grid;
	place-items: center;
	height: var(--wh, 200px);
	padding: 16px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--muted);
	font-size: 13px;
	text-align: center;
}

/* ── 6. Widget-uri ───────────────────────────────────────────────────────── */

/* Grup de indicatori */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--gap);

	/* Inaltimea ceruta din panou ajunge la widget ca `--wh`, dar pana acum o
	   citeau doar tipurile cu container fix: `.chart-holder`, `.gauge`, tabelul.
	   Cardurile astea se dimensionau dupa continut, deci setarea parea ignorata —
	   un indicator pus langa un grafic, amandoua pe 380px, iesea vizibil mai scund.

	   `min-height`, nu `height`: daca titlul se rupe pe doua randuri sau cifra
	   creste, cardul are voie sa treaca peste. Si pe grila, nu pe card: aici se
	   intinde randul, iar elementele se lungesc singure, ca sa nu ajunga fiecare
	   card dintr-un grup de trei inalt cat tot widget-ul. */
	min-height: var(--wh, auto);
}

.stat-card {
	position: relative;
	overflow: hidden;

	/* Coloana, ca linia de jos sa poata creste.
	   Cand cardul primeste o inaltime din panou (vezi `--wh` la `.stats`), spatiul
	   in plus se duce in sparkline, nu intr-o zona goala sub cifre: un card de
	   380px cu continutul strans sus arata rupt, iar centrat arata pustiu. Asa
	   ajunge sa semene cu graficul de langa el, care exact asta face — creste
	   linia pe toata inaltimea data.
	   Cand inaltimea vine din continut, `flex: 1` n-are ce distribui si nimic nu
	   se schimba fata de inainte. */
	display: flex;
	flex-direction: column;

	padding: clamp(18px, 2vw, 26px);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}

.stat-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--tone, var(--accent)), transparent);
	opacity: .85;
}

.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.stat-card__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.stat-card__value {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 4.4vw, 44px);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
	color: var(--tone, var(--text));
	line-height: 1;
}

.stat-card__value small {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0;
}

.stat-card__sub { margin-top: 9px; font-size: 12.5px; color: var(--muted); }

/* Inaltimea minima e cat era inainte fixa; peste ea, linia creste cat ii da
   cardul. `min-height: 0` e obligatoriu pe un copil de flex care trebuie sa se
   poata si micsora — fara el, continutul intrinsec al SVG-ului ar pune o podea
   si linia n-ar mai cobori sub 34px pe ecrane mici. */
.stat-card__spark {
	margin-top: 12px;
	flex: 1;
	min-height: 34px;
}

/* SVG-ul e desenat cu `preserveAspectRatio="none"`, deci se intinde pe toata
   inaltimea primita fara sa deformeze citirea: pe o sparkline conteaza forma
   relativa, nu proportia reala. */
.stat-card__spark svg { height: 100%; display: block; }

.trend {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	background: var(--surface-2);
	color: var(--muted);
	vertical-align: middle;
}

.trend.is-up   { color: var(--c-prod); background: color-mix(in srgb, var(--c-prod) 12%, transparent); }
.trend.is-down { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 12%, transparent); }

/* Banda de flux */
.flow-rail {
	--rail-tone: var(--c-export);
	--rail-tile: 48px;

	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 2.4vw, 30px);
	padding: clamp(18px, 2.2vw, 26px) clamp(10px, 2.4vw, 30px);
	border-radius: var(--radius);
	border: 1px solid color-mix(in srgb, var(--rail-tone) 22%, var(--line));
	background:
		radial-gradient(120% 180% at 50% -20%, color-mix(in srgb, var(--rail-tone) 13%, transparent), transparent 68%),
		var(--surface);
	box-shadow: var(--shadow);
}

.flow-rail.is-import { --rail-tone: var(--c-import); }
.flow-rail.is-zero   { --rail-tone: var(--muted); }

/* Capetele traseului */
.flow-rail__node {
	display: grid;
	gap: 3px;
	justify-items: center;
	padding: 11px clamp(12px, 1.6vw, 20px);
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
	transition: border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

.flow-rail__node-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(14px, 1.5vw, 17px);
	color: var(--text);
	white-space: nowrap;
}

.flow-rail__node-sub {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
}

/* Capătul care primește energie pulsează în culoarea fluxului. */
.flow-rail.is-export .flow-rail__node--eu,
.flow-rail.is-import .flow-rail__node--ro {
	border-color: color-mix(in srgb, var(--rail-tone) 50%, transparent);
	animation: rail-node 2.6s ease-in-out infinite;
}

@keyframes rail-node {
	0%, 100% { box-shadow: 0 0 18px -10px var(--rail-tone); }
	50%      { box-shadow: 0 0 30px -6px var(--rail-tone); }
}

/* Traseul */
.flow-rail__track {
	position: relative;
	height: clamp(34px, 4vw, 46px);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--rail-tone) 28%, var(--line));
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--rail-tone) 9%, transparent), transparent),
		var(--surface-2);
	box-shadow: inset 0 0 26px -10px var(--rail-tone);
}

.flow-rail__fill {
	position: absolute;
	inset: 0;
	background-repeat: repeat-x;
	background-position: 0 center;
	background-size: var(--rail-tile) var(--rail-tile);
	background-image: var(--arrows-export);
	animation: flow-right var(--flow-speed, .9s) linear infinite;
}

.flow-rail.is-import .flow-rail__fill {
	background-image: var(--arrows-import);
	animation-name: flow-left;
}

/* Unda care mătură traseul în sensul curgerii — partea „vie” a animației. */
.flow-rail__sweep {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 34%;
	pointer-events: none;
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--rail-tone) 34%, transparent),
		transparent);
	animation: rail-sweep 2.8s cubic-bezier(.45, 0, .25, 1) infinite;
}

.flow-rail.is-import .flow-rail__sweep { animation-name: rail-sweep-back; }

@keyframes rail-sweep {
	0%        { transform: translateX(-110%); opacity: 0; }
	18%, 78%  { opacity: 1; }
	100%      { transform: translateX(400%); opacity: 0; }
}

@keyframes rail-sweep-back {
	0%        { transform: translateX(400%); opacity: 0; }
	18%, 78%  { opacity: 1; }
	100%      { transform: translateX(-110%); opacity: 0; }
}

/* Cifra de sub traseu */
.flow-rail__readout {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(8px, 1vw, 12px);
}

.flow-rail__dir {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rail-tone);
}

.flow-rail__mw {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--muted);
}

.flow-rail__mw b {
	font-family: var(--font-display);
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* Sistem echilibrat: traseul rămâne, dar se liniștește. */
.flow-rail.is-zero .flow-rail__fill { opacity: .28; animation-play-state: paused; }
.flow-rail.is-zero .flow-rail__sweep { display: none; }

:root {
	--arrows-export: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M19 17 L28 24 L19 31' fill='none' stroke='%2316a97a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--arrows-import: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M29 17 L20 24 L29 31' fill='none' stroke='%23d98b12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
	--arrows-export: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M19 17 L28 24 L19 31' fill='none' stroke='%233ecf8e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--arrows-import: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M29 17 L20 24 L29 31' fill='none' stroke='%23ffb020' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes flow-right { to { background-position: var(--rail-tile) center; } }
@keyframes flow-left  { to { background-position: calc(var(--rail-tile) * -1) center; } }

/* Animațiile oprite din setări sau din sistem: banda rămâne lizibilă, dar statică. */
body[data-motion="off"] .flow-rail__fill,
body[data-motion="off"] .flow-rail__sweep,
body[data-motion="off"] .flow-rail__node {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.flow-rail__fill,
	.flow-rail__sweep,
	.flow-rail__node { animation: none; }
	.flow-rail__sweep { display: none; }
}

/* Bara de proportii */
.mix-bar {
	position: relative;
	display: flex;
	/* 30 de pixeli sunt ai legendei de dedesubt. */
	height: max(20px, calc(var(--wh, 66px) - 30px));
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-2);
}

/* O sclipire care traversează bara la câteva secunde, ca lumina peste o suprafață
   lucioasă. E `::after`, nu un element: JS-ul rescrie `innerHTML`-ul barei la
   fiecare poll, iar un pseudo-element nu e copil, deci supraviețuiește.

   Alb la 28%, fiindcă trebuie să meargă peste opt culori diferite și în ambele
   teme; orice nuanță ar fi mers bine peste unele segmente și prost peste altele.
   Pauza dintre treceri e ținută în chiar keyframe-uri (55% → 100% stă pe loc):
   o sclipire care se repetă fără răgaz nu mai e sclipire, e o bandă rulantă. */
[data-anim="on"] .mix-bar::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
		transparent 38%,
		rgba(255, 255, 255, .28) 50%,
		transparent 62%);
	transform: translateX(-100%);
	/* `linear`, nu `ease-out`: cu ușurare, sclipirea traversa trei sferturi din
	   bară în prima șesime de timp și apoi rămânea agățată la capăt — arăta a
	   element blocat, nu a lumină care trece. Pauza dintre treceri stă în
	   keyframe-uri, unde se vede cât e. */
	animation: mix-sheen 6s linear infinite;
}

@keyframes mix-sheen {
	0%        { transform: translateX(-100%); }
	40%, 100% { transform: translateX(100%); }
}

body[data-motion="off"] .mix-bar::after { animation: none; opacity: 0; }

.mix-bar__seg {
	position: relative;
	height: 100%;
	min-width: 0;
	transition: width .7s var(--ease-out), filter .2s var(--ease);
}

.mix-bar__seg:hover { filter: brightness(1.12); }

.mix-bar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--muted);
}

.mix-bar__legend span { display: inline-flex; align-items: center; gap: 6px; }

.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Carduri pe surse */
.source-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: 12px;
}

.source-card {
	padding: 15px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
	transition: transform .3s var(--ease-out), border-color .3s var(--ease);
}

.source-card:hover { transform: translateY(-2px); border-color: var(--tone, var(--line-strong)); }

.source-card__name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }

.source-card__mw {
	margin-top: 9px;
	font-family: var(--font-mono);
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.source-card__mw small { font-size: 11.5px; font-weight: 400; color: var(--muted); }

.source-card__pct { margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

.source-card__meter {
	margin-top: 8px;
	height: 4px;
	border-radius: 99px;
	background: var(--surface-3);
	overflow: hidden;
}

.source-card__meter i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--tone, var(--accent));
	transition: width .8s var(--ease-out);
}

/* Carduri pe tari */
/* Fara --cols, numarul de coloane se aseaza singur dupa latime.
   Cu --cols explicit (Board-ul il pune din configul widget-ului), pragul de
   250px per coloana nu mai are voie sa fie rigid: N coloane ar cere
   N x 250px + spatii, adica mai mult decat corpul widget-ului pe tablete, iar
   depasirea urca pana la <html> si scroll-eaza toata pagina pe orizontala.
   De aceea pragul se taie la partea care chiar incape: latimea containerului
   minus spatii, impartita la numarul de coloane. Fara --cols, `var(--cols, 1)`
   da 1, deci expresia se reduce la `min(250px, 100%)` — comportamentul
   auto-fit de dinainte ramane neatins. */
.country-grid {
	--country-grid-gap: 12px;
	display: grid;
	grid-template-columns: repeat(
		var(--cols, auto-fit),
		minmax(
			min(
				250px,
				(100% - (var(--cols, 1) - 1) * var(--country-grid-gap)) / var(--cols, 1)
			),
			1fr
		)
	);
	gap: var(--country-grid-gap);
}

/* Pe îngust, carduri pe toată lățimea.

   `@container`, nu `@media`: pragul se uită la lățimea CARDULUI, nu a ferestrei.
   Un widget pe jumătate de rând, pe desktop, are aceeași strâmtoare ca un
   telefon — iar imaginea de distribuit se desenează pe o scenă îngustă într-o
   fereastră lată, unde un `@media` n-ar fi pornit niciodată. */
@container (max-width: 600px) {
	.country-grid { grid-template-columns: 1fr; }
}

.country-card {
	padding: 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
	/* Fara asta, latimea minima automata a cardului (min-content) il face mai
	   lat decat coloana lui cand coloanele sunt stramte. */
	min-width: 0;
}

/* Numele si pastila stau pe acelasi rand cat incap. Pastila are
   `white-space: nowrap`, deci pe coloane stramte randul trebuie sa se poata
   rupe; altfel iese din card si impinge pagina pe orizontala. */
.country-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

.country-card__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; }

.pill {
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	white-space: nowrap;
}

.pill.is-export { color: var(--c-export); background: color-mix(in srgb, var(--c-export) 13%, transparent); }
.pill.is-import { color: var(--c-import); background: color-mix(in srgb, var(--c-import) 13%, transparent); }
.pill.is-zero   { color: var(--muted); background: var(--surface-3); }

.point-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
}

.point-row:first-of-type { border-top: 0; }
.point-row__name { color: var(--muted); }

.point-row__val {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.point-row__val.is-export { color: var(--c-export); }
.point-row__val.is-import { color: var(--c-import); }
.point-row__val.is-zero   { color: var(--muted); }

/* Gauge */
.gauge { display: grid; place-items: center; height: var(--wh, 300px); }
.gauge svg { width: min(100%, 260px); height: auto; overflow: visible; }
.gauge__arc { transition: stroke-dashoffset 1.1s var(--ease-out); }

/* Sclipirea de pe arc. Alb, ca și cea de pe bara de proporții: arcul e un
   degrade între două culori de serie, deci orice altă nuanță ar fi arătat bine
   la un capăt și murdar la celălalt. Capătul `--gauge-spark-to` îl pune JS-ul,
   fiindcă depinde de cât e umplut arcul chiar acum. */
[data-anim="on"] .gauge__spark {
	opacity: 0;
	mix-blend-mode: overlay;
	animation: gauge-spark 3.6s linear infinite;
}

/* Urcă uniform pe arc până la 55%, se stinge, apoi stă. Deplasarea și stingerea
   sunt ținute separat, ca sclipirea să nu dispară în mijlocul drumului. */
@keyframes gauge-spark {
	0%        { stroke-dashoffset: 0; opacity: 0; }
	10%       { opacity: .8; }
	55%       { stroke-dashoffset: var(--gauge-spark-to, -100); opacity: .8; }
	68%, 100% { stroke-dashoffset: var(--gauge-spark-to, -100); opacity: 0; }
}

body[data-motion="off"] .gauge__spark { animation: none; }
.gauge__value { font-family: var(--font-display); font-weight: 800; font-size: 30px; fill: var(--text); }
.gauge__label { font-family: var(--font-body); font-size: 10px; fill: var(--muted); }
.gauge__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.gauge__legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Heatmap */
/* Înălțimea din panou se împarte la rânduri: tabelul umple cutia, iar cele 32 de
   pixeli sunt ai scării de dedesubt. Zilele care nu încap se derulează înăuntru,
   cu orele lipite sus, în loc să împingă pagina cu sute de pixeli. */
.heatmap { overflow: auto; height: calc(var(--wh, 320px) - 32px); }
.heatmap table { width: 100%; height: 100%; border-collapse: separate; border-spacing: 2px; font-family: var(--font-mono); font-size: 10.5px; }
.heatmap th { font-weight: 500; color: var(--muted); padding: 1px 5px; white-space: nowrap; }
.heatmap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.heatmap thead th:first-child { left: 0; z-index: 2; }
.heatmap th[scope="row"] { width: 1%; text-align: right; position: sticky; left: 0; background: var(--surface); }
.heatmap td { width: 26px; height: 14px; border-radius: 4px; background: var(--surface-3); transition: transform .18s var(--ease); }
.heatmap td[data-v]:hover { transform: scale(1.22); position: relative; z-index: 2; outline: 2px solid var(--text); }
.heatmap__scale { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.heatmap__scale i { display: block; height: 8px; width: 120px; border-radius: 99px; }

/* Tabel */
.data-table-wrap { overflow-x: auto; max-height: var(--wh, 360px); overflow-y: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); padding: 9px 12px; text-align: right; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table thead th:first-child, .data-table td:first-child { text-align: left; }
.data-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:hover td { background: var(--surface-2); }


section h1, section h2, section h3, section p{padding: 0px 5px;}

/* ── Titlu de secțiune ────────────────────────────────────────────────────
   Fără chenar, fără fundal, fără unelte: e un titlu, nu un card. Lăsat cu
   carcasa obișnuită, arăta ca un widget gol care nu s-a încărcat. */
.widget--section-head {
	min-height: 0;
	padding: 18px 0 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.widget--section-head .widget__head { padding: 0; border: 0; }
.widget--section-head .widget__tools { display: none; }
.widget--section-head .widget__body { display: none; }
.widget--section-head .widget__title { font-size: clamp(19px, 2.4vw, 25px); }
.widget--section-head .widget__sub { margin-top: 4px; }

/* Linia de deasupra desparte capitolul de ce a fost înainte. Nu la primul din
   pagină: acolo n-are de ce despărți nimic. */
.widget--section-head:not(:first-child) {
	margin-top: 10px;
	border-top: 1px solid var(--line);
	padding-top: 26px;
}

/* ── Estimarea producției regenerabile ────────────────────────────────────
   Barele cresc de jos, deci grila le aliniază la bază. Fiecare zi e o coloană
   cu cifra deasupra, bara la mijloc și numele zilei dedesubt; bara însăși e un
   flex pe verticală, cu segmentele stivuite. */
/* `--wh` pe `.fcast`, nu pe corpul widget-ului: așa merge oriunde e pus, și în
   previzualizarea din panou. Podea, nu plafon: dacă textul de sub grafic cere
   mai mult, pe ecran îngust, cardul crește în loc să se reverse peste vecinul
   de jos. Graficul ia tot ce rămâne, prin `flex: 1`. */
.fcast { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: var(--wh, 0px); }

.fcast__grafic {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: end;
	gap: 6px;
	flex: 1;
	min-height: 90px;
}

.fcast__zi {
	cursor: help;
	display: grid;
	/* Rândul barei ia tot ce rămâne; cifra și eticheta cât le trebuie. Fără
	   `minmax(0, 1fr)`, o bară înaltă ar împinge eticheta afară din card. */
	grid-template-rows: auto minmax(0, 1fr) auto;
	align-items: end;
	justify-items: center;
	gap: 5px;
	height: 100%;
	min-width: 0;
}

/* Rândurile se dau EXPLICIT, nu prin ordinea din DOM. Altfel, ascunderea cifrei
   pe ecran îngust scotea un element din grilă, iar bara urca în rândul întâi —
   cel dimensionat `auto` — și se strângea la cei trei pixeli ai lui
   `min-height`. Cu rândul scris pe fiecare, rândul gol rămâne gol. */
.fcast__total {
	grid-row: 1;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
}

.fcast__bara {
	grid-row: 2;
	display: flex;
	flex-direction: column-reverse;
	align-self: end;
	width: 100%;
	max-width: 46px;
	min-height: 3px;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
}

.fcast__bara i { display: block; width: 100%; }

.fcast__eticheta { grid-row: 3; font-size: 11.5px; color: var(--muted); }

/* Pe îngust, cifra de deasupra fiecărei bare nu mai încape: opt coloane într-un
   card de 320px lasă sub treizeci de pixeli fiecăreia, iar „1.690" cere 33.
   Dispare ea, nu bara — proporțiile rămân vizibile, cifrele de azi sunt scrise
   oricum întregi în legenda de dedesubt, iar restul se citesc la atingere. */
@container (max-width: 420px) {
	.fcast__total { display: none; }
	.fcast__grafic { gap: 4px; min-height: 130px; }
}

/* Ziua de azi iese în evidență, fiindcă e singura pentru care mai există și o
   măsurătoare pe pagină — restul sunt doar estimări. */
.fcast__zi.is-azi .fcast__eticheta { color: var(--text); font-weight: 700; }
.fcast__zi.is-azi .fcast__total { color: var(--text); }

/* Coloana e ținta casetei, deci trebuie să se vadă că răspunde. */
.fcast__zi:hover .fcast__bara,
.fcast__zi:focus-visible .fcast__bara { filter: brightness(1.18); }
.fcast__zi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.split__bara i { cursor: help; }
.split__bara i:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.fcast__azi,
.split__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 12.5px;
	color: var(--muted);
}

.fcast__azi span,
.split__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fcast__azi b { color: var(--text); font-family: var(--font-mono); }

/* Pe o singură sursă, cifra de azi e tot ce are cardul de spus, deci se scrie
   mare, nu strânsă într-o legendă de 12px alături de alte două. */
.fcast__mare {
	align-items: baseline;
	font-size: 14px;
	color: var(--muted);
}

.fcast__mare b {
	font-family: var(--font-mono);
	font-size: 26px;
	font-weight: 700;
	color: var(--text);
	line-height: 1;
}

.fcast__mare em { font-style: normal; opacity: .8; }

.fcast__nota,
.split__nota {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}

/* ── Estimarea repartiției consumului ─────────────────────────────────── */
.split { display: flex; flex-direction: column; gap: 14px; }

.split__bara {
	display: flex;
	height: 34px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--surface-2);
}

.split__bara i { display: block; height: 100%; }

.split__legenda { gap: 10px 24px; }
.split__legenda b { color: var(--text); font-family: var(--font-mono); }
.split__legenda em { font-style: normal; opacity: .75; }

/* Bilant energetic */
.balance {
	padding: 18px 20px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	border: 1px solid var(--line);
	font-size: 14.5px;
	line-height: 1.6;
}

.balance strong { font-weight: 700; }
.balance .is-export { color: var(--c-export); }
.balance .is-import { color: var(--c-import); }

.balance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.balance__cell { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.balance__cell dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.balance__cell dd { margin-top: 5px; font-family: var(--font-mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Notă discretă sub un grafic */
.chart-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
}

/* Calendar anual, in stil „contributii GitHub” */
/* Celulele cresc cu widget-ul: pe lățime umplu coloana, pe înălțime împart ce
   rămâne din `--wh`. Cei 13 px sunt acum minimul, nu mărimea. */
.calendar { display: flex; flex-direction: column; min-height: var(--wh, 0px); overflow-x: auto; padding-bottom: 4px; }

/* `--cal-lat`: pe un interval scurt, două coloane n-au de ce să umple tot cardul. */
.calendar__months {
	display: grid;
	grid-auto-flow: column;
	max-width: var(--cal-lat, none);
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--muted);
	margin-bottom: 4px;
	min-width: max-content;
}

.calendar__grid {
	display: grid;
	flex: 1 1 auto;
	max-width: var(--cal-lat, none);
	grid-template-rows: repeat(7, minmax(13px, 1fr));
	grid-auto-flow: column;
	gap: 3px;
	min-width: max-content;
}

.calendar__grid i {
	display: block;
	min-width: 13px;
	min-height: 13px;
	border-radius: 3px;
	transition: transform .15s var(--ease);
}

.calendar__grid i:hover { transform: scale(1.35); outline: 1.5px solid var(--text); }

.calendar__dow {
	grid-column: 1;
	align-self: center;
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--muted);
	padding-right: 6px;
	line-height: 13px;
}

.calendar__scale {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
}

.calendar__scale i { display: block; height: 8px; width: 120px; border-radius: 99px; flex: none; }

/* Boxplot */
.boxplot svg { overflow: visible; }
.boxplot__tick { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); }
.boxplot__box { transition: opacity .15s var(--ease); }
.boxplot:hover .boxplot__box { opacity: .55; }
.boxplot .boxplot__box:hover { opacity: 1; }

/* Top valori istorice */
/* E listă, nu desen, deci înălțimea din panou e un plafon, ca la tabele: ce nu
   încape se derulează înăuntru. */
.top-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 14px;
	max-height: var(--wh, 400px);
	overflow-y: auto;
}

@media (max-width: 760px) {
	/* Pe telefon cardurile stau unul sub altul, iar o derulare în derulare prinde degetul. */
	.top-grid { max-height: none; }
}

.top-card {
	padding: 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
}

.top-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 10px;
}

.top-list { list-style: none; display: flex; flex-direction: column; }

.top-list li {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 12px;
}

.top-list li:first-child { border-top: 0; }
.top-list li:first-child .top-list__value { color: var(--accent); font-weight: 700; }
.top-list__rank { color: var(--muted); text-align: right; }
.top-list__when { color: var(--muted); }
.top-list__value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Surse dominante */
.dominant { display: flex; flex-direction: column; gap: 8px; }

.dominant__row {
	display: grid;
	grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 2fr) 56px auto auto;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
}

.dominant__name { display: flex; align-items: center; gap: 8px; }

.dominant__bar {
	height: 9px;
	border-radius: 99px;
	background: var(--surface-3);
	overflow: hidden;
}

.dominant__bar i { display: block; height: 100%; border-radius: 99px; transition: width .8s var(--ease-out); }

.dominant__pct { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.dominant__hours,
.dominant__over { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

@container (max-width: 620px) {
	.dominant__row { grid-template-columns: 1fr auto; }
	.dominant__bar { grid-column: 1 / -1; }
	.dominant__hours, .dominant__over { grid-column: span 1; }
}

/* Schimburi pe țări, bare orizontale.

   Pe lat: nume, bară, energie, apoi detaliul mărunt — patru coloane, un rând pe
   țară. Sub 560px containerul nu mai are lățime pentru patru coloane fără ca
   numele să se rupă în două rânduri și bara să scadă sub un deget, așa că rândul
   se desface pe două niveluri: nume și cifră sus, bara pe toată lățimea dedesubt,
   detaliul sub ea. E o interogare de CONTAINER, nu de ecran: același widget pus
   pe jumătate de rând, pe desktop, are aceeași strâmtoare ca un telefon. */
.trade { display: flex; flex-direction: column; gap: 10px; }

.trade__row {
	display: grid;
	grid-template-columns: minmax(110px, 1fr) minmax(90px, 2.4fr) auto auto;
	align-items: center;
	gap: 6px 12px;
	font-size: 12.5px;
}

.trade__name {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.trade__name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.trade__bar {
	height: 10px;
	border-radius: 99px;
	background: var(--surface-3);
	overflow: hidden;
}

.trade__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	transition: width .8s var(--ease-out);
}

.trade__val {
	font-family: var(--font-mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.trade__mw {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
}

@container (max-width: 560px) {
	.trade { gap: 14px; }
	.trade__row { grid-template-columns: 1fr auto; }
	.trade__bar { grid-column: 1 / -1; }
	.trade__mw  { grid-column: 1 / -1; }
}

/* Butoane */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 10px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: transform .18s var(--ease), box-shadow .25s var(--ease), opacity .2s var(--ease);
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); box-shadow: none; }

/* Butonul mic. Statea doar in admin.css, dar portalul instalatorului cere
   `btn--sm` si incarca doar app.css — pana acum ii ieseau butoane cat toate
   zilele. */
.btn--sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 200px; }

/* ── 7. Controale arhiva ─────────────────────────────────────────────────── */

.range-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin-top: 26px;
	padding: 18px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; }

.field > label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.field input, .field select {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface-2);
	font-family: var(--font-mono);
	font-size: 13px;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field input:focus, .field select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.field input[readonly] { cursor: pointer; }

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.preset {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--muted);
	transition: all .2s var(--ease);
}

.preset:hover { color: var(--text); border-color: var(--line-strong); }

.preset[aria-pressed="true"] {
	color: var(--on-accent);
	background: var(--accent);
	border-color: var(--accent);
	font-weight: 600;
}

.range-summary { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ── Pagini de continut ──────────────────────────────────────────────────── */

.prose {
	max-width: 100%;
	padding-bottom: 40px;
	color: var(--text-2);
	font-size: 15.5px;
	line-height: 1.75;
}

.prose__block { margin-bottom: clamp(32px, 5vw, 52px); }

/* ── Pagina pentru instalatori (/instalatori.html) ──────────────────────────

   Doua cutii alaturate care spun „ce vezi inainte" si „ce vezi dupa", plus
   patru pasi. Nimic din ele nu e interactiv, deci nu au stari; la telefon se
   pun una sub alta, fiindca pe 400px doua coloane de liste nu se citesc. */

.inst-doua {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 20px 0 14px;
}

.inst-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 18px 20px;
}

.inst-card h3 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
}

.inst-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.inst-lista li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 7px;
	font-size: 14.5px;
	line-height: 1.5;
}

.inst-lista li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.inst-nota { font-size: 14px; color: var(--muted); }

/* Cele două căi de contact, una lângă alta. Eticheta deasupra, nu înaintea
   adresei: la telefon, un „E-mail:” lipit de adresă se citește ca parte din ea. */
/* Butonul de sus și formularul de înscriere de pe /instalatori.html. */
.inst-sus { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; }
.inst-sus span { font-size: 13.5px; color: var(--muted); }
.inst-form { display: grid; gap: 16px; margin: 16px 0 20px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.inst-form__rand { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.inst-form__grup { margin: 0; padding: 0; border: 0; }
.inst-form__grup legend { margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.inst-form__judete { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.inst-form__bifa { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 14px; cursor: pointer; }
.inst-form__bifa input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.inst-form__acord { align-items: flex-start; font-size: 13.5px; color: var(--text-2, var(--muted)); }
.inst-form__capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inst-form .btn { justify-self: start; padding: 12px 22px; font-size: 15px; }

.inst-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.inst-contact li { display: grid; gap: 2px; }

.inst-contact strong {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	font-weight: 600;
}

.inst-contact a { font-size: 15.5px; font-weight: 600; }
.inst-contact small { font-size: 12px; color: var(--muted); }

.inst-pasi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 18px;
	counter-reset: inst;
}

.inst-pas {
	border-left: 3px solid var(--accent);
	padding: 2px 0 2px 16px;
	counter-increment: inst;
}

.inst-pas h3 {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
}

.inst-pas h3::before {
	content: counter(inst) ". ";
	color: var(--muted);
	font-family: var(--font-mono);
}

.inst-pas p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }

.prose h2 {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.01em;
}

.prose h3 {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
}

.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }

.prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.prose a:hover { text-decoration-thickness: 2px; }

/* UN LINK IMBRACAT IN BUTON E BUTON, NU LINK.

   `.prose a` are specificitatea (0,1,1) si bate `.btn` (0,1,0), deci un
   `<a class="btn">` pus intr-o pagina de continut primea `color: var(--accent)`
   — portocaliu pe fundal portocaliu. Butonul arata ca o pastila goala, iar
   textul lui era acolo, doar ca invizibil.

   Regula sta AICI, imediat sub cea care face stricaciunea, si nu langa `.btn`:
   la specificitate egala castiga cine e scris mai jos, iar `.prose a` e mai jos
   decat `.btn`. Cine muta blocul de butoane il ia si pe asta cu el si nu
   intelege de ce; asa, cele doua se citesc impreuna.

   `:where()` la variante ca sa nu urce specificitatea: raman tot (0,1,1),
   deci orice regula obisnuita de buton le poate rescrie mai departe. */
.prose a.btn {
	color: var(--on-accent);
	text-decoration: none;
}

.prose a.btn:where(.btn--ghost) { color: var(--text); }

/* Cate un bloc pentru fiecare sursa */
.source-block {
	margin: 0 0 18px;
	padding: 20px clamp(16px, 2.4vw, 24px);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.source-block:last-child { margin-bottom: 0; }

.source-block__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px !important;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--muted);
}

/* Nota de avertisment: ce nu trebuie citit ca masuratoare */
.source-block__note {
	margin: 14px 0 0 !important;
	padding: 12px 14px;
	border-left: 3px solid var(--c-sold);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: color-mix(in srgb, var(--c-sold) 7%, transparent);
	font-size: 14px;
	line-height: 1.65;
}

/* Eticheta care spune daca o cifra e masurata, calculata sau modelata */
.tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tag--live  { color: var(--c-prod); background: color-mix(in srgb, var(--c-prod) 14%, transparent); }
.tag--calc  { color: var(--c-cons); background: color-mix(in srgb, var(--c-cons) 14%, transparent); }
.tag--model { color: var(--c-sold); background: color-mix(in srgb, var(--c-sold) 14%, transparent); }

.formula {
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	border: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 2;
	color: var(--text);
	overflow-x: auto;
}

/* Overlay de incarcare */
.overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	place-items: center;
	background: color-mix(in srgb, var(--bg) 74%, transparent);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.overlay.is-visible { display: grid; }

.overlay__box { display: grid; justify-items: center; gap: 16px; }

.spinner {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 3px solid var(--line);
	border-top-color: var(--accent);
	animation: spin .75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.overlay__text { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* Flatpickr, adaptat la temele noastre */
.flatpickr-calendar {
	background: var(--surface) !important;
	border: 1px solid var(--line) !important;
	box-shadow: var(--shadow-lg) !important;
	border-radius: var(--radius) !important;
	font-family: var(--font-body) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months,
.flatpickr-weekday { color: var(--text) !important; fill: var(--text) !important; background: transparent !important; }

.flatpickr-weekday { color: var(--muted) !important; }
.flatpickr-day { color: var(--text-2) !important; border-radius: 8px !important; }
.flatpickr-day:hover { background: var(--surface-3) !important; border-color: transparent !important; }
.flatpickr-day.flatpickr-disabled { color: color-mix(in srgb, var(--muted) 50%, transparent) !important; }
.flatpickr-day.inRange { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; border-color: transparent !important; box-shadow: none !important; }

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--on-accent) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--muted) !important; }

/* ── 8. Responsive & print ───────────────────────────────────────────────── */

@container (max-width: 520px) {
	.source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Scena ascunsă pe care se redesenează un widget înainte de a intra în imaginea
   de distribuit (js/lib/stage.js).

   Pe acolo trec doar widget-urile cu desen adevărat — grafice, hartă, gauge —
   fiindcă restul se desenează din date, nu se fotografiază. Cardul e portret și
   îngust, deci plafoanele de lățime croite pentru un rând de tablou n-au ce
   căuta acolo: gauge-ul oprit la 260 px lăsa două treimi din cadru gol în jurul
   unui arc cât o farfurioară. */
[data-snapshot-stage] .gauge { height: auto; }
[data-snapshot-stage] .gauge svg { width: 100%; }

/* PE SCENA DE FOTOGRAFIAT, TEXTUL NU-SI ARE LOCUL.
 *
 * Scena exista doar ca sa produca DESENUL: widgetul se randeaza acolo pe forma
 * cardului, iar din el se copiaza SVG-ul sau panza. Fraza si cifrele le scrie
 * cardul singur, direct pe imagine, din `[data-snap-note]` si
 * `[data-snap-legend]` — vezi `js/lib/snapshot.js`. Lasate si pe scena, erau de
 * doua ori: o data desenate degeaba acolo, si o data pe card.
 *
 * SI COSTAU MULT. Scena e ingusta — vreo 440 px, cat un card de telefon. Pe
 * latimea aia fraza se rupe pe patru randuri, cele patru cifre trec pe doua
 * coloane, iar nota de dedesubt umple inca sase. Masurat pe debitul Dunarii:
 * din 463 px inaltime ramaneau vreo 110 pentru grafic, adica un raport de patru
 * la unu — iar cardul, care e portret, primea o dunga subtire pe la mijloc, cu
 * trei sute cincizeci de pixeli goi deasupra si trei sute dedesubt.
 *
 * Ascunse, desenul ia toata scena si intra in card pe masura lui.
 *
 * Notele de subsol pleaca si ele: sunt explicatii lungi, scrise pentru cineva
 * care sta pe pagina, nu pentru o poza. Cardul are propriul rand de sursa jos. */
[data-snapshot-stage] [data-snap-note],
[data-snapshot-stage] [data-snap-legend],
[data-snapshot-stage] .dun-nota,
[data-snapshot-stage] .pro-nota,
[data-snapshot-stage] .cong-nota {
	display: none !important;
}

/* Sub 1080px pastram doar doua trepte — jumatate sau plin (--span-md, calculat
   in PHP) — ca sa nu ramana coloane orfane cand un 7 si un 5 nu mai incap alaturi. */
@media (max-width: 1080px) {
	.widget { grid-column: span min(var(--span-md, 12), 12); }
}

@media (max-width: 760px) {
	.board { gap: 12px; }
	.widget { grid-column: 1 / -1; }

	/* Padding strâns pe telefon: cei 16 px ai desktopului mâncau 32 din 360, adică
	   aproape o zecime de ecran, de fiecare card. Pe un monitor lat sunt aer în
	   jurul conținutului; pe telefon sunt lățime luată tocmai de la conținut. */
	.widget { padding: 10px; }

	/* Dar NU și pe cele decorative, care n-au ramă deloc.
	   Rândul de deasupra e mai jos în fișier decât `padding: 0` de la
	   `.widget--flow-rail` și celelalte, și are aceeași specificitate — deci îl
	   rescria fără să vrea. Rezultatul: un padding de 10px pe o carcasă
	   transparentă, adică o carcasă care nu se vede dar înghesuie ce e în ea cu
	   20 de pixeli. Banda de flux ieșea mai îngustă decât orice alt card de pe
	   pagină, fără niciun câștig — două cutii concentrice, dintre care una
	   invizibilă. */
	.widget--flow-rail,
	.widget--share-card,
	.widget--stat-group,
	.widget--text { padding: 0; }
	.source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	/* Rămăsese de pe vremea antetului pe un singur rând: `order: 3` pe pastilă o
	   trimitea la coada rândului de stare, deci vremea apărea ÎNAINTEA orei —
	   invers decât se citește. Acum ordinea din HTML e cea bună și nu mai
	   trebuie forțată. */
	.brand__text small { display: none; }
	/* Pastila nu se mai intinde pe toata latimea: de cand imparte randul cu
	   comutatorul de limba, latimea plina l-ar fi impins pe rândul urmator. Vezi
	   `.site-head__status .live-chip` din blocul `@container head`. */
}

/* Banda de flux, pe îngust: capetele rămân alături, traseul trece dedesubt pe
   toată lățimea.

   `@container`, nu `@media` cum a fost: pragul e o chestiune de câți pixeli are
   BANDA, nu fereastra. Cele trei coloane — România, traseul cu cifra, vecinii —
   cer vreo șase sute de pixeli; sub atât, cifra din mijloc urca peste cutia din
   stânga. Se vedea în imaginea de distribuit, care se desenează pe o scenă de
   470 px într-o fereastră lată: acolo un `@media` nu se declanșa niciodată, iar
   banda ieșea cu „923 MW" scris peste „România". */
@container (max-width: 620px) {
	/* Coloanele iau cât le cere conținutul, nu jumătate fiecare.

	   JUMĂTĂȚILE EGALE IROSEAU EXACT CE LIPSEA. Cele două cutii nu cer la fel:
	   „BG · RS · HU · MD · UA" are nevoie de 145px de text; „4.004 MW produși"
	   se mulțumește cu vreo 106. Cu `1fr 1fr` amândouă primeau (lățime − 14) / 2
	   — pe un telefon de 375px vreo 154 — deci cea largă se rupea pe două rânduri
	   în timp ce vecina ei avea loc gol pe care nu i-l putea da.

	   `minmax(0, auto)`, nu `auto` simplu: partea de jos lasă coloana să coboare
	   sub conținut când chiar nu e loc. Cu `auto` simplu ar fi împins, și odată
	   cu ea toată pagina — derapaj orizontal pe pagina live, iar aurora
	   întinzându-se cât documentul, deci fundalul decalat. */
	.flow-rail {
		grid-template-columns: minmax(0, auto) minmax(0, auto);
		/* NIMIC CENTRAT: coloanele se întind și iau tot rândul.

		   Pistele `auto` nu rămân la mărimea conținutului când mai e loc — se
		   întind, fiecare proporțional cu cât a cerut. Exact ce trebuie aici:
		   cutiile ies cât de mari încap, nu cât de mici se poate, iar rândul nu
		   are capete goale.

		   SPAȚIUL SE PLĂTEȘTE DIN SUBTITLU, nu din margini. Prima dată strânsesem
		   marginile la 6 și cutiile la 10 ca să încapă textul pe un rând. Încăpea,
		   dar banda ieșea înghesuită — cutiile lipite de chenar, săgețile fără aer
		   în jur. Orizontala e singura strâmtă, deci de acolo se cumpără:
		   subtitlul coboară de la 11px la 10 și eliberează 13px, mai mult decât
		   cei 8 pe care îi luasem din margini. Marginile se întorc la 10, cutiile
		   la 12, și tot rămâne loc pe care cutiile îl iau întinzându-se.

		   Pe VERTICALĂ nu costă nimic — nicio măsurătoare nu depinde de ea — deci
		   rândul dintre cutii și săgeți urcă la 16, iar banda respiră 20 sus și
		   jos în loc de 18. Aerul cerut e chiar acolo unde se vede: în jurul
		   animației. */
		column-gap: 14px;
		row-gap: 16px;
		padding-block: 20px;
		padding-inline: 10px;
	}

	.flow-rail__node { padding: 12px; }

	/* Un punct mai mic pe subtitlu. E text secundar, în mono, sub un titlu care
	   spune deja despre ce e vorba — 10px se citește, iar cei 13 pixeli eliberați
	   plătesc tot spațiul de mai sus. */
	.flow-rail__node-sub { font-size: 10px; }
	.flow-rail__node--ro { grid-area: 1 / 1; }
	.flow-rail__node--eu { grid-area: 1 / 2; }
	.flow-rail__mid      { grid-area: 2 / 1 / 3 / 3; }

	/* Subtitlul are voie să se rupă pe două rânduri.
	   Pe lat stă pe unul singur, dinadins: „4.123 MW produși" tăiat între cifră
	   și unitate se citește prost. Pe îngust însă „BG · RS · HU · MD · UA" cere
	   139px, iar jumătate de rând pe un telefon de 320px are 144 — cu paddingul
	   cutiei se trece de ele, și banda scotea toată pagina din ecran. Mai bine
	   două rânduri decât o pagină care alunecă lateral. */
	.flow-rail__node-sub { white-space: normal; text-align: center; }
}
@media (max-width: 420px) {
	.source-grid { grid-template-columns: 1fr !important; }
	.site-nav a { padding: 6px 11px; font-size: 13px; }
}

@media print {
	.site-head, .site-foot, .aurora, .range-bar, .presets, .btn-row, .overlay { display: none !important; }
	.widget { break-inside: avoid; box-shadow: none; border-color: #ccc; }
	body { background: #fff; color: #000; }
}

/* ── Blog: liste, carduri, articol ───────────────────────────────────────── */

/* ── Căutarea din listele de blog ────────────────────────────────────────── */

.blog-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(20px, 3vw, 28px);
}

.blog-search__field {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 260px;
	min-width: 0;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--muted);
	transition: border-color .2s var(--ease);
}

.blog-search__field:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.blog-search__field input {
	flex: 1;
	min-width: 0;
	padding: 11px 0;
	border: 0;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: 14.5px;
}

.blog-search__field input:focus { outline: none; }

/* Butonul de golire pe care il pun unele browsere peste al nostru. */
.blog-search__field input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }

.blog-search__clear { font-size: 13.5px; color: var(--muted); }

.blog-search__count {
	flex: 1 0 100%;
	margin: 0;
	font-size: 13.5px;
	color: var(--muted);
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* `auto-fit`, nu `auto-fill`: al doilea pastreaza pistele ramase goale, asa ca
   trei articole intr-o grila unde incap patru lasau un gol in dreapta, ca si
   cum ar mai fi trebuit sa vina un card. `auto-fit` strange pistele libere si
   imparte latimea intre cate carduri sunt. */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--gap);
}

.post-grid--compact { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);

	/* Reper pentru linkul intins peste tot cardul, mai jos. */
	position: relative;
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: var(--line-strong);
}

.post-card__cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }

/* `<picture>` (WebP cu PNG de rezervă) nu trebuie să fie o cutie în plus:
   așa `img` rămâne copilul direct al învelișului pentru dimensiuni și
   `object-fit`, exact ca înainte să existe `<picture>`. */
picture.coperta { display: contents; }

.post-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }

.post-card__meta,
.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--muted);
}

.post-card__type {
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--surface-3);
	color: var(--text-2);
}

.post-card__type--guide { background: color-mix(in srgb, var(--c-cons) 16%, transparent); color: var(--c-cons); }
.post-card__type--news  { background: color-mix(in srgb, var(--accent) 18%, transparent); color: color-mix(in srgb, var(--accent) 78%, var(--text)); }

.post-card__title { font-size: 17.5px; line-height: 1.3; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cardul arata apasabil pe toata suprafata, deci trebuie sa si fie. Linkul
   titlului se intinde peste tot cardul printr-un strat invizibil — asa ramane
   un singur link, cu textul titlului drept nume, in loc sa infasuram cardul
   intr-o ancora si sa punem linkuri unele in altele. */
.post-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.post-card:hover { cursor: pointer; }

/* RECLAMELE AUTOMATE PUSE DE GOOGLE IN CARDURI.

   Auto ads le baga in `.post-card__body`, dupa rezumat — pe Stiri, cate una in
   fiecare card de pe un rand (masurat 7 octombrie 2026). Acolo erau SUB linkul
   intins peste card (`.post-card__title a::after`, `z-index: 1`): clicul pe
   reclama ajungea la stire, sau nicaieri. Reclama urca peste el, si se desparte
   de stire cu o linie si cu „Publicitate" — altfel se citeste ca parte din
   card, iar clicurile date din greseala pe reclame ii strica pe AdSense contul.

   `.google-auto-placed` e invelisul pus de scriptul lor; nu se ascunde si nu se
   muta (regulile AdSense), doar se aseaza deasupra si se eticheteaza. */
.post-card .google-auto-placed {
	position: relative;
	z-index: 2;
	margin: 14px 0 0;
	padding-top: 22px;
	border-top: 1px dashed var(--line-strong);
	cursor: auto;
}

.post-card .google-auto-placed::before {
	content: "Publicitate";
	position: absolute;
	top: 5px;
	left: 0;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Conturul de focalizare trebuie sa cuprinda cardul, nu doar cuvintele. */
.post-card:focus-within {
	border-color: var(--accent);
	box-shadow: var(--shadow-lg);
}

.post-card__title a:focus-visible { outline: none; }

/* ── Widget-ul „Ultimele știri" (`js/widgets/stiri.js`) ───────────────────
   Aceleasi carduri, mai strânse: stau langa grafice, nu pe o pagina a lor. Un
   rand — numarul de stiri e numarul de coloane din panou — care se rupe pe
   ecran ingust. Rezumatul se taie la trei randuri, ca rândul sa aiba aceeasi
   inaltime oricat de lung ar fi un titlu. */
.w-stiri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.w-stiri .post-card { box-shadow: none; }
.w-stiri .post-card__body { gap: 6px; padding: 14px; }
.w-stiri .post-card__title { font-size: 15.5px; }

.w-stiri .post-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--text-2);
	font-size: 13.5px;
	line-height: 1.5;
}

/* ── Îndemnul spre calculator: cardul din colț (`js/indemn.js`) ────────────
   Nu acopera nimic si nu fura focusul. Pe telefon e o banda jos, cu titlul,
   descrierea (mai mica) si butonul — fara eticheta de sus, care ar fi luat un
   rand doar ca sa repete ce spune butonul. */
.indemn {
	position: fixed;
	z-index: 70;
	right: 20px;
	bottom: 20px;
	width: min(340px, calc(100vw - 32px));
	padding: 16px 18px 14px;
	border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-strong));
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(calc(100% + 40px));
	transition: transform .5s var(--ease-out), opacity .35s var(--ease);
}

.indemn.is-vizibil { opacity: 1; transform: none; }

[data-motion="off"] .indemn { transition: none; }
@media (prefers-reduced-motion: reduce) { .indemn { transition: none; } }

.indemn__x {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.indemn__x:hover { background: var(--surface-2); color: var(--text); }

.indemn__eticheta {
	margin: 0 0 6px;
	color: color-mix(in srgb, var(--accent) 80%, var(--text));
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.indemn__titlu { margin: 0 30px 6px 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
.indemn__text { margin: 0 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.indemn__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.indemn__da { text-decoration: none; }

.indemn__nu {
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
}

.indemn__nu:hover { color: var(--text); }

@media (max-width: 600px) {
	.indemn {
		right: 8px;
		left: 8px;
		bottom: max(8px, env(safe-area-inset-bottom));
		width: auto;
		padding: 12px 14px;
	}

	.indemn__eticheta { display: none; }

	.indemn__titlu { font-size: 15.5px; }
	.indemn__text { margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
}

/* ── Caseta „calculator" — sub articole și ca widget ────────────────────────
   Un singur aspect pentru amandoua: `BlogView::indemnCalculator()` si
   `js/widgets/indemn-calc.js` scriu acelasi HTML. */
.indemn-caseta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px 18px;
	margin: 28px 0 0;
	padding: 18px 20px;
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.widget .indemn-caseta { margin: 0; }
.indemn-caseta__soare { font-size: 34px; line-height: 1; }
.indemn-caseta__titlu { margin: 0 0 4px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.indemn-caseta__text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.indemn-caseta .btn { text-decoration: none; white-space: nowrap; }

@media (max-width: 640px) {
	.indemn-caseta { grid-template-columns: auto 1fr; }
	.indemn-caseta .btn { grid-column: 1 / -1; }
}

.w-stiri__toate { margin: 12px 0 0; text-align: right; font-size: 14px; font-weight: 600; }
.w-stiri__toate a { color: var(--accent); text-decoration: none; }
.w-stiri__toate a:hover { text-decoration: underline; }

.post-card__excerpt { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* Paginare */
.pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 13px;
}

.pager__step {
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.pager__step:hover { border-color: var(--accent); background: var(--surface-2); }
.pager__step.is-off { opacity: .38; pointer-events: none; }
.pager__count { color: var(--muted); }

/* Articol — masura de lectura mai ingusta decat restul paginilor */
.prose--article { max-width: 100%; }

/* Progresul cititului: chiar marginea de jos a antetului. Șina e transparentă
   — se vede doar partea deja citită, care crește din stânga peste linia
   existentă a antetului. `bottom: -1px` o suprapune exact peste border. */
.read-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.read-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));

	/* Scalarea pornește din stânga; fără asta bara ar crește din mijloc. */
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

.article__cover {
	width: 100%;
	/* Perechea lui `width`/`height` din HTML. Atributele sunt acolo ca browserul
	   sa stie raportul si sa rezerve inaltimea inainte ca imaginea sa soseasca;
	   fara `auto` aici, ar fi luat 630px la litera si ar fi turtit coperta pe
	   ecranele inguste. */
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	margin: 20px 0 8px;
}

.article__meta { margin-bottom: 4px; }

.article__body { font-size: 16.5px; line-height: 1.78; margin-top: 26px; }

.article__body > :first-child { margin-top: 0; }
.article__body h2 { margin: 40px 0 14px; font-size: clamp(21px, 2.4vw, 26px); scroll-margin-top: 84px; }
.article__body h3 { margin: 30px 0 10px; font-size: clamp(17px, 1.9vw, 20px); scroll-margin-top: 84px; }
.article__body h4 { margin: 24px 0 8px; font-size: 16px; scroll-margin-top: 84px; }
.article__body p  { margin: 0 0 18px; }

/* Graficul de pe site adus in articol prin `[grafic:52]` — vezi
   `Mon\MarkdownHtml::grafic()`. Marginile sunt mai mari decat la un paragraf:
   e alt fel de continut, si trebuie sa se vada ca incepe si unde se termina. */
.articol-grafic {
	margin: 28px 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--surface);
}

.articol-grafic iframe { display: block; width: 100%; border: 0; }

/* Cand cadrele sunt inchise din setari, in locul lor ramane o legatura catre
   graficul de pe pagina lui. Nu e o eroare, deci nu arata a eroare. */
.articol-grafic-link {
	margin: 24px 0;
	padding: 12px 16px;
	border: 1px dashed var(--line);
	border-radius: 12px;
	font-size: 14.5px;
}
.article__body ul,
.article__body ol { margin: 0 0 18px; padding-left: 24px; }
.article__body li { margin-bottom: 9px; }
.article__body li > ul, .article__body li > ol { margin: 9px 0 0; }
.article__body img { border-radius: var(--radius-sm); border: 1px solid var(--line); margin: 8px 0; }
.article__body hr  { margin: 34px 0; border: 0; border-top: 1px solid var(--line); }

.article__body blockquote {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--surface-2);
	color: var(--text-2);
}

.article__body blockquote > :last-child { margin-bottom: 0; }

.article__body code {
	font-family: var(--font-mono);
	font-size: .88em;
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--surface-3);
}

.article__body pre {
	margin: 0 0 18px;
	padding: 15px 17px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
	overflow-x: auto;
}

.article__body pre code { padding: 0; background: none; font-size: 12.8px; line-height: 1.65; }

.article__body .table-scroll { overflow-x: auto; margin: 0 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.article__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article__body th { background: var(--surface-2); font-weight: 600; text-align: left; }
.article__body th, .article__body td { padding: 10px 13px; border-bottom: 1px solid var(--line); }
.article__body tbody tr:last-child td { border-bottom: 0; }

/* Cuprins */
.toc {
	margin: 26px 0 0;
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
}

.toc__title {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 6px; font-size: 14px; }
.toc .toc__l3 { padding-left: 18px; font-size: 13.5px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Surse + transparenta */
/* ── Reclame ─────────────────────────────────────────────────────────────────
   Apar doar pe articole și pe listele lor — vezi `Mon\Ads`.

   `min-height` ȘI `contain`. Prima ține locul cât timp Google se hotărăște: un
   bloc care apare brusc împinge tot ce e sub el, iar asta e CLS, adică una din
   cele trei măsurători după care se judecă viteza paginii. A doua oprește
   iframe-ul lor să tragă după el recalculări de aspect în restul paginii.

   Nu are chenar și nu are fundal: o reclamă care seamănă cu o casetă a site-ului
   se citește ca și cum ar fi a site-ului. Rămâne doar spațiul din jur și
   cuvântul „Publicitate", care trebuie să se vadă. */
.reclama {
	display: block;
	margin: 28px 0;
	min-height: 100px;
	contain: layout style;
}

.reclama::before {
	content: "Publicitate";
	display: block;
	margin-bottom: 6px;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

.reclama .adsbygoogle { display: block; width: 100%; }

/* Reclama din grila: o celula cat un card (`Ads::inLista()`). Se deosebeste de
   carduri — care au fundal, umbra si chenar plin — prin ce NU are: fara fundal,
   fara umbra, chenar punctat, si „Publicitate" deasupra. Asa se vede ca e
   altceva decat o stire, desi sta in randul lor. */
.post-grid > .reclama--lista-celula {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 280px;
	margin: 0;
	padding: 14px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
}

.article__sources {
	margin-top: 36px;
	padding: 18px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--surface-2);
	font-size: 14px;
}

.article__sources-title {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.article__sources ul { margin: 0; padding-left: 20px; }
.article__sources li { margin-bottom: 6px; }

.article__disclosure {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.6;
}

.article__back { margin-top: 32px; font-size: 14px; }

.related { margin-top: clamp(40px, 6vw, 64px); }
.related__title { font-size: 20px; margin-bottom: 18px; }

/* ── Banda cu fapte care se schimbă singură ──────────────────────────────── */

.ticker {
	height: 100%;
	background: var(--line);
	border-radius: var(--radius-sm, 10px);
	overflow: hidden;
}

/* Un singur fapt, pe toată lățimea: textul sus, indicatorii dedesubt.
   A avut două coloane care se roteau independent, și nu se putea urmări —
   vezi nota din js/widgets/ticker.js. */
.ticker__col {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 14px 18px 16px;
	background: var(--surface-2);
	min-width: 0;
}

.ticker__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Firul de progres de sub fiecare coloană: se umple exact cât ține un fapt.
   Spune, fără să scrie nimic, cât mai ai până se schimbă. */
.ticker__col::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	transform-origin: left;
	background: color-mix(in srgb, var(--accent) 55%, transparent);
	transform: scaleX(0);
}

.ticker__col.is-ruleaza::after {
	animation: ticker-progres var(--ticker-secunde, 5s) linear infinite;
}

.ticker.e-pauzat .ticker__col::after { animation-play-state: paused; }

@keyframes ticker-progres {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.ticker__sus {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 16px;
}

.ticker__eticheta {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.ticker__info {
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	color: var(--muted);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	opacity: .7;
}

.ticker__info:hover,
.ticker__info:focus-visible { opacity: 1; color: var(--accent); }

.ticker__titlu {
	margin: 2px 0 0;
	font-family: var(--font-display);
	font-size: clamp(15px, 1.35vw, 19px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text);
}

.ticker__detaliu {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted);
}

/* Alunecarea. Textul vechi iese în direcția gestului, cel nou intră din partea
   opusă — vezi cei trei pași din `mergiLa`, js/widgets/ticker.js.

   Distanța e de 56px, nu de 14: sub vreo 40 de pixeli mișcarea nu se mai
   citește ca alunecare, ci ca o estompare cu o tresărire. Durata trebuie să
   bată `ESTOMPARE` din același fișier. */
.ticker__titlu,
.ticker__detaliu,
.ticker__eticheta {
	transition: opacity var(--ticker-fade, 180ms) ease, transform var(--ticker-fade, 180ms) cubic-bezier(.32, .72, 0, 1);
}

/* Ieșirea */
.ticker__col.is-schimba .ticker__titlu,
.ticker__col.is-schimba .ticker__detaliu,
.ticker__col.is-schimba .ticker__eticheta { opacity: 0; }

.ticker__col.is-schimba.spre-stanga .ticker__titlu,
.ticker__col.is-schimba.spre-stanga .ticker__detaliu,
.ticker__col.is-schimba.spre-stanga .ticker__eticheta { transform: translateX(-56px); }

.ticker__col.is-schimba.spre-dreapta .ticker__titlu,
.ticker__col.is-schimba.spre-dreapta .ticker__detaliu,
.ticker__col.is-schimba.spre-dreapta .ticker__eticheta { transform: translateX(56px); }

/* Așezarea de dinaintea intrării: partea OPUSĂ ieșirii. */
.ticker__col.is-intra .ticker__titlu,
.ticker__col.is-intra .ticker__detaliu,
.ticker__col.is-intra .ticker__eticheta { opacity: 0; }

.ticker__col.is-intra.spre-stanga .ticker__titlu,
.ticker__col.is-intra.spre-stanga .ticker__detaliu,
.ticker__col.is-intra.spre-stanga .ticker__eticheta { transform: translateX(56px); }

.ticker__col.is-intra.spre-dreapta .ticker__titlu,
.ticker__col.is-intra.spre-dreapta .ticker__detaliu,
.ticker__col.is-intra.spre-dreapta .ticker__eticheta { transform: translateX(-56px); }

/* Momentul în care textul e mutat pe partea opusă nu are voie să fie animat. */
.ticker__col.fara-tranzitie .ticker__titlu,
.ticker__col.fara-tranzitie .ticker__detaliu,
.ticker__col.fara-tranzitie .ticker__eticheta { transition: none; }

/* `margin-top: auto` îi ține lipiți de baza cardului, oricât de scurt ar fi
   textul faptului curent — altfel rândul de indicatori ar sări în sus și în jos
   la fiecare schimbare, exact mișcarea pe care banda trebuie s-o evite. */
.ticker__puncte {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: auto;
	justify-content: flex-start;
}

.ticker__punct {
	width: 14px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: color-mix(in srgb, var(--muted) 35%, transparent);
	cursor: pointer;
	transition: background 200ms ease;
}

.ticker__punct:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); }
.ticker__punct.is-activ { background: var(--accent); }

/* Cine a cerut mai puțină mișcare primește textul schimbat sec, fără estompare
   și fără firul care se umple. Rotația rămâne: ea e informație, nu decor. */
@media (prefers-reduced-motion: reduce) {
	.ticker__titlu,
	.ticker__detaliu,
	.ticker__eticheta { transition: none; }
	.ticker__col.is-schimba .ticker__titlu,
	.ticker__col.is-schimba .ticker__detaliu,
	.ticker__col.is-schimba .ticker__eticheta { opacity: 1; transform: none; }
	.ticker__col.is-ruleaza::after { animation: none; }
}

[data-motion="off"] .ticker__col.is-ruleaza::after { animation: none; }

/* ── Prețul acum în Europa: clasament pe bare orizontale ─────────────────── */

/* `--wh`, nu `height: 100%`: într-un corp de înălțimea conținutului, procentul nu
   înseamnă nimic, deci lista creștea cât avea rânduri și setarea din panou nu
   ajungea la ea. Sub înălțimea listei se derulează `.pe__lista`; peste ea,
   rândurile împart spațiul. */
.pe { display: flex; flex-direction: column; height: var(--wh, 780px); gap: 8px; }

@media (max-width: 760px) {
	/* O listă care se derulează într-o pagină care se derulează, pe telefon, prinde degetul. */
	.pe { height: auto; }
}

.pe__sumar { margin: 0; font-size: 13px; color: var(--muted); }
.pe__nota  { margin: 0; font-size: 11px; color: var(--muted); opacity: .8; }

.pe__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
	min-height: 0;
	flex: 1;
}

.pe__rand {
	flex: 1 1 auto;
	display: grid;
	/* Coloana de țară fixă, ca barele să pornească toate de pe aceeași verticală
	   — altfel „Germania și Luxemburg” ar împinge bara ei mai la dreapta decât
	   bara Cehiei, iar comparația vizuală s-ar rupe. */
	grid-template-columns: minmax(96px, 150px) 1fr 108px;
	align-items: center;
	gap: 10px;
	padding: 3px 6px;
	border-radius: 6px;
	font-size: 12px;
}

.pe__tara {
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pe__bara {
	display: block;
	height: 10px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--muted) 12%, transparent);
	overflow: hidden;
}

.pe__bara i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: color-mix(in srgb, var(--c-price, var(--accent)) 70%, transparent);
}

.pe__pret {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--text);
}

/* România: rândul rămâne găsibil dintr-o privire oriunde ar cădea în clasament. */
.pe__rand.is-acasa {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.pe__rand.is-acasa .pe__tara { color: var(--text); font-weight: 700; }
.pe__rand.is-acasa .pe__bara i { background: var(--accent); }

/* Prețul negativ chiar se întâmplă în Europa, iar bara lui trebuie să arate
   altfel decât una mică — altfel „−5” și „5” se citesc la fel. */
.pe__rand.e-negativ .pe__bara i { background: repeating-linear-gradient(45deg,
	color-mix(in srgb, var(--c-export, #2e9e6b) 70%, transparent) 0 4px, transparent 4px 8px); }
.pe__rand.e-negativ .pe__pret { color: var(--c-export, #2e9e6b); }

.widget__gol { padding: 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Unitatea scrisă pe fiecare rând, nu o dată deasupra coloanei: cine parcurge
   lista cu ochiul nu trebuie să urce înapoi la un cap de tabel ca să afle ce
   citește. Ca să nu concureze cu cifra, e mai mică și mai ștearsă — se vede
   când o cauți, nu strigă. */
.pe__unitate {
	font-style: normal;
	font-size: 10px;
	font-weight: 400;
	color: var(--muted);
	margin-left: 2px;
}

/* Text doar pentru cititoarele de ecran: unitatea trebuie AUZITĂ pe fiecare
   rând, chiar dacă pe ecran e scrisă o singură dată în cap. Cine ascultă lista
   nu are capul de tabel în față tot timpul. */
.doar-citit {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Banda: tragere cu degetul ───────────────────────────────────────────── */

/* `pan-y` lasă derularea verticală a paginii browserului, dar ne dă nouă
   orizontala. Fără el, pe telefon gestul nostru s-ar bate cu scroll-ul și ar
   pierde amândouă. */
.ticker { touch-action: pan-y; }

.ticker__col { cursor: grab; user-select: none; }
.ticker.e-tras .ticker__col { cursor: grabbing; }

/* Cât e degetul pe ea, textul urmărește fără întârziere: o tranziție aici ar
   face-o să pară că se târăște după deget. Revenirea, în schimb, e animată —
   se face prin ștergerea stilului inline, deci prin regula de mai jos. */
.ticker__text { transition: transform 200ms ease, opacity 200ms ease; }
.ticker.e-tras .ticker__text { transition: none; }

.ticker:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ticker__text { transition: none; }
	.ticker__col.is-schimba .ticker__titlu,
	.ticker__col.is-schimba .ticker__detaliu,
	.ticker__col.is-schimba .ticker__eticheta,
	.ticker__col.is-intra .ticker__titlu,
	.ticker__col.is-intra .ticker__detaliu,
	.ticker__col.is-intra .ticker__eticheta { transform: none; }
}

/* ── Toate faptele deodată ───────────────────────────────────────────────── */

.fapte {
	display: grid;
	grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
	gap: 10px;
	height: 100%;
	align-content: start;
}

/* Sub 1100px șase coloane ar face din fiecare frază un turn de cuvinte tăiate:
   coborâm treptat, nu dintr-o dată la una. */
@media (max-width: 1100px) { .fapte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .fapte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .fapte { grid-template-columns: 1fr; } }

.fapt {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm, 10px);
	background: var(--surface-2);
	min-width: 0;
}

.fapt__sus { display: flex; align-items: center; gap: 6px; }

.fapt__eticheta {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fapt__titlu {
	margin: 0;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}

.fapt__detaliu {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--muted);
}

/* ── „Cât te poți baza pe prognoză" ──────────────────────────────────────── */

/* Bare orizontale, nu curbă: eroarea nu curge lin de la o oră la alta, e o
   proprietate măsurată separat pentru fiecare oră. O curbă ar fi sugerat o
   continuitate care nu există. */
.prog-rezumat { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.prog-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* Barele se desenează ca rânduri, deci graficul crește împărțind `--wh` la cele 24
   de ore, iar bara se îngroașă cu rândul ei. Sub 24 de rânduri lizibile nu coboară. */
.prog { display: flex; flex-direction: column; min-height: var(--wh, 0px); }
.prog-bare { display: grid; gap: 2px; flex: 1 1 auto; grid-auto-rows: 1fr; }

.prog-rand {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) 72px 52px;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.prog-ora { color: var(--muted); }
.prog-mw { text-align: right; font-weight: 600; }
.prog-mw small { font-weight: 400; color: var(--muted); }
.prog-pct { text-align: right; color: var(--muted); }

.prog-bara {
	position: relative;
	height: clamp(9px, 50%, 26px);
	border-radius: 999px;
	background: var(--surface-2);
	overflow: hidden;
}

.prog-bara__umplut {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: currentColor;
}

/* Trei praguri, ca tiparul să se vadă fără să citești cifrele. Sub 100 MW
   eroarea e sub 2% din consum — sub grosimea liniei de pe grafic. Peste 180 MW
   trece de 3,5% și chiar se vede cu ochiul liber. */
.prog-rand.is-bun   .prog-bara__umplut { color: var(--c-prod, #4caf7d); }
.prog-rand.is-mediu .prog-bara__umplut { color: var(--c-warn, #d19a2a); }
.prog-rand.is-slab  .prog-bara__umplut { color: var(--c-danger, #d9534f); }

@media (max-width: 560px) {
	.prog-rand { grid-template-columns: 24px minmax(0, 1fr) 62px; }
	.prog-pct { display: none; }
}


/* ── Industrie sau gospodarii, pe ani ────────────────────────── */

/* Banda ESTE mesajul, nu un ornament in jurul liniei: e cat de mult mișcă
   ipoteza din spate rezultatul. De aceea are opacitate destul cat să se vadă
   singură de la distanță, nu cât să se ghicească. */
.spl-rezumat { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.spl-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.spl-nota + .spl-nota { margin-top: 5px; }

/* Cele două grafice împart ce rămâne din `--wh`, în raportul de 200 la 70 în care
   sunt desenate. SVG-ul e absolut fiindcă `height: 100%` nu se rezolvă într-un
   element crescut din `flex` într-un părinte care are doar `min-height`. */
.spl { display: flex; flex-direction: column; min-height: var(--wh, 0px); }

.spl-grafic {
	position: relative;
	flex: 200 1 110px;
	min-height: 110px;
}

.spl-grafic.is-consum {
	flex: 70 1 40px;
	min-height: 40px;
	margin-top: 6px;
	padding-top: 4px;
	border-top: 1px solid var(--border, rgba(128,128,128,.25));
}

.spl-grafic svg { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.spl-grafic.is-consum svg { top: 4px; height: calc(100% - 4px); }

.spl-banda { fill: var(--accent); opacity: .18; }

/* `vector-effect` fiindca SVG-ul e intins pe latime cu `preserveAspectRatio:
   none`: fara el, linia ar fi iesit groasa pe verticala si subtire pe
   orizontala, adica altfel pe fiecare latime de ecran. */
.spl-linie {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.spl-consum {
	fill: none;
	stroke: var(--c-cons, #2f7fc4);
	stroke-width: 1.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: .75;
}

.spl-reper {
	stroke: var(--border, rgba(128,128,128,.25));
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 3 4;
}

.spl-marca {
	position: absolute;
	right: 2px;
	font-size: 11px;
	color: var(--muted);
	/* `--surface`, nu `--surface-1`: al doilea nu e definit nicaieri, si o
	   variabila inexistenta ar fi cazut pe rezerva — adica marcajul ar fi stat
	   direct peste linie, cu cifra taiata de ea. */
	background: var(--surface);
	padding: 0 3px;
	pointer-events: none;
}

.spl-grafic.is-consum .spl-marca { top: 4px; }

.spl-axa {
	position: relative;
	height: 16px;
	margin-top: 3px;
}

.spl-an {
	position: absolute;
	transform: translateX(-50%);
	font-size: 11px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Reperele care urmăresc cursorul. HTML, nu SVG: pânzele au
   `preserveAspectRatio="none"` și se întind pe lățime, deci un cerc desenat
   înăuntru ar fi ieșit ou și o linie verticală ar fi avut altă grosime decât
   una orizontală. */
.spl-cursor {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--muted);
	opacity: .5;
	pointer-events: none;
	transform: translateX(-.5px);
}

.spl-punct {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 2px var(--surface);
	pointer-events: none;
}

.spl-grafic.is-consum .spl-punct { background: var(--c-cons, #2f7fc4); }

/* Bula stă în graficul de sus și nu-l depășește pe verticală. `chart-tip` îi
   dă deja fundalul, umbra și tranziția — aici doar se ancorează. */
.spl-tip { top: 6px; }

.spl-tip .chart-tip__row.is-banda {
	color: var(--muted);
	font-size: 11px;
	margin-left: 14px;
}

.spl-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted);
}

.spl-legenda__item { display: inline-flex; align-items: center; gap: 6px; }

.spl-pastila { width: 12px; height: 10px; border-radius: 3px; display: inline-block; }
.spl-pastila.is-linie { background: var(--accent); }
.spl-pastila.is-banda { background: var(--accent); opacity: .28; }

@media (max-width: 620px) {
	.spl-grafic { flex-basis: 170px; }
	.spl-grafic.is-consum { flex-basis: 70px; }
	.spl-an:nth-child(even) { display: none; }
}

/* Rândul de sub un grafic — deocamdată doar totalul de la plăcintă, când
   decupajul e prea mic ca să-l poarte în mijloc. */
.chart-subsol {
	margin: 6px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ── Prosumatori ─────────────────────────────────────────────────────────── */

/* Regula de citire a paginii, ținută în CSS ca să nu depindă de textul fiecărui
   widget: ce e MĂSURĂTOARE poartă `.pro-masurat` și e verde ca producția; ce e
   prognoză folosește culoarea de accent. Pe o pagină unde jumătate din cifre
   sunt un model, distincția trebuie să se vadă înainte să se citească. */
.pro-rezumat { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
.pro-nota { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pro-nota + .pro-nota { margin-top: 6px; }
.pro-masurat { color: var(--c-prod, #16a97a); }

/* Cifrele mari. Flex, nu grid cu număr fix de coloane: widget-ul „acum" are
   trei, cel de încredere are două, iar amândouă trebuie să umple rândul. */
.pro-cifre {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pro-cifra {
	flex: 1 1 150px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--surface-2);
}

.pro-cifra.is-mare { flex: 1.4 1 190px; }

.pro-cifra__eticheta {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
}

.pro-cifra__val {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.pro-cifra.is-mare .pro-cifra__val { font-size: 34px; color: var(--accent); }
.pro-cifra__val small { font-size: .5em; font-weight: 500; color: var(--muted); }
.pro-cifra__sub { font-size: 12px; color: var(--muted); }

/* Graficele. Înălțimea vine din containerul widget-ului, nu din viewBox:
   `preserveAspectRatio="none"` lasă SVG-ul să se întindă, iar barele rămân
   drepte fiindcă n-au contur și n-au text înăuntru. */
.pro-grafic {
	position: relative;
	height: 240px;
	margin: 4px 0 2px;
}

.pro-grafic.is-scund { height: 190px; }
.pro-grafic svg { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

/* Înălțimea din panou: rezumatul, axa și legenda rămân cât sunt, graficul ia restul.
   SVG-ul de mai sus e absolut din același motiv ca la `.spl-grafic`. */
.pro-col { display: flex; flex-direction: column; min-height: var(--wh, 0px); }
.pro-col > .pro-grafic { flex: 1 1 130px; height: auto; min-height: 130px; }
.pro-col > .pro-bare { flex: 1 1 auto; grid-auto-rows: 1fr; }

@media (max-width: 760px) {
	/* Pe telefon textul ocupă mai mult, iar graficul n-are voie să plătească pentru el. */
	.pro-col > .pro-grafic { flex-basis: 200px; }
}

.pro-bara-cons { fill: var(--c-cons, #2f7fc4); opacity: .38; }
.pro-bara-pro  { fill: var(--accent); }
.pro-bara-pi   { fill: var(--c-prod, #16a97a); }

/* Axa cu ore/luni. Etichetele sunt poziționate procentual peste un rând propriu,
   nu desenate în SVG: în SVG ar fi fost întinse odată cu barele, adică scrise
   strâmb pe orice lățime în afară de una.

   RÂNDUL E FRATE CU GRAFICUL, NU COPIL. Stătuse înăuntru, iar `.pro-grafic` are
   înălțime fixă și un SVG de `height: 100%` peste ea — deci axa se revărsa în
   afara carcasei și cădea peste legendă. Se vedea ca „00 03 06" scrise peste
   „consum măsurat". */
.pro-axa {
	position: relative;
	height: 16px;
	margin-top: 2px;
}

.pro-ora {
	position: absolute;
	transform: translateX(-50%);
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pro-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
}

.pro-legenda__item { display: inline-flex; align-items: center; gap: 6px; }

.pro-pastila {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
}

.pro-pastila.is-cons { background: var(--c-cons, #2f7fc4); opacity: .38; }
.pro-pastila.is-pro  { background: var(--accent); }

/* Barele orizontale pe ore — aceeași gramatică vizuală ca la „cât te poți baza
   pe prognoză", fiindcă răspund la același fel de întrebare: cum se schimbă o
   mărime de la o oră din zi la alta. */
.pro-bare { display: grid; gap: 2px; }

.pro-rand {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) 52px 74px;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.pro-rand__ora { color: var(--muted); }

.pro-rand__bara {
	position: relative;
	height: clamp(9px, 50%, 26px);
	border-radius: 999px;
	background: var(--surface-2);
	overflow: hidden;
}

.pro-rand__umplut {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
}

.pro-rand__pct { text-align: right; font-weight: 600; }
.pro-rand__mw { text-align: right; color: var(--muted); }
.pro-rand__mw small { font-size: .85em; }

/* Comutatorul de măsură. Trei butoane care nu cer nimic de la server: toate
   valorile vin în același răspuns, iar apăsarea doar reordonează și recolorează
   ce e deja în pagină. */
.pro-comutator {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 10px 0 12px;
}

.pro-comutator__btn {
	appearance: none;
	border: 1px solid var(--border, rgba(128,128,128,.3));
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.pro-comutator__btn:hover { color: var(--text); border-color: var(--accent); }

.pro-comutator__btn.is-activ {
	background: var(--accent);
	border-color: var(--accent);
	/* Text închis pe accent, în ambele teme: accentul e portocaliu deschis și
	   într-una, și în cealaltă, deci un `--text` moștenit ar fi ieșit alb pe
	   galben în tema întunecată. */
	color: #14181d;
	font-weight: 600;
}

.pro-comutator__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Locul din clasament. Fără el, la comutarea măsurii se schimbă ordinea și nu
   se vede că s-a schimbat — județele arată la fel oriunde ar sta. */
.pro-judet__loc {
	color: var(--muted);
	font-size: 11px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Bara verde când măsura e o măsurătoare (puterea instalată), accent când e
   prognoză. Aceeași regulă ca la restul paginii — vezi `.pro-masurat`. */
.pro-rand__umplut.is-masurat { background: var(--c-prod, #16a97a); }

/* ── Harta pe județe ─────────────────────────────────────────────────────── */

/* O SINGURĂ CULOARE, în trepte de intensitate. Un curcubeu ar fi arătat mai
   bogat și ar fi mințit: valorile sunt o singură mărime care crește, nu
   categorii. Cu o nuanță, ochiul citește „mai mult / mai puțin" fără legendă.

   `--i` vine din JS, între 0 și 1, ca rădăcină a raportului cu maximul — pe
   scară liniară, Ilfovul având de șapte ori cât Covasna, treizeci de județe ar
   fi ieșit toate la fel de palide. */
.pro-harta {
	position: relative;
	margin: 2px 0 4px;
	display: flex;
	/* `min-width: 0` e obligatoriu langa panou: fara el un copil de flex nu se
	   micsoreaza sub continutul lui, iar SVG-ul ar imping panoul in afara. */
	flex: 1 1 auto;
	min-width: 0;
	/* Era 160. Harta e lucrul pentru care exista widgetul, iar restul — o frază,
	   trei butoane, o scală și două note — ocupa mai mult loc decât ea. */
	min-height: 280px;
	justify-content: center;
	align-items: center;
}

/* `height: 100%` cu `width: auto`, nu invers: harta Romaniei e mai lata decat
   inalta, iar intr-o carcasa inalta trebuie sa se opreasca la inaltime, altfel
   ar iesi lateral. `object-fit` n-ar ajuta — nu e imagine, e SVG inline. */
.pro-harta svg { display: block; max-width: 100%; max-height: 100%; height: 100%; width: auto; }

.pro-h-judet {
	fill: var(--accent);
	/* Valoarea vine din JS, ca atribut `fill-opacity`. Aici doar rezerva, pentru
	   cazul în care scriptul n-a apucat să scrie nimic. Vezi `OPAC` în
	   `js/widgets/prosumatori.js` pentru de ce nu e `calc()` cu variabilă. */
	fill-opacity: .06;
	stroke: var(--surface);
	stroke-width: 1.1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* ── Țara radiază ───────────────────────────────────────────────────────────
 *
 * În spatele hărții stă aceeași siluetă, plină și neclară. Fiind pline,
 * județele vecine se lipesc și granițele dinăuntru dispar — rămâne conturul
 * României, înconjurat de o lumină caldă.
 *
 * Nu se mișcă nimic peste cifre: lumina stă în jurul hărții și doar respiră.
 * Banda care mătura țara arăta bine o dată și obosea a treia oară.
 */
.pro-h-aura {
	fill: var(--accent);
	/* CONTUR DE ACEEASI CULOARE, si nu e podoaba. Cele patruzeci si doua de
	   forme se ating pe granite, iar pe granita comuna fiecare e desenata cu
	   margini netezite — doua jumatati de pixel care nu fac un pixel plin. Fara
	   contur, `feComposite out` vede cusaturile alea ca gauri in silueta si lasa
	   lumina sa iasa prin ele: o panza de fire aurii peste toata tara, exact
	   ce incercam sa scoatem. Contur de trei unitati, si vecinii se suprapun. */
	stroke: var(--accent);
	stroke-width: 3;
	stroke-linejoin: round;
	opacity: .8;
	pointer-events: none;
	animation: pro-radiaza 5s ease-in-out infinite;
}

/* Inelul se aprinde si se stinge: de la .45 la 1, de peste doua ori. Nu mai
   creste si in afara, cum facea inainte — `feComposite out` taie lumina fix pe
   granita, deci daca silueta s-ar mari, taietura s-ar muta cu ea si intre harta
   si lumina ar aparea o dunga goala. Pe un inel subtire, opacitatea singura se
   vede oricum mai bine decat se vedea pe o pata cat toata tara. */
@keyframes pro-radiaza {
	0%, 100% { opacity: .45; }
	50%      { opacity: 1; }
}

.pro-h-strat .pro-h-judet {
	transition: fill-opacity .45s cubic-bezier(.4, 0, .2, 1);
}

/* Fruntașul: doar conturul, fără puls. Singurul lucru care respiră pe harta
   asta e aura din jurul țării; două lucruri care pulsează în ritmuri diferite
   se ceartă între ele. */
.pro-h-judet.is-frunte {
	stroke: var(--accent);
	stroke-width: 2.2;
}

/* Liniște: harta rămâne exact la fel, doar nemișcată. Raza se duce de tot din
   cadru, ca stratul de lumină să nu stea agățat peste o parte din țară. */
body[data-motion="off"] .pro-h-aura { animation: none; opacity: .8; }
body[data-motion="off"] .pro-h-judet:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pro-h-aura { animation: none; opacity: .8; }
	.pro-h-judet { transition: none; }
	.pro-h-judet:hover { transform: none; }
}

/* La hover, județul se ridică din hartă.
 *
 * Trei lucruri deodată, fiindcă unul singur nu s-ar vedea pe o formă mică:
 * culoarea se aprinde, conturul se îngroașă, și forma crește puțin din propriul
 * centru. `transform-box: fill-box` e obligatoriu — fără el, `transform-origin`
 * se raportează la tot SVG-ul, iar județele din colț ar fi zburat în lături.
 *
 * `paint-order: stroke fill` pune conturul sub umplere, ca îngroșarea să crească
 * spre exterior și să nu mănânce din formă. */
.pro-h-judet {
	paint-order: stroke fill;
	transform-box: fill-box;
	transform-origin: center;
	transition:
		fill-opacity .45s cubic-bezier(.4, 0, .2, 1),
		stroke-width .18s ease,
		stroke .18s ease,
		transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.pro-h-judet:hover {
	stroke: var(--text);
	stroke-width: 2.4;
	transform: scale(1.035);
}

/* VECINII NU SE ESTOMPEAZĂ NICIODATĂ — nici pe mouse, nici pe deget. A existat
   o regulă care le scădea opacitatea la 0,08 cât stăteai pe un județ; a fost
   scoasă la cerere, peste tot. Harta arată cât produce fiecare județ prin cât de
   tare e culoarea, iar dacă toate celelalte pălesc, singurul lucru pe care harta
   îl spune dispare exact în clipa în care omul se uită mai atent la ea.

   Județul de sub cursor sau atins are destule semne fără asta: contur mai gros,
   o creștere mică, umbra de mai jos și bula cu cele trei măsuri. */
@media (hover: hover) {
	/* Județul atins trece deasupra vecinilor, altfel conturul lui gros e
	   acoperit pe jumătate de forma desenată după el. */
	.pro-h-strat:has(.pro-h-judet:hover) .pro-h-judet:hover {
		filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35));
	}
}

/* ALES CU DEGETUL. Aceleași trei semne ca la hover, doar că declanșate de o
   clasă pusă din cod, nu de cursor — vezi `alegePeAtingere()` din
   `js/widgets/prosumatori.js`. Nu sunt în `@media (hover: none)`: regulile pot
   sta oriunde, fiindcă nimeni nu pune clasa dacă nu e ecran de atins. */
.pro-h-judet.is-ales {
	stroke: var(--text);
	stroke-width: 2.4;
	transform: scale(1.035);
}

/* Retragerea vecinilor NU E AICI: o scrie `alegePeAtingere()` din
   `js/widgets/prosumatori.js`, direct in stilul inline, fiindca tot de acolo
   vine si intensitatea de baza. Doua mecanisme peste aceeasi proprietate se
   bateau intre ele la fiecare sondaj. */
.pro-h-strat:has(.pro-h-judet.is-ales) .pro-h-judet.is-ales {
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35));
}

/* Forma aleasă primește focus, ca tooltipul să apară. Conturul de focus al
   browserului ar dubla conturul pe care tocmai l-am desenat noi. */
.pro-h-judet:focus { outline: none; }

/* Pe atingere nu există „hover”: după fiecare apăsare ar fi rămas un județ
   palid, fără ca nimic să-l readucă. Regulile de mai sus stau deja sub
   `(hover: hover)`, deci pe deget nu se aplică niciuna și n-au ce anula — mai
   rămâne doar creșterea, care vine din regula de bază. Locul lor îl ia
   `.is-ales`. */
@media (hover: none) {
	.pro-h-judet:hover { transform: none; }
}

/* `help`, nu `pointer`: la apăsare nu se întâmplă nimic, iar o mână care
   promite un clic inexistent e o minciună mică pe care o observă toată lumea.
   Județul poartă `data-tip` cu toate trei măsurile — vezi `tooltip()` din
   `js/widgets/prosumatori.js`. */
.pro-harta svg { cursor: help; }

.pro-scala {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.pro-scala__bara {
	position: relative;
	flex: 1 1 auto;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(to right,
		color-mix(in srgb, var(--accent) 6%, transparent),
		var(--accent));
}

/* Unde partajarea nativa poate trimite fisiere, butonul de descarcare deschide
   aceeasi foaie — vezi `marcheazaPartajarea()` din `js/lib/board.js`. Ramane
   unul singur, si mai castiga si titlul treizeci si sase de pixeli. */
body[data-poate-partaja] .widget__tools [data-snap="download"] {
	display: none;
}

/* ── Antetul widget-ului pe ecran ingust ─────────────────────────────────────
 *
 * PE LAT antetul e simplu: titlurile la stanga, butoanele la dreapta, doua
 * coloane de flex. Pe telefon iese prost, si nu din cauza butoanelor — din cauza
 * a CE sta langa ele. Cele patru butoane tin 154 px dintr-o latime de vreo 293,
 * iar in coloana ingusta ramasa nu intra doar titlul, ci si subtitlul si randul
 * de perioada. Subtitlul se rupea pe patru randuri intr-o jumatate de ecran, in
 * timp ce jumatatea cealalta statea goala sub butoane. Arata a pagina taiata in
 * doua pe verticala, degeaba.
 *
 * AICI ANTETUL DEVINE GRILA. Titlul imparte primul rand cu butoanele — atat, si
 * nimic altceva. Subtitlul si perioada trec pe randurile urmatoare, pe toata
 * latimea, unde le e locul: sunt propozitii, nu etichete.
 *
 * `display: contents` pe `.widget__titles` fiindca cele trei sunt inchise
 * intr-un `div`, iar o grila nu vede decat copiii ei directi. Cu el, invelisul
 * dispare din asezare si ramane doar ce e in el — fara sa schimbam HTML-ul, care
 * pe ecran lat e exact ce trebuie.
 *
 * Butoanele scad de la 34 la 31 px. Tinta ramane buna pentru deget, iar titlul
 * castiga douazeci de pixeli — pe o latime de o suta si ceva, se simte. */
@media (max-width: 620px) {
	.widget__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		column-gap: 10px;
		row-gap: 3px;
	}

	.widget__titles { display: contents; }

	.widget__title { grid-column: 1; grid-row: 1; align-self: center; }
	.widget__tools { grid-column: 2; grid-row: 1; }

	.widget__sub,
	.widget__period { grid-column: 1 / -1; }

	.widget__tools { gap: 5px; }
	.widget__tools .icon-btn { width: 31px; height: 31px; }
}

/* ── Legatura catre un singur grafic ─────────────────────────────────────────
 *
 * `scroll-margin-top` fiindca antetul site-ului e `position: sticky`: fara el,
 * saritura la ancora aseaza widgetul EXACT sub marginea de sus a ferestrei, adica
 * pe sub antet — si primul lucru pe care-l vede cine deschide linkul e titlul
 * taiat pe jumatate. Masurat, antetul tine 101 px; 120 lasa si un deget de aer.
 */
.widget { scroll-margin-top: 120px; }

/* Se aprinde o clipa, ca sa se vada CARE. Pe o pagina cu douazeci si sase de
   carcase la fel, „ai ajuns" nu se citeste din nimic altceva. Conturul se stinge
   singur si nu lasa nimic in urma — vezi `duLaAncora()` din `js/lib/board.js`. */
.widget.is-tinta {
	animation: widget-tinta 2.6s ease-out;
}

@keyframes widget-tinta {
	0%, 55% {
		border-color: color-mix(in srgb, var(--accent) 70%, transparent);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
	}
	100% {
		border-color: var(--line);
		box-shadow: none;
	}
}

/* Nemiscat, dar tot vizibil: conturul ramane aprins cat tine clasa, apoi dispare
   dintr-o data. Cine a cerut mai putina miscare tot trebuie sa vada unde a
   ajuns. */
body[data-motion="off"] .widget.is-tinta {
	animation: none;
	border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.widget.is-tinta {
		animation: none;
		border-color: color-mix(in srgb, var(--accent) 70%, transparent);
	}
}

/* ── Bilantul energiei (Sankey) ─────────────────────────────────────────────
 *
 * Culorile nodurilor NU sunt aici. Vin din `Catalog::SERIES`, prin API, aceleasi
 * pe care le folosesc graficele si harta — altfel fotovoltaicul ar fi fost auriu
 * intr-un loc si altfel in altul. Aici ramane doar ce tine de desen: textul,
 * bara sistemului si firul care leaga eticheta de nodul ei.
 *
 * Inaltimea o da caseta, nu un raport fix: `bilant.js` isi masoara cutia si
 * deseneaza in pixeli adevarati, ca literele sa aiba marimea scrisa si pe telefon.
 */
.bil-rezumat { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }

/* CARCASA TREBUIE SA FIE COLOANA FLEX, altfel `flex: 1` de mai jos nu inseamna
   nimic: `.widget__body` e `display: block` din oficiu, iar cutia ramane la
   `min-height` si lasa aer sub ea. Masurat: pe o carcasa de 460 iesea un desen
   de 240 si cincizeci de pixeli goi. Aceeasi lectie ca la `.widget--dunare`. */
.widget--bilant .widget__body {
	flex: none;
	height: var(--wh, 460px);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.bil-cutie { flex: 1 1 auto; min-height: 220px; display: flex; position: relative; }

.bil-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Bazinul. Neutru dinadins: daca ar avea o culoare a lui, ar parea inca o sursa,
   iar el nu e nimic — e locul unde totul se amesteca. */
.bil-sistem { fill: color-mix(in srgb, var(--text) 30%, var(--surface)); }

.bil-nod { stroke: var(--surface); stroke-width: 1; }

/* FIRUL DINTRE PANGLICI. Spre bazin ele se ating — acolo e un singur bazin, nu
   opt bucati, iar un gol lasat intre ele ar fi insemnat alta scara pe stanga
   (noua noduri) decat pe dreapta (doua). Un contur de un pixel in culoarea
   cartonului le desparte fara sa mute nimic, si le contureaza si pe restul
   drumului: se vede fiecare banda cap la cap, nu un bloc vopsit in dungi. */
.bil-panglica { stroke: var(--surface); stroke-width: 1; stroke-opacity: .5; }

/* ── Eticheta de la mouse ────────────────────────────────────────────────
 *
 * Aici erau doua randuri de text SVG pe fiecare nod, in doua benzi laterale de
 * cate 132 de pixeli — un sfert din latime numai text, cu liniute trase pana la
 * nodurile mici, ale caror etichete se impingeau unele in altele. Acum numele si
 * cifrele apar la trecerea cu mouse-ul, iar panglicile au toata latimea.
 *
 * Un `<span>`, nu `<title>` din SVG: pe acela browserul il arata dupa o secunda,
 * cu fontul lui, in afara temei.
 */
.bil-sfat {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	white-space: nowrap;
	padding: 5px 9px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 6px 18px rgb(0 0 0 / .28);
}

/* Nodul peste care sta mouse-ul iese in fata cu un contur, nu prin culoare:
   o panglica mai aprinsa ar fi parut ca are alta valoare. */
.bil-grup.is-peste .bil-nod { stroke: var(--text); stroke-width: 1.5; }
.bil-grup.is-peste .bil-panglica { filter: brightness(1.12); }

/* ── Legenda care stinge ─────────────────────────────────────────────────
 *
 * Clic pe o cheie = arata-mi doar fluxul ala. Restul palesc, dar NU dispar si
 * nimic nu se rescaleaza: la un Sankey, scoaterea unui nod strica bilantul,
 * iar procentele ramase ar spune altceva decat s-a intamplat. Vezi nota din
 * `js/widgets/bilant.js`.
 *
 * Se pot aprinde mai multe deodata; al doilea clic pe aceeasi cheie o stinge.
 */
.bil-legenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
}

.bil-cheie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
}

.bil-cheie:hover { border-color: var(--muted); }
.bil-cheie[aria-pressed="true"] { border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* Cheile nealese palesc doar cat timp exista o alegere. Fara filtru, toate
   arata la fel — altfel ar parea ca jumatate din legenda e dezactivata. */
.bil-legenda.e-filtrat .bil-cheie[aria-pressed="false"] { opacity: .45; }

.bil-pastila { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Sageata desparte ce intra de ce iese. Decorativa, deci `aria-hidden` in HTML. */
.bil-sageata { color: var(--muted); font-size: 13px; padding: 0 2px; }

.bil-grup { transition: opacity .18s ease; }
.bil-grup.is-stins { opacity: .1; }

@media (prefers-reduced-motion: reduce) { .bil-grup { transition: none; } }
body[data-motion="off"] .bil-grup { transition: none; }

/* ── Debitul Dunarii ────────────────────────────────────────────────────────
 *
 * Culoarea e `--c-ape`, aceeasi cu a hidro-ului din mixul de productie, nu
 * accentul chihlimbariu al site-ului. Widgetul sta langa „Apa si productie
 * hidro" si vorbeste despre acelasi lucru; doua culori diferite pentru aceeasi
 * apa ar fi cerut cititorului sa le lege singur.
 */
.dun-rezumat { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.dun-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Cifrele nu se inghesuie si nu se intind: `auto-fit` cu un minim le pune pe
   patru coloane pe ecran lat si pe doua pe telefon, fara nicio interogare de
   media. */
.dun-cifre {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
	gap: 10px 18px;
	margin-bottom: 14px;
}

.dun-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dun-et {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--muted);
}

.dun-val { font-size: 13px; font-variant-numeric: tabular-nums; }
.dun-val b { font-size: 19px; font-weight: 700; }
.dun-val small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* Verde si rosu, dar nu pentru „bine" si „rau". Pe un rau, mai multa apa
   inseamna mai multa energie posibila, si atat — nu e o veste buna in sine,
   fiindca prea multa apa e viitura. Culoarea spune doar in ce directie s-a
   miscat, ca sa se prinda dintr-o privire. */
.dun-val.e-sus b { color: var(--c-prod); }
.dun-val.e-jos b { color: var(--c-danger); }

/* Corpul e coloana, ca graficul sa poata lua ce ramane dupa text.
   Fara asta `.widget__body` e `display: block`, `flex: 1 1 auto` de mai jos nu
   inseamna nimic, iar desenul isi ia inaltimea din raportul lui `viewBox` — la
   1.155 px latime ieseau 347, si carcasa crestea la 486 peste inaltimea ceruta
   de 420. Masurat. */
.widget--dunare .widget__body,
.widget--lacuri .widget__body {
	flex: none;
	height: var(--wh, 500px);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.dun-grafic { flex: 1 1 auto; min-height: 140px; display: flex; }

/* Fara `preserveAspectRatio="none"`: ar intinde si textul, si punctul de pe
   linie. Cu potrivirea implicita desenul intra intreg in caseta, centrat, si nu
   se deformeaza niciodata — cel mult ramane putin aer sus si jos pe o carcasa
   mai inalta decat raportul lui. */
.dun-grafic svg { display: block; width: 100%; height: 100%; }

.dun-linie {
	fill: none;
	stroke: var(--c-ape);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	/* Grosimea nu se schimba cu scara: `viewBox` se intinde pe latimea
	   widgetului, si fara asta linia s-ar ingrosa pe ecran lat. */
	vector-effect: non-scaling-stroke;
}

/* Prognoza: intrerupta si mai palida. Doua semne, nu unul — pe un ecran
   alb-negru sau pentru cine nu deosebeste culorile, linia punctata ramane. */
.dun-linie--prognoza {
	stroke-dasharray: 5 5;
	opacity: .55;
	vector-effect: non-scaling-stroke;
}

.dun-normal {
	stroke: var(--muted);
	stroke-width: 1.2;
	stroke-dasharray: 3 4;
	opacity: .8;
	vector-effect: non-scaling-stroke;
}

.dun-normal-et {
	font-size: 15px;
	fill: var(--muted);
}

.dun-punct {
	fill: var(--c-ape);
	stroke: var(--surface);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.dun-zi { font-size: 15px; fill: var(--muted); }

/* Rezerva din lacuri (`js/widgets/lacuri.js`): banda anilor dinainte, mediana lor si anul trecut, sub linia anului in
   curs. Restul desenului e al Dunarii, ca sa arate la fel. Linia anului trecut, doar subtire si fara culoare: reper. */
.lac-banda { fill: var(--c-ape); opacity: .13; }
.lac-reper { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Punctele de pe mediană și de pe marginile benzii, la săptămâna de sub cursor. */
.dun-marca.lac-marca { fill: var(--surface); stroke: var(--c-ape); stroke-width: 1.5; }
.lac-mediana {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.3;
	stroke-dasharray: 3 4;
	vector-effect: non-scaling-stroke;
}
.lac-trecut {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.4;
	opacity: .7;
	vector-effect: non-scaling-stroke;
}
/* Marginea negativă e cât padding-ul butonului, ca prima serie să rămână aliniată cu textul de deasupra. */
.lac-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 8px 0 0 -8px; font-size: 12px; color: var(--muted); }
.lac-leg button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 6px;
	transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.lac-leg button:hover { background: var(--surface-2); color: var(--text); }
.lac-leg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Ștearsă și tăiată, dar tot acolo: trebuie să se vadă că se poate aprinde la loc. */
.lac-leg button[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.lac-leg__sfat { margin-left: auto; padding-left: 8px; font-size: 11px; opacity: .75; }
[data-snapshot-stage] .lac-leg__sfat { display: none; }

@media (pointer: coarse) {
	/* Sub deget, 18 px înălțime înseamnă să nimerești alături. */
	.lac-leg button { padding: 7px 8px; }
}

.lac-leg i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--muted); }
.lac-leg .e-an { border-top: 3px solid var(--c-ape); }
.lac-leg .e-mediana { border-top-style: dotted; }
.lac-leg .e-banda { height: 10px; border: 0; border-radius: 2px; background: var(--c-ape); opacity: .22; }

/* Firul si punctul stau ascunse pana e atinsa ziua lor. `pointer-events: none`
   pe ele, ca sa nu fure atingerea de la dreptunghiul care o asteapta. */
.dun-zona { cursor: crosshair; }

.dun-ghid,
.dun-marca {
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;
}

.dun-zona:hover .dun-ghid,
.dun-zona:hover .dun-marca { opacity: 1; }

.dun-ghid {
	stroke: var(--muted);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	vector-effect: non-scaling-stroke;
}

.dun-marca {
	fill: var(--c-ape);
	stroke: var(--surface);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
	.dun-ghid, .dun-marca { transition: none; }
}

@media (max-width: 620px) {
	/* Sankey-ul are nevoie de MAI MULTA inaltime pe telefon, nu de mai putina.
	   Panglicile isi impart inaltimea intre ele si mai lasa un sfert din ea gol,
	   ca sa se vada ca sunt benzi deosebite; pe o caseta scunda, nodurile mici
	   ajung linii. Nota de deasupra se rupe si ea pe patru randuri. */
	.widget--bilant .widget__body { height: auto; }
	.bil-cutie { min-height: 330px; }

	/* Pe telefon cifrele trec pe doua randuri si nota se rupe in patru — o
	   inaltime fixa ori taie nota, ori lasa gol sub grafic. O da continutul. */
	.widget--dunare .widget__body,
	.widget--lacuri .widget__body { height: auto; }

	/* Desenul e lat de trei ori cat e de inalt, deci pe 321 px iese 96. Cu
	   podeaua de 140 de pe ecran lat ar fi ramas o banda goala sus si jos. */
	.dun-grafic { min-height: 104px; }
	/* Un an intreg, cu patru linii una peste alta, nu se citeste pe 104 px. */
	.widget--lacuri .dun-grafic { min-height: 210px; }

	.dun-val b { font-size: 17px; }
	.dun-normal-et { font-size: 19px; }
	.dun-zi { font-size: 19px; }
}

/* Clasamentul pe județe. Patruzeci și două de rânduri într-o listă care se
   derulează în interiorul widget-ului: pe pagină ar fi împins tot ce urmează cu
   un ecran și jumătate, iar ce urmează e nota care spune cum se citește. */
/* INALTIMEA CERUTA DIN PANOU CHIAR SE FOLOSESTE.
   Avea `max-height: 470px` scris de mana, deci setarea de inaltime nu facea
   nimic: pusa pe 900, lista tot se oprea la 470 si se derula inauntru. `--wh`
   ajunge la widget de la randare (vezi `View::widget()`), dar fiecare tip
   trebuie sa-l citeasca — pana acum tipul asta nu-l citea. */
.widget--prosumatori-judete .widget__body,
.widget--prosumatori-harta .widget__body {
	/* `flex: none` peste `.widget__body { flex: 1 }` de mai sus. Fara el,
	   carcasa creste sa incapa toate cele 42 de randuri si inaltimea ceruta e
	   ignorata din nou — masurat: 1.048 px cu `--wh: 900px`. */
	flex: none;
	height: var(--wh, 640px);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* PE ECRAN INGUST, INALTIMEA CERUTA NU MAI ARE SENS PENTRU HARTA.
 *
 * Romania e mai lata decat inalta, deci desenul se opreste la latime. Pe un
 * telefon de 375 px, harta iese 321 × 230 — dar caseta ramanea la inaltimea
 * ceruta din panou si widgetul ajungea 1.056 px, cu peste trei sute goi sub
 * hartă. Masurat.
 *
 * Aici inaltimea o da desenul: caseta se stramteaza pana la cat ii trebuie
 * hartii, iar setarea din panou ramane un PLAFON, nu o comanda. Pe ecran lat,
 * unde inaltimea chiar e limita, nu se schimba nimic. */
@media (max-width: 720px) {
	.widget--prosumatori-harta .widget__body {
		/* Nici plafon, nici podea: inaltimea o da ce e inauntru.
		   `max-height` a fost scos cand harta s-a micsorat la 700 px — panoul cu
		   soarele nu mai sta in coltul liber pe telefon, ci se aseaza deasupra
		   hartii, si atunci continutul cere 779 px. Masurat pe 375 px latime.
		   Plafonul taia ultimele doua note, exact cele care spun cum se citeste
		   harta. */
		height: auto;
	}

	/* Mai jos exista o regula, la 620 px, care punea `min-height: var(--wh)` —
	   adica readucea exact inaltimea pe care o scoatem aici, si venea dupa, deci
	   castiga. A fost scoasa: cele doua se anulau, si ramanea gol sub harta. */

	.pro-harta {
		/* `flex: none` peste `1 1 auto` de mai sus: altfel harta creste sa umple
		   caseta si `aspect-ratio` nu apuca sa-i dea inaltimea. Verificat —
		   fara asta, corpul ramanea la 820 px si desenul plutea in mijloc. */
		flex: none;
		min-height: 0;
		/* Cat tine desenul, nici un pixel mai mult. Raportul e al lui `viewBox`,
		   cu marginea cu tot: (1000 + 48 × 2) / (710 + 48 × 2). Daca `MARGINE`
		   din `js/widgets/prosumatori.js` se schimba, se schimba si aici. */
		aspect-ratio: 1096 / 806;
	}

	.pro-harta svg { height: 100%; width: 100%; }
}

/* Lista ia tot ce ramane dupa rezumat, comutator si nota. `min-height: 0` e
   obligatoriu: fara el, un copil de flex nu se micsoreaza sub continutul lui,
   iar `overflow` n-ar mai avea ce sa taie. */
.pro-judete {
	display: grid;
	gap: 3px;
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	padding-right: 4px;
}

.pro-judet {
	display: grid;
	grid-template-columns: 22px 108px minmax(0, 1fr) 74px 46px;
	gap: 10px;
	align-items: center;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.pro-judet__nume { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-judet__mw { text-align: right; font-weight: 600; }
.pro-judet__mw small { font-weight: 400; color: var(--muted); }
.pro-judet__pct { text-align: right; color: var(--muted); }
.pro-judet__mwh { text-align: right; color: var(--muted); font-size: 11.5px; }

@media (max-width: 620px) {
	.pro-judet { grid-template-columns: 20px 88px minmax(0, 1fr) 62px; }
	.pro-judet__pct { display: none; }
	.pro-judet__mwh { display: none; }
	.pro-rand { grid-template-columns: 24px minmax(0, 1fr) 48px; }
	.pro-rand__mw { display: none; }
	.pro-cifra.is-mare .pro-cifra__val { font-size: 28px; }
}

/* ── „Cât de pline sunt interconexiunile" ────────────────────────────────── */

/* Bara arată OCUPAREA, nu fluxul. O graniță de 177 MW plină contează mai mult
   decât una de 400 MW pe jumătate goală, iar o bară proporțională cu MW-ii ar fi
   arătat exact pe dos. */
.cong-rezumat { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.cong-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

.cong { display: flex; flex-direction: column; min-height: var(--wh, 0px); }
.cong-lista { display: grid; gap: 6px; flex: 1 1 auto; grid-auto-rows: 1fr; }

.cong-rand {
	display: grid;
	grid-template-columns: 84px 54px minmax(0, 1fr) 150px 46px;
	gap: 10px;
	align-items: center;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.cong-tara { font-weight: 600; }
.cong-sens { color: var(--muted); font-size: 11.5px; }
.cong-cifre { text-align: right; }
.cong-cifre small { color: var(--muted); font-weight: 400; }
.cong-din { color: var(--muted); margin-left: 4px; }
.cong-pct { text-align: right; font-weight: 700; }

.cong-bara {
	position: relative;
	height: clamp(10px, 50%, 26px);
	border-radius: 999px;
	background: var(--surface-2);
	overflow: hidden;
}

.cong-bara__umplut { display: block; height: 100%; border-radius: 999px; background: currentColor; }

/* Pragurile din `Mon\Congestie`: peste 90% linia e practic plină — ultimele
   procente sunt marja dispecerului, nu capacitate de vânzare. */
.cong-rand.is-liber    .cong-bara__umplut { color: var(--c-prod, #4caf7d); }
.cong-rand.is-incarcat .cong-bara__umplut { color: var(--c-warn, #d19a2a); }
.cong-rand.is-plin     .cong-bara__umplut { color: var(--c-danger, #d9534f); }
.cong-rand.is-plin .cong-pct { color: var(--c-danger, #d9534f); }

/* Granița pe care trece tranzit: fluxul măsurat e mult peste ce s-a oferit
   pieței, deci procentul nu înseamnă „cât de plină e". Bara nu se colorează în
   roșu — ar spune „infundată", când de fapt spune „altă întrebare". Dungile o
   deosebesc dintr-o privire de o bară care chiar măsoară ceva. */
.cong-rand.is-tranzit .cong-bara__umplut {
	color: var(--muted);
	background: repeating-linear-gradient(
		135deg,
		currentColor 0 4px,
		transparent 4px 8px
	);
	opacity: .55;
}

.cong-rand.is-tranzit .cong-pct { color: var(--muted); font-weight: 400; }

/* Cât trece fizic prin fir, scris lângă programare doar când diferă mult. Pe
   rândul îngust de pe telefon trece dedesubt, nu îngustează cifrele. */
.cong-fir {
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 400;
	margin-left: 6px;
	white-space: nowrap;
}

/* Explicația tranzitului, sub verdict: aceeași familie cu rezumatul, dar mai
   ștearsă — e o notă, nu o a doua știre. */
.cong-rezumat--nota {
	margin-top: -6px;
	color: var(--muted);
	font-size: 12.5px;
}
@media (max-width: 640px) {
	.cong-rand { grid-template-columns: 76px minmax(0, 1fr) 46px; row-gap: 2px; }
	.cong-sens { grid-column: 1; font-size: 11px; }
	.cong-cifre { grid-column: 2 / -1; text-align: left; font-size: 11.5px; }
}

/* ── „Cât costă echilibrarea (aFRR)" ─────────────────────────────────────── */

/* Două carduri, nu un grafic. Sunt două cifre care se compară între ele — sus
   față de jos — nu o serie în timp. Un grafic ar fi cerut o axă și ar fi ascuns
   exact contrastul. */
.ech-rezumat { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.ech-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

.ech-perechi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 10px;
}

.ech-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-radius: var(--radius-sm, 10px);
	background: var(--surface-2);
}

.ech-card.is-sus { border-left-color: var(--c-danger, #d9534f); }
.ech-card.is-jos { border-left-color: var(--c-prod, #4caf7d); }

.ech-card__eticheta { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ech-card__cifra { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ech-card__cifra small { font-size: 12px; font-weight: 400; color: var(--muted); }
.ech-card__sub { font-size: 12px; color: var(--muted); }
.ech-card__extrem { margin-top: 2px; font-size: 12px; font-weight: 600; }
.ech-card.is-sus .ech-card__extrem { color: var(--c-danger, #d9534f); }
.ech-card.is-jos .ech-card__extrem { color: var(--c-prod, #4caf7d); }

/* ── Accesibilitate ──────────────────────────────────────────────────────── */

.a11y-buton {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-2);
	color: var(--muted);
	transition: color .2s var(--ease), background-color .2s var(--ease);
}

.a11y-buton:hover,
.a11y-buton[aria-expanded="true"] { color: var(--text); background: var(--surface); }

/* Panoul atârnă de buton, nu de colțul ecranului: la 150% zoom un panou ancorat
   în colț ar fi ajuns în afara ferestrei. */
.a11y-panou {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	width: min(300px, calc(100vw - 24px));
	display: grid;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm, 12px);
	background: var(--surface);
	box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.28));
}

.head-tools { position: relative; }

.a11y-eticheta { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }

.a11y-marimi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

.a11y-marimi button {
	padding: 8px 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-2);
	color: var(--muted);
	line-height: 1;
}

.a11y-marimi button[aria-checked="true"] {
	color: var(--text);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.a11y-optiune {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 9px;
	align-items: start;
	cursor: pointer;
}

.a11y-optiune input { margin-top: 2px; }
.a11y-optiune b { display: block; font-size: 13px; font-weight: 600; }
.a11y-optiune small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.a11y-reset {
	margin-top: 2px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-size: 12px;
}

.a11y-reset:hover { color: var(--text); background: var(--surface-2); }

/* ── ce fac efectiv comutatoarele ────────────────────────────────────────── */

/* Contrast. Nu inversăm culorile — se rescriu doar variabilele de text și
   linie, deci tema rămâne cea aleasă și doar devine mai lizibilă. */
:root[data-a11ycontrast="1"] {
	--muted: var(--text);
	--line: color-mix(in srgb, var(--text) 42%, transparent);
}

:root[data-a11ycontrast="1"] .widget,
:root[data-a11ycontrast="1"] .card { border-color: var(--line); }

/* Oprirea mișcării. Aceleași reguli ca la `prefers-reduced-motion`, dar cerute
   explicit: cine are nevoie nu are întotdeauna setarea pusă în sistem. */
:root[data-a11ymotion="1"] *,
:root[data-a11ymotion="1"] *::before,
:root[data-a11ymotion="1"] *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	scroll-behavior: auto !important;
}

/* Legături vizibile fără culoare — WCAG 1.4.1: informația nu trebuie transmisă
   doar prin culoare. */
:root[data-a11yunderline="1"] a:not(.btn):not(.tab):not(.brand) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Spațierea textului — WCAG 1.4.12. Se aplică doar pe text curgător: pe tabele
   și pe cifrele din widgeturi ar rupe alinierea coloanelor. */
:root[data-a11yspacing="1"] p,
:root[data-a11yspacing="1"] li,
:root[data-a11yspacing="1"] .widget__sub,
:root[data-a11yspacing="1"] .admin-bar__hint {
	line-height: 1.85 !important;
	letter-spacing: .045em;
	word-spacing: .14em;
}

/* ── Uneltele pe rândul meniului ─────────────────────────────────────────── */

/* Limba, accesibilitatea și tema au trecut din rândul de sus pe cel al
   meniului. Rândul de sus era plin — siglă, ora citirii, vremea — și la 1280px
   se înghesuiau, iar mai jos se rupeau pe două rânduri. Meniul are nouă intrări
   și se termină pe la jumătate, deci acolo era loc chiar lângă ele. */
/* Uneltele stau ÎNĂUNTRUL meniului, ca ultim copil.
   Nu e o scurtătură — e singurul fel de a avea un singur exemplar în două
   așezări complet diferite. Pe ecran lat `.site-nav` e un rând flex și
   `margin-left:auto` le împinge la dreapta, lângă meniu. Pe telefon același
   `.site-nav` devine sertar, deci uneltele intră în el fără nicio regulă în
   plus și fără al doilea set de butoane în pagină. CSS-ul nu poate muta un
   element dintr-un container în altul; poziția în DOM trebuie să servească
   ambele cazuri. */
.site-nav { flex: 1 1 auto; min-width: 0; }

.nav-tools {
	position: relative;          /* ancorează panoul de accesibilitate */
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

/* Între 660px (unde meniul intră în sertar) și 900px rândul de jos e încă
   vizibil, dar aproape gol: doar uneltele. Le împingem la dreapta, sub
   hamburger, nu agățate în stânga sub siglă. */
@media (max-width: 900px) {
	.site-head__bottom { justify-content: flex-end; padding-top: 4px; padding-bottom: 8px; }
	.nav-tools { gap: 8px; }
}

/* ── Uneltele urcă în golul dintre siglă și hamburger ────────────────────── */

/* PE TELEFON NU E LOC PE UN RÂND NOU, dar e loc pe cel de sus: sigla ocupă
   stânga, hamburgerul dreapta, iar între ele rămâne un gol de vreo 160px care
   nu face nimic. Acolo urcă uneltele.
   Se face din poziționare, nu mutându-le în DOM: în alt container nu pot fi
   decât duplicându-le, iar panoul de accesibilitate se leagă de un `id` unic.
   Ancora e `.site-head__inner`, care le e deja părinte comun.

   Sub 340px se renunță: acolo golul chiar nu există, iar suprapunerea peste
   siglă ar fi mai rea decât un rând în plus. */
@media (min-width: 340px) and (max-width: 660px) {
	/* ANCORA E `.site-head`, care e deja `position: sticky` — adică deja un
	   context de poziționare. Nu facem `.site-head__inner` relativ: sertarul
	   meniului se poziționează cu `top: 100%`, iar mutarea contextului i-ar fi
	   schimbat locul de deschidere. O ancoră nouă acolo unde deja există una e
	   felul în care se strică lucruri care mergeau. */
	.nav-tools {
		position: absolute;
        top: 0px;
        right: 60px;
        height: 58px;
        gap: 6px;
	}

	/* Compactare: 212px nu încap în 164. Se taie din spații, nu din suprafața
	   de atins — fiecare buton rămâne peste 24px pe latura mică, sub care
	   degetul greșește ținta. */
	.nav-tools .lang-switch { padding: 2px; font-size: 10.5px; }
	.nav-tools .lang-switch > * { min-width: 26px; height: 24px; }

	.nav-tools .a11y-buton { width: 28px; height: 28px; border-radius: 8px; }
	.nav-tools .a11y-buton svg { width: 15px; height: 15px; }

	/* Toate trei butoanele rămân, ca pe desktop. Doar se micșorează.
	   Le-am tăiat de două ori ca să câștig lățime — o dată „deschis", o dată
	   „după sistem" — și de fiecare dată era o economie pe seama unei opțiuni
	   care se folosește. Locul se găsește din spații, nu din opțiuni. */
	.nav-tools .theme-switch { padding: 2px; }
	.nav-tools .theme-switch button { width: 26px; height: 24px; }
	.nav-tools .theme-switch__thumb {
		top: 2px; left: 2px;
		width: 26px; height: 24px;
		transform: translateX(calc(var(--thumb-index, 1) * 26px));
	}

	/* Sigla cedează puțin, ca grupul să încapă și pe ecrane de 375px. Textul
	   rămâne întreg — se micșorează, nu se taie. */
	/* SIGLA PE DOUĂ RÂNDURI: „Monitor" sus, „Energie" dedesubt.
	   Pe un rând ocupă vreo 150px din cei 375 ai unui telefon, doar ca să lase
	   uneltele fără loc. Pe două rânduri scade la ~70px și rămâne la fel de
	   lizibilă — antetul are oricum înălțimea dată de siglă și de hamburger.

	   Ruperea se face din `max-width`, nu dintr-un `<br>` în HTML: pe ecran lat
	   textul trebuie să rămână pe un rând, iar un `<br>` ar fi rupt și acolo.
	   Lățimea e sub cea a cuvântului „Monitor" plus spațiu, deci rândul se taie
	   exact la spațiu — singurul loc unde poate. */
	.brand__text {
		display: block;
		/* `.brand` are `white-space: nowrap`, care se moștenește aici. Fără
		   anularea lui, `max-width` n-are ce rupe: textul doar iese din casetă,
		   iar rândul rămâne unul singur. Asta era, nu JS-ul. */
		white-space: normal;
		max-width: 72px;
		/* Majuscule doar pe telefon. Cu numele pe două rânduri, versalele leagă
		   cele două cuvinte într-un bloc — se citesc ca un logo, nu ca o frază
		   ruptă la jumătate. Pe desktop numele stă pe un rând și n-are nevoie.
		   `letter-spacing` compensează: majusculele stau prea strâns una-n alta
		   la corpul ăsta. */
		text-transform: uppercase;
		letter-spacing: .02em;
		font-size: 13.5px;
		line-height: 1.12;
	}

	.brand__text small { display: none; }
}

/* La 150% zoom un panou aliniat la dreapta poate ieși din ecran; îl ancorăm de
   marginea din dreapta a ferestrei, nu a butonului. */
@media (max-width: 560px) {
	.a11y-panou { right: 0; left: auto; }
}

/* ── Widgetul care încă nu e tradus ──────────────────────────────────────────
   Carcasa stă nevăzută între clipa în care widgetul și-a scris conținutul
   românește și clipa în care traducerea a terminat cu ea. Marcajul îl pune și
   îl scoate `deseneaza()` din `js/lib/board.js`, care știe exact când e gata —
   nu un cronometru care ghicește.

   `visibility`, nu `display` și nu `filter`: locul rămâne ocupat, deci pânzele
   graficelor își măsoară corect dimensiunile și nimic nu sare când apare
   conținutul. Fără tranziție și fără animație — o animație nu avansează
   într-un tab nedesenat, iar aici trebuie să meargă de fiecare dată. */
[data-widget-body][data-netradus] {
	visibility: hidden;
}


/* ── Fereastra „pune graficul la tine" ──────────────────────────────────────
 *
 * `<dialog>` nativ: Escape, focus prins inauntru si fundal inert vin de la sine.
 */
.embed-dlg {
	width: min(560px, calc(100vw - 32px));
	padding: 22px 24px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 24px 60px rgb(0 0 0 / .28);
}

.embed-dlg::backdrop { background: rgb(0 0 0 / .5); }

.embed-dlg__x { display: flex; justify-content: flex-end; margin: -8px -8px 0 0; }

.embed-dlg h2 { margin: 0 0 6px; font-size: 19px; }

.embed-dlg__lead { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.embed-dlg__rand { margin-bottom: 16px; }

.embed-dlg__select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-2);
	color: var(--text);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.embed-dlg__select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.embed-dlg__eticheta {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}

.embed-dlg__cod {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-2);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.55;
	resize: vertical;
}

.embed-dlg__jos { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

.embed-dlg__nota { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

@media (max-width: 520px) {
	.embed-dlg { padding: 18px 16px 16px; }
	.embed-dlg__jos { flex-wrap: wrap; }
}


/* Tinta de hover peste o coloana intreaga de grafic.
   Transparenta, dar nu `visibility: hidden` — aia n-ar mai primi evenimente.
   Sta ultima in SVG, deci deasupra barelor, si le preia hoverul: la orele de
   noapte bara are cativa pixeli si n-ai cum s-o nimeresti. */
.pro-tinta {
	fill: transparent;
	cursor: help;
}


/* ── Colțul cu soarele, peste hartă ─────────────────────────────────────────
 *
 * Stă în golul din dreapta sus al hărții — România lasă acolo un triunghi liber
 * cât un sfert din casetă, iar cifrele care explică harta n-aveau unde sta.
 *
 * `position: absolute` peste hartă, nu alături: mutate lângă, ar fi îngustat
 * desenul cu o treime pe ecran lat, exact lucrul pe care tocmai l-am reparat.
 */
/* Zona care tine harta si panoul. Exista ca panoul sa aiba fata de ce sa se
   aseze, fara sa intre in cutia hartii — acolo ar fi fost frate de flex cu
   desenul si l-ar fi strans la jumatate pe ecran ingust. Masurat: harta cadea
   de la 321 la 149 px. */
/* HARTA SI PANOUL STAU ALATURI, nu unul peste altul.
 *
 * Panoul plutea inainte in coltul din dreapta sus, `position: absolute`, si
 * ideea era ca acolo oricum nu e nimic — deasupra Dobrogei incepe marea. Numai
 * ca „acolo nu e nimic" tine doar la o anumita marime: cand harta creste, sau
 * cand panoul primeste un rand in plus, coltul lui de jos intra peste nord-est.
 * Si intra pe nesimtite, fiindca fundalul e translucid.
 *
 * Doua coloane nu se pot suprapune, oricat ar creste una sau alta. Harta ia ce
 * ramane si se aseaza in mijlocul ei. */
.pro-harta-zona {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 16px;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

.pro-soare {
	/* La dreapta hartii, desi in HTML vine inaintea ei. Ordinea din pagina o
	   aude cine foloseste un cititor de ecran, si acolo rezumatul intai, harta
	   dupa, e ordinea buna: afli cifra si abia apoi desenul. `order` schimba doar
	   ce vede ochiul. */
	order: 2;
	/* `flex: none` cu latime fixa: panoul are cifre, iar cifrele nu trebuie sa
	   se mute cand harta se redeseneaza. Harta ia restul. */
	flex: 0 0 264px;
	/* Sus, nu intins pe toata inaltimea: sub el harta are loc sa respire. */
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	/* `--surface-2`, plin, ca orice alt panou ridicat de pe site. Era
	   translucid cu `backdrop-filter`, si avea de ce: statea peste harta si un
	   dreptunghi opac ar fi taiat-o in colt. Acum nu mai sta peste nimic, deci
	   nici nu mai are ce lasa sa se vada prin el — iar un fundal transparent
	   peste fundalul carcasei nu era o culoare, era o ceata. */
	background: var(--surface-2);
}

.pro-soare__cap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.pro-soare__acum { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* Cifra si unitatea pe ACELASI rand. Erau doua elemente de bloc unul sub
   altul, deci „538" ramanea sus si „MW" cadea dedesubt — o cifra fara unitate
   si o unitate fara cifra. */
.pro-soare__mare {
	display: flex;
	align-items: baseline;
	gap: 5px;
	line-height: 1.05;
	white-space: nowrap;
}

.pro-soare__mare b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pro-soare__mare small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pro-soare__acum i { font-style: normal; font-size: 11px; color: var(--muted); }

/* ── Soarele ─────────────────────────────────────────────────────────────────
 *
 * Discul crește și se aprinde cu `--sus`, care e înălțimea soarelui pe cer
 * împărțită la 65°. Nu e podoabă: la 60° panourile primesc de aproape două ori
 * cât la 30°, iar desenul spune asta fără să scrie nimeni o frază.
 */
.pro-soare__astru {
	/* Marimea iconitei sta intr-o singura variabila, iar tot ce e inauntru se
	   masoara in ea. Asa se schimba dintr-un singur numar, fara sa ramana o
	   bucata la vechea scara — cum s-ar fi intamplat cu cinci valori in pixeli
	   scrise separat. */
	--astru: 76px;

	position: relative;
	flex: none;
	width: var(--astru);
	height: var(--astru);
	display: grid;
	place-items: center;
}

.pro-soare__disc {
	/* Intre 38% si 58% din caseta, dupa cat de sus e soarele. */
	width: calc(var(--astru) * (.38 + var(--sus, 0) * .2));
	height: calc(var(--astru) * (.38 + var(--sus, 0) * .2));
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 calc(var(--astru) * (.08 + var(--sus, 0) * .26))
		color-mix(in srgb, var(--accent) calc(30% + var(--sus, 0) * 50%), transparent);
	animation: pro-soare-puls 4.5s ease-in-out infinite;
}

/* Razele: opt spițe făcute dintr-un gradient repetat, care se rotesc încet.
   `repeating-conic-gradient` în loc de opt elemente — aceeași imagine, un nod. */
.pro-soare__raze {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from 0deg,
		color-mix(in srgb, var(--accent) calc(18% + var(--sus, 0) * 46%), transparent) 0deg 5deg,
		transparent 5deg 45deg);
	/* Gaura din mijloc, ca spițele să pornească de lângă disc, nu din centru. */
	mask: radial-gradient(circle, transparent 42%, #000 46%);
	animation: pro-soare-rotire 26s linear infinite;
	opacity: calc(.25 + var(--sus, 0) * .75);
}

@keyframes pro-soare-rotire { to { transform: rotate(360deg); } }

@keyframes pro-soare-puls {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.07); }
}

/* ── Norii ───────────────────────────────────────────────────────────────────
 *
 * Doi, unul peste altul. Cât se văd vine gata socotit din JS, în `--nor` și
 * `--nor-doi` — acolo stau și pragurile, cu explicația lor. Nu apar și dispar
 * brusc: cresc pe măsură ce cerul se acoperă, exact ca lucrul pe care îl arată.
 *
 * Peste 70% seninătate nu se vede niciunul. Opacitatea era `1 − senin`, adică
 * se stingea abia la 100% — iar pe o țară întreagă indicele nu ajunge acolo
 * aproape niciodată, deci iconița avea nori și pe cer curat.
 *
 * Făcuți din trei cercuri suprapuse (`radial-gradient`), nu dintr-un SVG:
 * la treizeci de pixeli, forma nu se vede oricum, dar silueta da.
 */
.pro-soare__nor {
	position: absolute;
	left: calc(var(--astru) * .06);
	bottom: calc(var(--astru) * .2);
	width: calc(var(--astru) * .76);
	height: calc(var(--astru) * .35);
	border-radius: 999px;
	background:
		radial-gradient(circle at 22% 68%, currentColor 46%, transparent 47%),
		radial-gradient(circle at 52% 34%, currentColor 52%, transparent 53%),
		radial-gradient(circle at 80% 66%, currentColor 42%, transparent 43%),
		linear-gradient(currentColor, currentColor) bottom / 100% 52% no-repeat;
	color: color-mix(in srgb, var(--text) 62%, var(--surface));
	opacity: var(--nor, 0);
	animation: pro-nor-plutire 9s ease-in-out infinite;
}

.pro-soare__nor--doi {
	left: calc(var(--astru) * .2);
	bottom: calc(var(--astru) * .38);
	width: calc(var(--astru) * .59);
	height: calc(var(--astru) * .26);
	color: color-mix(in srgb, var(--text) 38%, var(--surface));
	opacity: var(--nor-doi, 0);
	animation-duration: 13s;
	animation-direction: reverse;
}

@keyframes pro-nor-plutire {
	0%, 100% { transform: translateX(-4%); }
	50%      { transform: translateX(4%); }
}

/* Cerul acoperit stinge soarele, nu-l acopera doar. Razele se retrag primele —
   asa se vede si pe cer: intai dispar umbrele ascutite, apoi lumina. */
.pro-soare__astru.e-acoperit .pro-soare__raze { display: none; }
.pro-soare__astru.e-acoperit .pro-soare__disc { animation-duration: 7s; }

.pro-soare__astru.e-parțial .pro-soare__raze { opacity: calc(.15 + var(--sus, 0) * .35); }

/* ── Luna ────────────────────────────────────────────────────────────────────
 *
 * Noaptea, în locul soarelui. Aici a fost până acum discul înmuiat în gri —
 * corect ca „nu se mai produce", dar un cerc gri nu spune nimic, iar un colț
 * gol ar fi arătat a widget care n-a apucat să se încarce.
 *
 * Forma vine din `prosumatori.js`, cu faza chiar de azi. Discul palid de
 * dedesubt e partea neluminată: fără el, o seceră subțire ar lăsa iconița
 * aproape goală trei nopți pe lună.
 *
 * Culorile ies din `--text` amestecat cu fundalul, nu din `--accent`: luna nu e
 * chihlimbarie, iar amestecul ține și în tema deschisă, și în cea întunecată.
 */
.pro-soare__luna {
	position: absolute;
	width: calc(var(--astru) * .52);
	height: calc(var(--astru) * .52);
	overflow: visible;
	filter: drop-shadow(0 0 calc(var(--astru) * .1)
		color-mix(in srgb, var(--text) 22%, transparent));
}

.pro-soare__luna-umbra  { fill: color-mix(in srgb, var(--text) 14%, var(--surface)); }
.pro-soare__luna-lumina { fill: color-mix(in srgb, var(--text) 62%, var(--surface)); }

/* Discul soarelui se dă la o parte de tot: îi ia locul luna. */
.pro-soare__astru.e-noapte .pro-soare__disc,
.pro-soare__astru.e-noapte .pro-soare__raze,
.pro-soare__astru.e-noapte .pro-soare__nor { display: none; }

/* ── Rândurile ───────────────────────────────────────────────────────────── */
/* Eticheta deasupra, valoarea dedesubt — nu una langa alta.
   Pe o coloana de o suta saptezeci de pixeli, doua bucati de text pe acelasi
   rand se despart oricum, iar cine citeste nu mai stie care e a carei. */
.pro-soare__rand {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.pro-soare__et {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--muted);
}

.pro-soare__val {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	/* Se rupe pe randul urmator daca nu incape, in loc sa iasa din caseta. */
	overflow-wrap: anywhere;
}

.pro-soare__val small { font-weight: 500; font-size: 11px; color: var(--muted); }

body[data-motion="off"] .pro-soare__raze,
body[data-motion="off"] .pro-soare__nor,
body[data-motion="off"] .pro-soare__disc { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.pro-soare__raze, .pro-soare__nor, .pro-soare__disc { animation: none; }
}

/* Pe ecran îngust nu mai are peste ce sta: harta e deja cât lățimea. Coboară
   sub ea, pe două coloane, ca să nu întindă widgetul pe încă un ecran. */
@media (max-width: 720px) {
	/* Inapoi una sub alta: doua coloane pe 375 px ar da o harta de 100 px. */
	.pro-harta-zona { flex-direction: column; gap: 0; }

	.pro-soare {
		/* Pe o coloana, `order` ar coborî panoul sub hartă. Sus e locul lui:
		   cifra intai, desenul dupa. */
		order: 0;
		flex: none;
		align-self: stretch;
		margin-bottom: 8px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 14px;
	}

	.pro-soare__cap { grid-column: 1 / -1; }

	/* Zona nu mai are inaltime proprie: o da panoul plus harta. */
	.pro-harta-zona { flex: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cine plătește cel mai bine energia injectată — cele trei widget-uri POSF.

   DOUĂ CIFRE CARE NU TREBUIE CONFUNDATE, și de asta desenul le desparte apăsat:
   prețul pe care îl PLĂTEȘTI stă mic, în lista de detalii; cel pe care îl
   PRIMEȘTI stă mare, singur, cu accent. Puse la fel, ochiul le-ar citi ca pe
   aceeași măsurătoare făcută de două ori.

   Flex și Grid, fără nicio grilă de bibliotecă — vezi restul fișierului.
   ══════════════════════════════════════════════════════════════════════════ */

.pro-lamurire {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 3px solid var(--accent);
	background: var(--surface-2);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--text-2);
	font-size: .92rem;
	line-height: 1.5;
}

.pro-top {
	display: grid;
	gap: 10px;
	padding: 18px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.pro-top__eticheta {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

.pro-top__furnizor { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.pro-top__oferta   { color: var(--text-2); font-size: .95rem; margin-top: -6px; }

/* Cifra care contează: mare, singură, cu accent. */
.pro-top__cifra {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 0 4px;
	border-top: 1px solid var(--line);
}

.pro-top__val  { font-size: 2.4rem; font-weight: 800; color: var(--accent); line-height: 1; }
.pro-top__unit { color: var(--muted); font-size: .9rem; }

/* Detaliile: două coloane pe ecran larg, una pe telefon. Prețul plătit stă
   AICI, mic — nu lângă cel de sus, ca să nu se citească drept aceeași cifră. */
.pro-top__detalii {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0;
	font-size: .9rem;
}

.pro-top__detalii dt { color: var(--muted); }
.pro-top__detalii dd { margin: 0; font-variant-numeric: tabular-nums; }

.pro-top__formula {
	margin: 6px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--line);
	color: var(--text-2);
	font-size: .86rem;
}

.pro-podium { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }

.pro-podium__loc {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.pro-podium__furnizor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-podium__pret     { font-weight: 700; font-variant-numeric: tabular-nums; }

.pro-sursa { margin: 12px 0 0; color: var(--muted); font-size: .82rem; }

/* ── calculatorul ──────────────────────────────────────────────────────── */

.pro-calc { display: grid; gap: 12px; }

.pro-calc__ctrl {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .95rem;
}

.pro-calc__ctrl input { width: 7.5rem; }

.pro-calc__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.pro-calc__rand {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 12px;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
}

.pro-calc__furnizor { min-width: 0; display: grid; gap: 1px; }
.pro-calc__furnizor > small,
.pro-calc__oferta { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-calc__suma     { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pro-calc__nota     { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* ── tabelul ───────────────────────────────────────────────────────────── */

.pro-tab__ctrl {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.pro-tab__ctrl input[type="search"] { flex: 1; min-width: 200px; }

/* Tabelul lat derulează în cutia lui, nu împinge pagina în lateral. */
.pro-tab__scroll { overflow-x: auto; }

.pro-tab { width: 100%; border-collapse: collapse; font-size: .88rem; }

.pro-tab th,
.pro-tab td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

.pro-tab th {
	position: sticky;
	top: 0;
	background: var(--surface);
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap;
}

.pro-tab th[data-sort] { cursor: pointer; user-select: none; }
.pro-tab th[data-sort]:hover { color: var(--text); }
.pro-tab th small { display: block; font-weight: 400; font-size: .76rem; opacity: .8; }

.pro-tab__nr  { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pro-tab__loc { color: var(--muted); }
.pro-tab__val { font-weight: 700; color: var(--accent); }
.pro-tab__semn { margin-left: 4px; cursor: help; opacity: .75; font-weight: 400; }

.pro-tab__furnizor { display: block; font-weight: 600; }
.pro-tab__oferta   { display: block; color: var(--muted); font-size: .82rem; }
.pro-tab__obs      { color: var(--text-2); font-size: .82rem; max-width: 30rem; }

.pro-tab__regional {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--surface-3, var(--surface-2));
	color: var(--muted);
	font-size: .74rem;
}

.pro-tab__gol  { padding: 20px; text-align: center; color: var(--muted); }
.pro-tab__nota { margin: 12px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }

@media (max-width: 640px) {
	.pro-top__detalii { grid-template-columns: 1fr; gap: 2px; }
	.pro-top__detalii dt { margin-top: 6px; }
	.pro-top__val { font-size: 1.9rem; }
}

/* ── Podiumul: primii trei, unul lângă altul ───────────────────────────────
   Coloanele se potrivesc după CÂȚI sunt, nu sunt mereu trei: cu doi furnizori
   care publică prețuri, o a treia coloană goală ar fi arătat a defect. */
.pro-podium-cards {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pro-podium-cards[data-cate="1"] { grid-template-columns: minmax(0, 420px); }

.pro-card {
	position: relative;
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 16px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* Locul întâi se vede că e locul întâi, fără să scrie nimeni asta. */
.pro-podium-cards > .pro-card:first-child {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
	box-shadow: var(--glow);
}

.pro-card__medalie { font-size: 1.5rem; line-height: 1; }

.pro-card .pro-top__val   { font-size: 1.85rem; }
.pro-card .pro-top__cifra { padding-top: 10px; }

.pro-card__link { margin: 4px 0 0; font-size: .82rem; }

/* ── ceilalți furnizori care plătesc ─────────────────────────────────────── */

.pro-restul { margin-top: 20px; }

/* Buton, nu un rând de text subliniat: e singurul lucru de sub podium pe care
   îl apeși, și trebuie să se vadă că se apasă. A rămas <summary>, deci
   browserul îi dă singur rolul, focusul și tastatura.

   PE TOATĂ LĂȚIMEA ȘI CU CULOAREA ACCENTULUI. Mic și gri, cât podiumul, trecea
   drept o notă de subsol, iar sub el stă răspunsul la „și al meu cât dă?",
   adică întrebarea cu care vin cei mai mulți. Centrat, cu cifra și săgeata
   lipite de text: pe toată lățimea, o săgeată împinsă în margine rămânea
   departe de ce deschide. */
.pro-restul__cap {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line-strong));
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	color: var(--text);
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: border-color .18s var(--ease), background .18s var(--ease);
}

/* Triunghiul implicit se scoate din două părți: `display` îl ascunde în Chrome
   și Safari, `list-style` în restul. */
.pro-restul__cap::-webkit-details-marker { display: none; }

.pro-restul__cap:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.pro-restul__cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pro-restul__cap::after {
	content: '▾';
	color: var(--accent);
	/* 13px, nu 11: în „Instrument Sans" triunghiul e subțire, iar la 11 arăta
	   ca o liniuță — adică a nimic, nu a ceva care se deschide. */
	font-size: 18px;
	line-height: 1;
	transition: transform .15s ease;
}

.pro-restul[open] > .pro-restul__cap { border-color: var(--accent); }
.pro-restul[open] > .pro-restul__cap::after { transform: rotate(180deg); }

/* Câți sunt, scris pe buton. Fără cifră, „vezi toate ofertele" poate ascunde
   doi furnizori sau douăzeci, iar omul nu știe dacă merită apăsat. */
.pro-restul__cate {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink, #1a1206);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pro-alt-lista { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.pro-alt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}

/* Locul în clasament, continuat de la podium: al patrulea chiar e al patrulea,
   nu „încă unul". */
.pro-alt__loc {
	flex: 0 0 auto;
	min-width: 26px;
	color: var(--muted);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* `min-width: 0` — fără el, numele lungi refuză să se strângă și împing prețul
   în afara rândului. */
.pro-alt__cine { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pro-alt__furnizor { font-weight: 700; font-size: 14.5px; }
.pro-alt__oferta { font-size: 13px; color: var(--text-2, var(--muted)); }
.pro-alt__cum { font-size: 12px; color: var(--muted); line-height: 1.5; }

.pro-alt__pret { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.pro-alt__pret strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.pro-alt__pret small { font-size: 11px; color: var(--muted); }

/* Titlul dinaintea ofertelor indexate. Nu e un rând de listă, e o despărțire:
   de aici în jos nu mai există cifre de comparat, iar dacă n-ar scrie asta,
   „variabil" în coloana prețului ar arăta a date lipsă. */
.pro-alt-titlu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px;
	padding: 10px 16px 4px;
	border-top: 1px dashed var(--line);
	font-size: 13px;
	font-weight: 700;
}

.pro-alt-titlu small { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.5; }

/* Rândurile indexate: aceeași cutie, dar fără accentul cifrei. Locul e o linie,
   nu un număr — într-un clasament pe prețuri, ce n-are preț n-are loc. */
.pro-alt.is-variabil .pro-alt__loc { color: var(--line-strong); font-weight: 400; }

.pro-alt__var {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-cons);
	text-transform: lowercase;
}

/* Formula, sub nume: la o ofertă fără cifră, ea E răspunsul — nu o notă de
   subsol. De-aia stă în rând, nu ascunsă mai adânc. */
/* Legătura către fișa furnizorului. La o ofertă fără cifră e chiar mai
   importantă decât la celelalte: formula din rând spune CUM se calculează, dar
   numai fișa lui dovedește că așa scrie. */
.pro-alt__link { margin-top: 4px; font-size: 12px; align-self: flex-start; }

.pro-alt__formula {
	margin-top: 4px;
	padding-left: 10px;
	border-left: 2px solid var(--line-strong);
	font-size: 12px;
	color: var(--text-2, var(--muted));
	line-height: 1.55;
}

/* Pe telefon prețul trece sub nume: la 360px, ținut pe același rând, numele
   ajungea la un cuvânt pe linie. */
@media (max-width: 560px) {
	.pro-alt { flex-wrap: wrap; gap: 8px 12px; }
	.pro-alt__pret { flex-direction: row; align-items: baseline; gap: 6px; margin-left: 40px; }
	.pro-restul__cap { padding: 14px 16px; font-size: 14.5px; }
}

@media (max-width: 720px) {
	.pro-podium-cards { grid-template-columns: 1fr; }
}

/* Rândurile fără preț rămân în listă — faptul că un furnizor nu spune e o
   informație despre el — dar se retrag vizual, ca ochiul să meargă la cele
   care au o cifră. */
.pro-tab__fara { opacity: .62; }
.pro-tab__fara .pro-tab__val { color: var(--muted); font-weight: 400; }

/* ── Tabelele care trebuie să respecte înălțimea pusă din panou ────────────
   `.widget__body` e `flex: 1` cu `min-height: 0`, dar asta nu ajunge singură:
   `display: block` din oficiu lasă conținutul să crească oricât, iar înălțimea
   aleasă în admin rămâne o sugestie pe care nimeni n-o citește — widgetul se
   întindea cât tabelul, cu toate cele 46 de rânduri.

   Cu corpul făcut coloană flexibilă și cutia de derulare pe `flex: 1`, tabelul
   derulează ÎN el. Antetul lipicios de mai sus abia acum are ce face: pana
   acum n-avea un container care sa deruleze, deci nu se lipea de nimic. */
.widget--oferte-pro-furnizori .pro-tab__scroll,
.widget--oferte-pro-tabel .pro-tab__scroll {
	/* INALTIMEA DIN PANOU AJUNGE CA `--wh`, dar nu se aplica de la sine:
	   fiecare tip de widget si-o foloseste singur. Al meu n-o folosea deloc,
	   deci tabelul crestea cat avea nevoie — sase mii de pixeli pentru
	   patruzeci si sase de randuri — iar cifra pusa in admin ramanea o
	   sugestie pe care n-o citea nimeni.

	   PE CUTIA CARE DERULEAZA, nu pe `.widget__body`: acolo `flex: 1` bate
	   inaltimea, fiindca intr-o coloana flexibila baza de flex castiga.
	   Acelasi tipar ca la `.data-table-wrap`. */
	max-height: var(--wh, 600px);
	overflow-y: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATORUL FOTOVOLTAIC

   MOBILE FIRST, si nu ca formula: peste 70% din trafic vine de pe telefon, deci
   asezarea de baza e cea de o coloana, iar `@media (min-width:…)` adauga
   coloane pentru ecranele mari. Scris invers — desktop intai, apoi ingustat —
   telefonul ar fi primit regulile scrise pentru altceva si apoi corectate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* O latime de citit pentru tot calculatorul: randurile de text care trec de
   vreo 75 de caractere se citesc mai greu, iar aici sunt multe explicatii. */
.calc { max-width: 860px; margin: 8px auto 0; }

/* TEXTUL SECUNDAR, CU UN PAS MAI INCHIS DECAT `--muted`.
   `--muted` e facut pentru o eticheta de doua cuvinte, nu pentru paragrafe —
   iar aici sunt multe explicatii lungi. Masurat pe tema deschisa, iesea la
   4,3-4,5:1, adica fix pe muchia pragului AA; un pas spre culoarea textului il
   duce pe la 6:1 pe amandoua temele, fara sa-l faca text principal. */
.calc,
.lead {
	--calc-secundar: color-mix(in srgb, var(--muted) 68%, var(--text));
}

/* ── alegerea scenariului ────────────────────────────────────────────────── */

.calc-scen { display: block; border: 0; padding: 0; margin: 0 0 32px; }

/* Legenda poarta trei lucruri: numarul pasului, intrebarea si o linie de
   ajutor. RAMANE `<legend>` ASEZATA NORMAL, nu `display: contents`: aia ii
   scotea rolul de eticheta a grupului din arborele de accesibilitate — cele
   trei carduri ramaneau trei butoane fara nicio intrebare deasupra pentru
   cine asculta pagina. */
.calc-scen__titlu { display: block; width: 100%; padding: 0; margin: 0 0 4px; }

/* Explicatia scenariului sta sub legenda, ca paragraf: in interiorul ei ar fi
   intrat in numele grupului. */
.calc-scen__ajutor { margin: 0 0 16px; max-width: 62ch; }

.calc-scen__intrebare {
	display: block;
	margin: 2px 0 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}

.calc-scen__grila { display: grid; gap: 10px; }

/* Butoane adevarate, nu cutii cu ascultator de clic: se ating cu degetul, se
   parcurg cu tastatura si le anunta cititoarele de ecran. Textul se alege la
   stanga fiindca sunt propozitii, nu etichete. */
.calc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 16px 22px;
	min-height: 44px;
	text-align: center;
	border: 1.5px solid var(--line);
	border-radius: var(--radius, 12px);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease);
}

.calc-card:hover { border-color: var(--accent); }

.calc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* STAREA ALEASA SE VEDE DIN TREI LUCRURI, nu doar din culoare: chenar gros,
   fundal si o bifa. Cine nu deosebeste galbenul de gri — sau se uita pe un
   ecran in soare — vede bifa. */
.calc-card.is-ales {
	border-color: var(--accent);
	border-width: 2px;
	padding: 17px 17px 19px;
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--accent) 90%, transparent);
}

.calc-card.is-ales .calc-card__nume::after {
	content: ' ✓';
	color: var(--accent);
	font-weight: 800;
}


/* DESEN, NU GLIFA. „▤" si „▦" sunt caractere de umplere: se desenau altfel de
   la un sistem la altul, iar pe unele telefoane ieseau doua patrate goale.
   Un `<svg>` arata la fel peste tot si urmeaza culoarea cardului. */
/* 64px, nu 32: la jumatate desenul se citea ca o bulina si nu se deosebea
   panoul de acumulator decat daca te uitai anume. Mai mare de atat ar fi
   inceput sa concureze cu titlul cardului — pe telefon, cardul are vreo
   150px inaltime, iar o pictograma de 128px l-ar fi umplut singura. */
.calc-card__icon {
	width: 64px;
	height: 64px;
	margin-bottom: 4px;
	color: var(--accent);
	flex: none;
}

/* Pe cardul ales, desenul se ingroasa putin — inca un semn care nu tine de
   culoare, pentru cine n-o deosebeste. */
.calc-card.is-ales .calc-card__icon { stroke-width: 2.4; }
.calc-card__nume { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.calc-card__desc { font-size: 13.5px; color: var(--calc-secundar, var(--muted)); line-height: 1.55; }

/* Semnul „are finantare acum" — singurul lucru de pe card care are voie sa
   strige, fiindca chiar e informatia care schimba decizia. */
/* Centrat, ca restul cardului. */
.calc-card__semn {
	align-self: center;
	margin-top: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--c-prod, #4caf7d);
	color: #04140c;
	font-size: 11.5px;
	font-weight: 700;
}

/* ── campurile ──────────────────────────────────────────────────────────── */

/* PASII: UNUL SUB ALTUL, PE O LATIME DE CITIT.
   Pe doua coloane, pasul 2 aparea in DREAPTA pasului 1 — si atunci nu mai
   citeai o succesiune, ci un formular care creste in toate partile. O
   coloana ingusta se citeste ca o scara, si asta si e. */
.calc-intrari { display: grid; gap: 16px; margin-bottom: 28px; max-width: 100%; }

/* Pasul nedeschis nu exista pe ecran: nici pe tab, nici pentru cititorul de
   ecran. `display: none`, nu `opacity`. */
.calc-camp[data-pas]:not(.is-deschis) { display: none; }

@keyframes calc-pas-apare {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.calc-camp[data-pas].is-deschis { animation: calc-pas-apare .28s ease both; }

/* Cine a cerut sistemului sa nu miste lucrurile pe ecran primeste pasul
   aparut, nu pasul alunecat. */
@media (prefers-reduced-motion: reduce) {
	.calc-camp[data-pas].is-deschis { animation: none; }
}

/* Butonul care duce mai departe, cu numarul pasului langa el. Sta sub
   ultimul pas deschis — il muta JS, vezi `desenPasi()`. */
.calc-inainte { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.calc-inainte__nr { font-size: 13px; color: var(--calc-secundar, var(--muted)); }

/* FIECARE PAS E UN CARD. Randuri simple una sub alta se citeau ca un formular
   lung; incadrate, se citesc ca pasi — si se vede unde se termina unul. */
.calc-camp {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius, 12px);
	background: var(--surface);
}

/* Numarul pasului. Mic si linistit — spune unde esti, nu striga.

   NU PE ACCENT. Galbenul pe fundal deschis da 1,9:1 — pentru un text de
   11,5px, adica nimic. Pe tema intunecata arata bine, si tocmai de aia era
   greu de vazut: se strica doar pe cealalta. Ierarhia o dau marimea, grosimea
   si spatierea; accentul si-l pastreaza cifra mare, unde chiar are ce face. */
.calc-camp__pas {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-2, var(--muted));
}

.calc-camp__et { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); }

/* Explicatia STA SUB INTREBARE, nu sub control: e ce te ajuta sa raspunzi,
   deci trebuie citita inainte de a alege, nu dupa. */
.calc-camp__ajutor {
	margin: -2px 0 4px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--calc-secundar, var(--muted));
}

.calc-camp__ctrl {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-2, var(--surface));
	color: var(--text);
	/* 16px pe telefon: sub atat, Safari mareste singur pagina la focus si sare
	   asezarea sub degetul omului. */
	font-size: 16px;
	font-family: inherit;
}

.calc-camp__ctrl:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* Conturul focusului e gros si departat de camp: pe un chenar de aceeasi
   culoare, unul subtire si lipit nu se deosebea de starea de hover. */
.calc-camp__ctrl:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent);
	outline-offset: 2px;
	border-color: var(--accent);
}

.calc-camp__nota { font-size: 13px; color: var(--calc-secundar, var(--muted)); line-height: 1.5; }

/* 44px inaltime, nu 32: e cat un deget, si sub atat degetul rateaza sina.
   Sina ramane subtire — inaltimea e zona de apucat, nu desenul. */
.calc-camp__slider { flex: 1; min-width: 0; accent-color: var(--accent); height: 44px; }
.calc-camp__slider:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }

/* CIFRA SLIDERULUI, LANGA EL SI MARE. Scrisa in eticheta de deasupra, se
   pierdea: trageai de slider si trebuia sa muti ochii ca sa vezi ce ai ales. */
.calc-slider { display: flex; align-items: baseline; gap: 10px; }
.calc-slider__val { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.calc-slider__u { font-size: 13.5px; color: var(--calc-secundar, var(--muted)); }

.calc-consum { display: flex; gap: 8px; align-items: stretch; }
.calc-consum .calc-camp__ctrl { flex: 1; }

.calc-unit { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

.calc-unit__b {
	padding: 0 14px;
	border: 0;
	background: var(--surface-2, var(--surface));
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.calc-unit__b.is-ales { background: var(--accent); color: var(--on-accent); }

/* CELE DOUA BUTOANE DE SUB CIFRE: jumatate-jumatate, pe mijloc.
   Pe telefon trec unul sub altul si iau toata latimea — doua butoane de
   jumatate din 360px n-ar fi incaput cu textul lor. */
.calc-actiuni {
	display: grid;
	gap: 12px;
	margin: 20px auto 28px;
	max-width: 720px;
}

/* `min-width: 0` si ruperea oriunde fiindca butonul de copiat isi pune
   ADRESA in eticheta cand clipboard-ul nu e disponibil — iar o adresa n-are
   spatii, deci ar fi iesit din coloana in loc sa treaca pe randul urmator. */
.calc-actiuni > * {
	width: 100%;
	min-width: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

@media (min-width: 620px) {
	.calc-actiuni { grid-template-columns: 1fr 1fr; }
}

.btn--mare { padding: 14px 26px; font-size: 15px; }

/* ── rezultatul ─────────────────────────────────────────────────────────── */

/* AER INTRE SECTIUNI. La 20px blocurile rezultatului se citeau ca o singura
   coloana lunga; la 28px se vede unde se termina fiecare. */
.calc-rez { display: grid; gap: 28px; }

/* Cele trei cifre mari. Pe telefon una sub alta; de la 560px incolo, trei
   coloane egale. */
/* REZUMATUL FINANCIAR. O singura cutie, cu amortizarea mare in capul ei si
   celelalte doua cifre dedesubt. Trei cutii egale, cum era inainte, puneau
   costul si amortizarea la aceeasi greutate — desi omul cauta una singura. */
.calc-sumar {
	padding: 28px 22px 30px;
	border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line));
	border-radius: var(--radius, 12px);
	background: color-mix(in srgb, var(--accent) 6%, var(--surface));
	/* CENTRAT, CA UN TRIUNGHI: cifra mare in varf, cele doua care o explica
	   dedesubt. Aliniate la stanga, cele trei se citeau ca o lista de cifre;
	   asa se citesc ca un raspuns cu doua note de subsol. */
	text-align: center;
}

/* SE OPRESTE SUB ANTETUL LIPIT cand se sare la el dupa ultimul pas.
   Marginea sta pe CUTIA la care se sare (`#c-sumar`), nu pe cardul dinauntru
   (`.calc-sumar`): `scrollIntoView` se uita la marginea elementului tinta, iar
   pusa pe copil nu misca nimic — rezultatul ajungea cu titlul ascuns sub
   antet, adica exact ce trebuia sa citeasca omul intai. */
#c-sumar { scroll-margin-top: 110px; }

/* Capul rezultatului. Fara el, cutia incepea direct cu un numar mare si nu
   spunea nimanui ce e — mai ales cuiva care a derulat pana aici de pe telefon
   si n-a vazut intrebarile de deasupra. */
.calc-sumar__titlu {
	margin: 0 0 20px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text);
}

/* Aceeasi poveste ca la numarul pasului: pe accent, eticheta asta se pierdea
   complet pe tema deschisa. */
.calc-sumar__et {
	display: block;
	margin-bottom: 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-2, var(--muted));
}

.calc-sumar__jos {
	display: grid;
	gap: 18px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

/* Cifrele rezumatului: doua randuri lipite, fara chenar propriu. Chenarul e
   al cutiei mari care le tine pe toate trei. */
.calc-mare { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Randul lung de cost („17.550 – 23.625 lei") n-are unde sa se rupa frumos pe
   telefon, iar pe ecran lat s-ar fi intins peste jumatate de cutie. */
.calc-mare__u { max-width: 26ch; }

.calc-mare__val {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.calc-mare__u { font-size: 13.5px; color: var(--calc-secundar, var(--muted)); line-height: 1.4; }

/* Cifra principala. `clamp` fiindca „nu scade factura, deci nu are ce se
   amortiza" e tot ce poate ajunge aici — la 44px ar fi rupt cutia pe telefon.

   CULOAREA TEXTULUI, NU ACCENTUL. Galbenul pe fundalul deschis al cutiei da
   1,8:1 — sub pragul de 3:1 cerut pana si pentru text mare. Pe tema
   intunecata arata bine, deci greseala nu se vedea decat pe cealalta, si
   tocmai la cifra pentru care omul a venit pe pagina.

   Nu pierde nimic: cutia are deja chenar si fundal in accent, iar 46px
   ingrosat nu are nevoie de culoare ca sa se vada. */
.calc-mare--cap .calc-mare__val {
	font-size: clamp(34px, 9vw, 46px);
	color: var(--text);
}

.calc-mare--cap .calc-mare__u { font-size: 15px; font-weight: 600; color: var(--text); }

.calc-bloc {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius, 12px);
	background: var(--surface);
	/* Tabelele late nu au voie sa impinga pagina in lateral pe telefon. */
	overflow-x: auto;
}

.calc-bloc h3 { margin: 0 0 16px; font-size: 18px; line-height: 1.3; }

/* CIFRELE, FIECARE IN CUTIA EI. Insirate fara chenar, la patru bucati incepeau
   sa se citeasca drept un paragraf de cifre. */
.calc-cifre { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }

.calc-cifre > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border-radius: 10px;
	background: var(--surface-2, color-mix(in srgb, var(--text) 4%, var(--surface)));
}

.calc-cifre span { font-size: 13px; color: var(--calc-secundar, var(--muted)); line-height: 1.35; }
.calc-cifre strong { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }

.calc-nota { margin: 16px 0 0; font-size: 14px; color: var(--calc-secundar, var(--muted)); line-height: 1.6; }

/* DOUA VARIANTE, DOUA RANDURI. Pe telefon un tabel de doua coloane isi strangea
   eticheta ca sa incapa cifra; asa fiecare varianta se aseaza singura, si
   trece pe doua randuri numai cand chiar nu incape. */
.calc-perechi { margin: 0; display: grid; gap: 10px; }

.calc-pereche {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--surface-2, color-mix(in srgb, var(--text) 4%, var(--surface)));
}

.calc-pereche dt { font-size: 14.5px; color: var(--calc-secundar, var(--muted)); }
.calc-pereche dd { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Varianta cu subventie, cand programul e deschis: aia e cifra care conteaza. */
.calc-pereche.is-bun {
	background: color-mix(in srgb, var(--c-prod, #4caf7d) 12%, var(--surface));
}

.calc-pereche.is-bun dd { color: var(--c-prod, #4caf7d); }

.calc-tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.calc-tabel td, .calc-tabel th { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; }
.calc-tabel tr:last-child td { border-bottom: 0; }
.calc-tabel th { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.calc-tabel--comp td + td, .calc-tabel--comp th + th { text-align: right; padding-left: 10px; }

.calc-sursa { font-size: 13px; color: var(--calc-secundar, var(--muted)); line-height: 1.5; }

/* ── starea finantarii ──────────────────────────────────────────────────── */

.calc-program {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 3px solid var(--line);
	background: var(--surface-2, var(--surface));
	font-size: 13.5px;
	line-height: 1.5;
}

.calc-program p { margin: 4px 0 0; color: var(--muted); }
.calc-program.is-activ { border-left-color: var(--c-prod, #4caf7d); }
.calc-program.is-inactiv { border-left-color: var(--muted); }

/* ── avertismentul cinstit ──────────────────────────────────────────────────
   Cand bateria nu se merita, se spune intai si apasat. Culoarea e cea de
   atentionare, nu de eroare: nu s-a stricat nimic, doar nu e o idee buna. */
.calc-avert {
	padding: 16px 18px;
	border-radius: var(--radius, 12px);
	border: 1.5px solid var(--c-warn, #d19a2a);
	background: color-mix(in srgb, var(--c-warn, #d19a2a) 10%, var(--surface));
	font-size: 14px;
	line-height: 1.55;
}

.calc-avert strong { display: block; margin-bottom: 6px; font-size: 15.5px; }
.calc-avert p { margin: 6px 0 0; }

.calc-stop, .calc-eroare {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius, 12px);
	background: var(--surface);
	font-size: 14.5px;
	line-height: 1.55;
}

.calc-stop h2 { margin: 0 0 8px; font-size: 18px; }

/* ── barele de autoconsum ───────────────────────────────────────────────── */

.calc-bare { display: grid; gap: 14px; }
.calc-bara { display: grid; gap: 5px; }
.calc-bara__et { font-size: 13px; color: var(--muted); }

.calc-bara__sina {
	display: block;
	height: 14px;
	border-radius: 999px;
	background: var(--surface-3, var(--line));
	overflow: hidden;
}

.calc-bara__umplut {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--muted);
	transition: width .4s var(--ease, ease);
}

.calc-bara__umplut.is-dupa { background: var(--c-prod, #4caf7d); }
.calc-bara__val { font-size: 13px; font-weight: 600; }

/* IPOTEZELE. Marginile stau pe un `div` INAUNTRUL lui `details`, nu pe copiii
   lui direct: `padding` pus pe un `<table>` cu `border-collapse: collapse` nu
   indenteaza celulele, asa ca textul ajungea lipit de marginea cutiei. Un
   container obisnuit se poarta previzibil, si tine si tabelul, si nota. */
.calc-ipoteze {
	border: 1px solid var(--line);
	border-radius: var(--radius, 12px);
	background: var(--surface);
	overflow: hidden;
}

.calc-ipoteze > summary {
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}

.calc-ipoteze > summary::-webkit-details-marker { display: none; }
.calc-ipoteze > summary h3 { display: inline; margin: 0; font-size: 18px; }
.calc-ipoteze > summary::after { content: ' ▾'; color: var(--muted); }
.calc-ipoteze[open] > summary::after { content: ' ▴'; }
.calc-ipoteze > summary:hover { background: var(--surface-2, transparent); }

.calc-ipoteze__corp { padding: 0 20px 20px; }
.calc-ipoteze__corp > .calc-nota { margin-top: 0; }

/* Rânduri cu aer: la opt ipoteze, fără spațiul ăsta tabelul se citea ca un bloc
   compact în care nu se mai deosebea unde se termină una și începe alta. */
/* IPOTEZELE STAU DEOPARTE, SI MAI STRANSE.
   Lipite de cutia de deasupra, cele doua chenare pareau unul singur, taiat
   in doua. Iar pe toata latimea paginii, eticheta ramanea in stanga si
   cifra tocmai in dreapta, cu un camp gol intre ele — ochiul pierdea randul
   pe drum. */
.calc-ip { margin-top: 44px; max-width: 720px; margin-inline: auto; }

/* IPOTEZELE, CA LISTA. Erau un tabel de doua coloane cu valori lungi („1.665
   kWh/an pentru fiecare kWp instalat"): pe telefon fie se intindea lateral,
   fie isi rupea eticheta in cuvinte de o litera. */
.calc-ip-lista { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.calc-ip-rand {
	display: grid;
	gap: 3px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.calc-ip-rand:last-child { border-bottom: 0; padding-bottom: 0; }

.calc-ip-rand__ce { font-size: 13px; color: var(--calc-secundar, var(--muted)); }
.calc-ip-rand__val { font-size: 16px; font-weight: 700; line-height: 1.4; }

/* ── formularul de cerere ───────────────────────────────────────────────── */

/* Formularul are acum continut si deasupra, si dedesubt — inainte era
   ultimul lucru inaintea ipotezelor. Fara aer jos, chenarul lui portocaliu
   se lipea de blocul „sistemul recomandat" si pareau o singura cutie.

   `scroll-margin-top` fiindca antetul e `position: sticky`: butonul „Vrei o
   ofertă" aducea formularul cu marginea de sus fix la marginea ecranului,
   deci titlul lui ramanea ascuns sub antet. Omul ajungea la o cutie care
   incepea cu campul de nume, fara sa vada la ce raspunde. */
.calc-lead { margin-top: 28px; margin-bottom: 28px; scroll-margin-top: 120px; }

/* Partea de jos a rezultatului. Fara asta, primul bloc de sub formular ar fi
   pornit lipit de el. */
.calc-rez--jos { margin-top: 4px; }

.lead {
	padding: 28px 24px;
	border: 1.5px solid var(--accent);
	border-radius: var(--radius, 12px);
	background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.lead__titlu { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.lead__lead { margin: 0 0 22px; font-size: 15px; color: var(--calc-secundar, var(--muted)); line-height: 1.6; }
.lead__campuri { display: grid; gap: 16px; margin-bottom: 20px; }

/* CAMPURILE FORMULARULUI NU SUNT PASI. `.calc-camp` a devenit card cand pasii
   au primit chenar propriu — dar aici sunt trei campuri inauntrul unei cutii
   care are deja chenarul ei, si trei cutii intr-o cutie nu mai spun nimic. */
.lead .calc-camp {
	gap: 7px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.lead .calc-camp__et { font-size: 14.5px; font-weight: 600; }

/* CAPCANA. Ascunsa din CSS, nu cu type="hidden": un camp ascuns prin tip nu e
   completat nici de roboti, deci n-ar prinde pe nimeni. Asa arata a camp
   adevarat pentru cine citeste marcajul, si nu exista pentru cine se uita. */
.lead__capcana {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Acordul: usor de citit, dar nu mai tare decat butonul. Zona de apasat e tot
   randul, nu doar patratelul de 18px — pe telefon aia era greu de nimerit. */
.lead__acord {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--surface);
	font-size: 14px;
	line-height: 1.6;
	cursor: pointer;
}

.lead__acord input { margin-top: 2px; width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.lead__acord:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }

.lead__mic { margin: 0 0 18px; font-size: 13px; color: var(--calc-secundar, var(--muted)); line-height: 1.55; }

/* Butonul principal: singurul lucru portocaliu-plin din cutie, si latimea
   intreaga pe telefon — degetul nu trebuie sa caute. */
.lead [data-trimite] { width: 100%; padding: 15px 24px; font-size: 15.5px; }
.lead__stare { margin: 12px 0 0; font-size: 14px; min-height: 1.2em; }
.lead__stare.is-rau { color: var(--c-danger, #d9534f); }

.lead__gata { text-align: center; padding: 12px 0; }
.lead__gata h2 { margin: 0 0 8px; font-size: 20px; }
.lead__gata p { margin: 0; color: var(--muted); line-height: 1.6; }

/* ── ecrane mai late ────────────────────────────────────────────────────── */

@media (min-width: 560px) {
	/* Cele doua cifre de sub cea mare stau alaturi de aici incolo. */
	.calc-sumar__jos { grid-template-columns: repeat(2, 1fr); }
	.calc-cifre { grid-template-columns: repeat(4, 1fr); }
	.lead__campuri { grid-template-columns: repeat(3, 1fr); }
	.lead [data-trimite] { width: auto; }
}

@media (min-width: 720px) {
	.calc-scen__grila { grid-template-columns: repeat(3, 1fr); }
	.calc-sumar { padding: 34px 30px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CERERILE DIN CALCULATOR — panou si portal

   Aceleasi clase in amandoua: portalul instalatorului e alta poarta, dar aceeasi
   masa de date. Doua foi de stil pentru acelasi tabel s-ar fi despartit la prima
   corectura.
   ═══════════════════════════════════════════════════════════════════════════ */

.tabs--sub { margin: 0 0 18px; }

.cr-camp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cr-camp .calc-camp__ctrl { width: auto; font-size: 13.5px; padding: 7px 9px; }

.cr-filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cr-filtre .calc-camp__ctrl { width: auto; min-width: 150px; font-size: 13.5px; padding: 7px 9px; }

/* ── cifrele mari ───────────────────────────────────────────────────────── */

.cr-cifre {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-bottom: 22px;
}

.cr-cifra {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}

.cr-cifra > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.cr-cifra > strong { font-size: 22px; font-weight: 800; color: var(--accent); }
.cr-cifra > small { font-size: 11.5px; color: var(--muted); }

/* ── blocuri si tabele ──────────────────────────────────────────────────── */

.cr-bloc {
	margin-bottom: 22px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	overflow-x: auto;
}

.cr-bloc h2 { margin: 0 0 6px; font-size: 16px; }
.cr-bloc h3 { margin: 18px 0 8px; font-size: 14px; }

.cr-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.cr-tabel th,
.cr-tabel td {
	padding: 8px 10px 8px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.cr-tabel th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cr-tabel tr:last-child td { border-bottom: 0; }
.cr-tabel--lista td { white-space: nowrap; }
.cr-tabel--lista tr.is-duplicat { background: color-mix(in srgb, var(--c-warn, #d19a2a) 8%, transparent); }
.cr-tabel tr.is-oprit { opacity: .5; }

/* Butonul care arata a legatura: deschide o fereastra, nu navigheaza, deci
   trebuie sa fie `button` — dar sa se citeasca a link. */
.cr-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.cr-link:hover { text-decoration: underline; }

.cr-mic { font-size: 11.5px; color: var(--muted); }

.cr-semn {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--surface-3, var(--line));
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
}

.cr-semn.is-rau { background: color-mix(in srgb, var(--c-danger, #d9534f) 20%, transparent); color: var(--c-danger, #d9534f); }

.cr-csv { margin-bottom: 8px; }

/* ── barele ─────────────────────────────────────────────────────────────── */

.cr-bara-cel { width: 34%; }

.cr-bara {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: var(--accent);
	min-width: 2px;
}

.cr-luni { display: flex; align-items: flex-end; gap: 6px; height: 150px; }

.cr-luna {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 3px;
	flex: 1;
	height: 100%;
}

.cr-luna__bara {
	width: 100%;
	max-width: 44px;
	background: var(--accent);
	border-radius: 4px 4px 0 0;
	min-height: 2px;
}

.cr-luna__et { font-size: 10.5px; color: var(--muted); }
.cr-luna__n { font-size: 11px; font-weight: 700; }

/* ── conturile ──────────────────────────────────────────────────────────── */

.cr-cont {
	margin-bottom: 16px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}

.cr-cont.is-oprit { opacity: .6; }
.cr-cont__cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cr-cont__cap h3 { margin: 0 0 4px; font-size: 15.5px; }
.cr-cont p { margin: 4px 0; font-size: 13.5px; }

.cr-rand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cr-rand--jos { margin-top: 16px; }

.cr-fieldset { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.cr-fieldset legend { padding: 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

.cr-bife { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.cr-bifa { display: flex; gap: 7px; align-items: center; font-size: 13px; margin: 6px 0; }
.cr-bifa input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

.cr-grila3 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.cr-acord blockquote {
	margin: 6px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--line);
	background: var(--surface-2, var(--surface));
	font-size: 13px;
	line-height: 1.55;
}

/* ── portalul instalatorului ────────────────────────────────────────────── */

.pt-cap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}

.pt-cote { display: flex; gap: 18px; flex-wrap: wrap; }

.pt-cota { display: flex; flex-direction: column; gap: 1px; }
.pt-cota__et { font-size: 11.5px; color: var(--muted); }
.pt-cota__val { font-size: 17px; font-weight: 800; }
.pt-cota.is-plina .pt-cota__val { color: var(--c-danger, #d9534f); }

/* ── cererea, strânsă ────────────────────────────────────────────────────── */

/* Un `<details>` pe cerere. Padding-ul stă pe rând și pe corp, nu pe cutie:
   altfel rândul strâns are o ramă de aer în care apeși degeaba. */
.pt-cerere {
	margin-bottom: 10px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
}

/* CULOAREA SPUNE ÎN CE STADIU E, fără să deschizi nimic. Dunga e pe stânga,
   nu de jur împrejur: pe zece rânduri lipite, un contur colorat complet face
   pagina să pară o alarmă. Pe stânga se citește ca o coloană de stări.

   Cuvântul din dreapta o repetă în scris — cine nu deosebește verdele de
   chihlimbar trebuie să vadă și el ce se întâmplă cu cererea. */
.pt-cerere[data-stare="noua"]         { border-left-color: var(--accent); }
.pt-cerere[data-stare="preluat"]      { border-left-color: var(--c-warn, #d19a2a); }
.pt-cerere[data-stare="contactat"]    { border-left-color: var(--c-cons); }
.pt-cerere[data-stare="oferta"]       { border-left-color: var(--c-cons); }
.pt-cerere[data-stare="castigat"]     { border-left-color: var(--c-prod); }
.pt-cerere[data-stare="pierdut"]      { border-left-color: var(--muted); }
.pt-cerere[data-stare="date_gresite"] { border-left-color: var(--c-danger); }

/* Cererea deschisă se desprinde de vecine: altfel, la trei rânduri lipite, nu
   se vede unde se termină ce tocmai ai deschis.

   Se schimbă doar trei laturi, NU `border-color`. Scurtătura le prindea și pe
   stânga, deci cererea își pierdea culoarea de status exact în clipa în care
   te uitai la ea. */
.pt-cerere[open] {
	border-top-color: color-mix(in srgb, var(--accent) 35%, var(--line));
	border-right-color: color-mix(in srgb, var(--accent) 35%, var(--line));
	border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--line));
	box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .8);
}

.pt-cerere__cap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
	border-radius: 8px;
}

.pt-cerere__cap::-webkit-details-marker { display: none; }
.pt-cerere__cap:hover { background: var(--surface-2, transparent); }
.pt-cerere__cap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Săgeata, la capătul rândului: spune că rândul se deschide, și se întoarce
   când chiar s-a deschis. */
.pt-cerere__cap::after {
	content: '▾';
	color: var(--muted);
	transition: transform .15s ease;
}

.pt-cerere[open] > .pt-cerere__cap::after { transform: rotate(180deg); }

/* Ce ține rândul: titlul deasupra, cifra după care se alege dedesubt. `min-width`
   pe zero, altfel textul lung refuză să se strângă și împinge starea afară. */
.pt-cerere__ce { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.pt-cerere__sub { font-size: 12px; color: var(--muted); }

/* „județul tău": cererea e din județele contului, cele pentru care primește
   e-mail. Lista are toată țara, deci asta e ce se caută cu ochiul. */
.pt-al-meu {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
	font-size: 11.5px;
	font-weight: 600;
	vertical-align: 1px;
	white-space: nowrap;
}

/* Starea, scrisă. Ia culoarea dungii din stânga, ca ochiul să lege cele două. */
.pt-stare {
	padding: 3px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.pt-cerere[data-stare="noua"] .pt-stare         { border-color: var(--accent); color: var(--accent); }
.pt-cerere[data-stare="preluat"] .pt-stare      { border-color: var(--c-warn, #d19a2a); color: var(--c-warn, #d19a2a); }
.pt-cerere[data-stare="contactat"] .pt-stare,
.pt-cerere[data-stare="oferta"] .pt-stare       { border-color: var(--c-cons); color: var(--c-cons); }
.pt-cerere[data-stare="castigat"] .pt-stare     { border-color: var(--c-prod); color: var(--c-prod); }
.pt-cerere[data-stare="pierdut"] .pt-stare      { color: var(--muted); }
.pt-cerere[data-stare="date_gresite"] .pt-stare { border-color: var(--c-danger); color: var(--c-danger); }

.pt-cerere__corp { padding: 2px 16px 16px; border-top: 1px solid var(--line); }
.pt-cerere__corp > .pt-cerere__cifre { margin-top: 14px; }

/* Pe ecran îngust starea și butonul trec pe rândul lor, sub titlu, în loc să
   îngusteze titlul până la un cuvânt pe linie. */
@media (max-width: 560px) {
	.pt-cerere__cap { gap: 8px; }
	.pt-cerere__ce { flex: 1 1 100%; }
}
/* Numarul cererii, in fata titlului. Acelasi `#123` ca in e-mail, in panou
   si in pagina — dupa el intreaba omul cand suna. */
/* Cererea inchisa: ce s-a raportat, si atat. Fara select, fara buton — nu
   ca sa fie frumos, ci fiindca serverul oricum ar raspunde „nu", iar un
   buton care raspunde „nu" invata omul ca butoanele nu fac nimic. */
.pt-inchisa {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--surface-2, color-mix(in srgb, var(--text) 4%, var(--surface)));
	font-size: 15px;
}

.pt-inchisa p { margin: 6px 0 0; }

.pt-cerere__nr {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 7px;
	border-radius: 6px;
	background: var(--surface-3, var(--surface-2));
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pt-cerere__titlu { margin: 0; font-size: 15.5px; }
.pt-cerere__cifre { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 12px 0; }
.pt-cerere__cifre div { display: flex; flex-direction: column; }
.pt-cerere__cifre span { font-size: 11.5px; color: var(--muted); }
.pt-cerere__cifre strong { font-size: 15px; }

.pt-contact {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--c-prod, #4caf7d) 12%, var(--surface));
	font-size: 14px;
	line-height: 1.7;
}

.pt-contact a { font-weight: 700; }

/* „Tot ce a completat" — buton, nu un rand de text mic. A ramas <summary>,
   nu <button>: browserul ii da singur rolul, focusul si tastatura, iar
   deschiderea merge si fara JS. Butonul e doar desenat peste el. */
.pt-detalii { margin-top: 14px; }

.pt-detalii__cap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 9px;
	background: var(--surface);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: border-color .18s var(--ease), background .18s var(--ease);
}

/* Triunghiul implicit al lui <summary>: scos din doua parti, fiindca
   `display` il ascunde in Chrome si Safari, iar `list-style` in restul. */
.pt-detalii__cap::-webkit-details-marker { display: none; }

.pt-detalii__cap:hover { border-color: var(--accent); background: var(--surface-2, var(--surface)); }
.pt-detalii__cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sageata proprie: spune ca butonul deschide ceva aici, nu ca duce altundeva,
   si se intoarce cand chiar s-a deschis. */
.pt-detalii__cap::after {
	content: '▾';
	color: var(--muted);
	font-size: 11px;
	transition: transform .15s ease;
}

.pt-detalii[open] > .pt-detalii__cap { border-color: var(--accent); }
.pt-detalii[open] > .pt-detalii__cap::after { transform: rotate(180deg); }
.pt-detalii .cr-tabel { margin-top: 10px; }

.pt-avert {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1.5px solid var(--c-warn, #d19a2a);
	border-radius: 10px;
	background: color-mix(in srgb, var(--c-warn, #d19a2a) 10%, var(--surface));
	font-size: 13.5px;
	line-height: 1.55;
}

.pt-login {
	max-width: 380px;
	margin: 60px auto;
	padding: 28px 26px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
}

.pt-login h1 { margin: 0 0 6px; font-size: 20px; }
.pt-login p { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.pt-login .calc-camp { margin-bottom: 14px; }
.pt-login .btn { width: 100%; }

.pt-eroare {
	margin-bottom: 16px;
	padding: 10px 12px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--c-danger, #d9534f) 15%, transparent);
	color: var(--c-danger, #d9534f);
	font-size: 13.5px;
}

.pt-cota__sub { font-size: 10.5px; color: var(--muted); }

/* ── Pagina linkurilor din mail (`instalator/link.php`) ───────────────────
   Deschisă aproape mereu de pe telefon, de pe teren: un card îngust, cifrele
   mari, iar butonul care contează pe toată lățimea, ușor de nimerit cu degetul. */
.pt-link { padding-top: 24px; padding-bottom: 40px; }
.pt-link__card {
	max-width: 480px;
	margin: 0 auto;
	padding: 22px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
}
.pt-link__card h1 { margin: 2px 0 14px; font-size: 21px; line-height: 1.25; }
.pt-link__card p { line-height: 1.55; }
.pt-link__sus { margin: 0; font-size: 12.5px; color: var(--muted); }
.pt-link__cifre { display: grid; gap: 8px; margin: 0 0 18px; }
.pt-link__cifre div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pt-link__cifre dt { color: var(--muted); font-size: 13.5px; }
.pt-link__cifre dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pt-link__mare { display: flex; justify-content: center; width: 100%; padding: 14px 16px; font-size: 16px; }
.pt-link__sub { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.pt-link__msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 14px;
	background: color-mix(in srgb, var(--c-warn, #d19a2a) 14%, transparent); }
.pt-link__msg.is-bun { background: color-mix(in srgb, var(--c-prod) 16%, transparent); }
.pt-link__om { margin-top: 4px; }
.pt-link__nume { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.pt-link__actiuni { display: grid; gap: 8px; }
.pt-link__actiuni .btn, .pt-link__card .btn { text-decoration: none; }
.pt-link__actiuni .btn--ghost { justify-content: center; }
.pt-link__status { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pt-link__intrebare { margin: 0 0 10px; font-weight: 600; }
.pt-link__butoane { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-link__butoane .btn { justify-content: center; padding-inline: 6px; }
.pt-link__castig { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.pt-link__rau { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--muted);
	font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.pt-link__jos { margin: 18px 0 0; font-size: 13.5px; text-align: center; }
.pt-login__sau { margin: 18px 0 14px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Invitația către calculator, pe paginile de date. Vezi `Page::renderBoard()`. */
.cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 24px;
	padding: 20px 24px;
	border: 1.5px solid var(--accent);
	border-radius: var(--radius, 12px);
	background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.cta__text { flex: 1 1 320px; }
.cta__titlu { margin: 0 0 6px; font-size: 19px; }
.cta__lead { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 62ch; }
.cta .btn { flex: none; }

@media (max-width: 560px) {
	.cta { padding: 18px; }
	.cta .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINA DE GAZE (`gaze.php`)
   Folosește blocurile de la ofertele pentru prosumatori — podium, calculator,
   tabel — ca să arate ca restul site-ului. Aici e doar ce e al ei: spațiul
   dintre blocuri și rândul cu cifrele pieței.
   ══════════════════════════════════════════════════════════════════════════ */

.gaz-bloc { margin-bottom: clamp(18px, 2.4vw, 28px); color: var(--text); font-size: 15px; line-height: 1.5; }

.gaz-cifre {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: clamp(18px, 2.4vw, 28px);
}

.gaz-cifra {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	line-height: 1.3;
}

.gaz-cifra span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.gaz-cifra strong { font-size: 28px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gaz-cifra small { font-size: 12.5px; color: var(--muted); }

.gaz-cifra--accent {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

/* Coloanele care se pot ordona arată că se apasă. */
#gaz-tabel th[data-sort] { user-select: none; }
#gaz-tabel th[aria-sort="ascending"]::after { content: ' ↑'; color: var(--accent); }
#gaz-tabel th[aria-sort="descending"]::after { content: ' ↓'; color: var(--accent); }

/* ── Gaze: sistemul (producție, consum, graniță, depozite) ─────────────────── */

.gaz-sistem {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
}

.gaz-sistem .gaz-cifra { background: var(--surface-2); }
.gaz-sistem .gaz-cifra strong { font-size: 24px; }

.gaz-bilant {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--text-2);
	line-height: 1.6;
}

.gaz-bilant strong { color: var(--text); font-variant-numeric: tabular-nums; }
.gaz-bilant span { display: block; font-size: 12.5px; color: var(--muted); }

.gaz-grafic { margin: 6px 0 0; }

/* Înălțimea din panou, la secțiunile cu grafic: cifrele, textele și tabelul rămân
   cât sunt, graficul ia ce mai e din `--wh`. Podea, nu plafon: n-are voie să taie
   tabelul de dedesubt. Secțiunile fără grafic rămân cât conținutul lor. */
.gaz-sectiune:has(> .gaz-grafic) { display: flex; flex-direction: column; min-height: var(--wh, 0px); }
.gaz-sectiune > .gaz-grafic,
.gaz-sectiune > .gaz-grafic > .gaz-g-cutie { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.gaz-sectiune > .gaz-grafic .gaz-g__plan { flex: 1 1 auto; }

/* Graficul se întinde pe lățime, dar grosimea liniilor rămâne aceeași:
   `vector-effect` le ține la 2 px oricât s-ar lăți SVG-ul. */
.gaz-g-cutie { padding-left: 40px; }
.gaz-g__plan--mic { height: clamp(170px, 20vw, 220px); }

/* Tooltipul graficelor de gaze (`js/gaze.js`): bula e `.chart-tip`, aceeași
   ca la graficele Chart.js. Aici stau doar punctele de pe linii. */
.gaz-g__plan[data-tooltip] { touch-action: pan-y; }
.gaz-g__repere { position: absolute; top: 0; bottom: 0; width: 0; opacity: 0; pointer-events: none; transition: opacity .12s var(--ease-out, ease); }
.gaz-g__plan.is-tip .gaz-g__repere { opacity: 1; }

.gaz-g__pct {
	position: absolute;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--surface);
	border: 2px solid var(--muted);
}
.gaz-g__curent { stroke: var(--c-gaze); }
.gaz-g__arie { fill: color-mix(in srgb, var(--c-gaze) 16%, transparent); stroke: none; }
.gaz-g__plan { position: relative; height: clamp(200px, 26vw, 280px); }
.gaz-g { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gaz-g polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gaz-g__productie { stroke: var(--accent); }
.gaz-g__consum    { stroke: var(--c-cons); }
.gaz-g__depozit   { stroke: var(--c-prod); stroke-dasharray: 5 4; }
.gaz-g__grila     { stroke: var(--grid-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gaz-g__zero      { stroke: var(--line-strong); }

/* Etichetele, în HTML peste SVG — vezi `$grafic` din `gaze.php`. */
.gaz-g__valori span,
.gaz-g__luni span {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
	line-height: 1;
}

.gaz-g__valori span { left: -40px; width: 34px; text-align: right; transform: translateY(-50%); }
.gaz-g__luni { position: relative; height: 20px; }
.gaz-g__luni span { top: 6px; transform: translateX(-50%); }

/* Pe telefon, jumătate din etichete: la 340 px, douăsprezece luni și opt
   gradații s-ar fi călcat una pe alta. */
@media (max-width: 620px) {
	.gaz-g__y--rar,
	.gaz-g__luni span:nth-child(even) { display: none; }
}

.gaz-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--text-2);
}

.gaz-legenda span::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 0;
	margin-right: 7px;
	vertical-align: middle;
	border-top: 2px solid;
}

/* Cu `.gaz-legenda` în față: `.gaz-legenda span::before` de mai sus e mai
   specific decât o singură clasă, deci culorile pierdeau și toate liniuțele
   ieșeau în culoarea textului — albe, pe tema întunecată. */
.gaz-legenda .gaz-legenda__p::before { border-color: var(--accent); }
.gaz-legenda .gaz-legenda__c::before { border-color: var(--c-cons); }
.gaz-legenda .gaz-legenda__d::before { border-color: var(--c-prod); border-top-style: dashed; }

.gaz-nota { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

.gaz-subtitlu { margin: 14px 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }

.gaz-tacut { color: var(--muted); font-style: italic; }

/* ── Gaze: depozitele (AGSI+) ──────────────────────────────────────────────── */

/* Știrile de pe pagina de gaze: cardurile paginii Știri, cu titlul și
   legătura spre toate pe același rând. */
.gaz-stiri { margin-top: clamp(28px, 4vw, 44px); }
.gaz-stiri__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 18px; }
.gaz-stiri__cap .related__title { margin: 0; }
.gaz-stiri__toate { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.gaz-stiri__toate:hover { text-decoration: underline; }

/* Mențiunea de neafiliere de sub oferte (prosumatori și gaze). */
.pro-sursa--neafiliat { margin-top: 4px; }

.gaz-sus { color: var(--c-prod); font-weight: 600; }
.gaz-jos { color: var(--c-cons); font-weight: 600; }
.gaz-nota--sus { margin: 0 0 8px; }

.gaz-dep {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin-top: 14px;
}

@media (max-width: 760px) {
	.gaz-dep { grid-template-columns: 1fr; }
}

/* Harta: aceleași proporții ca viewBox-ul conturului (1000 × 710), ca un
   procent din lățime să cadă pe aceeași longitudine și în SVG, și în HTML. */
.gaz-harta {
	position: relative;
	aspect-ratio: 1000 / 710;
	border-radius: 14px;
	background: var(--surface-2);
	overflow: hidden;
}

.gaz-harta svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gaz-harta path { fill: color-mix(in srgb, var(--text) 5%, transparent); stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Punctul: un inel care se umple cât depozitul, cu mărimea după capacitate. */
.gaz-harta__pct {
	position: absolute;
	width: var(--m);
	height: var(--m);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--surface) 52%, transparent 54%),
		conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 18%, transparent) 0);
	box-shadow: 0 1px 6px rgb(0 0 0 / .25);
}

.gaz-harta__pct b {
	position: absolute;
	left: 50%;
	top: calc(100% + 3px);
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--text-2);
	text-shadow: 0 0 3px var(--surface-2), 0 0 3px var(--surface-2);
}

.gaz-harta__pct--sus b { top: auto; bottom: calc(100% + 3px); }
.gaz-harta__pct--st b,
.gaz-harta__pct--dr b { top: 50%; transform: translateY(-50%); }
.gaz-harta__pct--st b { left: auto; right: calc(100% + 5px); }
.gaz-harta__pct--dr b { left: calc(100% + 5px); }

.gaz-dep__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.gaz-bara__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gaz-bara__nume { font-weight: 700; color: var(--text); }
.gaz-bara__nume small { margin-left: 7px; font-weight: 400; font-size: 12px; color: var(--muted); }
.gaz-bara__val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.gaz-bara__sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.gaz-bara__sina,
.gaz-clasament__sina {
	display: block;
	height: 8px;
	margin-top: 5px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--text) 10%, transparent);
	overflow: hidden;
}

.gaz-bara__sina i,
.gaz-clasament__sina i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* Clasamentul: patru coloane, bara întinsă pe mijloc, media UE ca o linie. */
.gaz-clasament {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 5px;
	font-size: 13.5px;
}

.gaz-clasament li {
	display: grid;
	grid-template-columns: 22px minmax(90px, 130px) 1fr 58px;
	align-items: center;
	gap: 10px;
	padding: 3px 8px;
	border-radius: 8px;
}

@media (max-width: 620px) {
	.gaz-harta__pct { width: calc(var(--m) * .62); height: calc(var(--m) * .62); }
	.gaz-harta__pct b { font-size: 10.5px; }
	.gaz-clasament li { grid-template-columns: 18px minmax(78px, 104px) 1fr 52px; gap: 8px; padding: 3px 4px; }
}

.gaz-clasament__loc { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.gaz-clasament__tara { color: var(--text-2); }
.gaz-clasament__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

.gaz-clasament__sina {
	position: relative;
	margin-top: 0;
	overflow: visible;
}

.gaz-clasament__sina i { background: color-mix(in srgb, var(--text) 35%, transparent); }

.gaz-clasament__sina::after {
	content: '';
	position: absolute;
	left: var(--ue);
	top: -4px;
	bottom: -4px;
	width: 2px;
	background: var(--c-cons);
	border-radius: 1px;
}

.gaz-clasament__ro { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gaz-clasament__ro .gaz-clasament__tara,
.gaz-clasament__ro .gaz-clasament__val { font-weight: 700; color: var(--text); }
.gaz-clasament__ro .gaz-clasament__sina i { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   CÂMPURILE DE PE SITE (`.input`)
   Stilul exista doar în `admin.css`, deci pe site căutarea din „Toate
   ofertele" și calculatorul arătau ca o casetă gri a browserului, cu colțuri
   drepte și textul lipit de margine. Aceleași valori ca în panou, ca un câmp
   să arate la fel oriunde ar sta.
   ══════════════════════════════════════════════════════════════════════════ */

.input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface-2, var(--surface));
	color: var(--text);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.3;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}

.input::placeholder { color: var(--muted); opacity: 1; }

.input:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.input:focus-visible {
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Căutarea primește lupa în stânga. Desenată ca fundal, cu gri-ul care se
   citește pe ambele teme — un `var()` nu poate intra într-un SVG de fundal. */
.input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	padding-left: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237d92aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px 50%;
}

/* Butonul nativ de ștergere, cât să se vadă că există, nu cât să strige. */
.input[type="search"]::-webkit-search-cancel-button { cursor: pointer; opacity: .6; }

/* Câmpul numeric din calculator: cifra aliniată ca într-un tabel, fără
   săgețile browserului, care la o casetă îngustă acopereau cifrele. */
.input[type="number"] {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}

.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   UN SINGUR ASPECT PENTRU TOATE CÂMPURILE SITE-ULUI
   Căutarea din oferte (`.input`), calculatorul (`.calc-camp__ctrl`),
   intervalul de pe Arhivă (`.field`) și dialogul de inserare (`.embed-dlg__*`)
   crescuseră fiecare cu colțurile, conturul și focusul lor. Aici se aliniază:
   aceleași colțuri, același fundal, același inel de focus, aceeași săgeată la
   liste. Regulile vechi rămân pentru ce e al fiecăruia (lățimi, fonturi).
   ══════════════════════════════════════════════════════════════════════════ */

.input,
.calc-camp__ctrl,
.field input,
.field select,
.embed-dlg__select,
.embed-dlg__cod {
	border: 1px solid var(--line);
	border-radius: 12px;
	background-color: var(--surface-2, var(--surface));
	color: var(--text);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}

.input:hover,
.calc-camp__ctrl:hover,
.field input:hover,
.field select:hover,
.embed-dlg__select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* Focusul: chenar auriu și un inel moale în jur. Destul de gros cât să se
   vadă de la distanță, fără conturul dublu al browserului peste el. */
.input:focus-visible,
.calc-camp__ctrl:focus-visible,
.field input:focus,
.field select:focus,
.embed-dlg__select:focus-visible,
.embed-dlg__cod:focus-visible {
	outline: none;
	border-color: var(--accent);
	background-color: var(--surface);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Listele derulante: săgeata noastră, nu cea a sistemului, care arăta altfel
   pe fiecare browser și, pe temă întunecată, uneori deloc. */
select.input,
select.calc-camp__ctrl,
.field select,
.embed-dlg__select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d92aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

/* Pe telefon, 16 px: sub atât, Safari mărește singur pagina la atingerea
   câmpului și mută așezarea de sub degetul omului. */
@media (max-width: 620px) {
	.input,
	.field input,
	.field select,
	.embed-dlg__select { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CEL MAI IEFTIN CURENT / GAZ ȘI ISTORICUL PE FURNIZORI (`js/widgets/ieftin.js`)
   Pe pagina Prețuri, ca widget-uri; pe pagina Gaze, în secțiunile ei.
   ══════════════════════════════════════════════════════════════════════════ */
.ief, .iei { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }

.ief__cap {
	padding: 12px 14px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.ief__eticheta { font-size: 12px; color: var(--muted); }
.ief__cifra { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.2; }
.ief__cifra small { font-size: .45em; font-weight: 500; color: var(--muted); }
.ief__cine { font-size: 13px; line-height: 1.5; color: var(--text); }
.ief__cine .ief__link { margin-left: 6px; font-weight: 600; }
.ief__mic { font-size: 11.5px; color: var(--muted); margin-left: 4px; }

.ief__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.ief__rand {
	display: grid;
	grid-template-columns: 22px minmax(120px, 1.3fr) minmax(60px, 1fr) 96px 64px;
	align-items: center;
	gap: 10px;
	padding: 4px 6px;
	border-radius: 6px;
	font-size: 12.5px;
}
.ief__rand.is-primul { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ief__loc { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.ief__furnizor { min-width: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ief__furnizor small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ief__bara { display: block; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 12%, transparent); overflow: hidden; }
.ief__bara i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 75%, transparent); }
.ief__pret { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.ief__pret i { font-style: normal; font-size: 10px; color: var(--muted); }
.ief__oferta { text-align: right; }
.ief__link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.ief__link:hover { text-decoration: underline; }

.ief__toti {
	align-self: flex-start;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.ief__toti:hover { border-color: var(--accent); }

.ief__sapt { margin: 0; }
.ief__sapt figcaption { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ief__nota { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.ief__nota a { color: inherit; }

.ief-g { display: block; max-width: 100%; height: auto; overflow: visible; }
.ief-g__grila { stroke: var(--line); stroke-width: 1; }
.ief-g__y { fill: var(--muted); font-size: 10.5px; text-anchor: end; font-variant-numeric: tabular-nums; }
.ief-g__x { fill: var(--muted); font-size: 10.5px; text-anchor: middle; }
.ief-g__linie { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ief-g__punct { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.ief-g a .ief-g__punct:hover { r: 6; }

.iei__bara { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.iei__comut { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.iei__comut button {
	padding: 4px 12px;
	border: 0;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.iei__comut button.is-activ { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-weight: 600; }
.iei__cauta {
	flex: 0 1 220px;
	padding: 5px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 12.5px;
}

.iei__corp { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 14px; min-height: 0; flex: 1; }
.iei__furnizori { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 380px; border-right: 1px solid var(--line); padding-right: 8px; }
.iei__furnizori label { display: grid; grid-template-columns: 16px 10px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.iei__furnizori label:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.iei__furnizori label.is-bifat .iei__nume { font-weight: 600; color: var(--text); }
.iei__furnizori input:disabled + .iei__culoare + .iei__nume { opacity: .5; }
.iei__nume { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.iei__furnizori small { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.iei__culoare { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); }

.iei__grafic { min-width: 0; }
.iei__legenda { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text); }
.iei__legenda i, .iei__tabel th i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.iei__cifre { margin-top: 8px; font-size: 12px; }
.iei__cifre summary { cursor: pointer; color: var(--muted); }
.iei__tabel { overflow-x: auto; margin-top: 6px; }
.iei__tabel table { border-collapse: collapse; font-size: 12px; }
.iei__tabel th, .iei__tabel td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iei__tabel th:first-child, .iei__tabel tbody th { text-align: left; font-weight: 600; }

@media (max-width: 640px) {
	/* Pe telefon pleacă doar bara; legătura la oferta oficială rămâne pe fiecare rând. */
	.ief__rand { grid-template-columns: 18px minmax(0, 1fr) 78px 50px; gap: 8px; }
	.ief__bara { display: none; }
	.ief__furnizor { white-space: normal; }
	.iei__corp { grid-template-columns: 1fr; }
	.iei__furnizori { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
}

/* Podiumul, calculatorul și tabelul ofertelor ca widget-uri (`js/widgets/ieftin.js`):
   aceleași clase ca pe pagina Gaze. În tablou, tabelul derulează ÎN widget, la
   înălțimea pusă din panou — ca la `.data-table-wrap`. */
.ief-piata { margin-top: 14px; }
.widget--tabel-curent .pro-tab__scroll,
.widget--tabel-gaz .pro-tab__scroll { max-height: var(--wh, 600px); overflow-y: auto; }
.pro-calc__suma .ief__mic, .pro-tab .ief__mic { display: block; margin-left: 0; }