/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * WattsPlaza — stratul de prezentare, scris de la zero.
 * Perechea lui e `tokens.css`. Aici nu apare nicio valoare de culoare si
 * niciun `font-family` care sa nu treaca printr-un token.
 *
 * Teza: doua densitati, o paleta.
 *   ceremonie  (/, /preturi, /contact, usile)  — un lucru per ecran
 *   date       (/proiecte, /companii, fise)    — randuri, scanabile
 * Comutatorul e `data-density` pe <html>, nu o a doua foaie de stil.
 */

/* ============================================================ LITERE
 * Trei familii, gazduite local, toate cu diacritice romanesti.
 *
 * Space Grotesk a plecat pe 18 septembrie 2026, odata cu sigla albastra:
 * era rotunda si prietenoasa, iar produsul e un instrument tehnic. Saira e
 * patratoasa, de familie Eurostile -- acelasi aer cu literele siglei -- si,
 * spre deosebire de Michroma (care e si mai aproape), ramane citibila la 15px
 * intr-un meniu si are doua grosimi.
 *
 * Corpul ramane Inter: un titlu poate avea caracter, un tabel de trei sute de
 * randuri trebuie doar sa se citeasca.
 */
@font-face {
  font-family: 'Saira';
  src: url("/static/fonts/Saira-400-latin.74d80e18e2e5.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Saira';
  src: url("/static/fonts/Saira-400-latin-ext.a930d35e7cb9.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Saira';
  src: url("/static/fonts/Saira-600-latin.74d80e18e2e5.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Saira';
  src: url("/static/fonts/Saira-600-latin-ext.a930d35e7cb9.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-400-latin.260c81a4759b.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-400-latin-ext.1ad231aac0a8.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-500-latin.260c81a4759b.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-500-latin-ext.1ad231aac0a8.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-600-latin.260c81a4759b.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-600-latin-ext.1ad231aac0a8.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-400-latin.b636a65da4f0.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-400-latin-ext.bd4781a31b42.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-500-latin.b636a65da4f0.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
/* Perechea latin-ext a lui 500 lipsea, desi fisierul statea pe disc de la
 * inceput. Fara ea, orice text monospatiat de greutate 500 care are un Ș, un
 * Ț, un Ă sau un  cadea pe fontul de sistem -- adica exact etichetele:
 * „JUDEȚ" din bara hartii, „CELE MAI CERUTE JUDEȚE" din coloana ei, „REȚEA"
 * din legenda. Se vedea ca o litera cu alt desen in mijlocul cuvantului, si nu
 * dadea nicio eroare nicaieri: asa arata un font care lipseste. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-500-latin-ext.bd4781a31b42.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB;
}

/* ============================================================ TEMELIE */

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

html {
  /* `clip`, nu `hidden`: `hidden` pe radacina rupe `position: sticky`
   * in Safari si transforma <html> in container de derulare. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  /* 17px, nu 16. Ridicat pe 4 septembrie 2026, cu motivul spus de utilizator:
   * „site-ul se vede mult mai bine daca dau zoom 110-120%" -- adica scara de
   * baza era mai mica decat vrea ochiul care citeste pagina, nu decat vrea
   * cine a desenat-o. 17/16 = 106%, iar densitatea de date urca de la 14 la
   * 16, adica exact zoom-ul pe care si-l dadea singur. */
  font-size: 17px;
  scroll-behavior: smooth;
}
html[data-density="date"] { font-size: 16px; }
/* ...dar nu si pe telefon. Densitatea de date exista ca sa incapa RANDURI de
 * tabel; pe un ecran de 390 px nu mai exista tabele, ci carduri unul sub
 * altul, iar 14 px acolo inseamna doar text mic degeaba: descrierile ies la
 * 12,25 px si se citesc greu. Asa a si fost reclamat -- „textele ies greu in
 * evidenta". Pe telefon, paginile de date se citesc la aceeasi scara ca
 * restul site-ului. */
@media (max-width: 620px) {
  html[data-density="date"] { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;           /* titlurile sunt drepte. intotdeauna. */
  color: var(--ink-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  /* Fara asta, „interconexiune" sau „regenerabile" ies din ecran la 320px. */
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

/* Inelul de focalizare nu se animeaza niciodata: trebuie sa apara pe loc,
 * altfel cine navigheaza din tastatura pierde randul curent. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

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

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

/* Sarim peste bara: prima oprire de tastatura pe orice pagina. */
.skip {
  position: absolute; left: var(--space-sm); top: -100%;
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--accent-fill); color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600;
}
.skip:focus { top: var(--space-sm); color: var(--accent-ink); }

/* ============================================================ CADRU */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell--narrow { max-width: 52rem; }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-xl); }
.section--slab { background: var(--paper-slab); }
.section + .section { border-top: var(--rule) solid var(--line-faint); }

/* ============================================================ N9 · BARA
 *
 * Aliniata la marginea cadrului, fara pastila si fara chenar. Ce tine
 * bara lipita de pagina e un fir subtire, atat -- exact ce fac amandoua
 * referintele. Pastila plutitoare de dinainte adauga o a doua forma
 * peste continut si ii fura primului ecran o parte din liniste.
 *
 * Doua densitati, acelasi DOM:
 *   ceremonie -> marca la stanga, mijloc gol, doua actiuni la dreapta
 *   date      -> marca la stanga, gruparea de destinatii, actiuni la dreapta
 */

.bar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--rule) solid transparent;
  transition: border-color var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}
.bar[data-scrolled="1"] { border-bottom-color: var(--line); }

/* ------------------------------------------------ BARA · nemiscata
 *
 * Bara e singurul lucru care se vede pe FIECARE pagina, si de-aia are voie
 * sa fie singurul lucru care nu se schimba niciodata. Pana pe 1 septembrie
 * 2026 se schimba de trei ori la fiecare clic pe meniu, fiindca mostenea
 * densitatea paginii:
 *
 *   1. corpul radacinii, 16px pe ceremonie si 14px pe date -- deci toata
 *      bara se micsora cu 12,5%, litere, spatii si butoane deodata;
 *   2. `--shell-max`, 78rem contra 96rem -- deci marca si butoanele sareau
 *      spre interior cu zeci de pixeli;
 *   3. asezarea grupului, centrat contra lipit de marca (vezi `shell.bar`).
 *
 * Trei salturi simultane, si toate exact in clipa in care omul se uita la
 * meniu ca sa vada unde a ajuns. Raportat asa: „se muta locul meniului, se
 * modifica alinierea".
 *
 * Deci bara isi rupe legatura cu scara paginii: `font-size` in PIXELI, si
 * tokenii de care are nevoie redeclarati in `em`, adica relativ la ea insasi,
 * nu la radacina. `rem` ar fi citit tot corpul radacinii si n-ar fi schimbat
 * nimic -- asta e toata subtilitatea regulii de mai jos.
 *
 * Densitatea ramane neatinsa: ea e o hotarare despre CONTINUT, si acolo isi
 * face treaba mai departe.
 */
.bar {
  /* Aceeasi scara ca restul paginii, si aceeasi pe toate paginile: bara nu
   * urmeaza densitatea, dar nici nu ramane in urma cand se muta scara de
   * baza. Vezi `tests/test_audit.py`, regula despre bara identica. */
  font-size: 17px;

  --text-2xs:  0.6875em;
  --text-xs:   0.75em;
  --text-sm:   0.8125em;
  --text-base: 0.9375em;
  --text-md:   1.0625em;
  --text-lg:   1.25em;

  --space-3xs: 0.25em;
  --space-2xs: 0.5em;
  --space-xs:  0.75em;
  --space-sm:  1em;
  --space-md:  1.5em;
  --space-lg:  2em;
  --shell-pad: 2em;

  /* 84em la 16px = 1344px, adica exact latimea continutului pe paginile de
     date (96rem la 14px). Pe cele de ceremonie continutul e cu 96px mai
     ingust si sta centrat inauntru -- se citeste ca o marja, nu ca o
     nepotrivire, si e acelasi lucru pe toate paginile. */
  --shell-max: 84em;
}

.bar__in {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--space-xs) var(--shell-pad);
  display: flex; align-items: center; gap: var(--space-md);
}

/* Sigla: doar simbolul, si acelasi pe amandoua temele. Vezi `shell.marca`. */
.mark {
  display: inline-flex; align-items: center;
  color: var(--ink);
}
/* Logo-ul complet, din 24 septembrie 2026. Literele poarta culoarea
 * titlurilor, nu negrul pur: asa se aseaza langa meniu ca parte din bara, nu
 * ca o eticheta lipita peste ea. La trecerea cu mouse-ul doar se estompeaza:
 * fulgerul are aceeasi culoare cu literele, iar in accent ar disparea pe
 * patratul albastru. */
.mark { color: var(--ink-display); flex: none; }
/* 1.8rem de inaltime = 162 px de latime: ghidul de marca cere logo-ul complet
 * de cel putin 160 px (2 octombrie 2026). Era 140 px pe desktop si 117 pe
 * telefon. Pe telefon incape: bara mai are doar lupa, „Intra" si meniul. */
.mark__logo { display: block; height: 1.8rem; width: auto; aspect-ratio: 1297 / 231;
  transition: opacity var(--dur-fast) var(--ease-out); }
.mark:hover .mark__logo { opacity: 0.8; }


/* Golul din mijloc. Pe ceremonie ramane gol -- absenta e desenul. */
.bar__gap { flex: 1 1 auto; min-width: 0; }

.bar__links {
  display: flex; align-items: center; gap: var(--space-xs);
  min-width: 0;
}
.bar__link {
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--ink-3);
  white-space: nowrap;          /* o destinatie nu se rupe pe doua randuri */
  border-radius: var(--radius-sm);
}
.bar__link:hover { color: var(--ink); }
.bar__link[aria-current="page"] { color: var(--ink); }
.bar__link[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--accent-fill); border-radius: var(--radius-pill);
}

.bar__acts { display: flex; align-items: center; gap: var(--space-2xs); }

/* Cele doua stari ale barii: fara cont si cu cont. Amandoua sunt in marcaj, si
 * atributul `data-cont` de pe <html> alege care se vede -- pus de `BOOT_JS`,
 * din cookie-ul `wattsplaza_in`, inainte de prima pictura. Scrise ca doua grupuri,
 * nu ca `display` pe fiecare legatura in parte: legaturile n-au acelasi
 * `display` implicit (una e text, alta e buton), iar o regula care le da
 * amandurora acelasi fel le-ar strica pe una din doua. */
.bar__set { display: flex; align-items: center; gap: var(--space-2xs); }
.bar__cont { display: none; }
:root[data-cont="1"] .bar__anon { display: none; }
/* Aceeasi pereche, in afara barei: pe /preturi butonul duce la inscriere
 * pentru un vizitator si la casa de plata pentru cine e deja logat. Amandoua
 * sunt in marcaj, iar `data-cont` de pe <html> alege care se vede -- inainte
 * de prima pictura, ca la tema. O pagina care intreaba serverul „cine e
 * asta?" n-ar mai putea fi servita la fel tuturor. */
:root[data-cont="1"] a.bar__anon { display: none; }
a.bar__cont { display: none; }
:root[data-cont="1"] a.bar__cont { display: inline-flex; }
:root[data-cont="1"] .bar__set.bar__cont { display: flex; }
:root[data-cont="1"] li.bar__cont { display: list-item; }
:root[data-cont="1"] .drawer__acts.bar__cont { display: flex; }

/* Sertarul de pe telefon. Bara nu incape pe 375px cu cinci destinatii,
 * si nu se comprima -- se muta. */
.burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: transparent; border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.burger:hover { border-color: var(--line-strong); color: var(--ink); }
/* Doua desene in acelasi buton: liniile cand e inchis, crucea cand e deschis.
 * Nu se schimba din JavaScript, ci din `aria-expanded` -- singura stare pe
 * care butonul o avea deja, si care trebuie oricum tinuta la zi pentru
 * cititoarele de ecran. Un `aria` care nu se potriveste cu desenul e un bug
 * pe care nu-l vede nimeni pana nu asculta cineva pagina. */
.burger svg:last-child { display: none; }
.burger[aria-expanded="true"] svg:first-child { display: none; }
.burger[aria-expanded="true"] svg:last-child { display: block; }
.burger[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* Sertarul. Nu e un al doilea meniu: e acelasi, mutat, fiindca pe 375px
 * destinatiile nu incap in bara si nu au voie sa se rupa pe doua randuri.
 *
 * **Sta in afara lui `<header>`, si asta nu e o preferinta de asezare.** Bara
 * are `backdrop-filter`, iar un ancestor cu filtru devine bloc-container
 * pentru descendentii `position: fixed` -- deci `inset: 0` insemna „cat bara",
 * adica 60 de pixeli. Fundalul acoperea doar banda de sus, si linkurile
 * cadeau peste pagina, citibile una peste alta. Pe desktop nu se vedea:
 * sertarul apare doar sub 900px. Vezi NOTES.md.
 *
 * Fundalul e OPAC. A fost 92% plus blur, si pe telefoanele unde
 * `backdrop-filter` nu se aplica (Android mai vechi, mod de economisire)
 * ramanea o folie prin care se citea pagina de dedesubt. Un meniu peste care
 * se vede textul paginii nu e un meniu translucid, e un meniu stricat.
 */
.drawer {
  position: fixed; inset: 0; z-index: 40;
  /* Hartia, plus doua lumini foarte slabe: una verde in coltul din dreapta
   * sus, de unde vine si butonul care l-a deschis, si una rece jos. Un
   * dreptunghi negru cu trei cuvinte pe el arata a pagina neincarcata; doua
   * degradeuri de 10% il fac o suprafata. */
  background:
    radial-gradient(120% 80% at 88% 0%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(90% 60% at 0% 100%,
      color-mix(in oklab, var(--ink-display) 7%, transparent), transparent 70%),
    var(--paper);
  padding-top: 4.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: rise var(--dur-mid) var(--ease-out);
}
.drawer[hidden] { display: none; }
.drawer__in {
  display: flex; flex-direction: column;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--space-xs) var(--shell-pad) var(--space-lg);
}
/* Randul de meniu, refacut pe 2 octombrie 2026: 52 px, nu 68 -- dupa ce au
 * plecat lamuririle de sub nume, randurile ramasesera goale si uriase, iar
 * butoanele de cont ieseau sub ecran. Sageata e pe toate randurile, nu doar
 * pe cel curent; pagina curenta e scrisa in chihlimbar, fara cutie si fara
 * fir pe margine. */
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  min-height: 52px; padding-block: var(--space-2xs);
  border-bottom: var(--rule) solid var(--line-faint);
  color: var(--ink);
}
.drawer__t {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 600;
  letter-spacing: var(--track-tight);
}
.drawer__go { font-size: var(--text-md); color: var(--ink-faint); }
.drawer__link:hover .drawer__t, .drawer__link:active .drawer__t { color: var(--accent); }
.drawer__link[aria-current="page"] .drawer__t,
.drawer__link[aria-current="page"] .drawer__go { color: var(--accent); }
body.drawer-open { overflow: hidden; }

/* Actiunile de cont, mutate in sertar sub 420px. Ascunse implicit: pe
 * ecranele unde butonul verde incape in bara, ar fi al doilea exemplar
 * al aceluiasi lucru pe acelasi ecran. */
/* Actiunile de cont, in sertar. Se arata pe toate ecranele care au sertar:
 * cine a deschis meniul pe telefon cauta si intrarea in cont, iar drumul pana
 * la ea nu are voie sa fie „inchide meniul, apoi cauta butonul in bara". */
.drawer__acts {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}
/* „Contul meu" doar cu sesiune. Regula de mai sus, venita dupa `.bar__cont`
 * din capul foii, o anula: un vizitator vedea in meniu si „Creeaza cont /
 * Intra", si „Contul meu" (gasit pe 2 octombrie 2026). Cu sesiune, regula
 * cu `:root[data-cont="1"]` e mai specifica si castiga. */
.drawer__acts.bar__cont { display: none; }
/* Doua butoane intra pe un rand; trei -- in aplicatie, unde e si „Alerte" --
 * se string prea tare si textul se rupe. `wrap` le lasa sa treaca pe randul
 * urmator in loc sa se sugrume. */
.drawer__acts { flex-wrap: wrap; }
.drawer__acts .btn {
  flex: 1 1 8rem; min-width: 0; justify-content: center;
}

/* Piciorul sertarului: comutatorul de tema si adresa de contact. Comutatorul
 * e aici fiindca din bara pleaca pe telefon -- pana pe 3 septembrie 2026 tema
 * nu se putea schimba deloc de pe telefon, desi butonul exista pe desktop. */
.drawer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: var(--rule) solid var(--line-faint);
  font-size: var(--text-sm);
}
.drawer__foot a { color: var(--ink-3); }
.drawer__foot a:hover { color: var(--accent); }
.drawer__tema {
  display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap;
  min-height: 44px; padding: var(--space-2xs) var(--space-sm);
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.drawer__tema:hover { border-color: var(--accent-line); color: var(--ink); }



/* ============================================================ BUTOANE
 * Opt stari fiecare. Formele: `btn--go` (una singura per ecran, verde),
 * `btn--line` (conturat), `btn--ghost` (doar text).
 */

.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  min-height: 38px;
  background: var(--btn-bg); color: var(--btn-ink);
  border: var(--rule) solid var(--btn-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--track-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { --btn-line: var(--ink-faint); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
  opacity: 0.45; cursor: not-allowed; transform: none;
}
.btn[data-state="loading"] { cursor: progress; color: var(--ink-3); }
.btn[data-state="loading"]::before {
  content: ""; width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin var(--dur-tick) linear infinite;
}
.btn[data-state="error"] { --btn-line: var(--state-dead); color: var(--state-dead); }
.btn[data-state="success"] { --btn-line: var(--accent-fill); color: var(--accent); }

.btn--go {
  --btn-bg: var(--accent-fill);
  --btn-ink: var(--accent-ink);
  --btn-line: var(--accent-fill);
  font-weight: 600;
}
.btn--go:hover {
  --btn-bg: var(--accent-fill-hover); --btn-line: var(--accent-fill-hover);
  color: var(--accent-ink);
}
.btn--ghost { --btn-line: transparent; color: var(--ink-3); }
.btn--ghost:hover { --btn-line: var(--line); color: var(--ink); }
.btn--lg { min-height: 46px; padding-inline: var(--space-md); font-size: var(--text-base); }
.btn--sq { width: 38px; padding: 0; }

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

/* ============================================================ SUPRATITLU
 *
 * Semnatura AuthKit: eticheta mica intre doua fire care se sting spre
 * exterior. Nu e ornament -- e ce anunta ca incepe o idee noua, si
 * inlocuieste chenarul de card pe suprafetele de ceremonie.
 *
 * Regula: stivuit vertical, niciodata eticheta-stanga / titlu-dreapta.
 */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before, .eyebrow::after {
  content: ""; flex: 1 1 auto; height: var(--rule); min-width: 0;
}
.eyebrow::before { background: linear-gradient(to right, transparent, var(--line-strong)); }
.eyebrow::after  { background: linear-gradient(to left,  transparent, var(--line-strong)); }

/* Varianta de la stanga, pentru paginile de date: un singur fir, la dreapta. */
.eyebrow--start { justify-content: flex-start; }
.eyebrow--start::before { display: none; }

/* ============================================================ TITLURI */

.display {
  font-size: var(--text-display);
  letter-spacing: var(--track-display);
  color: var(--ink-display);
  /* Degradeul palid de la AuthKit: titlul se stinge usor spre baza, ca
   * si cum ar fi luminat de sus. Foarte putin -- daca se vede ca degradeu,
   * e prea mult. */
  background: linear-gradient(
    180deg,
    var(--ink-display) 0%,
    color-mix(in oklab, var(--ink-display) 74%, var(--paper)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Daca `background-clip: text` nu prinde, textul ar ramane invizibil.
 * Plasa de siguranta: culoare adevarata pentru cine n-are suportul. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .display { color: var(--ink-display); background: none; }
}

.display--s { font-size: var(--text-display-s); }
.h2 { font-size: var(--text-3xl); letter-spacing: var(--track-display); }
/* Titlul unei pagini are o singura marime pe tot site-ul. `rem` o lega de
 * densitate (17px pe paginile de prezentare, 16px pe cele de date), deci
 * acelasi rol iesea 40px pe /preturi si 38px pe /atr, iar cateva pagini
 * foloseau titlul de afis (60px). In pixeli, nu in `rem`, tocmai ca sa nu mai
 * urmeze densitatea. Afisul ramane doar pe prima pagina. */
h1.h2 { font-size: clamp(30px, 20px + 1.3vw, 40px); }
.h3 { font-size: var(--text-xl); letter-spacing: var(--track-tight); }
.h4 { font-size: var(--text-md); letter-spacing: var(--track-tight); font-weight: 600; }

.lede {
  max-width: var(--measure);
  margin-top: var(--space-section-lede);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink-2);
}
.lede--center { margin-inline: auto; }
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose p + p { margin-top: var(--space-sm); }

.center { text-align: center; }
/* Titlul centrat al unei sectiuni isi tine singur aerul de dedesubt. Pana pe
 * 2 septembrie 2026 fiecare bloc de sub el isi punea propriul `margin-top`,
 * si nu toate il puneau: „Despre WattsPlaza" statea lipit de carduri, la
 * 8 px, in timp ce „Proiecte din piata" avea 32. Distanta apartine titlului,
 * nu blocului de dupa el. */
.h3.center { margin-bottom: var(--space-xl); }
.center .eyebrow { justify-content: center; }

/* ============================================================ CIFRE
 *
 * Mutarea de la Aave, si cea mai transferabila dintre toate: unitatea se
 * deseneaza mai mica si mai stinsa decat cifrele, iar valoarea secundara
 * sta dedesubt, estompata. Numarul are doua etaje si un singur centru de
 * greutate.
 *
 * `tnum` peste tot unde exista cifre care se compara pe verticala --
 * fara el, coloana de MW danseaza de la rand la rand.
 */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.unit {
  /* Spatiul e masurat in corpul UNITATII, care e la 0,52em din al cifrei --
   * deci 0,18em de aici insemna 0,09em pe langa cifra, adica nimic. Pe
   * desktop trecea, fiindca cifra e mare; pe cardul de pe telefon se citea
   * „120,0MW", lipit. 0,45em de aici da un spatiu adevarat, la orice marime. */
  margin-left: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.52em;
  font-weight: 400;
  letter-spacing: var(--track-normal);
  color: var(--ink-faint);
  vertical-align: baseline;
}

/* Cifra-erou. Un singur exemplar in tot site-ul, pe prima pagina. */
.figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
  color: var(--ink-display);
  background: linear-gradient(
    180deg,
    var(--ink-display) 0%,
    color-mix(in oklab, var(--ink-display) 62%, var(--paper)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .figure { color: var(--ink-display); background: none; }
}
.figure .unit { font-size: 0.28em; color: var(--ink-3); }

/* Banda de indicatori — capul de pagina de la Aave.
 * Eticheta mica si stinsa DEASUPRA, cifra mare dedesubt. In ordinea asta:
 * cine scaneaza citeste intai ce e, apoi cat. */
.stats {
  display: grid;
  /* 8.5rem, nu 11: la patru indicatori si un cadru ingust, 11rem incapea
   * de trei ori si al patrulea cadea singur pe randul doi, aratand a
   * scapare. Patru pe un rand sau doua cate doua -- niciodata 3+1. */
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.stats--rule {
  border-top: var(--rule) solid var(--line);
  padding-top: var(--space-md);
}
.stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stat__value {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__note {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* ============================================================ CHIPURI */

.chip {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 2px var(--space-2xs);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-normal);
  color: var(--ink-3);
  white-space: nowrap;
}
.chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--state-idle); flex: none;
}
.chip--live::before { background: var(--state-live); }
.chip--warn::before { background: var(--state-warn); }
.chip--dead::before { background: var(--state-dead); }
.chip--plain::before { display: none; }

/* ============================================================ CARTONASE */

.card {
  background: var(--paper-raised);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}
.card--flat { background: transparent; }
.grid {
  display: grid;
  /* `minmax(0, 1fr)`, nu `1fr`: coloanele cu continut lat (tabel, cod,
   * imagine) refuza sa se stranga sub `1fr` si impinge pagina lateral. */
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-md);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
/* Trei coloane fixe, pentru un numar de carduri care se imparte la trei. Cu
 * `auto-fit`, sase carduri pe /resurse ieseau 4 + 2, cu o gaura in dreapta. */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ TABEL
 * Densitatea Aave: rand scurt, fir sub fiecare, prima coloana pe doua
 * etaje (nume deasupra, cod dedesubt), numerele aliniate la dreapta si
 * tabulare. Tabelul isi poarta propria derulare -- pagina nu se misca
 * lateral niciodata.
 */
.tablewrap {
  overflow-x: auto;
  /* `relative`: cutia de derulare trebuie sa fie si blocul care le contine pe
   * cele pozitionate dinauntru. Textul `.sr` de langa fiecare valoare acoperita
   * („valoare acoperită") e `absolute`; fara randul asta el iesea din
   * derulare si lata TOATA pagina -- /atr cu cont avea 899px pe un ecran de
   * 390. */
  position: relative;
  /* Semnul ca se poate trage: marginea din dreapta se stinge cat timp mai
   * e continut dincolo de ea. `scroll-timeline` n-are suport peste tot,
   * deci e facut din fundaluri lipite de cutia de derulare -- tiparul
   * clasic, si merge oriunde. */
  background:
    linear-gradient(to right, var(--paper-raised) 30%, transparent) left center,
    linear-gradient(to left,  var(--paper-raised) 30%, transparent) right center,
    radial-gradient(farthest-side at 0 50%, oklch(0% 0 0 / 0.28), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, oklch(0% 0 0 / 0.28), transparent) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  /* Latime minima, ca tabelul sa DERULEZE in cutia lui in loc sa se
   * stranga. Fara ea, pe telefon coloana de nume se rupe pe trei randuri
   * si chipul de stare se taie la margine: un tabel ilizibil care incape,
   * in loc de unul lizibil pe care il tragi cu degetul. Aave face exact
   * asta, si e singurul raspuns onest -- un tabel de cinci coloane nu are
   * cum sa incapa pe 375px. */
  min-width: 42rem;
}
.table th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--paper-raised);
  border-bottom: var(--rule) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  white-space: nowrap;
}
.table td {
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--rule) solid var(--line-faint);
  color: var(--ink-2);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--paper-sunken); }
/* Randuri de aceeasi inaltime. Fara asta, o singura celula care se rupe in
 * doua -- „Retele Electrice" pe 128px -- ridica tot randul, iar un tabel cu
 * randuri de 59, 64 si 39 de pixeli arata neterminat chiar daca fiecare cifra
 * din el e corecta. Ce nu incape se taie cu trei puncte, si tot randul ramane
 * citibil dintr-o privire; textul intreg e oricum in fisa de la capatul lui. */
.table--egal td {
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 22rem;
  /* Inaltime rezervata, nu impusa: intr-un tabel `height` e un MINIM. Fara ea,
     randurile cu un chip („expirat") ieseau de 43px si cele fara de 38 -- o
     diferenta de cinci pixeli care nu se poate numi, dar se vede ca o dunga
     neregulata cand derulezi cincizeci de randuri. Valoarea e inaltimea
     randului cu chip, ca nimic sa nu fie inghesuit. */
  height: 2.7rem;
}
/* /in-pregatire: opt coloane, trei de text („Unde", „Firma", „Lucrarea").
 * Cu 22rem fiecare, tabelul trecea de latimea paginii cu cele trei cu tot, iar
 * pe macOS bara de derulare nu se vede: ultima coloana parea taiata
 * (Cristina, 29 sep 2026). Latimi care incap in 1280px. */
.table--pregatire td:nth-child(5) { max-width: 9rem; }
.table--pregatire td:nth-child(6) { max-width: 12rem; }
.table--pregatire td:nth-child(7) { max-width: 17rem; }
.table--egal td > a { display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

.table .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-1 { display: block; color: var(--ink); font-weight: 500; }
.table .cell-2 {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

/* Lacatul: valoarea ascunsa pentru cine n-are cont (CUI-ul pe /companii).
 *
 * Arata a legatura, nu a text stins, si de-aia poarta accentul: un lacat
 * care nu se vede ca e apasabil e doar o coloana goala, iar o coloana goala
 * se citeste ca „n-au datele", exact pe dos fata de ce spune. Vezi
 * `app/ui/parts.py`, `locked_cell`. */
.locked-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.locked-cell:hover { text-decoration: underline; }
.locked-cell > svg { flex: none; opacity: 0.8; }


/* ============================================================ FILTRE
 *
 * Un rand lipit, cu fire intre campuri -- aceeasi forma ca la consola de
 * pe prima pagina, dinadins: cine a cautat o data acolo recunoaste
 * campurile aici. Se trimit la schimbare, fara buton separat; butonul
 * apare doar in `<noscript>`, unde chiar e nevoie de el.
 */
.filters {
  display: grid;
  /* PATRU coloane, nu `auto-fit`. Cu `auto-fit` numarul iese din latimea
     disponibila si nu are nicio legatura cu cate campuri sunt: pe /atr iesea
     7, iar cele sapte filtre cereau 8 sloturi fiindca primul se intinde pe
     doua -- deci sase pe primul rand si unul singur pe al doilea, cu o mie de
     pixeli de gri gol langa el.

     Patru imparte curat si unul, si celalalt: /atr are 8 sloturi (doua randuri
     pline), /companii are 4 (un rand plin). Iar la 4 coloane pe 1280px fiecare
     camp are 320px, adica exact cat avea si inainte -- se schimba doar cate
     incap pe un rand, nu cat de late sunt. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rule);
  background: var(--line);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.filt {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--paper-raised);
  min-width: 0; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.filt:hover, .filt:focus-within { background: var(--paper-sunken); }
.filt__l {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filt select {
  width: 100%; min-width: 0;
  /* Loc la dreapta pentru sageata desenata mai jos. Fara el, optiunile lungi
     („Distribuție Oltenia (382)") treceau peste ea. */
  padding: 0 var(--space-md) 0 0; min-height: 26px;
  background: transparent; border: 0;
  color: var(--ink);
  font-size: var(--text-base);
  appearance: none; cursor: pointer;
}
/* `appearance: none` scoate si sageata sistemului, iar fara ea o lista arata
 * exact ca un text asezat acolo: nimic nu spune ca se poate deschide. Se
 * deseneaza din doua linii, ca bifa de la `.check` -- un SVG inline ar fi
 * cerut o culoare scrisa in marcaj, adica in afara tokenilor. */
/* Sageata sta pe CONTROL, nu pe camp, si de-aia se centreaza singura. Pusa pe
 * camp cu `bottom` fix, statea la 13,6px de jos in timp ce centrul listei era
 * la 21 -- o nepotrivire care se vede pe fiecare filtru din pagina si care
 * n-avea cum sa se repare, fiindca numarul ala nu stia cat de inalt e campul.
 *
 * Doua gradiente, nu un SVG: un SVG inline ar fi cerut o culoare scrisa in
 * marcaj, adica in afara tokenilor. */
.filt select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 7px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: background-image var(--dur-fast) var(--ease-out);
}
.filt:hover select, .filt:focus-within select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}

/* Inelul de focalizare se muta de pe control pe campul intreg: controlul n-are
 * contur propriu, deci un inel pe el ar fi desenat un dreptunghi in aer. Pe
 * camp, marcheaza exact zona pe care o comanda tasta. Nu se animeaza -- un
 * inel care apare treptat e un inel pe care nu-l vezi cand sari cu Tab. */
.filt select:focus, .filt input:focus { outline: none; }
.filt:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.filt option { background: var(--paper-raised); color: var(--ink); }
/* Lista acopera TOATA cutia, nu doar randul ei. Un clic pe eticheta de
 * deasupra („Putere minimă") muta doar focusul -- `<label>` nu deschide o
 * lista --, deci jumatatea de sus a cutiei parea moarta (Cristina, 29 sep
 * 2026, /companii, /atr, /in-pregatire). Lista se intinde peste padding si
 * peste eticheta, iar eticheta sta deasupra ei, fara sa prinda clicuri. */
.filt { position: relative; }
.filt__l { line-height: 1.4; }
.filt:has(select) .filt__l { position: relative; z-index: 1; pointer-events: none; }
.filt select {
  --filt-sus: calc(var(--space-2xs) + var(--text-2xs) * 1.4 + 1px);
  margin: calc(-1 * var(--filt-sus)) calc(-1 * var(--space-xs)) calc(-1 * var(--space-2xs));
  width: calc(100% + 2 * var(--space-xs)); max-width: none;
  padding: var(--filt-sus) calc(var(--space-md) + var(--space-xs)) var(--space-2xs) var(--space-xs);
  min-height: calc(26px + var(--filt-sus) + var(--space-2xs));
  background-position: right calc(7px + var(--space-xs)) bottom calc(var(--space-2xs) + 11px),
                       right calc(3px + var(--space-xs)) bottom calc(var(--space-2xs) + 11px);
}
.filt input {
  width: 100%; min-width: 0;
  padding: 0; min-height: 26px;
  background: transparent; border: 0;
  color: var(--ink); font-size: var(--text-base);
}
.filt input:focus { outline: none; }
.filt input::placeholder { color: var(--ink-faint); }
/* Cautarea dupa nume ia doua coloane: un camp liber langa doua meniuri
 * de aceeasi latime arata ca al treilea meniu, si nu se vede ca acolo se
 * scrie. */
.filt--wide { grid-column: span 2; }
/* Doua comutatoare, nu doua meniuri: sunt intrebari cu doua raspunsuri.
 * Casuta e desenata, nu cea a sistemului -- cea a sistemului vine cu alt
 * albastru in fiecare browser si e singurul loc din pagina unde ar aparea
 * o culoare pe care n-am ales-o noi. */
.checks {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.check {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.check:hover { color: var(--ink); }
.check input {
  appearance: none;
  width: 15px; height: 15px; flex: none;
  margin: 0;
  border: var(--rule) solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--paper-raised);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.check input:checked {
  background: var(--accent-fill);
  border-color: var(--accent);
  /* Bifa, desenata din doua linii inclinate. Un SVG inline ar fi cerut o
   * culoare scrisa in marcaj, adica in afara tokenilor. */
  background-image: linear-gradient(45deg, transparent 44%, var(--accent-ink) 44%,
                    var(--accent-ink) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--accent-ink) 44%,
                    var(--accent-ink) 56%, transparent 56%);
  background-size: 8px 2px, 8px 2px;
  background-position: 2px 8px, 5px 8px;
  background-repeat: no-repeat;
}
.check input:checked + span { color: var(--ink); }


/* Unde esti in lista, si cat de lunga e lista. Sub banda de indicatori,
 * fiindca raspunde la o intrebare mai marunta decat ele. */
.count {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Starea goala. Rama punctata, fiindca golul E informatie: „inca n-a
 * intrebat nimeni" e un raspuns, iar un raspuns are nevoie de un chenar ca sa
 * se vada ca e acolo dinadins, nu ca lipseste ceva.
 *
 * O SINGURA definitie. A doua a existat cateva minute, pe 2 septembrie 2026,
 * cand panoul si-a adus propriul `.empty`: cea de aici castiga la
 * `text-align`, a doua la restul, si starea goala din panou iesea centrata
 * fara ca vreo regula sa spuna asta. Vezi NOTES.md, „Doua clase cu acelasi
 * nume". */
.empty {
  padding: var(--space-lg) var(--space-md);
  border: var(--rule) dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ PAGINARE
 * Inainte, inapoi, si unde esti. Fara sirul de numere: nimeni nu sare la
 * pagina 54 dintr-un inventar pe care tocmai l-a filtrat.
 */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.pager__at {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-align: center;
}
span.btn.is-disabled { pointer-events: none; }

@media (max-width: 560px) {
  .pager { flex-direction: column; }
  .pager .btn { width: 100%; }
}

/* ============================================================ CAMP DE DATE
 *
 * Enrichment, nivel B: fasia de densitate desenata din inventarul real —
 * o linie per proiect, la scara puterii lui. Amandoua referintele pun
 * ceva atmosferic in spatele primului ecran; AuthKit pune conuri de
 * lumina si praf de stele, care nu inseamna nimic. Noi punem chiar
 * marfa. Costa la fel si spune ceva.
 */
.field {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
/* ============================================================ CONSOLA
 * Trei campuri lipite intr-un singur bloc, plus un buton sub ele. Nu sta
 * in erou: acolo s-ar bate cu titlul pentru acelasi ecran. Are ecranul ei.
 */
.find {
  margin-top: var(--space-xl);
  text-align: left;
}
/* ============================================================ MARUNTE */

/* Titlu de sectiune cu o actiune in dreapta lui. Pe mobil se aseaza pe
 * doua randuri -- niciodata butonul rupt in doua. */
.rowhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
  /* Fara ea, pe paginile de analiza si retea titlul („Unde e prețul",
   * „Explorează", „Cererea, pe zonă") statea lipit de muchia cardului de
   * dedesubt, fara niciun pixel intre ele. Marginea se contopeste cu cea de
   * sus a vecinului, deci unde exista deja spatiu nu se dubleaza. */
  margin-bottom: var(--space-sm);
}
.rowhead .h2 { min-width: 0; }

/* Randul de butoane de sub o sectiune. O singura definitie: a existat si a
 * doua, mai jos in foaie, care nu schimba decat spatiul dintre butoane -- si
 * castiga ultima, deci prima era o minciuna pentru cine o citea. */
.cta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-lg);
}
/* Doua feluri de a cere centrarea, si amandoua se folosesc in pagini:
 * `.center` pe un parinte, si `.cta center` pe chiar elementul asta. A doua
 * n-avea regula, deci butonul „Toate stirile" statea la stanga sub un titlu
 * centrat. */
.center .cta, .cta.center { justify-content: center; }
.after { margin-top: var(--space-lg); }


/* ============================================================ ATMOSFERA
 *
 * Ce face AuthKit in spatele fiecarui ecran, tradus in verdele nostru.
 * Toate straturile de aici sunt `pointer-events: none` si stau pe z-index
 * negativ: nu prind clicuri, nu intra in ordinea de tabulare, si daca
 * browserul nu le stie, pagina ramane intreaga.
 *
 * Regula pe care nu o incalcam: atmosfera nu se pune peste text. Se pune
 * in spatele lui, si se stinge inainte sa ajunga la el.
 */

.air { position: relative; isolation: isolate; overflow: clip; }

/* Praful de stele. Trei straturi de puncte la scari diferite -- unul
 * singur se vede ca tipar care se repeta, trei se citesc ca imprastiere.
 * Numerele prime din `background-size` sunt intentionate: doua dimensiuni
 * care se impart una pe alta se suprapun si redevin un tipar. */


/* ============================================================ SUBSOL Ft5
 * Randurile de destinatii marunte. Nu patru coloane de linkuri: subsolul cu
 * patru coloane e amprenta generata din care fugim.
 *
 * A avut o declaratie mare in cap pana pe 2 septembrie 2026; a plecat, si
 * odata cu ea si linia care o despartea de randuri -- o linie deasupra
 * primului lucru din subsol nu desparte nimic de nimic.
 */
footer.site {
  position: relative; overflow: hidden;
  border-top: 2px solid var(--accent-fill);
  background:
    radial-gradient(70% 80% at 100% 0%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%),
    var(--paper-slab);
  padding-top: var(--space-lg);
}
.foot__sus {
  display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
  gap: var(--space-lg) var(--space-xl); align-items: start;
}
/* Nota juridica: pe toata latimea, sub coloane. A stat sub marca pana cand
 * textul specialistilor (5 octombrie 2026) a ajuns la trei fraze. */
.foot__nota { grid-column: 1 / -1; max-width: none; }
.foot__marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.foot__mail { font-size: var(--text-sm); color: var(--ink-3); }
.foot__mail:hover { color: var(--accent); }
.foot__grupe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.foot__cb { position: absolute; opacity: 0; pointer-events: none; }
.foot__h label { display: flex; align-items: center; justify-content: space-between; }
.foot__plus { display: none; }
.foot__col ul { margin: var(--space-xs) 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.foot__col a { font-size: var(--text-sm); color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out); }
.foot__col a:hover { color: var(--accent); }
.foot__jos {
  margin-top: var(--space-lg); padding-block: var(--space-sm) var(--space-md);
  border-top: var(--rule) solid var(--line-faint);
}
.foot__nota { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--ink-faint); }
.foot__et { font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.foot__nota a { color: var(--ink-3); }
.foot__nota a:hover { color: var(--accent); }
.foot__baza { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__fine { margin: 0; font-size: var(--text-xs); color: var(--ink-faint); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px var(--space-md); margin: 0 0 0 auto; padding: 0; list-style: none; }
.foot__legal a { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.foot__legal a:hover { color: var(--accent); }
.foot__anpc { display: block; line-height: 0; }
.foot__anpc img { display: block; width: 161px; height: 40px; border-radius: 7px; }
.foot__semn { color: var(--ink-3); }
.foot__semn:hover { color: var(--accent); }
@media (max-width: 1000px) {
  .foot__sus { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
/* Telefon: grupele sunt randuri care se deschid la atingere, legaturile pe
 * doua coloane. */
@media (max-width: 620px) {
  .foot__marca { flex-direction: row; align-items: center; justify-content: space-between;
                 flex-wrap: wrap; gap: var(--space-xs); }
  .foot__grupe { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot__col { border-bottom: var(--rule) solid var(--line-faint); }
  .foot__col:first-child { border-top: var(--rule) solid var(--line-faint); }
  .foot__col .foot__h { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
             letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .foot__h label { min-height: 48px; cursor: pointer; }
  .foot__plus { display: block; position: relative; width: 12px; height: 12px; }
  .foot__plus::before, .foot__plus::after {
    content: ""; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1.5px;
    background: var(--ink-3); transition: transform var(--dur-mid) var(--ease-out);
  }
  .foot__plus::after { transform: rotate(90deg); }
  .foot__cb:checked ~ .foot__h .foot__plus::after { transform: rotate(0deg); }
  .foot__col ul { display: none; grid-template-columns: repeat(2, minmax(0, 1fr));
                  gap: 0 var(--space-sm); margin: 0 0 var(--space-xs); }
  .foot__cb:checked ~ ul { display: grid; }
  .foot__col a { display: block; padding-block: 8px; }
  .foot__cb:focus-visible ~ .foot__h label { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
  .foot__sus { gap: var(--space-md); }
  .foot__jos { margin-top: var(--space-xs); border-top: 0; padding-top: 0; }
  .foot__baza { gap: var(--space-xs) var(--space-md); }
  .foot__legal { order: -1; flex-basis: 100%; margin: 0; gap: 0 var(--space-md); }
  .foot__legal a { display: block; padding-block: 6px; }
  .foot__fine { order: 2; flex-basis: 100%; }
}
}

/* ============================================================ MISCARE
 *
 * Patru primitive, si nimic altceva se misca:
 *   1. `tick`      cifra-erou urca de la zero
 *   2. `reveal`    blocul intra de jos cand ajunge in ecran, o data
 *   3. `draw`      firul de sub supratitlu se trage de la centru
 *   4. hover       pe rand de tabel si pe card
 *
 * De ce IntersectionObserver si nu `animation-timeline: view()`: cea din
 * urma e mai eleganta, dar Firefox si Safari mai vechi n-o au, iar acolo
 * blocul ramanea la cadrul zero -- adica invizibil. O animatie care
 * ascunde continut in jumatate din browsere nu e o animatie, e un defect.
 * Observatorul merge peste tot si se opreste singur dupa prima intrare.
 */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Starea de plecare. `js` se pune pe <html> de scriptul carcasei: fara
 * JavaScript, regula asta nu se aplica niciodata si continutul e vizibil
 * din prima. Ascunderea nu are voie sa depinda de un script care poate
 * sa nu ruleze. */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Decalajul in cascada. Copiii unui bloc marcat intra unul dupa altul, la
 * 60ms distanta -- exact ritmul de la AuthKit. Peste sase, decalajul se
 * opreste: un tabel de treizeci de randuri care intra in cascada tine
 * doua secunde si devine enervant, nu elegant. */
html.js [data-reveal-group] > * { --reveal-delay: 0ms; }
html.js [data-reveal-group] > *:nth-child(2) { --reveal-delay: 60ms; }
html.js [data-reveal-group] > *:nth-child(3) { --reveal-delay: 120ms; }
html.js [data-reveal-group] > *:nth-child(4) { --reveal-delay: 180ms; }
html.js [data-reveal-group] > *:nth-child(5) { --reveal-delay: 240ms; }
html.js [data-reveal-group] > *:nth-child(n+6) { --reveal-delay: 300ms; }

/* Firul de sub supratitlu se trage de la centru spre margini. Se aplica
 * doar cand supratitlul e el insusi marcat pentru intrare, ca sa nu se
 * desfasoare in gol pe paginile de date, unde nu intra nimic. */
html.js .eyebrow[data-reveal]::before,
html.js .eyebrow[data-reveal]::after {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-out) 120ms;
}
html.js .eyebrow[data-reveal]::after { transform-origin: left center; }
html.js .eyebrow[data-reveal].is-in::before,
html.js .eyebrow[data-reveal].is-in::after { transform: scaleX(1); }

/* Cardul se ridica si primeste conturul aprins. Fara scalare: `scale` pe
 * hover e cel mai sigur semn de sablon, si pe un card cu text il face
 * neclar pentru cateva cadre. */
.card--live {
  transition: border-color var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.card--live:hover, .card--live:focus-within {
  border-color: var(--accent-line);
  background: var(--paper-sunken);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Nu doar mai scurt -- deloc. Un bloc care apare instantaneu e corect;
   * unul care aluneca 0.01ms tot aluneca. */
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .eyebrow[data-reveal]::before,
  html.js .eyebrow[data-reveal]::after { transform: scaleX(1); transition: none; }
  .card--live:hover { transform: none; }
  /* Ridicarile de pe prima pagina: fara ele, nu mai scurte. Un card care
   * urca 4px in 0.01ms tot sare. */
  .mcard:hover, .stire:hover { transform: none; }
  .mcard:hover .mcard__art { transform: none; }
  .hero__art { animation: none; }
  .hero__art { transform: scale(1.03); }
}

/* ============================================================ INSTRUMENTE
 *
 * Ce e nevoie pentru cele trei pagini mutate ultimele: /piata, /calculator
 * si /preturi. Regulile vin din foaia dinainte de reconstructie, dar NU
 * copiate: fiecare culoare e re-legata la tokenii de aici. Cu tokenii vechi
 * (`--brand`, `--wash-4`, `--mono`) ar fi iesit invizibile -- nu exista in
 * `tokens.css` -- si un `var()` care nu exista nu cade, da o valoare goala.
 */

/* Nota de sub o cifra sau un grafic. Mai mica decat proza si mai stinsa:
 * spune de unde vine cifra de deasupra, nu incepe alt subiect. */
.fine {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  color: var(--ink-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.fine strong { color: var(--ink-2); font-weight: 500; }

/* Caseta de lamurire. Nu e avertizare si nu e lacat -- e locul unde se
 * explica de ce doua cifre masurate arata diferit. Tonul e al accentului,
 * nu al erorii: informatia dinauntru e utila, nu ingrijoratoare. */
.note {
  margin-top: var(--space-lg);
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule) solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-wash);
}
.note p { margin: 0; color: var(--ink-2); line-height: var(--leading-body); }
.note strong { color: var(--ink); font-weight: 600; }

/* Doua panouri alaturate: harta si fisa, textul si graficul. `--half` le face
 * egale; implicit desenul ia mai mult, fiindca el e continutul. */
.duo {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.duo--half { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

/* Tabelele lungi stau stranse: graficul de deasupra spune povestea, tabelul
 * e referinta -- si o referinta n-are de ce sa ocupe un ecran pana e ceruta. */
.drop {
  margin-top: var(--space-md);
  border-top: var(--rule) solid var(--line);
  padding-top: var(--space-sm);
}
.drop > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  color: var(--ink-2);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.drop[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.drop > summary:hover { color: var(--accent); }
.drop .tablewrap { margin-top: var(--space-sm); }

/* ------------------------------------------------------------- graficele
 *
 * Toate sunt SVG randat pe server, din aceleasi interogari care umplu
 * tabelele de sub ele. Deci n-au nevoie de niciun script: culorile stau
 * aici, geometria in `app/views.py`.
 */

/* `overflow: visible` nu e cosmetica: eticheta de la capatul unei axe e
 * ancorata pe centru, deci jumatate din ea cade in afara `viewBox`-ului si un
 * SVG taie implicit ce iese. Pe graficul pretului captat asta insemna „ep" in
 * loc de „sep" si „au" in loc de „aug" -- prima si ultima luna, adica exact
 * capetele intervalului despre care vorbeste sectiunea. */
.shapechart, .monthchart, .linechart, .capchart,
.weekchart, .negchart {
  display: block; width: 100%; height: auto; overflow: visible;
}
.shapechart, .monthchart, .capchart, .linechart { margin-top: var(--space-sm); }
/* Saptamana are sapte bare, negativele treisprezece luni: aceeasi latime ar
 * strivi-o pe a doua pana cand etichetele se ating. */
.weekchart { max-width: 440px; }
.negchart { max-width: 620px; }

/* Textul de pe orice grafic: monospatiat, fiindca sunt cifre citite dintr-o
 * sursa, si stins, fiindca sunt repere, nu continut. */
.shapechart .sx, .linechart .lx, .capchart .lx,
.weekchart .wl, .weekchart .wv {
  font-family: var(--font-mono);
  font-size: 11px;
  text-anchor: middle;
  fill: var(--ink-3);
}
.weekchart .wv { fill: var(--ink-2); }

/* Barele se amesteca din cerneala, nu din `--line-strong`: linia e un
 * separator la 14% si pe intuneric barele se pierdeau in fundal. Ele sunt
 * DATE, deci trebuie sa se vada ca atare -- iar amestecul tine si pe hartie,
 * si pe intuneric, fara doua reguli. */
.shapechart .sb {
  fill: color-mix(in oklab, var(--ink) 26%, transparent);
  transition: fill var(--dur-fast) var(--ease-out);
}
.shapechart .sb.hi { fill: var(--accent); }
/* Pretul negativ isi are culoarea lui: nu e „putin", e altceva. */
.shapechart .sb.neg { fill: var(--state-warn); }
.shapechart .sb:hover { fill: var(--accent-hover); }
.shapechart .szero,
.linechart .lz { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }

.monthchart .mb { fill: color-mix(in oklab, var(--ink) 22%, transparent); }
.monthchart .mb:hover { fill: color-mix(in oklab, var(--ink) 38%, transparent); }
.monthchart .mp {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}

/* Banda min-max se amesteca din accent, nu din `--accent-wash`: spalarea e
 * un fundal de suprafata, iar pe hartia deschisa (98.5% fata de 94%) banda
 * iesea aproape invizibila -- adica exact informatia pentru care exista
 * sectiunea. Amestecata cu transparent, tine si pe intuneric, si pe lumina. */
.linechart .lb { fill: color-mix(in oklab, var(--accent) 18%, transparent); }
.linechart .ll {
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round;
}

.weekchart .wb { fill: color-mix(in oklab, var(--ink) 26%, transparent); }
/* Weekendul nu e „mai putin", e alt regim de cerere -- si asta e chiar
 * informatia sectiunii. */
.weekchart .wb.wk { fill: var(--accent); }
.negchart .nb { fill: var(--state-warn); }

/* Legenda celor trei linii. Culoarea singura nu spune care e care, iar
 * textul sectiunii numeste doar linia gri. */
.legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3xs) var(--space-md);
  margin-top: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3);
}
.legend__k {
  width: 22px; height: 0; margin-right: var(--space-3xs);
  border-top: 2px solid currentColor;
}
.legend__k--solar { color: var(--state-warn); }
.legend__k--eolian { color: var(--accent); }
.legend__k--piata { color: var(--ink-faint); border-top-style: dashed; }

/* Pretul captat: trei linii pe acelasi desen. Gri e piata -- e reperul, deci
 * n-are voie sa atraga ochiul; culorile sunt ale celor doua tehnologii. */
.capchart polyline {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.capchart .cp-piata { stroke: var(--line-strong); stroke-dasharray: 5 4; }
.capchart .cp-solar { stroke: var(--state-warn); }
.capchart .cp-eolian { stroke: var(--accent); }

/* --------------------------------------------------- harta pe judete
 *
 * Cinci trepte, monoton crescatoare in saturatie SI descrescatoare in
 * luminozitate: se citesc si alb-negru, si de un daltonist.
 */
:root {
  --y1: oklch(30% 0.045 245); --y2: oklch(41% 0.075 245);
  --y3: oklch(53% 0.105 245); --y4: oklch(66% 0.115 245);
  --y5: oklch(79% 0.100 245);
}
.yieldmap { margin-top: var(--space-xs); }
.yieldmap svg { display: block; width: 100%; height: auto; }
.yc {
  stroke: var(--paper); stroke-width: 0.8;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.yc:hover { opacity: 0.75; }
/* `fill` pentru judetele din SVG, `background` pentru pastilele legendei,
 * care sunt HTML. Scrise doar cu `fill`, pastilele ies invizibile -- si o
 * legenda fara culori e mai rea decat lipsa ei. */
path.y0 { fill: var(--paper-raised); }
path.y1 { fill: var(--y1); } path.y2 { fill: var(--y2); }
path.y3 { fill: var(--y3); } path.y4 { fill: var(--y4); }
path.y5 { fill: var(--y5); }
.ykey {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3);
}
.ykey i { width: 38px; height: 10px; border-radius: var(--radius-pill); display: inline-block; }
.ykey .y1 { background: var(--y1); } .ykey .y2 { background: var(--y2); }
.ykey .y3 { background: var(--y3); } .ykey .y4 { background: var(--y4); }
.ykey .y5 { background: var(--y5); }

/* Fisa judetului. Se schimba din harta, prin `:target`, fara reincarcare. */
.jpanel { position: relative; min-height: 340px; }
.jsheet {
  display: none;
  scroll-margin-top: 110px;
  padding: var(--space-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.jsheet:target { display: block; }
.jsheet.is-default { display: block; }
/* „Ascunde-ma daca fratele meu e tinta" -- singurul fel de a spune asta
 * fara JavaScript. */
/* `:not(:target)`: fisa implicita e chiar judetul cel mai bun (Constanta). Fara
 * conditia asta, cand era ALEASA se ascundea singura si panoul ramanea gol
 * (Cristina, 29 sep 2026). */
.jpanel:has(.jsheet:target) .jsheet.is-default:not(:target) { display: none; }
.jsheet__rank {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3);
}
.jsheet__val {
  display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap;
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: var(--track-figure); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.jsheet__val small {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  letter-spacing: 0; color: var(--ink-3);
}
.jsheet__meta {
  display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jsheet__meta dt {
  margin-bottom: var(--space-3xs);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.jsheet__meta dd { margin: 0; color: var(--ink); font-size: var(--text-sm); }
.jsheet > .btn { margin-top: var(--space-md); }

/* ------------------------------------------------------------ calculator */

/* Filele tehnologiilor. Sunt legaturi, nu butoane: fiecare tehnologie are
 * adresa ei si se poate trimite mai departe. */
.tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-3xs);
  margin-top: var(--space-md);
  border-bottom: var(--rule) solid var(--line);
}
.tab {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--space-sm);
  color: var(--ink-3); font-size: var(--text-sm); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }

.calc {
  display: grid; gap: var(--space-sm); align-items: end;
  margin-top: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr));
}
.cf { display: flex; flex-direction: column; gap: var(--space-3xs); }
.cf__l {
  display: flex; align-items: baseline; gap: var(--space-3xs);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
/* Unitatea sta in eticheta, nu in casuta: intr-un rand de sapte campuri,
 * repetata langa fiecare cifra, dubleaza greutatea vizuala a formularului. */
.cf__u { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.cf input {
  width: 100%; min-height: 44px; padding: var(--space-2xs) var(--space-xs);
  font: inherit; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper-sunken);
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm);
}
.cf input:focus-visible { outline: none; border-color: var(--accent); }
.calc > .btn { min-height: 44px; }
.calc + .stats { margin-top: var(--space-lg); }

/* -------------------------------------------------------------- preturi */

/* Doua planuri, doua coloane egale, centrate in masura ingusta a paginii.
 * Cu trei carduri si `auto-fit`, randul se rupea 2+1 pe latimi mijlocii si
 * arata a scapare. Doua se aseaza mereu la fel. */
.planuri {
  display: grid; gap: var(--space-md); margin-top: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  align-items: start;
}
.plan__n {
  margin: 0; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 600; letter-spacing: var(--track-tight); color: var(--ink);
}
/* Randul anual: acelasi card, fara comutator. Un buton care ascunde jumatate
 * din informatie ca s-o arate pe cealalta cere o apasare pentru ceva ce
 * incape oricum. */
.plan__an {
  margin: var(--space-3xs) 0 0; color: var(--ink-3); font-size: var(--text-sm);
}
.plan__an b { color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__cta { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.plan__cta .btn { justify-content: center; }
/* Proba, sub buton si stinsa: e un motiv sa apesi, nu argumentul principal.
 * Scrisa mare ar fi spus „produsul asta se ia gratis". */
.plan__proba {
  margin: var(--space-2xs) 0 0; text-align: center;
  color: var(--ink-faint); font-size: var(--text-xs);
}
.pret__pachet {
  margin: var(--space-md) 0 0; text-align: center;
  color: var(--ink-3); font-size: var(--text-sm);
}
.pret__pachet b { color: var(--ink); }

/* „Amandoua includ": o lista in doua coloane, scrisa o data. Inainte erau
 * optsprezece randuri de matrice cu bife identice pe amandoua planurile, si
 * ochiul trebuia sa caute cele sase care difereau. */
.comun {
  display: grid; gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin: var(--space-md) 0 0; padding: 0; list-style: none;
}
.comun li {
  display: flex; gap: var(--space-2xs); align-items: start;
  color: var(--ink-2); font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.comun .plan__ck { color: var(--accent); flex: none; margin-top: 3px; }

/* Ce aduce Elite: sase randuri cu titlu si o propozitie. Nu bife -- o bifa
 * spune „exista", iar aici intrebarea e „ce imi da". */
/* Ce aduce Elite: o lista cu fire subtiri, nu cutii cu bara pe margine
 * (2 octombrie 2026 -- bara colorata pe cartonas e un tic de interfata
 * generata). */
.delta {
  display: grid; gap: 0 var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin-top: var(--space-md);
}
.delta__r { padding-block: var(--space-sm); border-bottom: var(--rule) solid var(--line); }
.delta__t {
  margin: 0; font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 600; color: var(--ink);
}

/* Cardurile sunt coloane ale ACELEIASI grile: cele cinci randuri se aliniaza
 * intre ele, altfel fiecare card isi masoara singur inaltimile si butoanele
 * ies la etaje diferite. */
.plan {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.plan--top { border-color: var(--accent-line); box-shadow: var(--glow-accent); }
.plan__price {
  display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap;
  margin: 0; font-family: var(--font-display); letter-spacing: var(--track-figure);
}
.plan__now { font-size: var(--text-3xl); font-weight: 700; color: var(--ink); line-height: 1; }
.plan__unit { font-size: var(--text-sm); color: var(--ink-3); font-family: var(--font-body); }
/* `align-content: start` fiindca lista e ultimul rand al subgrilei si se
 * intinde pe toata inaltimea ei: fara el, cardul cu cele mai putine bife isi
 * imprastie randurile ca sa umple golul, si cele trei liste par scrise cu
 * spatieri diferite. */
.plan__feats {
  display: grid; align-content: start; gap: var(--space-2xs);
  margin: 0; padding: 0; list-style: none;
}
.plan__feats li {
  display: flex; gap: var(--space-2xs); align-items: start;
  color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-snug);
}
.plan__ck { color: var(--accent); flex: none; margin-top: 2px; }

@media (max-width: 1000px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .jpanel { min-height: 0; }
}

@media (max-width: 560px) {
  /* Butonul calculatorului trece pe randul lui: intr-o grila de doua coloane
   * el ramanea al optulea camp, langa „Rata de actualizare", si arata ca un
   * camp care nu se poate completa. */
  .calc > .btn { grid-column: 1 / -1; }
}

/* Randuri cheie-valoare, pentru datele care se citesc si nu se editeaza.
 * Nu `.spec`: aia e pentru fisa unui proiect, unde valorile sunt scurte si
 * numeroase. Aici o valoare poate fi o propozitie intreaga, deci randul
 * trebuie sa respire si sa se rupa pe telefon. */
.krows { display: grid; gap: 0; margin: var(--space-sm) 0 0; }
.krow {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-sm); padding: var(--space-xs) 0;
  border-bottom: var(--rule) solid var(--line-faint);
}
.krow:last-child { border-bottom: 0; }
.krow dt { color: var(--ink-3); font-size: var(--text-sm); }
.krow dd { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.krow dd strong { color: var(--ink); }
.krow dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.krow .fine { margin-top: var(--space-3xs); }
/* Pe telefon: eticheta la stanga, valoarea lipita de dreapta cand incape pe
 * acelasi rand; o valoare lunga (o propozitie, un formular) coboara singura
 * pe randul ei, cat toata latimea. `flex: 0 1 auto` pe valoare e toata
 * smecheria: baza ei e latimea textului, deci o valoare scurta sta langa
 * eticheta, iar una lunga nu mai incape si trece dedesubt. */
@media (max-width: 560px) {
  .krow {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--space-3xs) var(--space-sm);
  }
  .krow dt { flex: 0 0 auto; max-width: 100%; }
  .krow dd { flex: 0 1 auto; margin-left: auto; min-width: 0; }
  /* In casetele de cont eticheta e un supratitlu mic, DEASUPRA valorii, si
   * asa ramane: acolo valorile sunt propozitii si formulare, iar o propozitie
   * lipita de dreapta se citeste greu. */
  .cbox .krow { display: grid; }
  .cbox .krow dd { margin-left: 0; }
}

/* ============================================================ CARCASA DE LUCRU
 *
 * Bara laterala, fara subsol. A doua carcasa a site-ului, si ultima -- pana
 * pe 2 septembrie 2026 erau trei, iar a treia era mereu cea uitata cand se
 * schimba ceva. Vezi NOTES.md, „A treia carcasa, si cea uitata".
 */
/* Carcasa de lucru n-are bara laterala din 22 septembrie 2026: intrarile
 * aplicatiei stau in bara de sus, aceeasi cu a site-ului. Coloana aia tinea
 * trei randuri si o cincime din latime, iar produsul avea doua meniuri.
 * Clasele `.side*` s-au sters pe 24 septembrie 2026. */
.work { min-height: 100vh; }
.work__main { padding-block: var(--space-xl); min-width: 0; }

/* Panoul: sectiuni de carduri. Golul e informatie, deci starea goala are
 * aceeasi greutate ca una plina. */
.psec { margin-top: var(--space-xl); }
.psec:first-of-type { margin-top: var(--space-md); }
.pdeck { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.pc { display: grid; gap: var(--space-2xs); }
.pc__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-sm); }
.pc__head .h4 a { color: var(--ink); }
.pc__head .h4 a:hover { color: var(--accent); }
.pc__meta { color: var(--ink-3); font-size: var(--text-sm); }
.pc__meta strong { color: var(--accent); }
.pc__who { color: var(--ink); font-weight: 600; }
.pc__act { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.inline { display: inline; }
.ref {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-faint); letter-spacing: var(--track-label);
}
/* Dezvaluirea. Se arata intreg -- firma, dovada, om, adresa -- fiindca
 * jumatate de dezvaluire ar fi mai rea decat niciuna. */
.reveal {
  margin-top: var(--space-2xs); padding: var(--space-sm);
  border: var(--rule) solid var(--accent-line); border-radius: var(--radius-md);
  background: var(--accent-wash);
}
.reveal__t {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.reveal__n { color: var(--ink); font-size: var(--text-lg); font-weight: 600; }
.reveal__c { margin-top: var(--space-2xs); color: var(--ink-2); font-size: var(--text-sm); }
.reveal__c a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Raspunsul la o actiune facuta. Firul din stanga poarta tonul; restul e
 * acelasi obiect, ca omul sa recunoasca pagina a doua oara. */
.result {
  max-width: var(--measure); margin-top: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule) solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--radius-md); background: var(--paper-raised);
}
.result--bad { border-left-color: var(--state-dead); }
.result .prose { margin-top: var(--space-2xs); }

@media (max-width: 860px) {
  .work { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ FIȘA DE PROIECT */

/* Firul de intoarcere. Se ajunge pe fisa dintr-un tabel si se pleaca inapoi
 * in el: fara drumul scris, singura cale inapoi e butonul browserului. */
.crumbs {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.stack { display: grid; gap: var(--space-md); align-content: start; }

/* Fisa tehnica: perechi eticheta-valoare, pe doua coloane cat incape. Randul
 * intreg are un fir sub el, nu chenar: sunt douasprezece randuri, si
 * douasprezece casete ar fi douasprezece obiecte. */
.spec { display: grid; gap: 0; margin: var(--space-sm) 0 0; }
.spec__r {
  /* Coloana etichetei se plafoneaza, nu se imparte procentual. Cu `1fr` ea
   * lua 45% din latime, adica 391px pentru cuvantul „Județ" -- eticheta si
   * valoarea ei ajungeau la capete opuse ale randului si nu se mai citeau ca
   * o pereche. 24ch incape si cea mai lunga eticheta de pe fisa („Contract de
   * racordare"), iar restul randului ramane valorii. */
  display: grid; grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  border-bottom: var(--rule) solid var(--line-faint);
}
.spec__r:last-child { border-bottom: 0; }
.spec dt { color: var(--ink-3); font-size: var(--text-sm); }
.spec dd { margin: 0; color: var(--ink); font-size: var(--text-sm); }

/* Producția solară pe luni: douăsprezece bare, în fișa proiectului.
 *
 * Nu e decor. Un parc produce în iunie de trei ori cât în decembrie, iar
 * tocmai în lunile bogate prețul de prânz e cel mai jos — cu o singură cifră
 * anuală, pierderea aia rămâne o medie. Barele sunt aliniate la BAZĂ, nu
 * centrate: altfel vârfurile s-ar citi ca o gamă, nu ca o producție. */
.lunar {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 3px; align-items: end;
  height: 4.5rem; margin-top: var(--space-sm);
}
.lun { display: flex; flex-direction: column; justify-content: flex-end;
       align-items: center; height: 100%; gap: 3px; }
/* Pista barei, separata de litera lunii. Procentul se socotea din toata
 * coloana, cu tot cu litera de dedesubt, iar ce trecea de ~77% se turtea la
 * acelasi maxim: sapte luni, martie-septembrie, iesau egale, desi iulie are cu
 * 30% mai mult decat martie. */
.lun__t {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: flex-end;
}
.lun i {
  display: block; width: 100%; min-height: 2px;
  background: var(--serie-solar);
  opacity: 0.9;
  border-radius: 2px 2px 0 0;
}
.lun b { font-size: 10px; font-weight: 500; color: var(--ink-3);
         font-family: var(--font-mono); }

/* Aglomerarea la nod: cinci bare. Barele stinse raman vizibile -- scara se
 * citeste numai daca se vede si ce NU e plin. */
.load { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule) solid var(--line); }
.load__head { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.load__l {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.load__bars { display: inline-flex; gap: 3px; }
.load__b {
  width: 14px; height: 8px; border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 14%, transparent);
}
.load__b.is-on { background: var(--accent-fill); }
.load__head strong { color: var(--ink); font-size: var(--text-sm); }

/* Blocul de vanzare. Cand exista pret, e singurul lucru colorat din coloana:
 * de aici incolo pagina descrie ceva de cumparat. */
.sale__mw {
  display: flex; align-items: baseline; gap: var(--space-3xs);
  margin: var(--space-3xs) 0 var(--space-md);
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: var(--track-figure); line-height: 1; color: var(--ink);
}
.sale {
  display: grid; gap: var(--space-2xs);
  padding: var(--space-sm); border-radius: var(--radius-md);
  border: var(--rule) solid var(--accent-line); background: var(--accent-wash);
}
.sale__k {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.sale__v {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  color: var(--ink);
}
.sale .btn { justify-self: start; }

/* Proprietarul. Doua stari, si amandoua spun acelasi lucru despre regula:
 * numele nu apare aici niciodata. */
.owner {
  padding: var(--space-sm); border-radius: var(--radius-md);
  border: var(--rule) solid var(--line); background: var(--paper-raised);
}
.owner strong { color: var(--ink); }
/* ------------------------------------------------------------ PAȘII
 *
 * Lista numerotata de pe /cum-functioneaza. Cifra e desenata, nu lasata in
 * seama browserului: marcatorul implicit al lui `<ol>` nu se poate alinia cu
 * titlul, si nici colora altfel decat textul.
 */
.steps {
  display: grid; gap: var(--space-md);
  margin: var(--space-lg) 0 0; padding: 0; list-style: none;
  counter-reset: pas;
}
.step { display: flex; gap: var(--space-sm); align-items: start; }
.step__n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-raised);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-3);
}
.step .prose { margin-top: var(--space-3xs); }

/* Indemnul de la capatul unei sectiuni de ceremonie: doua butoane, centrate,
 * cu loc de respiro deasupra. */
/* ------------------------------------------------------------ ușile de cont
 *
 * `/intra`, `/cont-nou`, parola uitată. Se randează pe `app.`, cu aceeași
 * foaie: e același produs, si asta se vede sau nu se vede exact aici -- e
 * ultima pagina pe care o intalneste un om inainte sa aiba cont.
 */

.auth {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  /* Fara panou lateral, cardul NU se intinde pe toata latimea: un formular
   * de doua campuri lat cat ecranul se citeste ca o eroare de asezare. */
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
}
.auth--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
.auth__card {
  padding: var(--space-lg);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.auth__side { color: var(--ink-2); }
.auth__side .h4 { margin-bottom: var(--space-2xs); }
.auth__side .prose + .prose { margin-top: var(--space-sm); }
/* Titlul unui cartonas si textul lui nu se ating: `.prose` n-are
 * margine de sus, fiindca in majoritatea locurilor e primul copil. */
.card .h4 + .prose, .card h3 + .prose { margin-top: var(--space-xs); }

/* Formularul. Widgetul il randeaza Django, fara clase: se prinde pe tip. */
.frm { display: grid; gap: var(--space-md); }
.frm__f { display: flex; flex-direction: column; gap: var(--space-3xs); }
.frm__l {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.frm input, .frm select, .frm textarea {
  width: 100%; min-height: 44px; padding: var(--space-2xs) var(--space-xs);
  font: inherit; color: var(--ink); background: var(--paper-sunken);
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm);
}
.frm textarea { min-height: 7rem; resize: vertical; }
.frm input:focus-visible, .frm select:focus-visible, .frm textarea:focus-visible {
  outline: none; border-color: var(--accent);
}
.frm__f.has-err input, .frm__f.has-err select { border-color: var(--state-dead); }
.frm__err { color: var(--state-dead); font-size: var(--text-sm); }
.frm__help { color: var(--ink-3); font-size: var(--text-sm); }
.frm__alt { color: var(--ink-3); font-size: var(--text-sm); }
.frm__alt a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.frm__alt a:hover { color: var(--accent); }
.frm__fine { color: var(--ink-faint); font-size: var(--text-xs); line-height: var(--leading-body); }
.frm > .btn { justify-self: start; }

/* Raspunsul de la server. Tonul e al starii, nu al marcii: verde inseamna
 * „s-a facut", rosu „nu se poate", si atat. */
.msg {
  padding: var(--space-sm) var(--space-md);
  border: var(--rule) solid var(--line);
  border-left: 2px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
  color: var(--ink-2);
}
.msg p { margin: 0; }
.msg p + p { margin-top: var(--space-2xs); }
.msg a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.msg--good { border-left-color: var(--accent); }
.msg--bad { border-left-color: var(--state-dead); color: var(--ink); }
.msg--warn { border-left-color: var(--state-warn); }
.frm .msg, .auth__card > .msg { margin-bottom: var(--space-md); }

/* Cine esti, dupa primul pas: firma gasita la ANAF sau la VIES. Sta deasupra
 * formularului fiindca e raspunsul la ce tocmai s-a scris, nu o decoratie. */
.who, .found {
  padding: var(--space-sm) var(--space-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
  margin-bottom: var(--space-md);
}
.found { border-color: var(--accent-line); background: var(--accent-wash); }
.who__t, .found__t {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.who__n, .found__n {
  margin-top: var(--space-3xs);
  color: var(--ink); font-size: var(--text-lg); font-weight: 600;
}
.who__d, .found__d { margin-top: var(--space-3xs); color: var(--ink-2); font-size: var(--text-sm); }
.who__back {
  display: inline-block; margin-top: var(--space-2xs);
  color: var(--ink-3); font-size: var(--text-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
.who__back:hover { color: var(--ink); }

@media (max-width: 860px) {
  .auth, .auth--wide { grid-template-columns: minmax(0, 1fr); }
  .auth__card { padding: var(--space-md); }
}

/* ============================================================ INSTRUMENTE
 *
 * Graficele, panoul in care stau, usile paginilor-gazda si banda de
 * prospetime. Au venit din `v2/` pe 2 septembrie 2026, odata cu paginile de
 * analiza si de retea, si sunt re-legate la tokenii carcasei -- singurul
 * lucru care NU s-a re-legat sunt culorile seriilor, mai jos.
 */

/* Seriile. Raman cu valorile lor: sunt o codificare trecuta prin verificarea
 * all-pairs de daltonism, nu o alegere de identitate. Rescrise „ca sa se
 * potriveasca", ar trebui revalidate toate, iar prima pereche care pica n-ar
 * da nicio eroare -- doar doua serii pe care ochiul nu le mai desparte.
 *
 * `--serie-context` si `--serie-altele` sunt CERNEALA, nu culoare: media
 * pietei si linia de referinta n-au voie sa atraga ochiul cat o tehnologie. */
:root {
  --serie-solar:   oklch(64.0% 0.155 253);
  --serie-stocare: oklch(64.0% 0.150  46);
  --serie-eolian:  oklch(64.0% 0.145 164);
  --serie-hidro:   oklch(52.0% 0.165 311);
  --serie-altele:  oklch(62.0% 0.012 222);
  --serie-context: oklch(50.0% 0.012 222);
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.figures > .stat {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-right: 1px solid var(--line-faint);
}
.figures > .stat:last-child { border-right: 0; }
.figures { grid-template-columns: 1fr; }
.figures > .stat {
    border-right: 0;
    border-top: 1px solid var(--line-faint);
    padding: var(--space-xs) 0;
  }
.figures > .stat:first-child { border-top: 0; }
.figures > .stat > .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.figures > .stat > .n > small {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-3);
}
.figures > .stat > .l {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}
.fresh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* `parts.fresh_band` scrie `fresh__c/__w/__d`; regulile stiau doar vechile
 * `.stat/.who/.when`, iar sursa si data se lipeau („disponibilălicitatii...”,
 * Cristina, 29 sep 2026, /zona). */
.fresh > .stat, .fresh > .fresh__c {
  box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line);
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fresh > .stat > .who, .fresh__w {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}
.fresh > .stat > .when, .fresh__d {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-2);
}
.filt__n {
  /* Fundal si spatiu propriu: in grila de filtre, al carei fundal e culoarea
   * firelor dintre campuri, contorul fara fundal iesea ca o banda gri lipita
   * de campul de deasupra, cu textul in colt (/statie, 23 sept 2026). */
  padding: var(--space-2xs) var(--space-sm);
  background: var(--paper-raised);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.filt__n > b { font-variant-numeric: tabular-nums; }
.instr {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.instr > .instr__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.instr > .instr__body { padding: var(--space-sm); }
.instr__t {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}
.split { display: flex; flex-direction: column; gap: var(--space-2xs); }
.split__bar {
  display: flex;
  height: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-sunken);
}
.split__bar > .seg { display: block; height: 100%; }
.seg--1 { background: var(--accent-dim); }
.seg--2 { background: color-mix(in oklab, var(--accent-dim) 72%, var(--paper)); }
.seg--3 { background: color-mix(in oklab, var(--accent-dim) 45%, var(--paper)); }
.seg--4 { background: color-mix(in oklab, var(--accent-dim) 22%, var(--paper)); }
.split__keys { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.seg__k {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-2);
}
.seg__k > i {
  width: 9px; height: 9px;
  border-radius: var(--radius-sm);
  flex: none;
}
.seg__k > b { color: var(--ink); font-variant-numeric: tabular-nums; }
.grafic { position: relative; overflow-x: auto; }
.grafic > svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.grafic .gl { stroke: var(--line); stroke-width: 1; }
.grafic .gz { stroke: var(--line-strong); stroke-width: 1; }
.grafic .ax {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.grafic .ln { fill: none; stroke: currentColor; stroke-width: 2;
              stroke-linejoin: round; stroke-linecap: round; }
.grafic .ghost { display: none; }
.grafic .br { fill: currentColor; }
.grafic .dl {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.grafic .fir { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.s-solar { color: var(--serie-solar); }
.s-stocare { color: var(--serie-stocare); }
.s-eolian { color: var(--serie-eolian); }
.s-hidro { color: var(--serie-hidro); }
.s-altele { color: var(--serie-altele); }
.s-context { color: var(--serie-context); }
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-2xs);
}
.legenda > .key {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-2);
}
.legenda > .key > i {
  width: 9px; height: 9px;
  border-radius: var(--radius-sm);
  background: currentColor;
  flex: none;
}
.grafic > .tip {
  position: absolute;
  top: 8px;
  transform: translateX(8px);
  z-index: 2;
  pointer-events: none;
  min-width: 8ch;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--paper-slab);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}
.grafic > .tip.la-stanga { transform: translateX(calc(-100% - 8px)); }
.grafic > .tip > b {
  display: block;
  font-family: var(--font-mono);
  color: var(--ink-2);
  margin-bottom: 0.25em;
}
.grafic > .tip > .r {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--ink-2);
  white-space: nowrap;
}
.grafic > .tip > .r > i {
  width: 8px; height: 8px;
  border-radius: var(--radius-sm);
  background: currentColor;
  flex: none;
}
.grafic > .tip > .r > em {
  margin-left: auto;
  padding-left: 0.8em;
  font-family: var(--font-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cifre { margin-top: var(--space-xs); }
.cifre > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  padding: var(--space-3xs) 0;
}
.cifre > summary:hover { color: var(--ink); }
.cifre[open] > summary { margin-bottom: var(--space-2xs); }
/* Un an de zile inseamna 365 de randuri: tabelul isi poarta derularea lui, cu
 * capul fix, in loc sa impinga pagina cu doi metri (Cristina, 28 sep 2026). */
.cifre .tablewrap { max-height: 24rem; overflow: auto; }
.cifre thead th { position: sticky; top: 0; background: var(--paper-raised); z-index: 1; }
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}
.door {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.door:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.door > b { font-family: var(--font-display); font-size: var(--text-base); }
.door > .d { color: var(--ink-2); font-size: var(--text-sm); }
.door > .n {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.door > .n > small { font-size: var(--text-2xs); color: var(--ink-3); }
.instr { box-shadow: var(--shadow-pop); }
.figures > .stat > .n {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.figures > .stat > .n > small {
  -webkit-text-fill-color: var(--ink-3);
  color: var(--ink-3);
}

/* Zonele de transport: capul fiecarui card si sursa de sub el.
 * `.zona-cap` e o coloana, nu un rand -- fara ea, „Zona A" si lista de
 * judete se lipesc intr-un singur cuvant. Asa s-a si vazut la mutare. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'ss01';
}
.src {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--ink-3);
}
.src::before {
  content: "";
  align-self: center;
  width: 10px;
  height: 1px;
  background: var(--accent-line);
}
.src > time { color: var(--ink-3); }
.zona {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.zona-cap { display: flex; flex-direction: column; gap: var(--space-3xs); }
.zona-cap > b { font-family: var(--font-display); font-size: var(--text-base); }
/* ============================================================ PRIMA PAGINĂ
 *
 * Structura de marketplace: erou cu desen, consola peste el, marfa, pasii,
 * cifrele, stirile. Fiecare banda are un singur lucru de facut.
 */

/* ------------------------------------------------------------------ erou */
.hero {
  position: relative;
  isolation: isolate;
  /* Pe coloana: titlul, apoi panoul de cautare, amandoua pe fotografie. */
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(66vh, 33rem);
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: clip;
}
/* Fotografia e un strat, nu un `background` pe sectiune: asa isi poate purta
 * singura masca de jos, care o stinge sub consola, si se schimba fara sa se
 * atinga nimic altceva.
 *
 * Adresa vine din randare, ca variabila (`--erou`), fiindca fisierele statice
 * sunt amprentate la `collectstatic` si foaia de stil n-are de unde sti
 * amprenta. Varianta mica se cere sub 700 px -- vezi mai jos. */
.hero__art {
  /* Cele doua adrese se pun din randare, ca `style=` pe chiar elementul asta,
   * si il bat pe ce scrie aici. Valorile de mai jos nu sunt decor: un
   * nume de variabila fara nicio definitie nu cade cu eroare, da gol -- gol
   * inseamna o banda neagra in capul primei pagini. Cu `none`, daca randarea
   * uita variabila, se vede hartia sectiunii si titlul ramane lizibil.
   * `tests/test_audit.py`, regula 20b, verifica exact asta. */
  --erou: none;
  --erou-mic: none;
  /* **Minus doi, nu minus unu.** `::before` (voalul) si `::after` (stingerea
   * de jos) sunt tratate ca primul si ultimul copil al sectiunii, iar la
   * acelasi `z-index` ordinea de desenare o da ordinea din document. Cu
   * amandoua pe -1, imaginea -- copil adevarat, deci dupa `::before` -- se
   * desena PESTE voal, si voalul nu facea nimic. Cu desenul nu s-a vazut,
   * fiindca era intunecat de la sine; cu o fotografie luminata de soare,
   * titlul alb ar fi stat pe iarba galbena. */
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--erou);
  background-size: cover;
  /* Dreapta-sus, nu centru. Eroul are 978px la orice latime, iar consola
   * incepe la ~360px: ce se vede liber e doar banda de sus. Stalpii stau in
   * dreapta fotografiei, cu bratele la ~30% din inaltime; ancorata sus, banda
   * nu le taie varfurile nici pe 2560px, unde `cover` taie pe verticala, iar
   * ancorata dreapta, ce se pierde pe ecranele inguste e cerul din stanga. */
  background-position: right top;
  /* Nicio corectie la randare. Fotografia de dinainte era un parc in soare,
   * verde si calda, si trebuia stinsa din CSS ca sa stea langa o interfata
   * rece; cea de acum e gradata o data, in fisier, la temperatura carcasei.
   * Un `filter` pe un strat cat ecranul costa la fiecare derulare, si e
   * oricum locul gresit pentru o hotarare de culoare care nu se schimba. */
  /* Fotografia tine pana sub panoul de cautare, ca sticla sa aiba prin ce
   * sa se vada; se stinge abia in ultimul sfert. */
  -webkit-mask-image: linear-gradient(to bottom, oklch(0% 0 0) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, oklch(0% 0 0) 72%, transparent 100%);
  /* A avut o apropiere lenta, dus-intors, de 34 de secunde. A plecat pe 2
   * septembrie 2026: pe un desen intunecat nu se vedea, pe o fotografie de zi
   * se vede tot timpul, iar un fundal care nu sta locului la capul paginii
   * obliga ochiul sa-l urmareasca in loc sa citeasca titlul. Banda sta. */
}
/* Pe telefon se cere alt fisier, si nu doar unul mai mic: alt DECUPAJ.
 *
 * Fotografia lata e o banda de 1.600x600. Intr-o caseta de telefon, aproape
 * patrata, `cover` o intinde pe inaltime si arata din ea o feliuta verticala
 * de mijloc -- adica un ghem de zabrele fara cap si fara coada. Se vedea in
 * captura de la 390px: nu se intelegea ca sunt stalpi.
 *
 * Varianta de telefon e decupata in picioare din acelasi original: cer liber
 * in stanga, unde sta titlul, si un stalp intreg in dreapta. Acelasi loc,
 * aceeasi gradare, alta incadratura -- cum ar face-o un fotograf care stie
 * ca poza se publica si pe o coloana ingusta. */
@media (max-width: 700px) {
  .hero__art {
    background-image: var(--erou-mic); background-position: center top;
    /* Banda e mult mai scunda pe telefon, deci cele doua stingeri -- masca de
     * pe fotografie si degradeul sectiunii -- ajung sa se suprapuna si lasa o
     * dunga orizontala deasupra consolei. Masca coboara, ca stingerea sa se
     * faca o singura data. */
    -webkit-mask-image: linear-gradient(to bottom, oklch(0% 0 0) 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, oklch(0% 0 0) 74%, transparent 100%);
  }
}
/* Capatul de jos al benzii se stinge in hartia paginii, ca sa nu existe o
 * muchie orizontala intre desen si consola. Masca de pe desen stinge
 * imaginea; asta stinge si voalul de deasupra ei. */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%; z-index: -1;
  background: linear-gradient(to bottom, transparent 0%,
              color-mix(in oklab, var(--paper) 55%, transparent) 55%,
              var(--paper) 100%);
}
/* Fara masca, textul alb ar sta pe cerul deschis din dreapta desenului.
 * Voalul e o singura treapta, nu un degrade in patru culori: cu cat sunt mai
 * multe opriri, cu atat se vede mai bine ca e un truc. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
              oklch(13% 0.012 190 / 0.74) 0%,
              oklch(13% 0.012 190 / 0.50) 45%,
              oklch(13% 0.012 190 / 0.12) 100%);
}
:root[data-theme="light"] .hero::before {
  background: linear-gradient(100deg,
              oklch(13% 0.012 190 / 0.72) 0%,
              oklch(13% 0.012 190 / 0.48) 45%,
              oklch(13% 0.012 190 / 0.10) 100%);
}
/* Pe tema deschisa, campul intunecat de sub stalpi ramanea o banda neagra
 * sub consola, inainte ca degradeul de jos sa ajunga la hartia alba. Pe tema
 * inchisa campul E trecerea spre pagina; pe cea deschisa trebuie sa dispara
 * mai devreme, deci stingerea fotografiei incepe mai sus. */
:root[data-theme="light"] .hero__art {
  -webkit-mask-image: linear-gradient(to bottom, oklch(0% 0 0) 40%, transparent 78%);
  mask-image: linear-gradient(to bottom, oklch(0% 0 0) 40%, transparent 78%);
}
.hero__in { position: relative; }
/* Titlul si propozitia stau pe desen, deci sunt DESCHISE in amandoua temele:
 * culoarea lor nu urmeaza tema, ci fundalul pe care sunt asezate. */
/* Titlul si propozitia intra o data, la incarcare, si nu asteapta
 * observatorul: sunt deasupra pliului, unde IntersectionObserver n-are ce
 * observa -- au fost deja vazute cand porneste. */
.hero__t, .hero__s { animation: rise var(--dur-slow) var(--ease-out) both; }
.hero__s { animation-delay: 110ms; }
.hero__t {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  color: oklch(97% 0.005 200);
  /* Umbra nu e decor: desenul are un cer deschis in dreapta, iar titlul alb
   * trece peste el. Difuza si fara directie, cat sa desprinda litera de
   * fundal fara sa arate a umbra. */
  text-shadow: 0 2px 30px oklch(0% 0 0 / 0.45);
}
.hero__s {
  max-width: 52ch;
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: oklch(92% 0.008 200);
  text-shadow: 0 1px 18px oklch(0% 0 0 / 0.5);
}

/* --------------------------------------------------------------- consola */

/* Din 24 septembrie 2026 consola sta IN imagine, nu sub ea: un panou de sticla
 * prin care se vede fotografia, cu o cautare libera deasupra filtrelor.
 * Cardul alb de dinainte, lipit sub banda, a fost gasit „prea basic" -- si
 * era: arata a formular, nu a locul din care incepe piata.
 *
 * Sticla urmeaza tema. Tonul ei e `--paper-raised`, amestecat cu transparenta,
 * deci pe tema inchisa e sticla fumurie, pe cea deschisa sticla alba -- iar
 * tot ce sta pe ea foloseste culorile temei, ca pe orice alta suprafata. */
.cauta-wrap { position: relative; margin-top: var(--space-xl); }
.cauta {
  position: relative;
  padding: var(--space-md);
  border: var(--rule) solid color-mix(in oklab, var(--ink) 14%, transparent);
  border-radius: calc(var(--radius-lg) * 1.6);
  background: color-mix(in oklab, var(--paper-raised) 66%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-pop);
  animation: rise var(--dur-slow) var(--ease-out) 180ms both;
}
:root[data-theme="light"] .cauta {
  background: color-mix(in oklab, var(--paper-raised) 84%, transparent);
  border-color: color-mix(in oklab, var(--paper-raised) 60%, transparent);
}
/* Fara `backdrop-filter` (Android vechi, modul de economisire), sticla
 * translucida ar lasa fotografia sa se vada clar prin text. Atunci panoul e
 * plin, ca o suprafata oarecare. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cauta { background: var(--paper-raised); }
}
/* O linie de lumina pe muchia de sus: sticla prinde lumina de deasupra. Pe
 * tema inchisa desprinde panoul de fotografie mai bine decat o umbra. */
.cauta::before {
  content: ""; position: absolute; inset: 0 12% auto; height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in oklab, var(--accent) 60%, transparent), transparent);
  pointer-events: none;
}
.cauta__titlu {
  margin-bottom: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}

/* Cautarea libera. Intelege fraze („stocare Constanța peste 50 MW"), nume de
 * firme, statii si CUI-uri -- vezi `app/cautare.py`. E primul lucru din
 * panou fiindca e cel mai larg: filtrele de dedesubt raspund doar la
 * intrebarile pe care le-am prevazut noi. */
.cauta__q {
  display: flex; align-items: center; gap: var(--space-xs);
  min-height: 60px; padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-sm);
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.cauta__q:hover { border-color: var(--line-strong); }
.cauta__q:focus-within { border-color: var(--accent); box-shadow: var(--glow-accent); }
.cauta__lupa { flex: none; color: var(--ink-3); }
.cauta__q:focus-within .cauta__lupa { color: var(--accent); }
.cauta__q input {
  flex: 1; min-width: 0; height: 48px;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--text-md); color: var(--ink);
}
.cauta__q input::placeholder { color: var(--ink-faint); }
.cauta__q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cauta__buton {
  flex: none; min-height: 48px; padding-inline: var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cauta__buton:hover { background: var(--accent-hover); transform: translateY(-1px); }
.cauta__buton:active { transform: none; }

/* Exemplele: cate unul din fiecare fel de intrebare pe care o intelegem. Fara
 * ele, un camp gol de cautare e o intrebare fara raspuns: „ce pot scrie aici?" */
.cauta__exemple {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-2xs);
  margin-top: var(--space-xs);
}
.cauta__ex-l {
  margin-right: var(--space-3xs);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3);
}
.cauta__ex {
  display: inline-flex; align-items: center; min-height: 32px;
  padding-inline: var(--space-xs);
  border: var(--rule) solid var(--line-faint); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--paper) 55%, transparent);
  font-size: var(--text-xs); color: var(--ink-2); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.cauta__ex:hover { border-color: var(--accent-line); color: var(--ink); background: var(--accent-wash); }

/* Filtrele: acelasi instrument de dinainte -- fiecare filtru cu cifra lui,
 * butonul cu numarul selectiei -- dar asezat pe latime, sub cautare, nu ca o
 * a doua caseta. */
.cons {
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: var(--rule) solid color-mix(in oklab, var(--ink) 10%, transparent);
  display: grid; gap: var(--space-sm);
}
/* Stadiul avizului: pastile pe un rand. Stadiul e taxonomia principala --
 * singurul lucru pe care il stim si nu-l are nimeni --, deci sta primul. */
.cons__rail { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.cons__st {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 40px; padding-inline: var(--space-sm);
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  font: inherit; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.cons__st:hover { color: var(--ink); border-color: var(--line-strong); background: var(--paper); }
.cons__st.is-on {
  color: var(--ink); font-weight: 500;
  border-color: var(--accent); background: var(--accent-wash);
}
.cons__main { display: grid; gap: var(--space-sm); }
/* Noua tehnologii, pe doua randuri: cele mari intai, cele rare dupa. */
.cons__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); }
/* Butonul de tehnologie: pictograma intr-un patrat rotunjit, numele langa
 * ea, la stanga -- arata a optiune dintr-o lista, adica a ce si este. */
.cons__teh {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: var(--space-xs); min-height: 56px;
  padding-inline: var(--space-sm);
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--paper) 70%, transparent); color: var(--ink-2);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cons__teh:hover {
  color: var(--ink); border-color: var(--line-strong);
  background: var(--paper); transform: translateY(-1px);
}
.cons__teh:active { transform: translateY(0); }
.cons__teh.is-on { color: var(--ink); border-color: var(--accent); background: var(--accent-wash); }
.cons__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: var(--radius-md);
  background: var(--paper-sunken); color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.cons__teh:hover .cons__ic { color: var(--ink-2); }
.cons__teh.is-on .cons__ic { color: var(--accent-ink); background: var(--accent-fill); }

/* Cifra de langa fiecare filtru. Mono si tabulara, ca sa se citeasca
 * dintr-o privire. */
.cons__nr {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: 400; font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.cons__st.is-on .cons__nr, .cons__teh.is-on .cons__nr { color: var(--accent); }
.cons__st:hover .cons__nr, .cons__teh:hover .cons__nr { color: var(--ink-3); }
/* Filtrul care nu mai are niciun proiect ramane apasabil -- e drumul inapoi --
 * dar se stinge, ca sa nu para o promisiune. */
.cons__st.is-gol, .cons__teh.is-gol { opacity: 0.45; }
/* „Mai multe": tehnologiile rare stau ascunse pana la apasare. Ascunderea e o
 * regula de vizibilitate separata (vezi NOTES, „așezarea bate vizibilitatea"):
 * `.cons__teh` scrie `display` pentru asezare, iar asta vine dupa el. */
.cons__teh--extra { display: none; }
.cons__mai-c:checked ~ .cons__teh--extra,
.cons__teh--extra.is-on { display: inline-flex; }
.cons__mai {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding-inline: var(--space-sm);
  border: var(--rule) dashed var(--line); border-radius: var(--radius-md);
  color: var(--ink-3); font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cons__mai:hover { color: var(--ink); border-color: var(--line-strong, var(--ink-3)); }
.cons__mai b { margin-left: 0.3em; font-weight: 600; color: var(--ink-2); }
.cons__mai-nu { display: none; }
.cons__mai-c:checked ~ .cons__mai .cons__mai-da { display: none; }
.cons__mai-c:checked ~ .cons__mai .cons__mai-nu { display: inline; }
.cons__mai-c:focus-visible ~ .cons__mai { outline: 2px solid var(--accent); outline-offset: 2px; }
.cons__teh-t { flex: 1; }
/* Judetul, puterea si butonul pe acelasi rand: ultimele trei hotarari, in
 * ordinea in care se iau. */
.cons__grid {
  display: grid; align-items: end; gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
}
.cons__f { display: flex; flex-direction: column; gap: var(--space-3xs); }
.cons__l {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.cons__l b { color: var(--ink-2); font-weight: 500; }
/* Sageata proprie, in loc de cea a sistemului: cea implicita e albastra pe
 * Windows si gri pe macOS, adica singurul loc unde culoarea nu e a noastra. */
.cons__f select {
  min-height: 52px; padding: var(--space-2xs) var(--space-lg)
    var(--space-2xs) var(--space-sm);
  appearance: none; -webkit-appearance: none;
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background-color: var(--paper); color: var(--ink); font: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380909a' stroke-width='1.8' 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 var(--space-xs) center;
  background-size: 18px 18px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cons__f select:hover { border-color: var(--line-strong); }
.cons__f input[type="range"] {
  /* Procentul umplut vine din `CONSOLA_JS`. Valoarea de aici e obligatorie:
   * un `var()` fara definitie da gol, iar sina ar ramane fara fundal.
   * `tests/test_audit.py`, regula 20b. */
  --umplut: 0%;
  width: 100%; min-height: 36px; appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.cons__f input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-pill);
  border: var(--rule) solid var(--line);
  background: linear-gradient(to right,
    var(--accent) 0 var(--umplut, 0%),
    var(--paper-slab) var(--umplut, 0%) 100%);
}
.cons__f input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--radius-pill);
  border: var(--rule) solid var(--line);
  background: linear-gradient(to right,
    var(--accent) 0 var(--umplut, 0%),
    var(--paper-slab) var(--umplut, 0%) 100%);
}
.cons__scala {
  display: flex; justify-content: space-between;
  margin-top: calc(var(--space-2xs) * -1);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-faint);
}
.cons__scala i { font-style: normal; }
.cons__f input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -7px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill); border: 2px solid var(--paper-raised);
  box-shadow: 0 1px 6px oklch(0% 0 0 / 0.35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cons__f input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  background: var(--accent-fill); border: 2px solid var(--paper-raised);
}
.cons__f input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.cons__act { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3xs); }
.cons__reset {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; font-size: var(--text-xs); color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.cons__reset:hover { color: var(--ink); }
/* Butonul poarta CIFRA, nu cuvantul „Caută": cate proiecte are selectia de
 * acum. Daca cererea cade, ramane ultima cifra adevarata. Vezi `CONSOLA_JS`.
 * `center`, nu `baseline`: pe baseline grupul statea lipit de marginea de sus
 * a butonului -- asa a si fost reclamat, „textul e descentrat". */
.cons__go {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 52px; padding-inline: var(--space-lg);
  border: 0; border-radius: var(--radius-md);
  background: var(--accent-fill); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.cons__go:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px oklch(75.4% 0.139 233 / 0.22);
}
.cons__go:active { transform: translateY(0); box-shadow: none; }
.cons__go b {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cons__go span { line-height: 1; }
.cons__go-t { display: inline-flex; align-items: baseline; gap: var(--space-3xs); }
.cons__go-s {
  font-size: var(--text-md);
  transition: transform var(--dur-mid) var(--ease-out);
}
.cons__go:hover .cons__go-s { transform: translateX(3px); }
/* Cifra noua se aseaza cu o clipire scurta; fara ea, o schimbare in acelasi
 * loc si aceeasi marime trece neobservata. */
.cons__go b.is-nou { animation: numar-nou 420ms var(--ease-out); }
@keyframes numar-nou {
  0%   { opacity: 0.35; transform: translateY(-0.14em); }
  100% { opacity: 1;    transform: none; }
}

/* ------------------------------------------------ consola, pe ecrane mici */
@media (max-width: 900px) {
  .cons__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cons__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cons__act { grid-column: 1 / -1; }
}
/* Pe telefon: tot ce e in panou sta pe o coloana, dar nimic nu se ascunde si
 * nimic nu se deruleaza lateral -- o lista pe care n-o vezi intreaga e o
 * promisiune, nu o lista. Fiecare tinta are cel putin 44 px. */
@media (max-width: 560px) {
  .cauta-wrap { margin-top: var(--space-lg); padding-inline: var(--space-xs); }
  .cauta { padding: var(--space-sm); border-radius: var(--radius-lg); }
  .cauta__q { min-height: 54px; padding-left: var(--space-xs); gap: var(--space-2xs); }
  .cauta__q input { font-size: var(--text-base); height: 44px; }
  .cauta__buton { min-height: 44px; padding-inline: var(--space-sm); }
  /* Exemplele de cautare nu se arata pe telefon: ocupau aproape un ecran
   * pentru ceva ce placeholderul din camp spune deja. */
  .cauta__exemple { display: none; }
  /* Pastilele de stadiu: doua pe rand, „Toate proiectele" pe tot randul. */
  .cons__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cons__st {
    justify-content: center; min-height: 44px;
    font-size: var(--text-xs); white-space: nowrap; text-align: center;
    border-radius: var(--radius-md);
  }
  /* Cifra sub nume: pe un rand, „Contract semnat 1.363" nu incape intr-o
   * pastila de jumatate de ecran si se rupea pe doua randuri. */
  .cons__st:not(:first-child) { flex-direction: column; gap: 1px; min-height: 52px; }
  .cons__st:first-child { grid-column: 1 / -1; justify-content: space-between; }
  .cons__grid { grid-template-columns: minmax(0, 1fr); }
  /* Tehnologiile raman trei pe un rand, pe verticala: pictograma deasupra,
   * numele dedesubt. */
  .cons__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cons__teh {
    flex-direction: column; justify-content: center; gap: 2px;
    min-height: 76px; padding-inline: var(--space-3xs);
    text-align: center; font-size: var(--text-xs);
  }
  .cons__teh .cons__ic { width: 1.75rem; height: 1.75rem; }
  .cons__teh-t { flex: none; }
  .cons__reset { padding-block: var(--space-xs); }
}

/* ------------------------------------------------------------ în mișcare */
/* Proiectele cu un motiv sa fie acolo: cele mai urmarite, contracte noi,
 * avize pe final, noi in registre. Fiecare card isi scrie motivul pe
 * fotografie. Filele sunt butoane radio: fara script, merg oricum. */
.miscare__r { position: absolute; opacity: 0; pointer-events: none; }
.miscare__cap {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
}
.miscare__cap .h3 { display: inline-flex; align-items: center; gap: var(--space-xs); }
/* Filele: un control segmentat, pe sticla discreta, ca panoul de cautare. */
.miscare__file {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-sunken);
}
.miscare__f {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 40px; padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--ink-3); cursor: pointer; user-select: none;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.miscare__f:hover { color: var(--ink); }
/* Fiecare fila aleasa se aprinde in culoarea motivului ei. */
#mis-urmarite:checked ~ .miscare__cap [data-f="urmarite"],
#mis-contracte:checked ~ .miscare__cap [data-f="contracte"],
#mis-expira:checked ~ .miscare__cap [data-f="expira"],
#mis-noi:checked ~ .miscare__cap [data-f="noi"] {
  color: var(--ink); background: var(--paper-raised);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.18), 0 0 0 1px var(--line);
}
#mis-urmarite:focus-visible ~ .miscare__cap [data-f="urmarite"],
#mis-contracte:focus-visible ~ .miscare__cap [data-f="contracte"],
#mis-expira:focus-visible ~ .miscare__cap [data-f="expira"],
#mis-noi:focus-visible ~ .miscare__cap [data-f="noi"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Un singur panou vizibil: cel al filei alese. */
.miscare__p { display: none; }
#mis-urmarite:checked ~ .miscare__panouri [data-p="urmarite"],
#mis-contracte:checked ~ .miscare__panouri [data-p="contracte"],
#mis-expira:checked ~ .miscare__panouri [data-p="expira"],
#mis-noi:checked ~ .miscare__panouri [data-p="noi"] {
  display: block; animation: rise var(--dur-slow) var(--ease-out) both;
}
.miscare__grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Cardul. Mai mare decat inainte si cu o ierarhie: fotografia cu motivul pe
 * ea, apoi puterea -- cifra pe care o cauta oricine --, tehnologia, locul. */
.mcard {
  --motiv: var(--accent);
  position: relative; display: flex; flex-direction: column;
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background: var(--paper-raised); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.mcard--urmarite { --motiv: var(--state-warn); }
.mcard--contracte { --motiv: var(--state-live); }
.mcard--expira { --motiv: var(--state-dead); }
.mcard:hover, .mcard:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--motiv) 55%, var(--line));
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.22),
              0 0 0 1px color-mix(in oklab, var(--motiv) 30%, transparent);
}
.mcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
/* Fara zoom la trecerea cursorului, din 2 octombrie 2026: proprietarul nu
 * vrea imagini care se misca singure. Cardul se ridica deja prin contur. */
.mcard__art { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Degradeul de jos: motivul se citeste pe orice fotografie, in ambele teme. */
.mcard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(12% 0.01 220 / 0.72) 0%,
              oklch(12% 0.01 220 / 0.05) 55%, transparent 100%);
}
.mcard__motiv {
  position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 2 * var(--space-xs));
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: oklch(14% 0.01 220 / 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid oklch(100% 0 0 / 0.14);
  font-size: var(--text-xs); font-weight: 500; color: oklch(97% 0.005 200);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Pe telefon motivul coboara in corpul cardului: fotografia e ingusta acolo. */
.mcard__motiv-m {
  display: none; align-items: center; gap: 5px; margin-bottom: 2px;
  font-size: var(--text-2xs); font-weight: 500; color: var(--ink-2);
}
.mcard__body {
  display: grid; gap: 2px; padding: var(--space-sm) var(--space-sm) var(--space-sm);
  flex: 1;
}
.mcard__mw {
  font-family: var(--font-display); font-size: var(--text-sm); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mcard__mw b {
  font-size: var(--text-2xl); font-weight: 700; color: var(--ink);
  letter-spacing: var(--track-tight); line-height: 1;
}
.mcard__t { font-weight: 600; color: var(--ink); }
.mcard__loc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); color: var(--ink-3);
}
/* Timpul ramas pana expira avizul: se goleste spre ziua expirarii. */
.mcard__timp {
  /* Procentul ramas vine din randare, ca `style` pe bara. Valoarea de aici e
   * obligatorie: un `var()` fara definitie da gol. `test_audit`, regula 20b. */
  --rest: 100%;
  display: block; height: 4px; margin-top: var(--space-2xs);
  border-radius: var(--radius-pill); background: var(--paper-sunken); overflow: hidden;
}
.mcard__timp i {
  display: block; height: 100%; width: var(--rest);
  border-radius: inherit; background: var(--state-warn);
}
.mcard__timp.is-grav i { background: var(--state-dead); }
.mcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-xs);
}
.mcard__go {
  color: var(--ink-3);
  transition: transform var(--dur-mid) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mcard:hover .mcard__go { color: var(--motiv); transform: translateX(4px); }

/* „Ai un aviz de racordare?": o banda, nu al cincilea card. Proprietarul nu
 * e un proiect printre altele, e cel caruia i se adreseaza pagina altfel. */

@media (max-width: 1100px) {
  .miscare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pe telefon: filele doua cate doua, cardurile unul sub altul, culcate --
 * fotografia la stanga, textul la dreapta --, ca patru sa incapa pe un ecran
 * si jumatate, nu pe patru. */
@media (max-width: 560px) {
  .miscare__file { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                   width: 100%; border-radius: var(--radius-lg); }
  .miscare__f { justify-content: center; border-radius: var(--radius-md); font-size: var(--text-xs);
                padding-inline: var(--space-2xs); }
  .miscare__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .mcard { flex-direction: row; }
  .mcard__media { width: 38%; flex: none; aspect-ratio: auto; }
  .mcard__motiv { display: none; }
  .mcard__body { padding: var(--space-xs) var(--space-sm); }
  .mcard__motiv-m { display: inline-flex; }
  .mcard__mw b { font-size: var(--text-xl); }
  .mcard__go { display: none; }
}

/* ----------------------------------------------------------------- harta
 *
 * Harta mica de pe prima pagina: desenul la stanga, judetele grele la dreapta.
 * SVG-ul vine din `web.build`, inclus in pagina -- de aceea judetele pot fi
 * legaturi si de aceea culorile lui asculta de tema.
 */
/* Capul unei sectiuni: titlul si, sub el, cifrele -- nu o propozitie care
 * explica ce urmeaza. Centrate amandoua, cu aer pana la continut: pana pe 4
 * septembrie 2026 titlul statea la 48 px de titlu si textul explicativ cadea
 * direct peste desen. */
.cap-sectiune { text-align: center; margin-bottom: var(--space-2xl); }
.cap-sectiune .h3 { margin-bottom: var(--space-2xs); }
/* Font de text, nu de date. Cele trei locuri care o folosesc (căutarea și
 * două capete de pe prima pagină) poartă propoziții, nu cifre, iar scrise
 * mono arătau a etichetă de tabel întinsă pe două rânduri. Vezi NOTES.md,
 * „Proza scrisă cu font de date". */
.cap-sectiune__cifre {
  font-size: var(--text-sm); color: var(--ink-3);
  text-wrap: balance;
}

/* ------------------------------------------------------ capul unei secțiuni */
/* Titlul la stanga, iesirea la dreapta, pe aceeasi linie de baza -- cum stau
 * harta si „În trending". Pe telefon iesirea coboara sub titlu. */
.sec-cap {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  margin-bottom: var(--space-md);
}
/* Introducerea e `lede`, ca sub harta: acelasi rol, acelasi tratament
 * (`test_audit`, punctul 12). Aici se scrie doar distanta. */
.sec-cap .lede, .faq__cap .lede { margin: var(--space-3xs) 0 0; }
.sec-cap__link {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--text-sm); font-weight: 500; color: var(--accent);
}
.sec-cap__link span { transition: transform var(--dur-mid) var(--ease-out); }
.sec-cap__link:hover span { transform: translateX(3px); }

/* ------------------------------------------------------ întrebări frecvente */
/* A treia forma, 28 septembrie 2026: panou din aceeasi familie cu tabla de
 * tranzactii de deasupra -- aceeasi suprafata ridicata, acelasi chenar,
 * aceeasi lumina slaba din colt, capul inauntru. Coloana centrata dinainte era
 * singurul loc fara suprafata de pe pagina. Pe desktop raspunsurile stau
 * deschise, pe doua coloane, despartite de fire; pe telefon devin acordeon
 * (scriptul din `home.CONSOLA_JS`), iar sageata apare doar acolo. */
.faq {
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 55%),
    var(--paper-raised);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 18%, transparent) inset;
  overflow: hidden;
}
.faq__cap {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule) solid var(--line-faint);
}
.faq__h {
  margin: 0; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 600; letter-spacing: var(--track-tight); color: var(--ink);
}
.faq__contact { margin: 0; font-size: var(--text-sm); color: var(--ink-3); }
.faq__contact a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.faq__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq__q { padding: var(--space-lg); }
/* Firele dintre celule, fara chenar pe margini: panoul are deja unul. */
.faq__q:nth-child(n+3) { border-top: var(--rule) solid var(--line-faint); }
.faq__q:nth-child(odd) { border-right: var(--rule) solid var(--line-faint); }
.faq__q summary { display: flex; align-items: start; gap: var(--space-sm); list-style: none; }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.faq__sag { display: none; flex: none; margin-left: auto; color: var(--ink-3);
  transition: transform var(--dur-mid) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.faq__q[open] .faq__sag { transform: rotate(180deg); color: var(--accent); }
.faq__intr {
  margin: 0 0 var(--space-xs); font-family: var(--font-display);
  font-size: var(--text-md); font-weight: 600; line-height: var(--leading-snug);
  color: var(--ink);
}
.faq__r {
  margin: 0; max-width: 38rem; font-size: var(--text-sm);
  line-height: var(--leading-body); color: var(--ink-2);
}
@media (max-width: 760px) {
  .faq__lista { grid-template-columns: minmax(0, 1fr); }
  .faq__q:nth-child(odd) { border-right: 0; }
  .faq__q:nth-child(n+2) { border-top: var(--rule) solid var(--line-faint); }
  .faq__cap, .faq__q { padding: var(--space-md); }
  .faq__q summary { cursor: pointer; }
  .faq__sag { display: grid; }
  .faq__q:not([open]) .faq__intr { margin-bottom: 0; }
}

/* ----------------------------------------------------------------- stiri
 *
 * Titluri din presa de energie, fiecare un card care duce la publicatia lui.
 * Pana pe 2 septembrie 2026 aici era un tabel cu editiile ingerate; forma de
 * card e ceruta de ce s-a schimbat in continut -- un titlu de ziar are lungimi
 * imprevizibile, iar intr-un rand de tabel s-ar rupe la trei cuvinte.
 */
/* Trei pe rand, si a doua oara trei: cu 17rem incapeau patru, iar sase
 * titluri ieseau 4+2 -- randul al doilea pe jumatate gol arata a lucru
 * neterminat, nu a asezare. */
.stiri {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
/* Pe /stiri, sub propozitia de introducere; pe prima pagina distanta vine de
 * la capul sectiunii (`.sec-cap`). */
.lede + .stiri { margin-top: var(--space-xl); }
.stire {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised);
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.stire:hover, .stire:focus-visible {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
}
.stire__cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2xs);
}
/* Numele publicatiei e prima linie a cardului, nu o nota de subsol: cine se
 * uita la un titlu vrea sa stie cine l-a scris inainte sa-l citeasca. */
.stire__sursa {
  padding: 2px var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--accent-wash); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  white-space: nowrap;
}
.stire__d {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-3); white-space: nowrap;
}
/* Trei randuri, si restul se taie. Titlurile lor trec de 140 de caractere;
 * fara plafon, un card ar fi de doua ori mai inalt decat vecinii lui si
 * randul intreg ar creste dupa cel mai vorbaret. */
.stire__t {
  color: var(--ink); font-weight: 600; font-size: var(--text-base);
  line-height: var(--leading-snug);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.stire__go {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  margin-top: auto; padding-top: var(--space-2xs);
  font-size: var(--text-xs); color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.stire__go span { transition: transform var(--dur-mid) var(--ease-out); }
.stire:hover .stire__go { color: var(--accent); }
.stire:hover .stire__go span { transform: translate(2px, -2px); }
.stiri__nota {
  margin-top: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Legatura de inscriere din bara, langa butonul de intrare. */
.bar__reg { color: var(--ink-2); font-size: var(--text-sm); white-space: nowrap; }
.bar__reg:hover { color: var(--accent); }

/* „Preturi" nu sta cu destinatiile din mijloc, si nu din lipsa de loc: acolo
 * sunt inventare -- proiecte, companii, avize -- iar preturile nu sunt un
 * inventar, sunt partea comerciala. Locul lor e coloana din dreapta, langa
 * „Creeaza cont" si „Intra", unde se uita oricine cauta cat costa. Pe telefon
 * pleaca odata cu celelalte si se regaseste in sertar, cu titlul lui. */
.bar__pret {
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--ink-2); font-size: var(--text-sm); white-space: nowrap;
}
.bar__pret:hover { color: var(--accent); }
/* RO / EN, din 1 octombrie 2026. Vezi `shell.comutator_limba`. */
.bar__limba {
  padding: var(--space-3xs) var(--space-2xs);
  font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: .04em;
  color: var(--ink-2); white-space: nowrap; text-decoration: none;
}
.bar__limba:hover { color: var(--accent); }
.bar__pret[aria-current] { color: var(--ink); }

/* „Caută" langa „Prețuri", din 24 septembrie 2026: o unealta, nu o
 * destinatie, deci sta cu uneltele. Pastila cu lupa se recunoaste dintr-o
 * privire ca locul unde scrii. Pe telefon ramane doar lupa: vecinii pleaca in
 * sertar, dar cautarea e prea des folosita ca sa stea dupa un clic. */
.bar__cauta {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink-2); font-size: var(--text-sm); white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bar__cauta:hover { color: var(--accent); border-color: var(--accent-line); }
.bar__cauta[aria-current] { color: var(--ink); border-color: var(--line-strong); }
/* Pe ecranele medii, cand meniul inca se vede intreg, cuvantul ar impinge
 * „Resurse" sub pastila; ramane doar lupa. */
@media (max-width: 1240px) {
  .bar__cauta { padding: 0; width: 34px; height: 34px; justify-content: center; }
  .bar__cauta span { display: none; }
}


/* ============================================================ MARKETPLACE
 *
 * Forma e cea a pietelor care functioneaza (Milk the Sun, PF Nexus): filtre
 * lipite in stanga, rezultate in dreapta, o banda subtire deasupra lor cu
 * numarul si ordonarea, si cate un card per proiect.
 *
 * Un lucru NU s-a copiat: marimea cardului. Al lor are 330 px si vezi doua pe
 * ecran -- merge pentru 83 de oferte, nu pentru 2.138 de randuri. Al nostru e
 * scund si intra cincizeci pe pagina.
 */
.mkt {
  display: grid; gap: var(--space-lg);
  grid-template-columns: 17rem minmax(0, 1fr);
  align-items: start;
  /* `overflow: visible`, scris explicit: grila e chiar formularul de filtre,
   * iar `.filters` -- regula veche, de pe randul de filtre lipit -- pune
   * `overflow: hidden`. Un stramos cu overflow ascuns ANULEAZA `position:
   * sticky` pe orice descendent, fara nicio eroare: coloana pur si simplu nu
   * se mai lipeste. Aceeasi familie cu capcana din `NOTES.md` despre
   * `backdrop-filter` si `position: fixed`. */
  overflow: visible;
  background: none; border: 0; border-radius: 0;
}

/* ------------------------------------------------------- coloana de filtre */
.mkt__rail {
  position: sticky; top: 5rem;
  display: grid; gap: var(--space-sm);
  /* Coloana e mai inalta decat ecranul -- noua tehnologii, patru stadii, doua
   * liste. Deci se lipeste SI se poate derula pe dinauntru, altfel ultimele
   * filtre raman sub marginea de jos si par sa nu existe. */
  max-height: calc(100vh - 6.5rem); overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
  scrollbar-width: thin;
}
/* Antetul coloanei: numele, cate filtre sunt puse, si drumul inapoi. Sta
 * lipit in capul coloanei si cand se deruleaza pe dinauntru. */
.mkt__cap {
  position: sticky; top: calc(var(--space-md) * -1); z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2xs);
  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) 0;
  padding: var(--space-md) var(--space-md) var(--space-2xs);
  background: var(--paper-raised);
  border-bottom: var(--rule) solid var(--line);
}
.mkt__titlu {
  display: flex; align-items: baseline; gap: var(--space-2xs);
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  letter-spacing: var(--track-tight); color: var(--ink);
}
/* Cate filtre sunt puse acum. Fara cifra asta, o lista scurta poate parea un
 * inventar sarac in loc de o cautare ingusta. */
.mkt__cate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500;
}
.mfilt { display: grid; gap: 2px; }
.mfilt + .mfilt { padding-top: var(--space-sm); border-top: var(--rule) solid var(--line-faint); }
.mfilt__cap {
  display: block; margin-bottom: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
/* O optiune de filtru: numele la stanga, cifra la dreapta. Cifra spune cat
 * ramane daca apesi -- de-aia are loc propriu, nu se ghemuieste langa nume. */
.mopt {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2xs);
  min-height: 34px; padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}
/* Optiunea aleasa poarta un semn de scos, ca sa se vada ca a doua apasare o
 * stinge. Apare doar pe cea aprinsa: pe celelalte n-ar insemna nimic. */
.mopt.is-on::after {
  content: "×"; position: absolute; right: var(--space-2xs);
  color: var(--accent); font-size: var(--text-sm);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.mopt.is-on:hover::after { opacity: 1; }
.mopt.is-on:hover b { opacity: 0; }
.mopt b {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
}
.mopt:hover { background: var(--paper-sunken); color: var(--ink); padding-left: var(--space-xs); }
.mopt.is-on {
  background: var(--accent-wash); color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}
.mopt.is-on b { color: var(--accent); }
.mopt.is-gol { opacity: 0.45; }
.mkt__rail select {
  width: 100%; min-height: 40px;
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-2xs);
  appearance: none; -webkit-appearance: none;
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--paper); color: var(--ink); font: inherit;
  font-size: var(--text-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380909a' stroke-width='1.8' 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 6px center;
  background-size: 16px 16px; cursor: pointer;
}
.mkt__sterge {
  font-size: var(--text-xs); color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.mkt__sterge:hover { color: var(--accent); }

/* ------------------------------------------------ banda de deasupra listei */
/* Randul care spune ca lista e filtrata pe un punct de racordare. Se ajunge
 * aici de pe harta, iar fara el omul vede deodata paisprezece proiecte in loc
 * de doua mii si nu stie de ce. */
.mkt__nod {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule) solid var(--accent-line); border-radius: var(--radius-md);
  background: var(--accent-wash);
  font-size: var(--text-sm); color: var(--ink-2);
}
.mkt__nod b { color: var(--ink); }
.mkt__nod-x { margin-left: auto; color: var(--accent); }
.mkt__nod-x:hover { color: var(--accent-hover); }
/* Butonul de urmarire al nodului sta in aceeasi banda, la capat. Formularul
 * nu are voie sa rupa randul: e un `form` doar fiindca schimba ceva pe
 * server, si arata ca un buton. */
.mkt__nod-f { display: contents; }
/* Starea „o urmaresti deja": acelasi buton, cu firul accentului aprins. Nu un
 * al doilea buton, si nu un text -- ce se poate opri se opreste de unde s-a
 * pornit. */
.btn.is-on { border-color: var(--accent-line); color: var(--accent); }

.mkt__bara {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised);
  margin-bottom: var(--space-sm);
}
.mkt__nr { font-size: var(--text-sm); color: var(--ink-3); }
.mkt__nr b {
  font-family: var(--font-display); font-size: var(--text-md);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mkt__sort { display: flex; align-items: center; gap: var(--space-2xs); }
.mkt__sort span {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3);
}
.mkt__sort select {
  min-height: 36px; padding: 2px var(--space-lg) 2px var(--space-2xs);
  appearance: none; -webkit-appearance: none;
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--paper); color: var(--ink); font: inherit;
  font-size: var(--text-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380909a' stroke-width='1.8' 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 8px center;
  background-size: 16px 16px; cursor: pointer;
}

/* ------------------------------------------------------------- cardul */
.pgrid { display: grid; gap: var(--space-sm); }
.pc {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) 11rem;
  grid-template-areas: "foto corp coada" "banda banda banda";
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised); overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.pc:hover { border-color: var(--accent-line); box-shadow: var(--shadow-pop); }
.pc__foto { grid-area: foto; display: block; overflow: hidden; background: var(--paper-sunken); }
.pc__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) brightness(0.9) contrast(1.02);
}
:root[data-theme="light"] .pc__img { filter: saturate(0.9) contrast(1.01); }
.pc__corp {
  grid-area: corp; display: grid; align-content: start; gap: var(--space-2xs);
  padding: var(--space-md);
}
.pc__cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm);
}
.pc__t { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--track-tight); }
.pc__t a { color: var(--ink); }
.pc:hover .pc__t a { color: var(--accent); }
/* Identificatorul public, ca la ei: prin el se refera oamenii unii la altii
 * cand vorbesc despre un proiect, pe email sau la telefon. */
.pc__id {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-faint); white-space: nowrap;
}
.pc__loc { font-size: var(--text-sm); color: var(--ink-3); }
.pc__attr {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-3xs);
}
.pc__a { font-size: var(--text-sm); color: var(--ink-2); }
.pc__a b {
  font-family: var(--font-display); font-size: var(--text-md); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pc__a--statie { color: var(--ink-3); }
.pc__gol { color: var(--ink-faint); }

/* Verdictul din dreapta: cinci bare si o eticheta. Locul in care alte piete
 * pun „pret foarte bun"; la noi, cat s-a cerut deja la nodul in care vrea sa
 * intre proiectul. Cifra exacta cere cont, verdictul nu. */
.pc__coada {
  grid-area: coada;
  display: grid; align-content: center; justify-items: end; gap: var(--space-3xs);
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  text-align: right;
}
.pc__bars { display: flex; gap: 3px; }
.pc__bar {
  display: block; width: 16px; height: 6px; border-radius: 1px;
  background: var(--line-strong);
}
/* Treptele stinse raman plate, si cu cont si fara. Au avut o zi o textura de
 * liniute, ca sa se vada ca sunt ACOPERITE, nu goale -- si la 16x6 pixeli
 * textura aia nu se citea ca cerneala, se citea ca zgarietura. Ce trebuia ea
 * sa spuna e oricum scris cu litere, chiar alaturi: „Logheaza-te". */
.pc__bar.is-on { background: var(--accent-fill); }
.pc__cv {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--text-sm); color: var(--ink);
}
.pc__cet {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
/* Lacatul din card: aceeasi culoare si acelasi cuvant ca indemnul de pe fisa,
 * ca sa fie limpede ca duce undeva. Scria „Se vede cu cont", o constatare care
 * nu spunea unde se apasa. */
.pc__lacat {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--accent); font-weight: 500;
}
.pc__lacat:hover { color: var(--accent-hover); }


/* Cat de completa e fisa: patru puncte. Acolo unde altii pun stele de
 * incredere pentru vanzator -- la noi n-are cine sa fie evaluat inca, dar se
 * poate spune cat s-a putut verifica. */
/* Cat de completa e fisa: un inel din patru sferturi, unul pentru fiecare
 * lucru stiut. A fost sursa + trei buline + o propozitie („Anexa operatorului
 * · ●●● · Fișă aproape completă") -- trei lucruri pe un rand de subsol si
 * niciunul citit. */
.pc__fisa {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  color: var(--ink-3); font-size: var(--text-xs);
}
.pc__inel { flex: none; }
.pc__inel-fund { stroke: var(--line-strong); }
.pc__inel-plin { stroke: var(--accent-dim); }
.pc__fisa-n {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.pc__save {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 34px; padding: 0 var(--space-sm);
  border: var(--rule) solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pc__save:hover { border-color: var(--accent-line); color: var(--ink); }
.pc__save.is-on { color: var(--accent); border-color: var(--accent-line); }
/* Banda de jos. La ei sta vanzatorul; pana la prima listare, la noi sta de
 * unde stim -- si acolo va sta vanzatorul cand va exista. */
/* Fotografia se apropie putin cand cardul e atins. Cardul se ridica deja --
 * vezi `.pcard:hover` -- iar o imagine care ramane teapana sub un card care se
 * misca arata lipita, nu asezata. `overflow` pe rama, ca marirea sa se taie la
 * margine si sa nu impinga vecinii. */
.pc__foto { overflow: hidden; }
.pc__img {
  transition: transform var(--dur-mid) var(--ease-out);
}
.pc:hover .pc__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .pc__img { transition: none; }
  .pc:hover .pc__img { transform: none; }
}

.pc__banda {
  grid-area: banda;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-2xs) var(--space-md);
  border-top: var(--rule) solid var(--line-faint);
  background: var(--paper-sunken);
}
.pc__marci { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
/* Cele doua actiuni stau impreuna, in dreapta: „salveaza pentru mai tarziu"
 * si „deschide acum". La stanga ramane inelul care spune cat de completa e
 * fisa -- informatie, nu actiune. */
.pc__save { margin-left: auto; }
.pc__go { margin-left: 0; }

/* Butonul care deschide filtrele si cel care le inchide de jos. Niciunul nu
 * se vede pe desktop, unde coloana e mereu deschisa. */
.mkt__deschide, .mkt__gata { display: none; }

@media (max-width: 1000px) {
  .mkt { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }

  /* Coloana devine panou, si panoul e inchis pana ceri tu.
   *
   * Pana pe 4 septembrie 2026 ramanea deschisa, cu inaltime fixa si derulare
   * proprie -- adica exact ce nu trebuie pe telefon: o cutie cat ecranul, in
   * capul paginii, care inghitea gestul de scroll in loc sa-l dea mai
   * departe. Asa a si fost reclamat: „apare filtrul enorm si nici nu mai
   * poti da scroll".
   */
  .mkt__deschide {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2xs);
    min-height: 48px; padding: 0 var(--space-md);
    border: var(--rule) solid var(--line); border-radius: var(--radius-md);
    background: var(--paper-raised); color: var(--ink);
    font-size: var(--text-base); font-weight: 500; cursor: pointer;
  }
  .mkt__deschide input { position: absolute; opacity: 0; pointer-events: none; }
  .mkt__deschide-t { display: inline-flex; align-items: center; gap: var(--space-2xs); }
  .mkt__deschide-s { color: var(--ink-3); transition: transform var(--dur-mid) var(--ease-out); }
  .mkt__deschide:has(input:checked) {
    border-color: var(--accent-line); background: var(--accent-wash);
  }
  .mkt__deschide:has(input:checked) .mkt__deschide-s { transform: rotate(180deg); }

  .mkt__rail {
    display: none;
    position: static; max-height: none; overflow: visible;
    box-shadow: none;
  }
  .mkt__deschide:has(input:checked) + .mkt__rail { display: grid; }
  /* Antetul coloanei nu mai are ce sa faca: numele si cifra sunt pe butonul
   * care tocmai a deschis panoul. */
  .mkt__cap { display: none; }
  /* Doua coloane, nu una pe fiecare optiune: cu noua tehnologii, „pe
   * coloane" insemna noua fasii de 43 px. */
  .mfilt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
  .mfilt__cap { grid-column: 1 / -1; }
  .mopt {
    min-height: 44px; justify-content: center; gap: var(--space-2xs);
    border: var(--rule) solid var(--line); border-radius: var(--radius-md);
    background: var(--paper); text-align: center;
    /* Un pic mai mic si mai strans: „Contract de racordare" se rupea pe trei
     * randuri intr-o casuta de 165px si tragea tot randul dupa el. */
    font-size: var(--text-xs); line-height: 1.25; align-items: center;
  }
  .mopt.is-on { background: var(--accent-wash); border-color: var(--accent); }
  .mopt:hover { padding-left: var(--space-2xs); }
  .mopt.is-on::after { display: none; }
  /* Judetul si puterea raman liste, si ocupa randul intreg. */
  .mfilt:has(select) { grid-template-columns: minmax(0, 1fr); }
  .mkt__gata {
    display: block; margin-top: var(--space-2xs);
    min-height: 48px; line-height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-fill); color: var(--accent-ink);
    font-weight: 600; text-align: center; cursor: pointer;
  }
}
@media (max-width: 1180px) {
  /* Verdictul trece sub atribute cand nu mai incape coloana lui. */
  .pc { grid-template-columns: 12.5rem minmax(0, 1fr);
        grid-template-areas: "foto corp" "foto coada" "banda banda"; }
  .pc__coada {
    justify-items: start; text-align: left;
    padding: 0 var(--space-md) var(--space-md);
  }
}
/* ----------------------------------------------------- cardul, pe telefon
 *
 * Pe latimea unui telefon, cardul nu mai are doua coloane -- deci nu mai are
 * nici aliniere de coloana. Prima varianta a lasat totul sa curga in flex, si
 * asa a si aratat: titlul si identificatorul pe acelasi rand, atributele
 * rupte unde s-a nimerit, doua butoane de latimi diferite. Aici fiecare bucata
 * primeste rand propriu si aliniere proprie.
 */
@media (max-width: 620px) {
  .pc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "corp" "coada" "banda";
  }
  .pc__foto { aspect-ratio: 16 / 9; }
  .pc__corp { padding: var(--space-md) var(--space-md) var(--space-2xs); gap: var(--space-2xs); }

  /* Titlul pe randul lui, identificatorul sub el: la 390 px nu incap unul
   * langa altul fara sa se rupa titlul in doua. */
  .pc__cap { display: grid; gap: 2px; }
  .pc__t { font-size: var(--text-lg); line-height: var(--leading-snug); }
  .pc__id { justify-self: start; }
  .pc__loc { font-size: var(--text-base); color: var(--ink-2); }

  /* Atributele, intr-o grila de doua celule cu fir intre ele. Puterea si
   * stadiul sunt cele doua lucruri dupa care se citeste un rand; punctul de
   * racordare ia randul intreg, fiindca e cel mai lung. */
  .pc__attr {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    margin-top: var(--space-2xs); padding-top: var(--space-2xs);
    border-top: var(--rule) solid var(--line-faint);
  }
  /* `gap`, nu spatiul dintre etichete: pe telefon randul devine flex, iar
   * flexul nu deseneaza nodurile de text dintre copii. De-aia scria „120,0MW"
   * lipit doar aici, desi pe ecran lat era in regula -- acolo randul e inline
   * si spatiul supravietuieste. */
  .pc__a { display: flex; align-items: center; gap: 0.28em; }
  .pc__a--statie {
    grid-column: 1 / -1;
    padding-top: var(--space-2xs);
    border-top: var(--rule) solid var(--line-faint);
    font-size: var(--text-sm);
  }

  /* Verdictul: un singur rand, cu eticheta inaintea barelor, ca sa se
   * citeasca de la stanga la dreapta ca orice altceva de pe card. */
  .pc__coada {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    padding: 0 var(--space-md) var(--space-sm);
  }
  .pc__cet { order: -1; width: 100%; }

  /* Banda: informatia pe un rand, cele doua actiuni pe randul urmator, de
   * latimi egale. Butoane de latimi diferite pe acelasi rand arata a scapare. */
  .pc__banda {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs); padding: var(--space-sm) var(--space-md);
  }
  .pc__fisa { grid-column: 1 / -1; }
  .pc__marci { grid-column: 1 / -1; }
  .pc__save, .pc__go {
    margin: 0; width: 100%; justify-content: center; min-height: 44px;
  }

  .mfilt { grid-auto-flow: row; }
}

/* ============================================================ FISA PROIECTULUI
 *
 * Aceeasi forma ca la Milk the Sun, si din acelasi motiv: coloana din stanga
 * e IDENTITATEA si ACTIUNEA -- fotografia, codul public, cati s-au uitat,
 * butoanele -- si sta lipita de ecran cat timp se citesc datele din dreapta.
 * Fisa are opt sectiuni; fara coloana lipita, butonul de contact ramane la
 * doua ecrane sub locul in care omul s-a hotarat sa apese.
 *
 * Ce e ACOPERIT poarta o masca, nu o cifra inceatosata: o valoare falsa sub
 * blur ramane in marcaj si se citeste din sursa paginii. Vezi `app/ui/project.py`.
 */
.fp {
  display: grid; gap: var(--space-lg);
  grid-template-columns: 20rem minmax(0, 1fr);
  align-items: start;
  margin-top: var(--space-lg);
}

/* ----------------------------------------------------- coloana de identitate */
.fp__lat {
  position: sticky; top: 5rem;
  display: grid; gap: var(--space-sm);
}
.fp__foto {
  position: relative; margin: 0; overflow: hidden;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-sunken);
}
/* `height: auto` NU e de prisos: `<img>` poarta `height="507"` in marcaj (e
 * acolo ca sa nu sara pagina cat se incarca), iar atributul bate
 * `aspect-ratio`. Fara randul asta fotografia iesea de 507px inaltime intr-o
 * coloana de 280px latime, adica un portret pe locul unui peisaj. */
.fp__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(0.86) contrast(1.02);
}
/* Codul public, peste coltul fotografiei. Sta acolo si nu sub ea fiindca e
 * eticheta obiectului din poza, nu inca un rand de fisa: doi oameni care
 * discuta pe email despre „solarul de 96 MW din Braila" nu sunt siguri ca
 * vorbesc despre acelasi lucru. */
.fp__cod {
  position: absolute; left: var(--space-2xs); bottom: var(--space-2xs);
  padding: 2px var(--space-2xs);
  border-radius: var(--radius-sm);
  background: oklch(8% 0.008 190 / 0.78);
  /* Culoarea nu vine din `--ink`: eticheta sta pe fotografie, nu pe pagina.
   * Cu tokenul, in tema deschisa iesea text inchis pe fond inchis, adica o
   * cutie neagra goala in coltul pozei. */
  color: oklch(97% 0.005 190);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
}
.fp__semnal {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm); color: var(--ink-3);
}
.fp__sem { display: inline-flex; align-items: center; gap: 0.375rem; }
.fp__sem svg { color: var(--ink-faint); }
.fp__sem b { color: var(--ink); font-weight: 600; }
.fp__semnal--gol { color: var(--ink-3); }
.fp__act { display: grid; gap: var(--space-2xs); }
.fp__f { margin: 0; display: grid; }
/* Butoanele coloanei: latime plina si continut centrat. Textul lor difera in
 * lungime („Salvat" contra „Trimite mai departe"), iar aliniate la stanga
 * aratau ca o lista de legaturi, nu ca o scara de actiuni. */
.fp__b {
  width: 100%; justify-content: center; gap: 0.5rem;
  text-align: center;
}
.fp__b svg { flex: none; }
.fp__b.is-on { border-color: var(--accent-line); color: var(--accent); }
/* Butonul revendicarii poarta o intrebare, nu doua cuvinte („Deții acest
 * proiect? Revendică-l"), iar `.btn` are `white-space: nowrap` -- deci ar
 * iesi din coloana in loc sa se rupa. Aici, si numai aici, are voie sa curga
 * pe doua randuri. */
.fp__b--rev {
  white-space: normal; text-wrap: balance;
  line-height: var(--leading-snug); padding-block: var(--space-2xs);
}

/* ------------------------------------------------------------ corpul fisei */
/* `minmax(0, 1fr)` si `min-width: 0`, nu grila implicita: o coloana `auto`
 * nu se strange sub latimea minima a continutului, iar pe fisa companiei
 * tabelele de cinci coloane o intindeau la 750px pe un ecran de 390. Se rupea
 * TOATA pagina -- cifrele de sus, casetele, subsolul -- nu doar tabelul.
 * Reclamat pe 23 septembrie 2026 cu o captura in care „Putere în avize" n-avea
 * nicio valoare: valoarea era, dar la 300px in dreapta ecranului. */
.fp__corp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.fp__lat, .fp__corp { min-width: 0; }

/* Cele trei cifre de sus. La ei sunt „Project Size / Project Type / System
 * Type"; la noi puterea, stadiul avizului si racordarea, adica exact
 * intrebarile in ordinea in care se pun. */
.fp__cifre {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.fp__cif {
  padding: var(--space-sm) var(--space-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.fp__cif-k {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3);
}
.fp__cif-v {
  margin: 0; font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; letter-spacing: var(--track-tight); color: var(--ink);
  line-height: var(--leading-snug);
}
.fp__cif-v .unit {
  margin-left: 0.25rem; font-size: var(--text-sm); color: var(--ink-3);
}
/* Intr-o macrostructura Stat-Led cifra trebuie sa domine banda, nu sa se bata
 * de la egal cu calificativele de langa ea: „1.043,7 MW", „Contract de
 * racordare" si „Nepublicată în sursă" stateau toate la aceeasi marime, si
 * banda se citea ca trei propozitii, nu ca un numar cu doua note.
 *
 * Se alege dupa `.unit`, nu dupa pozitie: unitatea apare doar pe valoarea
 * numerica, si apare la fel pe fisa proiectului si pe cea a companiei. O
 * regula pe `:first-child` ar fi tinut doar cat timp ordinea celulelor nu se
 * schimba.
 *
 * `tabular-nums` fiindca restul site-ului il are deja in douazeci de locuri --
 * tabele, contoare, grafice -- si tocmai numarul cel mai mare de pe pagina
 * ramasese cu cifre de latimi diferite. */
.fp__cif-v:has(.unit) {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

.fp__sec {
  padding: var(--space-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
/* Sectiunea acoperita se vede ca acoperita de la un metru: chenar in
 * culoarea accentului si un fir gros pe muchia din stanga. Toate arata la
 * fel, indiferent ce ascund. */
.fp__sec.is-acoperit {
  border-color: var(--accent-line);
  border-left: 3px solid var(--accent-dim);
}
.fp__h {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin: 0;
  position: relative; padding-bottom: var(--space-xs);
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  letter-spacing: var(--track-tight); color: var(--ink);
}
/* Un fir scurt sub titlul de sectiune. Fara el, sectiunile incepeau doar cu
 * un rand mai gras, iar pe o fisa cu cinci-sase carduri la rand ochiul nu mai
 * gasea unde incepe fiecare. E `absolute` dinadins: `.fp__h` e flex, deci un
 * `::after` in flux ar fi devenit al treilea copil si ar fi stat LA DREAPTA
 * titlului, nu sub el. */
.fp__h::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 1.75rem; height: 2px; border-radius: 1px;
  background: var(--accent-dim);
}
.fp__lac { display: inline-flex; color: var(--accent); }
.fp__sec .prose, .fp__sec .fine { margin: var(--space-2xs) 0 0; }
.fp__sec .fine { color: var(--ink-3); }
.fp__sec .sale__v { margin: var(--space-2xs) 0 0; }

/* Masca: REDACTAREA valorii acoperite.
 *
 * Nu o pastila plina -- aia e forma prin care o interfata spune „se incarca",
 * si a fost forma de aici pana pe 21 septembrie 2026. Un om care vede un
 * schelet de incarcare in locul titularului nu intelege ca e ceva de cumparat,
 * intelege ca ne-a picat ceva. Pe pagina care VINDE tocmai valoarea aia, e
 * greseala cea mai scumpa cu putinta.
 *
 * Forma de acum: unul pana la trei blocuri, de latimi inegale, cate unul
 * pentru fiecare cuvant al raspunsului adevarat (vezi `parts._forma`). Se
 * citeste ca un rand innegrit dintr-un document, nu ca o bara de progres, si
 * se vede ca dedesubt e un nume scris de cineva.
 *
 * Textura dinauntru sunt liniute de latimea unei litere -- litere sterse.
 * Verticale, nu diagonale: hasura in diagonala a fost prima incercare, in
 * august, si a fost reclamata („astea sunt foarte urate"). Avea dreptate:
 * tipa mai tare decat datele din jur, desi tocmai ea n-are nimic de spus.
 *
 * `--tus` e culoarea redactarii. E cerneala paginii cat timp masca sta
 * linistita, si trece pe accent cand cursorul e pe randul, cardul sau
 * sectiunea din care face parte: atunci masca nu mai e o absenta, e un lucru
 * pe care il poti deschide. `color-mix` pe token merge in amandoua temele
 * dintr-o singura regula. */
.masca {
  --w: 5rem;
  --tus: var(--ink);
  display: inline-flex; align-items: center; gap: 0.4em;
  max-width: 100%; vertical-align: -0.04em;
}
.masca i {
  /* Latimea scrisa in marcaj e o MASURA, nu o promisiune: pe telefon, 9rem
   * intr-o coloana de 7rem iesea din card si impingea pagina lateral. */
  flex: 0 1 auto; min-width: 2.2ch;
  display: inline-block; width: var(--w, 5rem); max-width: 100%;
  height: 0.72em; border-radius: 2px;
  /* Bloc PLIN, fara textura. A avut una -- liniute de latimea unei litere, pe
   * trei etaje -- si ideea era buna pe hartie: sa se vada ca dedesubt e text.
   * In pagina arata a murdarie. Pe valorile scurte („35,2°") iesea un ciob
   * zgariat de doi milimetri, iar pe hartie alba liniutele subtiri la croma
   * mica se citeau ca praf pe ecran, nu ca cerneala. Reclamat, si pe drept.
   *
   * Ce ramane e partea care chiar rezolva ceva: FORMA. Doua-trei blocuri
   * inegale, cate unul pe cuvant, se citesc ca un rand innegrit dintr-un
   * document. O singura pastila lunga se citea ca „se incarca".
   *
   * Degradeul vertical foarte slab ii da corp, cat sa nu para un dreptunghi
   * desenat cu creionul. */
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--tus) 17%, transparent),
    color-mix(in oklab, var(--tus) 11%, transparent));
}
/* Ultimul bloc se stinge spre coada: textul de dedesubt nu se termina brusc,
 * intra sub cerneala. Fara asta, randul redactat are trei muchii taiate drept
 * si arata desenat, nu acoperit. */
.masca i:last-child {
  -webkit-mask-image: linear-gradient(90deg, oklch(0% 0 0) 76%, oklch(0% 0 0 / 0.3) 100%);
  mask-image: linear-gradient(90deg, oklch(0% 0 0) 76%, oklch(0% 0 0 / 0.3) 100%);
}
/* Redactarea nu reactioneaza la cursor. Pana pe 2 octombrie 2026 aici
 * ramasesera trei selectori fara reguli -- `.fp__sec:hover .masca` si
 * fratii lui, orfani de la curatenia din 28 septembrie -- lipiti de regula de
 * mai jos. Treceai cu mouse-ul peste o sectiune acoperita si blocurile
 * redactate primeau inaltimea, chenarul si umplutura butonului „Intra in
 * cont": se umflau. Reclamat ca „zoom-ul de pe fisa", si scos de tot, nu
 * reparat: proprietarul vrea redactarea nemiscata. */
.cta-lacat {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-sm);
  min-height: 44px; padding: 0 var(--space-sm);
  border: var(--rule) solid var(--accent-line); border-radius: var(--radius-md);
  background: var(--accent-wash); color: var(--accent);
  font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cta-lacat:hover { border-color: var(--accent); color: var(--accent-hover); }
.cta-lacat__s { margin-left: auto; }

/* Cutia in care sta indemnul cand tine locul unui tabel intreg, nu al unei
 * sectiuni de fisa: tabelul statiilor de sub rezultate. */
.statii-lacat {
  padding: var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.statii-lacat .cta-lacat { margin-top: 0; }

/* Provenienta, ca subsol al fisei: aceleasi trei lucruri, la marimea unei
 * etichete. A fost o sectiune cu titlu, si cantarea cat o analiza. */
.fp__sursa {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md);
  margin: 0; padding-top: var(--space-2xs);
  color: var(--ink-3); font-size: var(--text-xs);
}
.fp__sursa b {
  color: var(--ink-faint); font-weight: 500;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  margin-right: 0.35rem;
}
.fp__altii { color: var(--ink-2); }

/* Proiectul nu mai e in curs: o banda simpla sub titlu, fara culoare de
 * avertizare -- e o stare, nu o eroare. */
.fp__inchis {
  margin: var(--space-sm) 0 var(--space-md);
  padding: 0.75rem 1rem;
  background: var(--paper-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  max-width: 62ch;
}

/* Sub 1000px coloana nu mai are unde sa se lipeasca: ecranul e mai ingust
 * decat suma celor doua. Devine cap de pagina -- fotografie, cod, semnal,
 * butoane -- si corpul curge sub ea. */
@media (max-width: 1000px) {
  .fp { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .fp__lat { position: static; }
  .fp__img { aspect-ratio: 16 / 7; }
  /* Butoanele stau in rand cat incap, nu unul sub altul cat e latimea
   * ecranului: cinci butoane de latime plina ar impinge prima sectiune sub
   * marginea de jos. */
  /* Flex, nu grila: intr-o grila, un buton ramas singur pe rand sta la
   * jumatate de latime si arata uitat -- exact ce s-a vazut pe telefon dupa
   * deblocare, cand butonul „Deblocheaza" dispare si „Trimite mesaj" ramane
   * singur. In flex, ultimul de pe rand creste cat randul, oricate butoane ar
   * avea fisa in starea ei. */
  .fp__act { display: flex; flex-wrap: wrap; }
  .fp__act > * { flex: 1 1 13rem; }
  .fp__act > .btn--go, .fp__act > .fp__f:has(.btn--go),
  .fp__act > .fp__b--lat { flex-basis: 100%; }
}

@media (max-width: 620px) {
  .fp__sec { padding: var(--space-sm); }
  /* Cinci butoane cat latimea ecranului inseamna cinci randuri inainte de
   * prima cifra din fisa. Verdele si intrebarea despre revendicare raman late
   * -- unul e actiunea principala, celalalt are un text de doua ori mai lung
   * -- restul se aseaza doua pe rand. */
  /* Doua pe rand; actiunea principala si intrebarea despre revendicare
   * (text de doua ori mai lung) pe tot randul. Cine ramane singur pe rand
   * creste singur -- vezi regula de la 1000px. */
  /* Baza e jumatatea randului, iar `min-width: 0` lasa butonul sa se
   * stranga sub latimea textului lui: altfel „Trimite mesaj" (mai lung) iesea
   * mai lat decat „Salveaza" langa el, si perechea nu mai era pereche. */
  .fp__act > * { flex: 1 1 calc(50% - var(--space-2xs)); min-width: 0; }
  .fp__act .fp__b { padding-inline: var(--space-xs); }
  .fp__act > .fp__b--rev, .fp__act > .fp__b--lat { flex-basis: 100%; }
  /* Pe telefon, cele trei cifre nu mai sunt casute una langa alta: sunt trei
   * randuri, cu eticheta la stanga si valoarea la dreapta. In casute, „STADIU
   * / Contract de racordare" se rupea pe trei randuri si tragea toata grila
   * dupa el; pe un rand, incape intreg. */
  .fp__cifre { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .fp__cif {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-sm); padding: var(--space-2xs) var(--space-sm);
  }
  .fp__cif-k { margin: 0; }
  .fp__cif-v { font-size: var(--text-md); text-align: right; }
  /* Pe telefon celula e un rand cu eticheta la stanga si valoarea la dreapta,
   * deci cifra n-are pe cine sa domine -- se intoarce la marimea vecinelor.
   * Specificitatea lui `:has()` bate regula de mai sus, deci se repeta aici. */
  .fp__cif-v:has(.unit) { font-size: var(--text-md); }
}

/* ============================================================ ECRANE MICI
 * Verificat la 320 / 375 / 414 / 768.
 */

@media (max-width: 900px) {
  :root { --shell-pad: var(--space-md); --space-section: var(--space-2xl); }
  /* Filtrele se desfac in doua coloane. Patru coloane pe o tableta inseamna
   * 160px de camp, in care „Distributie Oltenia (382)" nu incape si nici nu
   * poate fi taiat cu punct-punct-punct: un filtru pe care nu poti citi ce ai
   * ales nu e un filtru. */
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar__links { display: none; }
  .burger { display: inline-flex; }
  /* 44 px, nu 38: pragul de la care un deget nimereste butonul din prima.
   * Cu mausul, 38 e destul si arata mai asezat; pe telefon, fiecare buton
   * ratat inseamna inca o atingere. */
  .btn { min-height: 44px; }
}

/* Pe ecran cu atingere, efectele de hover raman lipite dupa apasare: cardul
 * atins ramane ridicat pana cand atingi altceva. Nu e o animatie, e o urma.
 * Deci acolo unde nu exista cursor, ridicarile nu se intampla. */
@media (hover: none) {
  .mcard:hover, .stire:hover, .card--live:hover {
    transform: none; box-shadow: none;
  }
  .mcard:hover .mcard__art { transform: none; }
  .cons__go:hover, .cons__teh:hover { transform: none; box-shadow: none; }
}

@media (max-width: 560px) {
  :root {
    --shell-pad: var(--space-sm);
    --space-section: var(--space-xl);
    --text-figure: clamp(3.25rem, 22vw, 5rem);
  }
  .bar__in { padding-inline: var(--space-sm); }
  /* Ce pleaca din bara pe telefon, si in ce ordine. Comutatorul de tema si
   * legatura „Cont gratuit" ies primele; butonul verde RAMANE. Pana pe 3
   * septembrie 2026 era pe dos -- verdele pleca sub 420px si ramanea legatura
   * discreta -- adica exact pe ecranul cel mai mic disparea singura actiune
   * pentru care exista pagina. Amandoua sunt oricum in sertar. */
  .bar__acts .btn--ghost, .bar__reg, .bar__pret { display: none; }
  .bar__cauta { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .bar__cauta span { display: none; }
  /* Pe telefon, un camp pe rand. Chiar si doua coloane dadeau 170px, si se
   * vedea in captura: eticheta „VALABILITATE" rupta la „VALABILIT", iar in
   * lista scria „Toat" in loc de „Toate". Randul de filtre se lungeste, dar
   * se poate citi -- iar cine nu vrea sa filtreze deruleaza peste el. */
  .filters { grid-template-columns: minmax(0, 1fr); }
  /* Fisa tehnica: eticheta la stanga, valoarea la DREAPTA, pe acelasi rand
   * -- forma unei fise de specificatii, nu a unui formular. Pana pe 23
   * septembrie 2026 eticheta statea deasupra valorii si totul curgea lipit de
   * marginea din stanga: douasprezece perechi aratau ca douazeci si patru de
   * randuri fara legatura intre ele („arata super urat"). Eticheta primeste
   * 42% si se poate rupe pe doua randuri; valoarea are restul. Ce era prea
   * lung pentru o valoare -- sursa, un „termen depasit" -- sta acum dedesubt,
   * mic, in `.spec__n`, deci valoarea ramane scurta. */
  .spec__r {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: var(--space-sm); align-items: baseline;
    padding: var(--space-xs) 0;
  }
  .spec dd { text-align: right; font-weight: 500; }
  .spec dd .masca { justify-content: flex-end; }
  /* Randul de pret: numele pe randul lui, cele doua feluri de a plati
   * dedesubt, egale. Pe latimea telefonului, numele plus doua butoane pe un
   * rand lasa unul lipit la stanga si altul la dreapta, cu un gol intre ele. */
  .plata__r { flex-direction: column; align-items: stretch; }
  .plata__r .frm { display: flex; }
  .plata__r .btn { flex: 1; justify-content: center; }
  /* Cu o singura coloana, campul de cautare nu mai are ce sa intinda. Lasat
   * asa, `span 2` il facea sa depaseasca grila si sa iasa din chenar. */
  .filt--wide { grid-column: span 1; }
  /* Randurile de destinatii din subsol sunt legaturi mici si dese. Pe telefon
   * primesc aer pe verticala, ca sa nu se apese una in locul alteia. */

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .stat__value { font-size: var(--text-xl); }
  .section + .section { border-top-width: var(--rule); }
}

/* Sub 360px -- iPhone SE de prima generatie si telefoanele mici Android --
 * nici verdele nu mai incape langa marca si sertar. Atunci pleaca si el, si
 * ramane doar in sertar. Peste acest prag ramane in bara: e singura actiune
 * pentru care exista pagina. */
@media (max-width: 360px) {
  .bar__acts .btn--go { display: none; }
}

/* 340, nu 380: pe un iPhone SE de 375px doua coloane de indicatori incap
 * confortabil, iar o singura coloana intinde eroul cu inca doua ecrane. */
@media (max-width: 340px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}

/* Steagul de risc din secțiunea titularului: firmă inactivă fiscal la ANAF.
 * Nu e un verdict al nostru, e o stare publicată de fisc — dar e prima pe care
 * un cumpărător vrea s-o știe înainte să deschidă o discuție. */
.fp__stop { color: var(--state-dead); font-weight: 600; }

/* Rezultatul din fișa companiei: profitul și pierderea nu se citesc la fel de
 * repede dacă poartă aceeași culoare, iar asta e linia pentru care omul se
 * uită la tabel. Semantic, nu accentul mărcii. */
.fin-plus { color: var(--state-good); }
.fin-minus { color: var(--state-dead); }
.fin th[scope="row"] { font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* ------------------------------------------------------------- căutarea
 *
 * O singură casetă, largă cât rândul, fiindcă ce se scrie în ea e o frază, nu
 * un cuvânt-cheie. Exemplele de dedesubt sunt legături adevărate: se apasă și
 * se vede răspunsul, ceea ce explică sintaxa mai bine decât orice text de
 * ajutor -- fiindcă nu există sintaxă de explicat.
 */
.cauta { display: flex; flex-direction: column; gap: var(--space-xs); }
.cauta__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cauta__row { display: flex; gap: var(--space-2xs); }
.cauta__i {
  flex: 1 1 auto; min-width: 0;
  padding: var(--space-sm) var(--space-md);
  font: inherit; font-size: var(--text-lg);
  color: var(--ink); background: var(--paper-raised);
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
}
.cauta__i:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cauta__i::placeholder { color: var(--ink-faint); }
.cauta__ex-l { font-size: var(--text-sm); color: var(--ink-3);
               display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.cauta__ex { color: var(--ink-2); text-decoration: underline;
             text-decoration-color: var(--line); text-underline-offset: 3px; }
.cauta__ex:hover { color: var(--accent); text-decoration-color: currentColor; }
.cauta__citit { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--ink-3); }
.cauta__citit b { color: var(--ink); font-weight: 600; }

/* Rezultatele: trei grupuri, aceleași rânduri în fiecare. Un rând, nu un card:
 * la o căutare se scanează vertical, iar cardurile pun spațiu între ochi și
 * următorul răspuns. */
.rez__g { margin-top: var(--space-xl); }
.rez__g > .h4 { margin-bottom: var(--space-sm); }
.rez__l { display: flex; flex-direction: column; }
.rez {
  display: grid; align-items: baseline; gap: var(--space-3xs) var(--space-md);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-sm) var(--space-2xs);
  border-top: var(--rule) solid var(--line-faint);
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-mid) var(--ease-out);
}
.rez:hover { background: var(--paper-raised); padding-left: var(--space-sm); }
.rez__t { font-weight: 600; font-size: var(--text-base); }
.rez__t:hover { color: var(--accent); }
.rez__d { grid-column: 1; font-size: var(--text-sm); color: var(--ink-3); }
.rez__k { grid-row: 1 / span 2; grid-column: 2; text-align: right;
          font-size: var(--text-xs); color: var(--ink-3);
          font-variant-numeric: tabular-nums; }
.rez__gol { margin-top: var(--space-xl); display: flex; flex-direction: column;
            gap: var(--space-sm); }

@media (max-width: 560px) {
  .cauta__row { flex-direction: column; }
  .rez { grid-template-columns: minmax(0, 1fr); }
  .rez__k { grid-row: auto; grid-column: 1; text-align: left; }
}

/* ============================================================ SUPRAFEȚE DE DATE
 *
 * Paginile de listă -- /companii, /atr -- erau corecte și plate. Corect nu e
 * același lucru cu terminat: un tabel de cifre pe un fundal fără nicio adâncime
 * arată a export, nu a produs. Ce urmează nu schimbă nicio cifră și nicio
 * așezare; adaugă doar lumină, relief și mișcare.
 *
 * Toate valorile vin din tokeni. Cromă foarte mică peste tot, dinadins: pe o
 * suprafață de date culoarea trebuie să ghideze ochiul, nu să-l cheme.
 */

/* --- atmosfera din spatele titlului ---------------------------------------
 * Două lumini, nu una: una caldă în accent, sus-stânga, una rece foarte slabă
 * spre dreapta. Una singură se citește ca o pată; două, ca o cameră în care e
 * aprinsă o lampă. Stau pe `::before` cu `z-index: -1`, deci nu prind clicuri
 * și nu intră în fluxul de așezare. */
.sec--cap {
  position: relative;
  isolation: isolate;
}
.sec--cap::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-xl) * -1) 0 auto 0;
  height: 26rem;
  background:
    radial-gradient(48% 90% at 14% 0%, var(--aura), transparent 68%),
    radial-gradient(40% 80% at 82% 12%, var(--aura-2), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* --- banda de indicatori --------------------------------------------------
 * Fiecare cifră primește un fir scurt de accent deasupra, care se stinge spre
 * dreapta. Fără el, trei numere mari stau pe pagină ca un rând de text; cu el,
 * fiecare are un început și se citesc ca trei lucruri, nu ca o propoziție. */
.stats--cap .stat {
  position: relative;
  padding-top: var(--space-sm);
}
.stats--cap .stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--accent), transparent);
}
/* A doua cifră de pe /atr e cea care contează -- „oprite" -- și primește firul
 * întreg, nu stins. Ierarhia se face din lumină, nu din mărime: toate trei
 * rămân la fel de mari, ca să se poată compara. */
.stats--cap .stat:nth-child(2)::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-dim));
}

/* --- bara de filtre -------------------------------------------------------
 * Un fir de lumină sus și o umbră scurtă dedesubt. Un câmp care nu e nici
 * ridicat nici scufundat nu arată că se poate atinge. */
.filters {
  box-shadow: var(--relief);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}
.filters:focus-within {
  box-shadow: var(--relief), var(--glow-accent);
}

/* --- capul de tabel -------------------------------------------------------
 * Gradient scurt în loc de fundal plat, plus estompare în spate. Capul e
 * `sticky`: când rândurile trec pe sub el, un fundal opac arată ca un capac,
 * iar estomparea arată ca sticlă. */
.table th {
  background:
    linear-gradient(180deg, var(--paper-raised), var(--paper-sunken));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- rândul, la trecerea cursorului ---------------------------------------
 * O bară de accent care crește din centru, pe marginea din stânga. Rândul avea
 * deja schimbare de fundal; bara spune UNDE ești, nu doar că ești undeva -- iar
 * pe cincizeci de rânduri identice, aia e diferența.
 *
 * `scaleY` și `opacity`, nimic altceva: sunt singurele două care nu cer
 * recalcularea așezării. */
.table tbody td:first-child {
  position: relative;
}
.table tbody td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  border-radius: var(--radius-xs);
  transform: scaleY(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.table tbody tr:hover td:first-child::before,
.table tbody tr:focus-within td:first-child::before {
  transform: scaleY(1);
}

/* --- semnele de stare -----------------------------------------------------
 * Un halou foarte slab pe cele vii. Nu pe cele moarte și nu pe cele neutre: un
 * halou pe tot înseamnă niciun halou. */
.chip--live {
  box-shadow: var(--glow-chip);
}

/* --- intrarea rândurilor --------------------------------------------------
 * Primele douăsprezece rânduri urcă un pic la încărcare, decalat. Mai multe
 * ar însemna că ultimul apare după o secundă, adică o pagină care se încarcă
 * greu -- exact impresia opusă.
 *
 * `animation-fill-mode: backwards` ca rândul să stea invizibil în timpul
 * întârzierii, nu să clipească în poziția finală și apoi să pornească. */
@keyframes rand-intra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.table--egal tbody tr,
.table--intra tbody tr {
  animation: rand-intra var(--dur-mid) var(--ease-out) backwards;
}
.table--egal tbody tr:nth-child(1),  .table--intra tbody tr:nth-child(1)  { animation-delay: 0ms; }
.table--egal tbody tr:nth-child(2),  .table--intra tbody tr:nth-child(2)  { animation-delay: 22ms; }
.table--egal tbody tr:nth-child(3),  .table--intra tbody tr:nth-child(3)  { animation-delay: 44ms; }
.table--egal tbody tr:nth-child(4),  .table--intra tbody tr:nth-child(4)  { animation-delay: 66ms; }
.table--egal tbody tr:nth-child(5),  .table--intra tbody tr:nth-child(5)  { animation-delay: 88ms; }
.table--egal tbody tr:nth-child(6),  .table--intra tbody tr:nth-child(6)  { animation-delay: 110ms; }
.table--egal tbody tr:nth-child(7),  .table--intra tbody tr:nth-child(7)  { animation-delay: 132ms; }
.table--egal tbody tr:nth-child(8),  .table--intra tbody tr:nth-child(8)  { animation-delay: 154ms; }
.table--egal tbody tr:nth-child(9),  .table--intra tbody tr:nth-child(9)  { animation-delay: 176ms; }
.table--egal tbody tr:nth-child(10), .table--intra tbody tr:nth-child(10) { animation-delay: 198ms; }
.table--egal tbody tr:nth-child(11), .table--intra tbody tr:nth-child(11) { animation-delay: 220ms; }
.table--egal tbody tr:nth-child(12), .table--intra tbody tr:nth-child(12) { animation-delay: 242ms; }
.table--egal tbody tr:nth-child(n+13),
.table--intra tbody tr:nth-child(n+13) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .table--egal tbody tr, .table--intra tbody tr { animation: none; }
  .table tbody td:first-child::before { transition: none; }
}

/* ============================================================ TEASER
 *
 * Ce vede cineva fără cont pe o pagină de listă: câteva rânduri, apoi lacătul.
 *
 * Rândurile nu se taie brusc, se sting. Un tabel retezat arată a pagină
 * stricată; unul care se estompează spune „mai e" fără să scrie nimic, și e
 * singura parte din interfață pe care nu trebuie s-o citești ca s-o înțelegi.
 *
 * Masca merge pe container, nu pe rânduri: aplicată pe fiecare rând, ultimul
 * s-ar fi stins de sus în jos în loc ca grupul să se stingă spre lacăt.
 */
.teaser {
  position: relative;
}
.teaser__randuri {
  -webkit-mask-image: linear-gradient(180deg,
      oklch(0% 0 0) 0%, oklch(0% 0 0) 45%, transparent 97%);
  mask-image: linear-gradient(180deg,
      oklch(0% 0 0) 0%, oklch(0% 0 0) 45%, transparent 97%);
  /* Fara `pointer-events: none`: legaturile din randurile aratate -- numele
   * firmei, numarul avizului, lacatul „Deblocheaza" -- trebuie sa se poata
   * apasa. Oprite doar pentru mouse, ramaneau oricum in Tab. */
}
/* Formularul de filtre stă într-un `fieldset`, ca să poată fi oprit întreg
 * cu `disabled`. Fără reset, fieldset-ul își desenează chenarul lui. */
.filtre-set {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
/* Bara de filtre rămâne la vedere, dar stinsă și neatingibilă. Ascunsă cu
 * totul, omul n-ar ști că se poate filtra; activă, ar filtra cinci rânduri și
 * ar crede că baza e goală. Stinsă, e o promisiune. Oprirea o face
 * `disabled` pe fieldset -- scoate câmpurile și din Tab, nu doar de sub
 * mouse; clasa asta doar le stinge. */
.teaser__filtre {
  opacity: 0.4;
  filter: saturate(0.6);
}
.teaser__zid {
  margin-top: var(--space-md);
  position: relative;
  z-index: 1;
  text-align: center;
}
/* Zidul NU mai urcă peste rânduri. A urcat până pe 23 septembrie 2026, cu o
 * margine negativă, și pe telefon titlul „Încă 1.504 avize, cu filtrele lor"
 * stătea peste ultimul rând, care se vedea pe jumătate prin litere: cifre și
 * date amestecate cu titlul. Rândurile se sting oricum până la transparent,
 * deci ajunge ca zidul să vină imediat după ele. */
.teaser__randuri + .teaser__zid {
  margin-top: var(--space-2xs);
}
.teaser__zid .cta-lacat {
  display: inline-flex;
  box-shadow: var(--glow-accent);
}
.teaser__cat {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.teaser__cat b { color: var(--accent); font-variant-numeric: tabular-nums; }
.teaser__fine {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* ============================================================ CONTUL MEU
 *
 * O consola, nu un document. Pagina a fost opt sectiuni puse una sub alta si
 * a fost reclamata exact asa: „este de nefolosit, dai scroll la infinit".
 *
 * Forma de acum: un antet care nu se ascunde niciodata -- cine esti, cat de
 * verificata e firma, cate deblocari ti-au ramas -- si sase file care se
 * comuta in loc sa se deruleze. Fila traieste in adresa (`#firma`), deci se
 * poate trimite un link si te intorci unde erai dupa ce salvezi.
 *
 * Fara JavaScript, filele sunt ancore si toate panourile raman vizibile: se
 * pierde comutarea, nu continutul.
 */

/* ============================================================ ZIDUL
 *
 * Ce se vede cand abonatul nu mai poate debloca acum. Trei ecrane, nu unul --
 * vezi `app/ui/project.py::_zid_limita`. Forma e a unei note, nu a unui card:
 * nu e continut, e o oprire, si trebuie sa se deosebeasca de restul fisei
 * dintr-o privire. */
.zid {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  margin-bottom: var(--space-md); padding: var(--space-md);
  border: var(--rule) solid var(--accent-line); border-radius: var(--radius-lg);
  background: var(--accent-wash);
}
.zid__t {
  margin: 0; font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; letter-spacing: var(--track-tight); color: var(--ink);
}
.zid__p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.zid__p b { color: var(--accent); font-variant-numeric: tabular-nums; }
.zid__lista {
  margin: var(--space-2xs) 0 var(--space-xs); padding: 0; list-style: none;
  display: grid; gap: var(--space-2xs);
  color: var(--ink-2); font-size: var(--text-sm);
}
.zid__lista li { position: relative; padding-left: 1.25em; }
.zid__lista li::before {
  content: ""; position: absolute; left: 0.2em; top: 0.55em;
  width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--accent-fill);
}
.zid--deschide .cta-lacat { align-self: flex-start; }
.zid__i { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
/* Randul de sub butonul de deblocare: „ti-au mai ramas 87 luna asta". Pretul
 * se scrie inainte de apasare, si se scrie in unitati, nu in euro. */
.fp__b-sub {
  display: block; margin-top: var(--space-3xs);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-faint); text-align: center;
}
.fp__b-sub b { color: var(--accent); }

/* --- cuprinsul contului ---------------------------------------------------
 * Forma e cea a setarilor Stripe: grupuri de cartonase, fiecare cu icoana,
 * nume, o propozitie si -- partea pe care ei n-o au -- STAREA de acum. Un
 * cuprins care spune doar „Abonament" te obliga sa intri ca sa afli ce ai. */
.chub {
  display: flex; flex-direction: column; gap: var(--space-xl);
  margin-top: var(--space-lg);
}
/* Grupurile si cartonasele intra pe rand, de jos in sus. Nu e decor: ochiul
 * primeste ordinea in care se citeste pagina -- grup, apoi cartonasele lui --
 * in loc sa fie pus in fata unui perete de noua casute deodata. Sub
 * `prefers-reduced-motion` nu se misca nimic; vezi regula generala. */
.chub__g { animation: rise var(--dur-mid) var(--ease-out) both; }
.chub__g:nth-child(2) { animation-delay: 60ms; }
.chub__g:nth-child(3) { animation-delay: 120ms; }
.chub__g:nth-child(4) { animation-delay: 180ms; }
.chub__h {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: 600; letter-spacing: var(--track-tight); color: var(--ink);
}
/* RANDURI, nu mozaic. Cartonasele intr-o grila iesea cu doua pe un grup,
 * trei pe altul si unul pe al treilea -- si arata aruncat fiindca ERA: cate
 * coloane are un rand o hotara latimea ecranului, nu continutul. Un rand plin
 * nu poate iesi strambat, oricate intrari ar avea grupul.
 *
 * Randurile stau intr-o singura cutie cu chenar, despartite de un fir, ca o
 * lista de setari -- nu noua casute care plutesc fiecare in cate un chenar. */
.chub__r {
  display: flex; flex-direction: column;
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised); overflow: hidden;
}
.chub__c {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule) solid var(--line-faint);
  text-decoration: none;
}
.chub__c:last-child { border-bottom: 0; }
.chub__m { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
/* Sageata sta la capat si se muta un pic la trecerea cursorului: singurul
 * semn, pe un rand fara chenar, ca randul intreg se apasa. */
.chub__go {
  flex: none; color: var(--ink-faint); display: flex;
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chub__c:hover .chub__go { transform: translateX(3px); color: var(--accent); }
/* La trecerea cursorului se aprinde randul, nu se ridica: intr-o lista,
 * randul care se misca impinge ochiul de pe celelalte. */
.chub__c:hover { background: var(--paper-sunken); }
.chub__c:hover .chub__i { color: var(--accent-hover); }
.chub__c {
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: none) { .chub__c:hover { transform: none; box-shadow: none; } }
.chub__i { flex: none; color: var(--accent); display: flex; }
.chub__t {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 600; color: var(--ink);
}
/* Starea sta la dreapta, inaintea sagetii, si nu trage ochiul de la nume: e
 * o lamurire, nu un titlu. */
.chub__s { flex: none; font-weight: 400; }
@media (max-width: 560px) {
  .chub__c { flex-wrap: wrap; }
  .chub__s { order: 3; width: 100%; padding-left: calc(18px + var(--space-sm)); }
}

.cont { display: flex; flex-direction: column; gap: var(--space-md); }

/* Contorul. Bara nu e decor: „87 din 100" se citeste, dar nu se simte. */
.contor {
  height: 6px; border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  overflow: hidden;
}
.contor i {
  /* `--parte` se scrie in marcaj, cu procentul socotit in Python. Randul de
   * aici exista ca tokenul sa fie definit undeva, nu doar cerut. */
  --parte: 0%;
  display: block; height: 100%; width: var(--parte, 0%);
  background: var(--accent-fill); border-radius: inherit;
}

/* Eticheta din consola n-are marginea de dedesubt a celei de pe paginile de
 * prezentare: acolo desparte doua sectiuni, aici sta lipita de lucrul pe care
 * il numeste. */
.cont .eyebrow { margin-bottom: 0; }

/* --- panourile ----------------------------------------------------------- */
.cont__grid {
  display: grid; gap: var(--space-md); margin-top: var(--space-md);
  /* `min(21rem, 100%)`: pe paginile de cont corpul are 17px, deci 21rem sunt
   * 357px -- mai mult decat incape pe un telefon de 375, iar casetele ieseau
   * pana in marginea ecranului, fara spatiul din dreapta. */
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  align-items: start;
}
.cbox {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.cbox__t {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.cbox__stare { margin: 0; }
/* Butonul mic, pentru coltul unei casete: aceeasi forma, alt corp. Inaltimea
 * de atingere ramane 44px pe telefon -- vezi ECRANE MICI. */
.btn--mic {
  min-height: 32px; padding: 0 var(--space-2xs); font-size: var(--text-xs);
}
.cbox .krows, .cbox .frm { margin: 0; }
/* Intr-o caseta de consola, eticheta sta DEASUPRA valorii. Coloana de 12rem
 * din tabelele late lasa aici vreo sapte caractere pentru valoare, si
 * „ALPHA SOLAR ENERGY S.R.L." cobora cate un cuvant pe rand -- acelasi defect
 * reparat pe fisa proiectului, pe telefon, si din aceeasi cauza: o latime
 * potrivita pentru o pagina intreaga, folosita intr-o coloana. */
.cbox .krow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cbox .krow dt {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.cbox .cta { margin-top: var(--space-2xs); }
/* Doua-trei actiuni una sub alta, nu una langa alta: butoanele de proba au
 * etichete lungi („Proba Elite · 7 zile, 5 fise") si pe un rand se rup urat. */
.cta--col { display: flex; flex-direction: column; align-items: start; gap: var(--space-2xs); }
/* Un plan si cele doua feluri de a-l plati, pe acelasi rand: lunar si anual
 * sunt acelasi lucru cumparat altfel, nu doua produse. */
.plata__r {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2xs); padding: var(--space-2xs) 0;
  border-bottom: var(--rule) solid var(--line-faint);
}
.plata__r:last-child { border-bottom: 0; }
.plata__n {
  flex: 1 1 5rem; font-family: var(--font-display); font-weight: 600;
  color: var(--ink);
}
.plata__r .frm { margin: 0; }
.cta--col .frm { margin: 0; }
/* Casetele cu formular sunt mai inguste decat cele cu fapte: un camp de text
 * lat de 40rem invita la un raspuns lung, si toate raspunsurile de aici sunt
 * scurte. */
.cbox .frm { max-width: 26rem; }

@media (max-width: 900px) {
  .cbox { padding: var(--space-sm); }
}

/* --- nota de sub o valoare de fisa ----------------------------------------
 * „30.06.2026" e valoarea; „dupa situatia Transelectrica din 2025, termen
 * trecut" e o lamurire despre ea. Scrise la aceeasi marime, randul devenea o
 * propozitie de doua randuri si valoarea nu se mai gasea in ea. */
.spec__n {
  display: block; margin-top: 2px;
  color: var(--ink-3); font-size: var(--text-xs); font-weight: 400;
  line-height: var(--leading-snug);
}

/* --- tabelele de pe fisa companiei, ca teanc de carduri pe telefon --------
 * Vezi `app/ui/company.py::_carduri`, care scrie numele coloanei in fiecare
 * celula. Pe ecran lat raman tabel; pe telefon fiecare rand devine un card:
 * prima celula e titlul lui, restul sunt perechi eticheta-valoare. Nu se mai
 * trage nimic lateral. */
@media (max-width: 620px) {
  .tablewrap:has(> .table--carduri) {
    overflow: visible; background: none; border: 0; border-radius: 0;
  }
  /* `min-width: 0`: tabelul are 42rem minim pe ecran lat (vezi TABEL), iar ca
   * teanc de carduri minimul ar impinge valorile dincolo de marginea din
   * dreapta -- exact defectul pe care il repara forma asta. */
  .table--carduri, .table--carduri tbody { display: block; width: 100%; min-width: 0; }
  .table--carduri thead { display: none; }
  .table--carduri tr {
    display: block; padding: var(--space-xs) 0;
    border-bottom: var(--rule) solid var(--line-faint);
  }
  .table--carduri tr:last-child { border-bottom: 0; }
  .table--carduri td, .table--carduri th {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-sm); padding: 2px 0; border: 0;
    text-align: right; white-space: normal; font-weight: 400;
  }
  .table--carduri td::before, .table--carduri th::before {
    content: attr(data-l); flex: none; max-width: 45%;
    color: var(--ink-3); font-size: var(--text-xs); text-align: left;
  }
  /* Prima celula e numele cardului: fara eticheta, mai groasa, la stanga. */
  .table--carduri tr > :first-child {
    justify-content: flex-start; text-align: left;
    padding-bottom: var(--space-3xs);
    color: var(--ink); font-weight: 600;
  }
  .table--carduri tr > :first-child::before { content: none; }
  .table--carduri .masca { justify-content: flex-end; }
}

/* --- caseta spre care trimite un indemn ------------------------------------
 * „Urmareste firma · Elite" duce la abonament cu `?plan=elite#elite`. Caseta
 * aia sta prima si se deosebeste de celelalte, ca omul sa vada ca a ajuns
 * exact unde a cerut, nu intr-o pagina de setari oarecare. */
.cbox--tinta {
  border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
  scroll-margin-top: 6rem;
}
.cbox .lista {
  display: grid; gap: var(--space-3xs);
  margin: 0; padding-left: 1.1rem;
  color: var(--ink-2); font-size: var(--text-sm);
}
.cbox .lista li::marker { color: var(--accent); }

/* Rezumatul de sub titlul fisei: ce e proiectul, spus in propozitii. */
.fp__rezumat {
  margin: var(--space-2xs) 0 0; max-width: 68ch;
  color: var(--ink-2); font-size: var(--text-base);
  line-height: var(--leading-body, 1.55);
}

/* „Urmareste firma" din capul fisei: pe telefon e o tinta de atingere ca
 * oricare alta, nu un buton mic de colt. */
@media (max-width: 900px) {
  .fp__lat .btn--mic { min-height: 44px; font-size: var(--text-sm); }
}

/* Pe telefon, butoanele puse unul sub altul intr-o caseta au aceeasi latime:
 * trei butoane de latimi diferite, lipite la stanga, aratau aruncate. */
@media (max-width: 560px) {
  .cbox .cta--col { align-items: stretch; }
  .cbox .cta--col .btn { width: 100%; justify-content: center; }
}

/* Titlul sau randul de sub el, urmat direct de o grila de carduri: pe
 * /confidentialitate si /resurse primul card statea lipit de text, fara aer
 * intre ele. */
.shell > :is(h1, h2, .lede) + :is(.grid, .stack) { margin-top: var(--space-md); }

/* ============================================================ CAMERA DE DATE
 *
 * Documentele unui proiect si camera unei tranzactii (`app/ui/camera.py`).
 * Pagina e despre incredere: cine vede actele, cand, si ce ramane scris. De
 * aceea incepe cu banda de mai jos, nu cu formularul. */
.cd { display: grid; gap: var(--space-lg); }
.cd-incredere {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background:
    radial-gradient(120% 200% at 0% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%),
    var(--paper-raised);
}
.cd-incredere::before {
  content: ""; position: absolute; inset: 0 10% auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 70%, transparent), transparent);
}
.cd-incredere__p {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  padding: var(--space-sm); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--paper) 55%, transparent);
  font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-body);
}
.cd-incredere__p b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.cd-incredere__ic {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: var(--radius-md); background: var(--accent-wash); color: var(--accent);
  border: var(--rule) solid var(--accent-line);
}
.cd-grid {
  display: grid; gap: var(--space-xl); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
}
.cd-col .psec:first-child { margin-top: 0; }
.cd-rail {
  position: sticky; top: calc(64px + var(--space-md));
  display: grid; gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background: var(--paper-raised); box-shadow: 0 14px 34px oklch(0% 0 0 / 0.10);
}
.cd-rail .h4 { font-family: var(--font-display); font-size: var(--text-md); }
.cd-fine { color: var(--ink-3); }

/* Documentul, in tabel: pictograma, titlul, felul dedesubt. */
.cd-doc { display: inline-flex; align-items: center; gap: var(--space-xs); }
.cd-doc svg {
  flex: none; padding: 7px; box-sizing: content-box;
  border-radius: var(--radius-md); background: var(--paper-sunken); color: var(--accent);
}
.cd-doc b { display: block; color: var(--ink); font-weight: 600; }
.cd-doc__f { display: block; font-size: var(--text-xs); color: var(--ink-3); }
.cd-inchis {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--paper-sunken); color: var(--ink-3); font-size: var(--text-xs);
}
.cd-inchis svg { width: 14px; height: 14px; }
.btn--mic svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }

/* Campul de fisier: butonul sistemului, desenat ca ale noastre. */
.cd-fisier input[type="file"] {
  width: 100%; padding: var(--space-2xs);
  border: var(--rule) dashed var(--line-strong); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink-2); font: inherit; font-size: var(--text-sm);
  cursor: pointer;
}
.cd-fisier input[type="file"]:hover { border-color: var(--accent); }
.cd-fisier input[type="file"]::file-selector-button {
  margin-right: var(--space-sm); padding: 8px 14px;
  border: 0; border-radius: var(--radius-md);
  background: var(--accent-wash); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.cd-urca .btn { width: 100%; justify-content: center; }

/* Capul camerei: rolul, proiectul, starea. */
.cd-cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background:
    radial-gradient(140% 220% at 100% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%),
    var(--paper-raised);
}
.cd-cap__rol {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3);
}
.cd-cap .h3 { margin-top: 4px; }
.cd-cap .h3 a { color: var(--ink); text-decoration: none; }
.cd-cap .h3 a:hover { color: var(--accent); }

/* Treptele, ca traseu: ce s-a facut, unde sunteti, ce urmeaza. */
.cd-trepte {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs);
  list-style: none; padding: 0; margin: 0;
}
.cd-pas {
  position: relative; display: grid; gap: 4px; align-content: start;
  padding: var(--space-sm); border-radius: var(--radius-lg);
  border: var(--rule) solid var(--line); background: var(--paper-raised);
}
.cd-pas__n {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--paper-sunken); color: var(--ink-3); border: var(--rule) solid var(--line);
}
.cd-pas__t { font-weight: 600; color: var(--ink-3); }
.cd-pas__d { font-size: var(--text-xs); color: var(--ink-3); line-height: var(--leading-body); }
.cd-pas--gata .cd-pas__n { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); }
.cd-pas--gata .cd-pas__t { color: var(--ink-2); }
.cd-pas--acum {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent-wash) 70%, var(--paper-raised));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.cd-pas--acum .cd-pas__n { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent); }
.cd-pas--acum .cd-pas__t { color: var(--ink); }
.cd-pas--acum .cd-pas__d { color: var(--ink-2); }
.cd-pas--urmeaza { opacity: 0.7; }

/* Discutia. Mesajele platformei sunt urma, nu conversatie: centrate, mici. */
.cd-msgs { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.cd-msg {
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.cd-msg__who { font-weight: 600; color: var(--ink); }
.cd-msg__when { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); text-align: right; }
.cd-msg p { grid-column: 1 / -1; color: var(--ink-2); white-space: pre-line; }
.cd-msg--sys {
  justify-self: center; grid-template-columns: auto auto; align-items: center;
  padding: 6px 14px; border-style: dashed; border-radius: var(--radius-pill);
  background: var(--paper-sunken); font-size: var(--text-xs);
}
.cd-msg--sys .cd-msg__who { color: var(--accent); font-weight: 500; }
.cd-msg--sys p { grid-column: auto; color: var(--ink-2); }
.cd-msg--sys .cd-msg__when { display: none; }
.cd-scrie { margin-top: var(--space-sm); }
.cd-scrie textarea { min-height: 88px; }
.cd-actiuni { display: grid; gap: var(--space-xs); padding-top: var(--space-sm); border-top: var(--rule) solid var(--line); }
.cd-actiuni .btn--go { width: 100%; justify-content: center; }
.cd-bifa { display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-2); }

@media (max-width: 1100px) {
  .cd-incredere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-rail { position: static; }
  .cd-trepte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cd-bifa input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
@media (max-width: 1100px) {
  /* Ce poti face -- cealalta parte, treapta urmatoare -- vine inaintea
   * documentelor si a discutiei, nu la capatul paginii. */
  .cd-cap ~ .cd-grid .cd-rail { order: -1; }
}
.cd-mob { display: none; }
@media (max-width: 560px) {
  .cd-mob { display: inline; }
  .cd-incredere { grid-template-columns: minmax(0, 1fr); }
  /* Tabelul de documente, pe telefon, devine lista: numele pe tot randul,
   * dedesubt marimea la stanga si butoanele la dreapta. Ca tabel, coloana cu
   * „Descarcă" iesea din ecran. */
  .cd .table thead { display: none; }
  .cd .table, .cd .table tbody { display: block; width: 100%; min-width: 0; }
  .cd .table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: var(--space-2xs) var(--space-sm); padding: var(--space-sm);
    border-bottom: var(--rule) solid var(--line);
  }
  .cd .table td { display: block; padding: 0; border: 0; }
  .cd .table td:first-child { grid-column: 1 / -1; }
  .cd .table td.col-num { text-align: left; color: var(--ink-3); font-size: var(--text-xs); }
  .cd .table td:last-child { justify-self: end; }
  .cd .table td:nth-child(4):last-child { grid-column: 1 / -1; }
  .cd .tablewrap { overflow: visible; }
  .cd-cap { flex-direction: column; align-items: flex-start; padding: var(--space-md); }
  /* Pe telefon treptele stau pe o coloana, iar descrierea apare doar la
   * treapta curenta: cinci paragrafe unul sub altul ar impinge documentele
   * cu un ecran intreg in jos. */
  .cd-trepte { grid-template-columns: minmax(0, 1fr); }
  .cd-pas { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); }
  .cd-pas__n { grid-row: span 2; }
  .cd-pas:not(.cd-pas--acum) .cd-pas__d { display: none; }
}

/* ============================================================ TRANZACTII
 * /tranzactii: preturile publicate, apoi lista intreaga. Cardul de pret e
 * construit in jurul unei singure cifre -- €/MW unde impartirea e cinstita,
 * altfel pretul total, cu motivul scris dedesubt. */
.muted { color: var(--ink-faint); }

.tz-data {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tz-de { color: var(--ink-faint); }
.tz-sursa {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
}
.tz-sursa:hover { text-decoration: underline; }
.tz-tinte {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
/* Un singur bloc pe celula: pe telefon, tabelul devine carduri cu eticheta
 * in stanga si valoarea in dreapta, iar trei bucati de text ar fi fost trei
 * coloane. */
.tz-cel { display: block; min-width: 0; }
.tz-td-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tz-tabel td { vertical-align: top; }
.tz-noi {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.tz-noi a { color: var(--ink-2); }

.intar__h { margin: var(--space-md) 0 0; }

/* Cardurile celor mai noi sase tranzactii: aceeasi limba cu cardurile din
 * piata (fotografia tehnologiei, degrade, pastila de sticla), dar cardul nu e
 * o legatura -- singura iesire e sursa, in afara site-ului. Puterea e cifra
 * mare; pretul sta intr-o banda a lui, iar lipsa lui se spune, nu se ascunde. */
.tzc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.tzc {
  display: flex; flex-direction: column;
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background: var(--paper-raised); overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.tzc:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.18);
}
.tzc__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.tzc__art { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--ease-out); }
.tzc:hover .tzc__art { transform: scale(1.05); }
.tzc__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(12% 0.01 220 / 0.7) 0%,
              oklch(12% 0.01 220 / 0.05) 60%, transparent 100%);
}
.tzc__eticheta {
  position: absolute; left: var(--space-xs); bottom: var(--space-xs); z-index: 1;
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: oklch(14% 0.01 220 / 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid oklch(100% 0 0 / 0.14);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: oklch(97% 0.005 200); white-space: nowrap;
}
.tzc__body { display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-md); flex: 1; }
.tzc__h { margin: 0; font-size: var(--text-md); font-weight: 600;
  line-height: var(--leading-snug); color: var(--ink); }
.tzc__rand { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.tzc__mw { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
  color: var(--ink-display); line-height: 1; }
.tzc__mw small { font-size: var(--text-sm); color: var(--ink-3); font-weight: 500; }
.tzc__mw--gol { color: var(--ink-faint); }
.tzc__loc { font-size: var(--text-sm); color: var(--ink-3); }
.tzc__cine { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.tzc__pret {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--accent-wash); border: var(--rule) solid var(--accent-line);
  font-size: var(--text-xs); color: var(--ink-2);
}
.tzc__pret b { font-size: var(--text-base); color: var(--ink); font-variant-numeric: tabular-nums; }
.tzc__pmw { margin-left: auto; font-weight: 600; color: var(--accent); }
.tzc__pret.is-gol { background: var(--paper-sunken); border-color: var(--line-faint);
  color: var(--ink-faint); }
.tzc .tz-sursa { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .tzc, .tzc__art { transition: none; }
  .tzc:hover { transform: none; }
  .tzc:hover .tzc__art { transform: none; }
}

/* ============================================================ TABLA DE TRANZACTII
 * Prima pagina, intre harta si FAQ. Un ecran de bursa: o singura tranzactie la
 * vedere, care iese in sus cand vine urmatoarea de jos; bara de progres ESTE
 * ceasul (vezi BURSA_JS); dedesubt banda care curge cu toti cumparatorii. */
.bursa {
  --bursa-h: 8.5rem;
  position: relative; overflow: hidden;
  border: var(--rule) solid var(--line); border-radius: calc(var(--radius-lg) * 1.4);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 55%),
    var(--paper-raised);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 18%, transparent) inset;
}
.bursa__cap {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule) solid var(--line-faint);
}
.bursa__live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent);
}
.bursa__live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--state-live);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--state-live) 60%, transparent);
  animation: bursa-puls 2s var(--ease-out) infinite;
}
@keyframes bursa-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--state-live) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.bursa__h { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.bursa__ctl { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2xs); }
.bursa__nr { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center; }
.bursa__btn {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: var(--rule) solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-2); font-size: var(--text-md); line-height: 1; cursor: pointer;
}
.bursa__btn:hover { color: var(--accent); border-color: var(--accent-line); }

/* `overflow: hidden` si `pointer-events` (2 octombrie 2026): tranzactia care
 * pleaca urca 40% peste antet timp de 0,7 s si, fiind deasupra in ordinea
 * desenarii, al doilea clic pe ‹ › o nimerea pe ea -- si te scotea din
 * pagina. Lista ramane in cutia ei, iar doar cea de la vedere primeste clic. */
.bursa__lista { position: relative; height: var(--bursa-h); margin: 0; padding: 0; list-style: none;
  overflow: hidden; }
.bursa__item {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: translateY(40%);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), visibility 0s linear 600ms;
}
.bursa__item { pointer-events: none; }
.bursa__item.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  pointer-events: auto; }
.bursa__item.is-out { opacity: 0; visibility: visible; transform: translateY(-40%); }
.bursa__a {
  display: grid; height: 100%;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--space-md); row-gap: 4px; align-content: center;
  padding: var(--space-sm) var(--space-md);
  color: inherit; text-decoration: none;
}
.bursa__meta { grid-column: 1; display: flex; gap: var(--space-xs); align-items: center; }
.bursa__data { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }
.bursa__sym {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-label);
  padding: 2px 8px; border-radius: var(--radius-pill);
  border: var(--rule) solid var(--line); color: var(--ink-2);
}
.bursa__titlu { grid-column: 1; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 600; letter-spacing: var(--track-tight); color: var(--ink-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bursa__mw { color: var(--ink-3); font-weight: 500; }
.bursa__cine { grid-column: 1; font-size: var(--text-sm); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bursa__de { color: var(--ink-faint); }
.bursa__pret {
  grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end;
  display: grid; justify-items: end; gap: 2px;
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--state-live); white-space: nowrap;
}
.bursa__pret em { font-style: normal; font-size: var(--text-2xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }
.bursa__pret b { font-weight: 600; }
.bursa__pret small { font-size: var(--text-xs); font-weight: 500; color: var(--ink-3); }
.bursa__pret.is-gol { font-size: var(--text-xs); font-weight: 500; color: var(--ink-faint);
  letter-spacing: var(--track-label); text-transform: uppercase; }
.bursa__go { grid-column: 3; grid-row: 1 / -1; align-self: center;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: var(--rule) solid var(--line); color: var(--ink-2);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out); }
.bursa__go { text-decoration: none; }
.bursa__go:hover, .bursa__go:focus-visible {
  color: var(--accent-ink); background: var(--accent-fill); border-color: var(--accent-fill);
  transform: translateX(3px); }
/* Cand intra, simbolul si pretul vin putin dupa titlu: tabla care se
 * „aseaza", nu un bloc care sare. */
.bursa__item.is-on .bursa__pret, .bursa__item.is-on .bursa__sym {
  animation: bursa-intra 700ms var(--ease-out) both; }
.bursa__item.is-on .bursa__pret { animation-delay: 120ms; }
@keyframes bursa-intra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bursa__bar { height: 2px; background: var(--line-faint); }
.bursa__bar i { display: block; height: 100%; width: 100%; transform-origin: left;
  background: linear-gradient(to right, var(--accent), var(--state-live));
  transform: scaleX(0); }
.bursa.is-viu .bursa__bar i { animation: bursa-ceas 5.5s linear both; }
.bursa.is-pauza .bursa__bar i { animation-play-state: paused; }
@keyframes bursa-ceas { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bursa__banda { overflow: hidden; border-top: var(--rule) solid var(--line-faint);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 6%, var(--ink) 94%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--ink) 6%, var(--ink) 94%, transparent); }
.bursa__rula { display: flex; width: max-content; animation: bursa-banda 60s linear infinite; }
.bursa:hover .bursa__rula { animation-play-state: paused; }
@keyframes bursa-banda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bursa__tic { display: inline-flex; align-items: center; gap: 8px; padding: 10px var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.bursa__tic b { color: var(--ink-2); font-weight: 600; }
.bursa__tic em { font-style: normal; color: var(--state-live); }
.bursa__tic::after { content: "◆"; margin-left: var(--space-md); font-size: 0.6em; color: var(--line-strong); }
.bursa__toate { display: block; padding: var(--space-xs) var(--space-md) var(--space-sm);
  font-size: var(--text-xs); color: var(--accent); text-decoration: none; }
.bursa__toate:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .bursa { --bursa-h: 11.5rem; }
  .bursa__h { display: none; }
  .bursa__a { grid-template-columns: minmax(0, 1fr) auto; }
  .bursa__pret { grid-column: 1; grid-row: auto; justify-self: start; justify-items: start;
    font-size: var(--text-md); }
  .bursa__go { grid-column: 2; }
  .bursa__titlu { font-size: var(--text-lg); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .bursa__item, .bursa__item.is-out { transform: none; transition: opacity 200ms linear; }
  .bursa__item.is-on .bursa__pret, .bursa__item.is-on .bursa__sym { animation: none; }
  .bursa__rula { animation: none; }
  .bursa__banda { overflow-x: auto; }
  .bursa__live i { animation: none; }
}

/* Randul la care duce tabla de pe prima pagina se aprinde o clipa. */
.tz-tabel tr[id] { scroll-margin-top: 96px; }
.tz-tabel tr:target td { animation: tz-aprins 2.4s var(--ease-out) both; }
@keyframes tz-aprins { from { background: var(--accent-wash); } 60% { background: var(--accent-wash); } to { background: transparent; } }

/* ============================================================ BARA PE ECRANE MEDII
 * La final, dupa regulile de baza ale barii, ca sa le poata suprascrie. */
/* Intre sertar (sub 900px) si ecranul lat, logo-ul complet si sase legaturi
 * nu mai incap langa lupa, „Prețuri", tema si cele doua butoane. Pleaca
 * „Creează cont" (ramane in sertar, iar „Intră" duce si la inscriere) si se
 * strang spatiile -- nimic nu se suprapune. */
@media (min-width: 901px) and (max-width: 1120px) {
  .bar__reg { display: none; }
  .bar__links { gap: 0; }
  .bar__link { padding-inline: var(--space-3xs); }
}
/* Sub 1024px, logat, „Contul meu" e mai lat decat „Intră" si tot nu incape:
 * acolo meniul trece in sertar, ca pe telefon. Masurat pe 24 septembrie 2026
 * la 948px: „Resurse" calca peste lupa. */
@media (min-width: 901px) and (max-width: 1024px) {
  .bar__links { display: none; }
  .burger { display: inline-flex; }
}


/* ============================================================ BARA · refacuta
 * 24 septembrie 2026. Destinatiile stau intr-o pista discreta, ca un comutator:
 * pagina in care esti e o pastila plina (nu o liniuta sub cuvant), iar cele
 * peste care treci se aprind usor. Cand derulezi, sub bara apare un fir de
 * lumina in accent, acelasi ca pe marginea de sus a subsolului. */
.bar {
  background: color-mix(in oklab, var(--paper) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.bar::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--accent) 55%, transparent), transparent);
  opacity: 0; transition: opacity var(--dur-mid) var(--ease-out);
}
.bar[data-scrolled="1"] { border-bottom-color: transparent; }
.bar[data-scrolled="1"]::after { opacity: 1; }
.bar__links {
  gap: 2px; padding: 3px;
  border: var(--rule) solid var(--line-faint);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--paper-sunken) 60%, transparent);
}
.bar__link {
  padding: 6px 12px; border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.bar__link:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.bar__link[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-raised);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12), inset 0 0 0 1px var(--line);
}
.bar__link[aria-current="page"]::after { display: none; }
.bar__acts .btn--go { box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 28%, transparent); }
@media (min-width: 901px) and (max-width: 1120px) {
  .bar__link { padding: 6px 8px; }
}

/* ============================================================ ETICHETE
 * Etichetele obisnuite -- supratitluri, numele unei cifre, campurile unui
 * formular, filtrele, capetele de coloana din subsol -- sunt text, nu date.
 * Pana pe 28 septembrie 2026 erau toate monospatiate si cu majuscule, si pe
 * orice pagina erau zeci de „PROIECTE", „PUTERE CERUTĂ", „JUDEȚ": un zgomot
 * de fond care nu mai spunea nimic, iar monospatiatul, care pe site inseamna
 * „vine dintr-o sursa", se tocise.
 *
 * Monospatiatul ramane unde chiar e citat dintr-un registru sau un cod:
 * capetele de tabel, firul de navigare, sursa datelor, codurile, datele din
 * tranzactii. Aici, un singur loc pentru toate etichetele de text. */
.eyebrow, .drawer__eyebrow, .stat__label, .filt__l, .frm__l, .cons__l,
.cauta__titlu, .mfilt__cap, .cf__l, .load__l, .sale__k, .cbox__t,
.figures > .stat > .l, .who__t, .found__t, .reveal__t, .fp__cif-k {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.foot__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================ CONFIRMĂRI
 * „Salvează" si „Urmărește nodul" merg in fundal (vezi `shell.SHELL_JS`),
 * deci pagina nu mai confirma prin reincarcare. Confirma asa: semnul de pe
 * buton (inima, steaua) creste putin si se clatina o data, iar jos pe ecran
 * apare un mesaj scurt, care spune si unde gasesti ce ai salvat. */
@keyframes pop-semn {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.35) rotate(-10deg); }
  60%  { transform: scale(0.92) rotate(6deg); }
  80%  { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes pop-buton {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.04); }
}
.is-pop [data-inima], .is-pop > svg { display: inline-block; animation: pop-semn 520ms var(--ease-out); }
.mkt__nod-b.is-pop { animation: pop-buton 360ms var(--ease-out); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  z-index: 60; max-width: min(34rem, calc(100vw - 2 * var(--space-md)));
  margin: 0; padding: var(--space-xs) var(--space-md);
  border: var(--rule) solid var(--accent-line); border-radius: var(--radius-pill);
  background: var(--paper-raised); color: var(--ink);
  font-size: var(--text-sm); text-align: center;
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .is-pop [data-inima], .is-pop > svg, .mkt__nod-b.is-pop { animation: none; }
  .toast { transition: opacity var(--dur-fast) linear; transform: translate(-50%, 0); }
}

/* ============================================================ LISTE-CARD
 * Avizele (/atr) și proiectele în autorizare (/in-pregatire), din 1
 * octombrie 2026. Un rând e un card cu patru rubrici, nu opt coloane de
 * text: proiectul, actul/avizul, stadiul sau firma, și ce-i aparține. Pe
 * ecran lat rubricile stau în coloane, sub un cap care ține locul antetului;
 * pe telefon se așază una sub alta. Culorile tehnologiilor sunt cele de pe
 * hartă (vezi harta.css), copiate în tokens.css (`--teh-*`), fiindcă lista nu încarcă foaia hărții. */
.lr { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.lr__cap, .lr__a {
  display: grid; align-items: center; gap: var(--space-md);
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.35fr) minmax(0, 1.7fr) minmax(0, 1.7fr) 1.25rem;
}
.lr--4 .lr__a, .lr__cap--4 {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(0, 1.7fr) minmax(0, 2.4fr);
}
.lr__cap {
  padding: 0 var(--space-md) var(--space-2xs);
  font: 500 var(--text-2xs)/1.2 var(--font-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.lr__a {
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-raised); border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
a.lr__a:hover { border-color: var(--accent-line); }
a.lr__a:hover .lr__go { color: var(--accent); transform: translateX(2px); }
a.lr__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lr__c { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lr__k {
  font: 500 var(--text-2xs)/1.2 var(--font-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.lr__k--2 { margin-top: var(--space-3xs); }
/* Pe ecran lat capul spune deja ce e fiecare coloană. */
@media (min-width: 900px) { .lr__c > .lr__k:first-child { display: none; } }
.lr__t {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.lr__dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: var(--teh-altele); }
.lr__dot--solar { background: var(--teh-solar); }
.lr__dot--stocare { background: var(--teh-stocare); }
.lr__dot--eolian { background: var(--teh-eolian); }
.lr__dot--hidro { background: var(--teh-hidro); }
.lr__s { color: var(--ink-faint); font-size: var(--text-sm); }
.lr__s--ok { color: var(--ink-3); }
.lr__mono { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.lr__nume { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr__gol { color: var(--ink-faint); }
.lr__luc { font-size: var(--text-sm); color: var(--ink-3); }
.lr__luc a { color: inherit; text-decoration-color: var(--line-strong); }
.lr__luc a:hover { color: var(--accent); }
.lr__bar {
  width: min(9rem, 100%); height: 4px; margin-top: 2px;
  border-radius: var(--radius-pill); background: var(--line-strong); overflow: hidden;
}
.lr__bar i { display: block; height: 100%; background: var(--state-live); }
.lr__bar--warn i { background: var(--state-warn); }
.lr__go { color: var(--ink-faint); justify-self: end; transition: transform var(--dur-fast), color var(--dur-fast); }
@media (max-width: 899px) {
  .lr__cap { display: none; }
  .lr__a, .lr--4 .lr__a {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm) var(--space-md);
  }
  .lr__a > .lr__c:first-child { grid-column: 1 / -1; }
  .lr__luc { grid-column: 1 / -1; }
  .lr__go { display: none; }
}
@media (max-width: 480px) {
  .lr__a, .lr--4 .lr__a { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================ SEMNAL
 * Directia „C · Semnal", aleasa pe 2 octombrie 2026: chihlimbarul marcii se
 * simte pe fiecare ecran, dar in locuri care poarta inteles -- bara (unde
 * esti), etichetele de sectiune (ce citesti), cifrele mari (ce conteaza).
 * Nu pe date: un rand de tabel sau un cip de stare nu-l primesc niciodata.
 */
.bar { box-shadow: inset 0 -2px 0 var(--accent-fill); }
.eyebrow { color: var(--accent); }
.stat__value, .mcard__mw, .mcard__mw b { color: var(--accent); }
.h2::after {
  content: ""; display: block; width: 2.5rem; height: 3px; margin-top: 0.55rem;
  background: var(--accent-fill); border-radius: 2px;
}
.center .h2::after, .h2.center::after { margin-inline: auto; }

/* Stadiul ca traseu (`parts.stage_chip`): aviz → contract → în funcțiune.
 * Punctul atins e plin, cel nespus e doar contur; linia dintre ele se umple
 * odată cu pasul. Culoarea vine din stare, ca la cipurile de dinainte. */
.traseu { display: inline-flex; align-items: center; gap: var(--space-2xs);
  --t: var(--state-idle); white-space: nowrap; }
.traseu--live { --t: var(--state-live); }
.traseu--warn { --t: var(--state-warn); }
.traseu--dead { --t: var(--state-dead); }
.traseu__d { display: inline-flex; align-items: center; }
.traseu__p { width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 1.5px solid color-mix(in oklab, var(--t) 55%, var(--line-strong)); }
.traseu__p.is-on { background: var(--t); border-color: var(--t);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--t) 18%, transparent); }
.traseu__l { width: 12px; height: 1.5px; background: var(--line-strong); }
.traseu__l.is-on { background: var(--t); }
.traseu__t { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-2); }

/* Cifrele din capul primei pagini (`home._cifre`): cifra mare, unitatea mica
 * dedesubt, ca pe cadranul unui aparat. Chihlimbar, fiindca sunt cifrele
 * marcii -- „Semnal" pune accentul pe ce conteaza. */
.hero__cifre { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-md); animation: rise var(--dur-slow) var(--ease-out) 110ms both; }
.hero__c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero__n { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--accent-fill);
  text-shadow: 0 2px 24px oklch(0% 0 0 / 0.45); }
.hero__u { font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: oklch(92% 0.008 200); text-shadow: 0 1px 12px oklch(0% 0 0 / 0.6); }
.hero__cifre + .hero__s { margin-top: var(--space-xs); font-size: var(--text-sm); }

/* Duotonul: vezi `shell.DUOTON`. Doar pe fotografia din capul primei pagini
 * -- pozele proiectelor raman cum sunt, la cererea proprietarului. */
.duoton-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero__art { filter: url(#duoton); }

/* Fulgerul din sigla, ca semn „viu" (2 octombrie 2026), in locul bulinei
 * generice: langa „Retea acum" si „Pretul energiei". Conturul e
 * chiar fulgerul din kit (`01-vector/wattsplaza-symbol-color.svg`), ca masca;
 * culoarea ramane a starii. Clipeste lent; deloc cu miscare redusa. */
:root { --fulger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='54 47.5 112.7 145.6'%3E%3Cpath d='M84.000,191.954 C84.000,191.378 87.405,180.466 91.566,167.704 C100.889,139.111 101.612,136.933 102.501,134.750 C103.169,133.111 101.647,133.000 78.607,133.000 C55.814,133.000 54.000,132.871 54.000,131.245 C54.000,128.741 136.435,46.533 137.985,47.491 C139.792,48.608 138.953,51.554 129.014,79.016 C124.056,92.714 120.000,104.389 120.000,104.960 C120.000,105.649 127.557,106.000 142.378,106.000 C160.689,106.000 164.973,106.263 165.957,107.448 C166.725,108.373 166.835,109.473 166.261,110.498 C165.768,111.379 155.702,122.090 143.892,134.300 C132.082,146.510 114.565,164.713 104.965,174.750 C89.465,190.957 84.000,195.441 84.000,191.954 Z'/%3E%3C/svg%3E"); }
.hx-viu {
  width: 9px; height: 12px; border-radius: 0; box-shadow: none;
  -webkit-mask: var(--fulger) center / contain no-repeat;
  mask: var(--fulger) center / contain no-repeat;
}
.hx-viu { animation: fulger 2.4s ease-in-out infinite; }
@keyframes fulger { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .hx-viu { animation: none; } }

/* Harta mica a judetului, sub fotografia fisei (`app/ui/locator.py`). */
.loc { margin: var(--space-sm) 0 0; padding: var(--space-sm);
  border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised); }
.loc__svg { display: block; width: 100%; height: auto; }
.loc__tara { fill: var(--paper-sunken); stroke: var(--line-strong); stroke-width: 0.6;
  stroke-linejoin: round; }
.loc__jud { fill: color-mix(in oklab, var(--accent-fill) 30%, transparent);
  stroke: var(--accent-fill); stroke-width: 1.4; stroke-linejoin: round; }
.loc__pin { fill: var(--accent-fill); stroke: var(--paper); stroke-width: 1.4; }
.loc__halo { fill: color-mix(in oklab, var(--accent-fill) 25%, transparent); }
.loc__t { margin-top: var(--space-2xs); font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3); }

/* ============================================================ IN TRENDING
 * Refacut pe 2 octombrie 2026, fara iconite: pastilele cu flacara, bifa,
 * ceas si stelute, fulgerul de langa titlu si steagul din patrat „urlau a
 * generat". Ce ramane e tipografie si date.
 *
 * Filele: text, ca intr-un registru, subliniat cu chihlimbar pe cea aleasa.
 * Nu un control segmentat pe sticla. */
.miscare__file {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-md); padding: 0;
  border: 0; border-radius: 0; background: none;
}
.miscare__f {
  min-height: 40px; padding-inline: 0; border-radius: 0;
  font-size: var(--text-sm); color: var(--ink-3);
  box-shadow: inset 0 -2px 0 transparent;
}
#mis-urmarite:checked ~ .miscare__cap [data-f="urmarite"],
#mis-contracte:checked ~ .miscare__cap [data-f="contracte"],
#mis-expira:checked ~ .miscare__cap [data-f="expira"],
#mis-noi:checked ~ .miscare__cap [data-f="noi"] {
  color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--accent-fill);
}
/* Eticheta de pe fotografie: text mic, alb, direct pe degradeul pozei. Fara
 * pastila si fara placa -- „mai non-invaziv" (2 octombrie 2026). */
.mcard__motiv {
  gap: 0; padding: 0; border-radius: 0; border: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.01em;
  color: oklch(96% 0.006 85 / 0.92); text-shadow: 0 1px 6px oklch(0% 0 0 / 0.55);
}

@media (max-width: 560px) {
  .miscare__file { display: flex; width: 100%; gap: 0 var(--space-sm); border-radius: 0; }
  .miscare__f { padding-inline: 0; border-radius: 0; font-size: var(--text-xs); }
}

/* Pe telefon cardul e culcat si corpul are ~200 px: eticheta curge pe
 * randuri ca text, cu „Nr. 1" nedespartit, iar stadiul se rupe sub puncte. */
@media (max-width: 560px) {
  .mcard__body { min-width: 0; }
  .mcard__motiv-m { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
  .mcard .traseu { white-space: normal; align-items: flex-start; }
  .mcard .traseu__d { padding-top: 3px; }
}

/* „Proiectul tău e deja aici" (`home._revendica`), refăcut pe 2 octombrie
 * 2026: un rând între două fire, titlul la stânga și câmpul de CUI la
 * dreapta. Fără cutie, fără degrade, fără iconiță. */
.revendica {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl); padding-block: var(--space-md);
  border-block: var(--rule) solid var(--line);
}
.revendica__t { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; letter-spacing: var(--track-tight); color: var(--ink); text-wrap: balance; }
.revendica__f { display: flex; gap: var(--space-2xs); flex: 0 1 26rem; min-width: min(100%, 18rem); }
.revendica__q {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 var(--space-sm);
  border: var(--rule) solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--paper-raised); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--text-base);
}
.revendica__q::placeholder { color: var(--ink-faint); }
.revendica__q:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 1px; }

/* ============================================================ TELEFON
 * Bara pe telefon (2 octombrie 2026): logo-ul de 162 px (ghidul de marca) plus
 * golul de 25 px pus de doua ori intre marca, spatiul flexibil si butoane
 * cereau 412 px -- sub atat, burgerul iesea din ecran. Pe ecran ingust golul
 * se strange, iar butoanele se lipesc de dreapta. */
@media (max-width: 440px) {
  .bar__in { gap: var(--space-2xs); padding-inline: var(--space-sm); }
  .bar__gap { display: none; }
  .bar__acts { margin-left: auto; gap: 6px; }
}

/* Cardul de proiect pe telefon, compact (2 octombrie 2026): poza mica la
 * stanga, titlul, judetul si stadiul la dreapta, butoanele dedesubt. Era un
 * card de ~430 px -- poza lata, puterea scrisa a doua oara sub titlu, coada la
 * nod acoperita, „4 din 4 date" --, iar cincizeci faceau 33.000 px de derulat.
 * Ce lipseste aici e pe fisa, la o atingere. */
@media (max-width: 620px) {
  .pc { grid-template-columns: 6.5rem minmax(0, 1fr);
        grid-template-areas: "foto corp" "banda banda"; }
  .pc__foto { aspect-ratio: auto; }
  .pc__coada, .pc__fisa, .pc__a--statie, .pc__attr .pc__a:first-child { display: none; }
  .pc__corp { padding: var(--space-xs) var(--space-sm); gap: 3px; }
  .pc__t { font-size: var(--text-base); }
  .pc__loc { font-size: var(--text-sm); }
  .pc__attr { display: flex; flex-wrap: wrap; gap: 4px var(--space-xs);
              margin-top: 2px; padding-top: 0; border-top: 0; }
  .pc .traseu { white-space: normal; }
  .pc__banda { padding: var(--space-2xs) var(--space-sm); gap: var(--space-2xs); }
}

/* Filtrele listelor pe telefon (`parts.filtre_lista`): stranse sub „Filtre",
 * deschise de bifa sau de un filtru deja pus. */
.filt-deschide { display: none; }
@media (max-width: 620px) {
  .filt-deschide {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; margin-bottom: var(--space-xs); padding: 0 var(--space-md);
    border: var(--rule) solid var(--line); border-radius: var(--radius-md);
    background: var(--paper-raised); color: var(--ink); font-weight: 600; cursor: pointer;
  }
  .filt-deschide input { position: absolute; opacity: 0; pointer-events: none; }
  .filt-deschide-s { color: var(--ink-3); transition: transform var(--dur-mid) var(--ease-out); }
  .filt-deschide:has(input:checked) .filt-deschide-s { transform: rotate(180deg); }
  .filt-deschide:not(:has(input:checked))
    + .filt-form:not(:has(option:checked:not([value=""]), input[type="search"]:not([value=""]), .checks input:checked)) {
    display: none;
  }
}

/* Prima pagina pe telefon: cele doua cifre din erou una langa alta. */
@media (max-width: 440px) {
  .hero__cifre { gap: var(--space-sm) var(--space-md); }
  .hero__n { font-size: 2rem; }
  .hero__u { font-size: var(--text-2xs); letter-spacing: 0.03em; }
}

/* File pe un singur rand care se deruleaza lateral, ca in aplicatii: „In
 * trending" si tehnologiile din calculator se rupeau pe doua randuri, cu o
 * fila singura dedesubt. */
@media (max-width: 560px) {
  .miscare__file, .calc-file, .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .miscare__file::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .miscare__f, .tabs > * { flex: none; white-space: nowrap; }
}

/* Tabla de tranzactii pe telefon: data si tipul nu se mai rup in doua. */
@media (max-width: 560px) {
  .bursa__data, .bursa__sym { white-space: nowrap; }
  .bursa__meta { flex-wrap: wrap; row-gap: 4px; }
}

/* Lista de companii pe telefon: rand, nu tabel (2 octombrie 2026). Tabelul
 * de patru coloane iesea din ecran, iar „Putere" se vedea pe jumatate. Numele
 * sus, pe toata latimea; puterea, avizele si judetele dedesubt. */
.doar-tel { display: none; }
@media (max-width: 620px) {
  .table--companii, .table--companii tbody { display: block; width: 100%; min-width: 0; }
  .table--companii thead { display: none; }
  .table--companii tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-sm);
    padding: var(--space-xs) var(--space-2xs); border-bottom: var(--rule) solid var(--line);
  }
  .table--companii td { display: block; padding: 0; border: 0; text-align: left; }
  .table--companii td:first-child { flex-basis: 100%; }
  .table--companii td:nth-child(4) { flex: 1 1 100%; color: var(--ink-3); font-size: var(--text-sm); }
  .table--companii .doar-tel { display: inline; color: var(--ink-3); font-weight: 400; }
}
/* La inscriere cele doua file se vad amandoua, pe un rand, fiecare pe
 * jumatate (din 6 octombrie 2026 nu mai e fila „Persoana fizica"). */
@media (max-width: 560px) {
  .auth__card .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                      overflow: visible; }
  .auth__card .tabs > * { justify-content: center; white-space: nowrap;
                          padding-inline: 4px; }
}
.auth__card .tabs { margin-bottom: var(--space-md); }
/* Tinte de atingere pe telefon (2 octombrie 2026, masurate la 390 px): legaturi
 * de text de 16-24 px inaltime si sagetile tablei de tranzactii, de 32. Zona
 * de atingere creste fara sa se miste asezarea: umplutura de sus si de jos e
 * anulata de o margine negativa egala. */
@media (max-width: 620px) {
  .bursa__btn { width: 40px; height: 40px; }
  .faq__q > summary { min-height: 44px; display: flex; align-items: center; }
  summary.hx-h4 { min-height: 44px; display: flex; align-items: center; }
  .crumbs a, .sec-cap__link, .tz-sursa, .hx-fine a, .table--companii td:first-child a,
  .locked-cell, .revendica__cum, .faq__contact a {
    display: inline-block; padding-block: 10px; margin-block: -10px;
  }
}
/* Cu sesiune, „Contul meu" din bara e cu 40 px mai lat decat „Intra" si
 * impingea burgerul (si × cand meniul e deschis) afara din ecran. Pe telefon
 * sta in meniu, primul buton de sub legaturi. */
@media (max-width: 440px) {
  :root[data-cont="1"] .bar__acts .bar__set.bar__cont { display: none; }
}
/* Cu comutatorul de limba in bara (productie), la 375 px burgerul iesea cu
 * 8 px din ecran, iar la 320 cu 2. Sub 385 px „Intra" sta doar in meniu, unde
 * e deja; sub 340, logo-ul scade la 139 px -- sub cei 160 ai ghidului, dar la
 * latimea asta nu exista alta asezare. */
@media (max-width: 384px) {
  .bar__acts .bar__set { display: none; }
}
@media (max-width: 340px) {
  .mark__logo { height: 1.55rem; }
}

/* Comutatorul de tema langa limba, si pe telefon (2 octombrie 2026): a plecat
 * din meniu, unde era un buton cu text, „Schimba tema". Soarele pe tema
 * inchisa, luna pe cea deschisa -- tema in care treci la apasare. */
.tema-b { display: inline-grid; place-items: center; }
.tema-b > span { display: inline-grid; place-items: center; }
.tema-b__luna { display: none !important; }
:root[data-theme="light"] .tema-b__soare { display: none !important; }
:root[data-theme="light"] .tema-b__luna { display: inline-grid !important; }
/* Pe telefon bara tine: marca, lupa, tema, limba, meniul. „Intra" e primul
 * buton din meniu -- cu el in bara, tema nu mai incapea la 375 px. */
@media (max-width: 440px) {
  .bar__acts .tema-b { display: inline-grid; width: 36px; height: 36px; padding: 0;
    border: var(--rule) solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); }
  .bar__cauta { width: 36px; height: 36px; }
  .bar__acts .bar__set { display: none; }
  .bar__acts { gap: 5px; }
}
@media (max-width: 370px) { .mark__logo { height: 1.6rem; } }
@media (max-width: 340px) {
  .mark__logo { height: 1.4rem; }
  .bar__in { padding-inline: 12px; }
  .bar__acts { gap: 4px; }
  .bar__acts .tema-b, .bar__cauta { width: 34px; height: 34px; }
}

/* Consola de cautare pe telefon, refacuta pe 2 octombrie 2026: avea ~1.100 px
 * -- eticheta „Cauta", o bara mare de chihlimbar, trei cutii de stadiu, cinci
 * cutii de tehnologie cu „Mai multe" alaturat stramb, judetul si puterea.
 * Acum: campul, doua randuri de pastile subtiri cu cifra langa nume (asezate
 * pe randuri, nu derulate lateral -- nimic ascuns), judetul si puterea sub
 * „Judet si putere", butonul. */
.cons__mf { display: none; }
@media (max-width: 560px) {
  .cauta { padding: var(--space-xs); }
  .cons { margin-top: var(--space-xs); padding-top: var(--space-xs); gap: var(--space-xs); }
  .cons__main { gap: var(--space-xs); }
  /* Doua coloane egale, numele la stanga si cifra la dreapta: asezate pe
   * randuri libere, pastilele ieseau inegale -- una, doua, una. */
  .cons__rail, .cons__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .cons__st, .cons__st:not(:first-child), .cons__st:first-child, .cons__teh, .cons__mai {
    flex-direction: row; justify-content: space-between; gap: 6px;
    min-height: 38px; padding: 0 12px; grid-column: auto; min-width: 0;
    border-radius: var(--radius-pill); font-size: var(--text-xs); white-space: nowrap;
  }
  .cons__teh-t { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
  .cons__mai { grid-column: 1 / -1; justify-content: center; gap: 4px; order: 99; }
  .cons__mai-c:checked ~ .cons__teh--extra { display: inline-flex; }
  .cons__teh { padding-left: 8px; transform: none; }
  .cons__teh:hover { transform: none; }
  .cons__teh .cons__ic { width: 20px; height: 20px; background: none; }
  .cons__teh.is-on .cons__ic { background: none; color: var(--accent); }
  .cons__teh .cons__ic svg { width: 15px; height: 15px; }
  .cons__mai { border-style: solid; color: var(--ink-3); }
  .cons__mai b { margin-left: 0; }
  .cons__grid { gap: var(--space-xs); }
  .cons__mf {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 40px; padding: 0 2px; color: var(--ink-2); font-size: var(--text-sm);
    cursor: pointer; border-top: var(--rule) solid color-mix(in oklab, var(--ink) 10%, transparent);
  }
  .cons__mf i { font-style: normal; color: var(--ink-3); transition: transform var(--dur-mid) var(--ease-out); }
  .cons__mf-c:checked + .cons__mf i { transform: rotate(180deg); }
  .cons__mf-c:focus-visible + .cons__mf { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
  .cons__mf-c:not(:checked) ~ .cons__f { display: none; }
  .cons__go { min-height: 48px; }
}

/* ============================================================ CUM FUNCTIONEAZA
 * Rescrisa pe 2 octombrie 2026: doua drumuri alaturate, apoi ce costa si de
 * unde vin datele. Fire subtiri, cifre de chihlimbar, fara carduri. */
.cf-drumuri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl); margin-top: var(--space-lg); }
.cf-drum { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.cf-drum__t { margin: 0; font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 600; color: var(--ink); }
.cf-pasi { list-style: none; margin: 0; padding: 0; width: 100%; }
.cf-pas { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm);
  padding-block: var(--space-md); border-top: var(--rule) solid var(--line); }
.cf-pas:last-child { border-bottom: var(--rule) solid var(--line); }
.cf-pas__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cf-pas__t { margin: 0 0 var(--space-3xs); font-family: var(--font-display); font-size: var(--text-md);
  font-weight: 600; color: var(--ink); }
.cf-pas__p { margin: 0; color: var(--ink-2); line-height: var(--leading-body); max-width: 60ch; }
@media (max-width: 860px) {
  .cf-drumuri { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 560px) {
  .cf-pas { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-sm); }
  .cf-pas__n { font-size: var(--text-lg); }
}

/* ============================================================ TEXTE JURIDICE
 * /termeni si /cookies (5 octombrie 2026): text de citit, coloana ingusta,
 * articole numerotate. Fara chenare si fara decor. */
.leg { margin-top: var(--space-md); max-width: 68ch; color: var(--ink-2); line-height: 1.65; }
.leg p { margin: 0 0 var(--space-sm); }
.leg__art + .leg__art { margin-top: var(--space-lg); }
.leg__t { margin: 0 0 var(--space-xs); font-family: var(--font-body); font-size: var(--text-base);
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.leg .tablewrap { margin-block: var(--space-md); }
.leg__v { margin-top: var(--space-lg) !important; font-size: var(--text-sm); color: var(--ink-faint); }
@media (max-width: 620px) {
  .leg__tab td:first-child code { font-size: var(--text-xs); }
}
@media (max-width: 384px) {
  .foot__legal { gap: 0 8px; justify-content: space-between; }
  .foot__nota { max-width: none; }
}

/* ============================================================ PIATA
 * /piata (5 octombrie 2026): trei cifre sub titlu, apoi tabelul tranzactiilor. */
.pt-cifre { margin-top: var(--space-md); }
.pt-cifre .stats { margin: 0; }
.pt-h { margin: var(--space-xl) 0 var(--space-sm); }
@media (min-width: 900px) {
  .tz-tabel td:nth-child(2) { min-width: 17rem; }
  .tz-tabel td:nth-child(3) { white-space: nowrap; }
  .tz-tabel td:nth-child(6) { min-width: 9rem; }
}
/* Pe telefon fiecare tranzactie e un card de patru randuri: data si stadiul,
 * ce s-a cumparat, cine, pretul si sursa. Fara etichete de coloana: forma
 * cardului le spune. */
@media (max-width: 620px) {
  .pt-cifre .stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .pt-cifre .stat { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-sm); align-items: baseline;
    padding-bottom: var(--space-sm); border-bottom: var(--rule) solid var(--line-faint); }
  .pt-cifre .stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .pt-cifre .stat__label { grid-column: 1; grid-row: 1; }
  .pt-cifre .stat__note { grid-column: 1; grid-row: 2; }
  .pt-cifre .stat__value { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: var(--text-xl); }
  .pt-h { margin-top: var(--space-lg); }

  .tz-tabel tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-sm);
    grid-template-areas: "data stadiu" "ce ce" "cine cine" "pret sursa";
    padding: var(--space-sm) 0;
  }
  .tz-tabel td, .table--carduri.tz-tabel td { display: block; padding: 0; text-align: left; }
  .tz-tabel td::before { content: none !important; }
  .tz-tabel td:nth-child(1) { grid-area: data; font-size: var(--text-xs); color: var(--ink-3); font-weight: 400; white-space: nowrap; }
  .tz-tabel td:nth-child(4) b { font-weight: 500; }
  .tz-tabel td:nth-child(2) { grid-area: ce; margin-top: 4px; }
  .tz-tabel td:nth-child(3) { grid-area: stadiu; justify-self: end; }
  .tz-tabel td:nth-child(4) { grid-area: cine; margin-top: 2px; font-size: var(--text-sm); color: var(--ink-2); }
  .tz-tabel td:nth-child(5) { grid-area: pret; margin-top: var(--space-2xs); font-size: var(--text-sm); }
  .tz-tabel td:nth-child(6) { grid-area: sursa; margin-top: var(--space-2xs); justify-self: end; text-align: right; font-size: var(--text-sm); }
  .tz-tabel .tz-tinte, .tz-tabel .tz-gol { display: none; }
}
.cf-intro { margin: var(--space-sm) 0 var(--space-lg); max-width: 68ch; color: var(--ink-2); line-height: 1.6; }
/* Cautarea: legatura spre toata lista „În autorizare", sub primele cinci. */
.rez__mai { display: inline-block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--accent); }

/* ============================================================ CONTUL MEU
 * Refacut pe 5 octombrie 2026 (vezi `app/ui/cont.py`): file sus, apoi liste
 * de setari -- eticheta, valoarea, actiunea -- grupate sub titluri scurte.
 * Fara cartonase pe coloane si fara note sub ele. */
.acct-tabs {
  display: flex; gap: var(--space-lg); margin: var(--space-md) 0 var(--space-xl);
  border-bottom: var(--rule) solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs__a {
  flex: none; padding: var(--space-xs) 0; margin-bottom: calc(-1 * var(--rule));
  font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out);
}
.acct-tabs__a:hover { color: var(--ink); }
.acct-tabs__a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent-fill); }

.acct { display: grid; gap: var(--space-xl); }
/* Toata zona contului pe o coloana centrata: titlul, filele, listele. */
.work__main:has(.acct) > .shell { max-width: 54rem; }
.set__cap { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: var(--space-xs); }
.set__h { margin: 0; font-family: var(--font-body); font-size: var(--text-base);
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.set__list { border: var(--rule) solid var(--line); border-radius: var(--radius-md);
  background: var(--paper-raised); }
.set__r {
  display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-xs) var(--space-md);
  min-height: 56px; padding: var(--space-xs) var(--space-md);
}
.set__r + .set__r { border-top: var(--rule) solid var(--line-faint); }
.set__l { font-size: var(--text-sm); color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.set__l a { color: var(--ink); font-weight: 500; }
.set__l a:hover { color: var(--accent); }
.set__v { font-size: var(--text-sm); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.set__v a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 3px; }
.set__m { color: var(--ink-3); }
.set__a { display: flex; justify-content: flex-end; }
.set__link { font-size: var(--text-sm); color: var(--accent); white-space: nowrap; }
.set__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.set__btns { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: flex-end; }
.set .chip { vertical-align: middle; margin-left: 4px; }
.set__v .contor { margin-top: var(--space-2xs); max-width: 18rem; }

/* Formularele din rand: campul si butonul pe aceeasi linie. */
.set__form { display: flex; align-items: flex-start; gap: var(--space-xs); max-width: 30rem; }
.set__form .frm__f { flex: 1; min-width: 0; }
.set__stack { display: grid; gap: var(--space-sm); padding-top: var(--space-sm); min-width: min(22rem, 70vw); }
.set__form input, .set__form select, .set__stack input, .set__stack select {
  width: 100%; min-height: 40px; padding: var(--space-2xs) var(--space-xs);
  font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--paper-sunken);
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm);
}
.set__form input:focus-visible, .set__form select:focus-visible,
.set__stack input:focus-visible { outline: none; border-color: var(--accent); }
.set__form .btn, .set__stack .btn { min-height: 40px; }
.set__more { display: flex; flex-direction: column; align-items: flex-end; }
.set__more > summary { list-style: none; cursor: pointer; }
.set__more > summary::-webkit-details-marker { display: none; }
.set__more[open] > summary { display: none; }
.set__r:has(.set__more[open]) { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); }
.set__r:has(.set__more[open]) .set__v { display: none; }
.set__r:has(.set__more[open]) .set__a { justify-content: flex-start; }
.set__bloc { padding: var(--space-md); border: var(--rule) solid var(--line);
  border-radius: var(--radius-md); background: var(--paper-raised); }
.set__r .inline { display: inline; }

@media (max-width: 620px) {
  .acct-tabs { gap: var(--space-md); margin-bottom: var(--space-lg); }
  .acct { gap: var(--space-lg); }
  .set__r { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-sm); }
  .set__l { grid-column: 1; }
  .set__v { grid-column: 1 / -1; grid-row: 2; }
  .set__a { grid-column: 2; grid-row: 1; }
  .set__v:empty { display: none; }
  .set__form { max-width: none; }
  .set__r:has(.set__more[open]) { grid-template-columns: minmax(0, 1fr); }
  .set__r:has(.set__more[open]) .set__a { grid-column: 1; grid-row: 2; }
  .acct-tabs { -webkit-mask-image: linear-gradient(90deg, var(--ink) 85%, transparent);
               mask-image: linear-gradient(90deg, var(--ink) 85%, transparent); padding-right: var(--space-lg); }
  .set__stack { min-width: 0; width: 100%; }
  .set__more { align-items: stretch; }
  .set__btns { justify-content: flex-start; }
  .set__r:has(.set__btns) .set__a { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
}

/* Abonamentul (5 octombrie 2026): planul tau, apoi planurile alaturi. */
.plan-cur { padding: var(--space-md) var(--space-lg); border: var(--rule) solid var(--line);
  border-radius: var(--radius-md); background: var(--paper-raised); display: grid; gap: var(--space-md); }
.plan-cur__cap { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.plan-cur__t { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  letter-spacing: var(--track-tight); color: var(--ink); }
.plan-cur__p { margin-left: auto; font-size: var(--text-sm); color: var(--ink-3); }
.plan-cur__p b { font-size: var(--text-lg); color: var(--ink); }
.plan-cur__u { display: grid; gap: var(--space-2xs); }
.plan-cur__n { font-size: var(--text-sm); color: var(--ink-2); }
.plan-cur__n b { font-size: var(--text-lg); color: var(--ink); }
.plan-cur__u .contor { max-width: none; }
.plan-cur__j { font-size: var(--text-xs); color: var(--ink-3); }

.plan-alege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.plan-c { display: flex; flex-direction: column; padding: var(--space-md) var(--space-lg);
  border: var(--rule) solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.plan-c--al-tau { border-color: var(--accent-line); }
.plan-c__t { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink); }
.plan-c__p { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--ink-3); }
.plan-c__p b { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--ink); }
.plan-c__a { margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.plan-c__l { margin: var(--space-md) 0; padding: var(--space-sm) 0 0; list-style: none;
  border-top: var(--rule) solid var(--line-faint); display: grid; gap: 6px;
  font-size: var(--text-sm); color: var(--ink-2); }
.plan-c__b { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.plan-c__b .inline { display: contents; }
.plan-c__b .btn { flex: 1; justify-content: center; }
@media (max-width: 620px) {
  .plan-alege { grid-template-columns: minmax(0, 1fr); }
  .plan-cur { padding: var(--space-md); }
  .plan-cur__p { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================ MENIUL CONTULUI
 * „Contul meu" din bara deschide un meniu mic (5 octombrie 2026); „Ieși din
 * cont" e ultimul rand, formular POST. */
.acct-menu { position: relative; }
.acct-menu__b { list-style: none; cursor: pointer; gap: 6px; }
.acct-menu__b::-webkit-details-marker { display: none; }
.acct-menu__ch { display: inline-flex; transition: transform var(--dur-fast) var(--ease-out); }
.acct-menu[open] .acct-menu__ch { transform: rotate(180deg); }
.acct-menu__p {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 13rem; padding: 6px; display: grid;
  background: var(--paper-raised); border: var(--rule) solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.acct-menu__p a, .acct-menu__out button {
  display: block; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); text-align: left; color: var(--ink);
  background: none; border: 0; cursor: pointer;
}
.acct-menu__p a:hover, .acct-menu__out button:hover { background: var(--paper-sunken); }
.acct-menu__out { margin: 6px 0 0; padding-top: 6px; border-top: var(--rule) solid var(--line-faint); }
.acct-menu__out button { color: var(--ink-3); }

.drawer__out { margin: 0; }
.drawer__out.bar__cont { display: none; }
:root[data-cont="1"] .drawer__out.bar__cont { display: block; }
.drawer__out button {
  width: 100%; min-height: 52px; padding: var(--space-2xs) 0; text-align: left;
  font: inherit; font-size: var(--text-base); color: var(--ink-3);
  background: none; border: 0; border-bottom: var(--rule) solid var(--line-faint); cursor: pointer;
}
.iesi { max-width: 26rem; text-align: center; padding-block: var(--space-2xl); }
.iesi .h3 { margin: 0 0 var(--space-lg); }
.iesi__b { display: flex; gap: var(--space-xs); justify-content: center; }
/* Antetul contului: cine esti, pe fiecare fila. */
.acct-head { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
.acct-head__av {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-fill); color: var(--accent-ink);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.02em;
}
.acct-head__m { min-width: 0; flex: 1; }
.acct-head__n { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: var(--track-tight); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.acct-head__s { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.acct-head__r { flex: none; }
@media (max-width: 620px) {
  .acct-head { gap: var(--space-sm); flex-wrap: wrap; }
  .acct-head__av { width: 44px; height: 44px; font-size: var(--text-base); }
  .acct-head__n { font-size: var(--text-xl); }
  .acct-head__r { flex-basis: 100%; padding-left: calc(44px + var(--space-sm)); }
}
/* Formularul pe randuri de setari (cautarea salvata). */
.set-form .set__v input, .set-form .set__v select {
  width: 100%; max-width: 22rem; min-height: 40px; padding: var(--space-2xs) var(--space-xs);
  font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--paper-sunken);
  border: var(--rule) solid var(--line); border-radius: var(--radius-sm);
}
.set-form .set__v input:focus-visible, .set-form .set__v select:focus-visible { outline: none; border-color: var(--accent); }
.set-form .frm__f { gap: 4px; }
.set-form__b { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); }
/* Elementele din panou: cerere, listare, revendicare. */
.set__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); }
.set__item-l { min-width: 0; }
.set__item-c { grid-column: 1 / -1; }
.set__item .set__btns { max-width: 30rem; }
.set__item .reveal { background: var(--paper-sunken); border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm); box-shadow: none; }
.set__item + .set__item, .set__r + .set__item, .set__item + .set__r { border-top: var(--rule) solid var(--line-faint); }
.set__item-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.set__item-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.set__item-t a { color: var(--ink); }
.set__item-t a:hover { color: var(--accent); }
.set__item-t .ref { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; color: var(--ink-3); }
.set__item-m { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ink-3); }
.set__item-m b { color: var(--ink-2); font-weight: 600; }
.set__item-x { margin: var(--space-xs) 0 0; padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm); color: var(--ink-2); background: var(--paper-sunken); border-radius: var(--radius-sm); }
.set__item .reveal { margin-top: var(--space-xs); }
.set__ha .chip { margin: 0; }
@media (max-width: 620px) {
  .set__item { padding: var(--space-sm); }
  .set__item { grid-template-columns: minmax(0, 1fr); }
  .set__item .set__btns { max-width: none; justify-content: flex-start; }
}
/* Notele de sub planuri (5 octombrie 2026): pe latimea cardurilor, cate o
 * propozitie pe rand, aliniate cu ele -- nu un bloc ingust centrat separat. */
.pret__note { margin: var(--space-lg) auto 0; max-width: 54rem; display: grid; gap: 6px;
  text-align: center; font-size: var(--text-sm); color: var(--ink-3); }
.pret__note p { margin: 0; text-wrap: balance; }
.pret__note b, .pret__note a { color: var(--ink); }

/* ============================================================ SUBSOL (5 oct 2026)
 * Marca si adresa in stanga, legaturile intr-o singura lista care curge in
 * dreapta; dedesubt nota juridica si randul de jos. Fara coloane si fara
 * acordeoane. Regulile de aici le suprascriu pe cele vechi de mai sus. */
footer.site { padding-top: var(--space-xl); }
footer.site .foot__sus {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl); flex-wrap: wrap;
  grid-template-columns: none;
}
footer.site .foot__marca { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.foot__nav { flex: 1 1 auto; padding-top: 6px; }
.foot__nav ul { margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px var(--space-md); }
.foot__nav a { font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap; }
.foot__nav a:hover { color: var(--accent); }
footer.site .foot__nota { margin: var(--space-xl) 0 0; padding-top: var(--space-md);
  border-top: var(--rule) solid var(--line-faint); max-width: none;
  font-size: var(--text-xs); line-height: 1.6; color: var(--ink-faint); }
footer.site .foot__baza { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); margin: 0; }
footer.site .foot__fine { flex: none; order: 0; flex-basis: auto; }
footer.site .foot__legal { order: 0; flex-basis: auto; margin: 0 0 0 auto; display: flex;
  flex-wrap: wrap; gap: 4px var(--space-md); }
footer.site .foot__anpc { margin: 0; }
@media (max-width: 620px) {
  footer.site { padding-top: var(--space-lg); }
  footer.site .foot__sus { flex-direction: column; gap: var(--space-md); }
  footer.site .foot__marca { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  .foot__nav { flex: none; width: 100%; max-width: none; }
  .foot__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
  .foot__nav a { display: block; padding-block: 9px; border-bottom: var(--rule) solid var(--line-faint); }
  footer.site .foot__nota { margin-top: var(--space-md); border-top: 0; padding-top: 0; }
  footer.site .foot__baza { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  footer.site .foot__legal { margin: 0; order: -1; }
  footer.site .foot__fine { order: 2; }
}

/* ============================================================ ETICHETE (5 oct 2026)
 * Chipul cu bulina si litere monospatiate „striga AI" (proprietarul). Ramane
 * o eticheta de text simpla: litera normala, fara bulina si fara halou, cu o
 * nuanta discreta dupa stare. */
.chip {
  gap: 0; padding: 1px 7px; border: 0; border-radius: var(--radius-xs);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  background: var(--paper-sunken); color: var(--ink-3); box-shadow: none;
}
.chip::before { display: none; }
.chip--live { color: color-mix(in oklab, var(--state-live) 70%, var(--ink));
  background: color-mix(in oklab, var(--state-live) 12%, transparent); box-shadow: none; }
.chip--warn { color: color-mix(in oklab, var(--state-warn) 75%, var(--ink));
  background: color-mix(in oklab, var(--state-warn) 13%, transparent); }
.chip--dead { color: color-mix(in oklab, var(--state-dead) 75%, var(--ink));
  background: color-mix(in oklab, var(--state-dead) 12%, transparent); }
.acct-head__plan { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; }
/* Etichetele mici de pe carduri, in acelasi spirit (5 oct 2026): litera
 * normala, fara majuscule spatiate. */
.traseu__t { font-family: var(--font-body); font-size: var(--text-xs); }
.pc__cet { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; }

/* Subsolul pe telefon, strans (5 octombrie 2026: „oribil, gigant"). Legaturile
 * curg pe randuri scurte, fara linii intre ele; nota e mica; randul de jos
 * tine sigla ANPC langa ©. Inlocuieste regulile de telefon de mai sus. */
@media (max-width: 620px) {
  footer.site { padding-top: var(--space-md); }
  footer.site .foot__sus { gap: var(--space-sm); }
  footer.site .foot__marca { gap: var(--space-xs); }
  footer.site .foot__logo svg { height: 24px; width: auto; }
  footer.site .foot__mail { font-size: var(--text-xs); }
  .foot__nav ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; }
  .foot__nav a { display: inline; padding: 0; border: 0; font-size: var(--text-sm); color: var(--ink-2); }
  footer.site .foot__nota { margin-top: var(--space-md); padding-top: var(--space-sm);
    border-top: var(--rule) solid var(--line-faint); font-size: 11px; line-height: 1.5; }
  footer.site .foot__baza { flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px var(--space-sm); padding-block: var(--space-sm) var(--space-md); }
  footer.site .foot__legal { order: 0; flex-basis: 100%; margin: 0; gap: 4px 14px; }
  .foot__legal > li > a { display: inline; padding: 0; font-size: var(--text-xs); }
  footer.site .foot__fine { order: 1; flex: 1 1 0; min-width: 0; font-size: 11px; }
  footer.site .foot__anpc { order: 2; }
  .foot__anpc > img { width: 128px; height: 32px; border-radius: 6px; }
}

/* ============================================================ CONTACT (5 oct 2026)
 * Stanga datele firmei, dreapta formularul. */
.ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl);
  align-items: start; max-width: 64rem; }
.ct__dl { margin: var(--space-lg) 0 0; display: grid; gap: var(--space-sm); }
.ct__r dt { font-size: var(--text-xs); color: var(--ink-3); }
.ct__r dd { margin: 2px 0 0; font-size: var(--text-sm); color: var(--ink); }
.ct__r dd a { color: var(--accent); }
.ct__panou { padding: var(--space-lg); border: var(--rule) solid var(--line);
  border-radius: var(--radius-md); background: var(--paper-raised); }
.ct__form { gap: var(--space-sm); }
.ct__doi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.ct__capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct__ok .h4 { margin: 0 0 var(--space-2xs); }
.ct__ok p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) {
  .ct { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .ct__dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--space-md); }
  .ct__r:last-child { grid-column: 1 / -1; }
  .ct__panou { padding: var(--space-md); }
  .ct__doi { grid-template-columns: minmax(0, 1fr); }
}