/* =============================================================================
   onboarding-patch2.css — patch 2 pentru ruta de onboarding.
   Se încarcă DUPĂ `routes/onboarding.css`.
   -----------------------------------------------------------------------------
   Repară punctul 11 raportat de Andu:
     a) lângă logo trebuie să scrie „Nutritie.ro”, ca în chat și în magazin;
     b) deasupra barei de progres se vede gradientul de dedesubt — arată nefinalizat.

   Nu înlocuiește nimic: doar suprascrie punctual, tot ce e nou se agață pe
   dinafară. Dacă scoți fișierul, revii exact la comportamentul de acum.

   INSTALARE (fără atingeri de PHP): coloana `css` a rutei acceptă mai multe
   fișiere separate prin virgulă, încărcate în ordine
   (`app/Models/Route.php:107` — `foreach (explode(',', … $this->css) as $path)`).
   Deci:

       UPDATE `pse_routes`
          SET `css` = 'routes/onboarding.css,routes/onboarding-patch2.css'
        WHERE `id` = 39;   -- ruta GET /onboarding/{plan_slug}

   Fișierul merge în `public/assets/css/routes/`. Dacă `app_cache_router` e pornit,
   golește `storage/cache/router/`. Ruta 46 (rezultat comandă) folosește și ea
   `routes/onboarding.css`, dar nu are marcajul `.obar`; toți selectorii de mai jos
   sunt sub `.obar`, deci acolo fișierul e inert — îl poți adăuga sau nu.

   CUM AM MĂSURAT (ca să poți reface): am randat local twig-ul real
   `themes/nutritie/modules/nutritie/views/routes/onboarding.html.twig` (cu
   etichetele twig înlocuite cu date de probă) plus CSS-ul real
   `public/assets/css/routes/onboarding.css`, l-am pus în `<iframe>`-uri de lățime
   fixă — 320 / 360 / 390 / 414 / 430 / 768 / 1024 / 1280 / 1440 px — și am citit
   `getBoundingClientRect()`, `scrollWidth` și `document.elementFromPoint()`.
   Toate cifrele din comentariile de mai jos vin de acolo, niciuna nu e estimată.
   ============================================================================= */


/* =========================================================================
   1. BANDA DE DEASUPRA BAREI DE PROGRES — „gradientul de sub”
   -------------------------------------------------------------------------
   NU e un ::before, nici un box-shadow, nici un gradient în plus. E o gaură.

   `.prog` e lipită cu `position:sticky; top:var(--hdr)` (onboarding.css:49), iar
   `--hdr` e scris de mână: 58px (onboarding.css:21) și 64px de la 1100px în sus
   (onboarding.css:220). Bara de sus `.obar` NU are înălțime fixă — rezultă din
   conținut: 8px + 8px padding + pastila ETA de 31,82px + 1px bordură.

   MĂSURAT: `.obar` are 48,82px, `--hdr` cere 58px. Diferența de 9,18px e o bandă
   care rămâne mereu descoperită. (Peste 1100px: `.obar` = 57px față de 64px → 7px.)
   `top` la sticky nu e doar un prag la derulare, e și o distanță MINIMĂ față de
   marginea de sus: elementul e împins în jos chiar și la derulare 0. De aceea
   banda se vede din prima clipă, nu doar când derulezi.

   Ce se vede prin gaură, verificat cu `document.elementFromPoint()` la mijlocul
   benzii:
     · la derulare 0 → BODY, adică fundalul paginii: cele două gradiente radiale
       de brand din onboarding.css:27-31 (violet la 88% sus-dreapta, cyan la 3%
       sus-stânga). Peste ele, cele două bare au `rgba(8,11,18,.92)`, deci sunt
       mai închise; banda descoperită rămâne cu ~5/255 mai deschisă și trage în
       violet. Exact „gradientul de sub”.
     · la derulare > 0 → SECTION.step, adică pasul care alunecă pe sub ea: titlul
       cu text în gradient (`.gt`) și butonul CTA (`.btn`, gradient pe toată
       lățimea) trec ca o dungă colorată prin bandă.

   REPARAȚIA: `.obar` primește exact înălțimea la care se lipește `.prog`. Nu
   coborâm `--hdr` la 49px, pentru că 48,82 nu e un număr rotund și oricum ar
   rămâne 0,18px de fantă; forțăm în schimb bara să umple contractul care există
   deja în fișier. `box-sizing:border-box` e global (onboarding.css:23), deci cei
   58px includ bordura de jos — verificat: `.obar` = 58,00px, fantă = 0,00px la
   toate cele nouă lățimi testate.

   Nu am pus o „perdea” (::before care să acopere banda): ar fi un al doilea strat
   de `rgba(8,11,18,.92)` peste primul și ar lăsa o cusătură de 1/255 sub bara de
   sus. Când poți face fanta să nu existe, nu o acoperi.
   ====================================================================== */
.obar { min-height: var(--hdr); }


/* =========================================================================
   2. LOCKUP-UL DE BRAND — „Nutritie.ro” lângă simbol
   -------------------------------------------------------------------------
   În chat și în magazin, sidebar-ul nu pune un text lângă logo: folosește ALT
   SVG, lockup-ul complet cu viewBox `0 0 413 100`, în care „Nutritie.ro” e desenat
   ca 11 contururi vectoriale (`themes/nutritie/views/partials/acx-chat-side.html.twig`,
   `.acx-brand`). Nu e un font — deci nu poate fi reprodus cu un `<span>` și
   `font-family`, ar ieși alte litere. Ca să fie CONSECVENT, trebuie exact
   contururile alea.

   Onboarding-ul are doar simbolul (viewBox `0 0 100 100`, onboarding.html.twig:5).
   Aici punem lângă el cuvântul din lockup-ul de chat, ca mască pe `::after`, cu
   proporțiile luate din lockup — nu alese de mine:
     · caseta cuvântului, măsurată cu `getBBox()` pe SVG-ul din chat:
       x 125,678 · y 29,4004 · lățime 287,324 · înălțime 41,920 (unități viewBox);
     · simbolul ocupă 0…100 pe ambele axe, deci 1 unitate = înălțimea logo-ului/100;
     · înălțimea cuvântului = 41,920/100 = .4192 × înălțimea simbolului;
     · raportul cuvântului = 287,324/41,920 = 6,8526;
     · spațiul dintre simbol și cuvânt = (125,678 − 100)/100 = .2553 × înălțimea.
   La 26px simbol ies 74,69 × 10,90px pentru cuvânt și 6,64px spațiu — identic cu
   ce randează chat-ul la aceeași înălțime de logo. Verificat: cutia desenată de
   `::after` (74,6875 × 10,8984) coincide cu cutia SVG-ului inline din varianta cu
   markup (74,68 × 10,90).

   De ce mască și nu `background-image`: masca ia culoarea din `var(--fg)`, adică
   din paleta paginii, în loc să înghețe `#E7E8F0` în data-URI. Aceeași tehnică e
   folosită deja în onboarding.css:133 pentru bifa de la consimțăminte.

   ACCESIBILITATE: nu se pierde nimic. Ancora are deja
   `aria-label="Înapoi la pagina principală"` (onboarding.html.twig:4), iar
   simbolul are `role="img" aria-label="Nutritie.ro"` (linia 5). Cuvântul e
   decorativ, exact ca în lockup.

   Dacă preferi SVG inline în twig (vezi `twig/onboarding.diff.md`), aplici diff-ul
   și regula `:has()` de mai jos stinge singură masca. Dacă twig-ul nu se atinge,
   nu trebuie făcut nimic.
   ====================================================================== */
.obar .brand {
  /* Înălțimea logo-ului devine variabilă ca să pot deriva din ea și cuvântul, și
     spațiul. Valorile sunt cele din onboarding.css:43 și :225 — nu le schimb. */
  --logo-h: 26px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * .2553);
  /* Brandul nu se comprimă niciodată: tot ce e de cedat cedează pastila ETA
     (secțiunea 3). Fără asta, la un nume de plan lung ancora se strivea la
     22,1px și simbolul ieșea din ea — măsurat. */
  flex: 0 0 auto;
}
.obar .brand-logo { height: var(--logo-h); width: auto; flex: 0 0 auto; }
.obar .brand::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: calc(var(--logo-h) * .4192);
  width: calc(var(--logo-h) * .4192 * 6.8526);
  background: var(--fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='125.68 29.4 287.33 41.93'%3E%3Cg fill='%23000'%3E%3Cpath d='M125.686 70.7023V29.4004H134.264L148.947 50.9764L152.709 57.4444L152.153 47.7023V29.4004H160.98V70.6943H152.588L137.534 48.9331L133.829 42.8352L134.505 53.0681V70.6943H125.678L125.686 70.7023Z'/%3E%3Cpath d='M167.643 61.5804V40.5029H176.47V58.4992C176.47 62.1996 177.461 64.4763 181.529 64.4763C185.596 64.4763 187.022 62.1354 187.022 57.2038V40.5029H195.849V70.7029H187.022V62.2558C185.975 67.0667 183.075 71.3146 176.962 71.3146C171.227 71.3146 167.643 67.7988 167.643 61.5721V61.5804Z'/%3E%3Cpath d='M203.503 61.7636V47.2186H199V40.5013H203.503V36.9295L212.33 32.3037V40.5013H220.723V47.2186H212.33V60.1628C212.33 62.6244 213.563 63.4932 215.294 63.4932C217.203 63.4932 218.871 61.9569 219.797 60.2915L222.326 67.4994C221.029 69.1648 217.944 71.3207 213.313 71.3207C206.652 71.3207 203.503 67.379 203.503 61.7636Z'/%3E%3Cpath d='M225.039 70.7022V40.502H233.867V49.9947C234.858 44.9426 237.814 39.8906 243.621 39.8906C248.067 39.8906 250.532 42.7226 250.532 47.4688C250.532 50.7351 249.541 53.3255 248.8 54.4917H240.286C241.398 53.3817 242.445 51.2255 242.445 49.4959C242.445 47.7663 241.64 46.4792 239.731 46.4792C236.71 46.4792 233.867 49.7455 233.867 54.7413V70.7022H225.039Z'/%3E%3Cpath d='M254.164 36.9223V29.4004H262.992V36.9223H254.164ZM254.164 70.7023V40.5022H262.992V70.7023H254.164Z'/%3E%3Cpath d='M271.379 61.7636V47.2186H266.877V40.5013H271.379V36.9295L280.207 32.3037V40.5013H288.6V47.2186H280.207V60.1628C280.207 62.6244 281.439 63.4932 283.171 63.4932C285.08 63.4932 286.747 61.9569 287.673 60.2915L290.203 67.4994C288.906 69.1648 285.821 71.3207 281.19 71.3207C274.529 71.3207 271.379 67.379 271.379 61.7636Z'/%3E%3Cpath d='M294.154 36.9223V29.4004H302.982V36.9223H294.154ZM294.154 70.7023V40.5022H302.982V70.7023H294.154Z'/%3E%3Cpath d='M307.846 55.5915C307.846 46.2836 313.709 39.8721 322.594 39.8721C332.219 39.8721 337.035 46.2836 337.035 54.1677C337.035 55.4627 336.914 57.1844 336.729 57.8682H316.117C316.673 62.124 319.509 64.1511 323.463 64.1511C327.724 64.1511 330.003 62.3011 331.115 59.7107L336.487 65.0765C334.208 68.3423 330.132 71.3032 323.342 71.3032C313.717 71.3032 307.854 64.8915 307.854 55.5836L307.846 55.5915ZM316.117 52.824H329.077C328.771 48.8177 326.613 46.6619 322.658 46.6619C318.703 46.6619 316.545 48.7536 316.117 52.824Z'/%3E%3Cpath d='M340.742 70.7002V61.1431H350.126V70.7002H340.742Z'/%3E%3Cpath d='M355.305 70.7022V40.502H364.132V49.9947C365.123 44.9426 368.079 39.8906 373.887 39.8906C378.333 39.8906 380.797 42.7226 380.797 47.4688C380.797 50.7351 379.806 53.3255 379.066 54.4917H370.552C371.664 53.3817 372.711 51.2255 372.711 49.4959C372.711 47.7663 371.905 46.4792 369.996 46.4792C366.976 46.4792 364.132 49.7455 364.132 54.7413V70.7022H355.305Z'/%3E%3Cpath d='M382.459 55.5915C382.459 46.4044 388.379 39.8721 397.577 39.8721C406.776 39.8721 413.002 46.4044 413.002 55.5915C413.002 64.7786 407.017 71.3111 397.577 71.3111C388.138 71.3111 382.459 64.8432 382.459 55.5915ZM404.053 55.5915C404.053 49.3648 401.459 47.024 397.698 47.024C393.937 47.024 391.408 49.3648 391.408 55.5915C391.408 61.8182 394.001 64.1594 397.698 64.1594C401.395 64.1594 404.053 61.754 404.053 55.5915Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='125.68 29.4 287.33 41.93'%3E%3Cg fill='%23000'%3E%3Cpath d='M125.686 70.7023V29.4004H134.264L148.947 50.9764L152.709 57.4444L152.153 47.7023V29.4004H160.98V70.6943H152.588L137.534 48.9331L133.829 42.8352L134.505 53.0681V70.6943H125.678L125.686 70.7023Z'/%3E%3Cpath d='M167.643 61.5804V40.5029H176.47V58.4992C176.47 62.1996 177.461 64.4763 181.529 64.4763C185.596 64.4763 187.022 62.1354 187.022 57.2038V40.5029H195.849V70.7029H187.022V62.2558C185.975 67.0667 183.075 71.3146 176.962 71.3146C171.227 71.3146 167.643 67.7988 167.643 61.5721V61.5804Z'/%3E%3Cpath d='M203.503 61.7636V47.2186H199V40.5013H203.503V36.9295L212.33 32.3037V40.5013H220.723V47.2186H212.33V60.1628C212.33 62.6244 213.563 63.4932 215.294 63.4932C217.203 63.4932 218.871 61.9569 219.797 60.2915L222.326 67.4994C221.029 69.1648 217.944 71.3207 213.313 71.3207C206.652 71.3207 203.503 67.379 203.503 61.7636Z'/%3E%3Cpath d='M225.039 70.7022V40.502H233.867V49.9947C234.858 44.9426 237.814 39.8906 243.621 39.8906C248.067 39.8906 250.532 42.7226 250.532 47.4688C250.532 50.7351 249.541 53.3255 248.8 54.4917H240.286C241.398 53.3817 242.445 51.2255 242.445 49.4959C242.445 47.7663 241.64 46.4792 239.731 46.4792C236.71 46.4792 233.867 49.7455 233.867 54.7413V70.7022H225.039Z'/%3E%3Cpath d='M254.164 36.9223V29.4004H262.992V36.9223H254.164ZM254.164 70.7023V40.5022H262.992V70.7023H254.164Z'/%3E%3Cpath d='M271.379 61.7636V47.2186H266.877V40.5013H271.379V36.9295L280.207 32.3037V40.5013H288.6V47.2186H280.207V60.1628C280.207 62.6244 281.439 63.4932 283.171 63.4932C285.08 63.4932 286.747 61.9569 287.673 60.2915L290.203 67.4994C288.906 69.1648 285.821 71.3207 281.19 71.3207C274.529 71.3207 271.379 67.379 271.379 61.7636Z'/%3E%3Cpath d='M294.154 36.9223V29.4004H302.982V36.9223H294.154ZM294.154 70.7023V40.5022H302.982V70.7023H294.154Z'/%3E%3Cpath d='M307.846 55.5915C307.846 46.2836 313.709 39.8721 322.594 39.8721C332.219 39.8721 337.035 46.2836 337.035 54.1677C337.035 55.4627 336.914 57.1844 336.729 57.8682H316.117C316.673 62.124 319.509 64.1511 323.463 64.1511C327.724 64.1511 330.003 62.3011 331.115 59.7107L336.487 65.0765C334.208 68.3423 330.132 71.3032 323.342 71.3032C313.717 71.3032 307.854 64.8915 307.854 55.5836L307.846 55.5915ZM316.117 52.824H329.077C328.771 48.8177 326.613 46.6619 322.658 46.6619C318.703 46.6619 316.545 48.7536 316.117 52.824Z'/%3E%3Cpath d='M340.742 70.7002V61.1431H350.126V70.7002H340.742Z'/%3E%3Cpath d='M355.305 70.7022V40.502H364.132V49.9947C365.123 44.9426 368.079 39.8906 373.887 39.8906C378.333 39.8906 380.797 42.7226 380.797 47.4688C380.797 50.7351 379.806 53.3255 379.066 54.4917H370.552C371.664 53.3817 372.711 51.2255 372.711 49.4959C372.711 47.7663 371.905 46.4792 369.996 46.4792C366.976 46.4792 364.132 49.7455 364.132 54.7413V70.7022H355.305Z'/%3E%3Cpath d='M382.459 55.5915C382.459 46.4044 388.379 39.8721 397.577 39.8721C406.776 39.8721 413.002 46.4044 413.002 55.5915C413.002 64.7786 407.017 71.3111 397.577 71.3111C388.138 71.3111 382.459 64.8432 382.459 55.5915ZM404.053 55.5915C404.053 49.3648 401.459 47.024 397.698 47.024C393.937 47.024 391.408 49.3648 391.408 55.5915C391.408 61.8182 394.001 64.1594 397.698 64.1594C401.395 64.1594 404.053 61.754 404.053 55.5915Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
/* Plasa de siguranță pentru varianta cu markup: dacă SVG-ul cuvântului există în
   DOM, masca dispare, ca să nu apară de două ori. `:has()` merge în Chrome 105+,
   Safari 15.4+, Firefox 121+. Dacă aplici diff-ul de twig, ștergerea blocului
   `.obar .brand::after` de mai sus rămâne varianta sigură, nu doar asta. */
.obar .brand:has(.brand-name)::after { content: none; }
/* …iar dacă SVG-ul inline e prezent, îl aducem la aceleași proporții. */
.obar .brand-name {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--logo-h) * .4192);
  fill: var(--fg);
}
@media (min-width: 1100px) {
  /* Perechea lui `--hdr:64px` din onboarding.css:220 și `height:32px` din :225. */
  .obar .brand { --logo-h: 32px; }
}


/* =========================================================================
   3. BUGETUL DE LĂȚIME AL BAREI — ramificație, nu opțiune
   -------------------------------------------------------------------------
   Cuvântul „Nutritie.ro” costă 81px din bara de sus. Fără regulile de aici,
   adăugarea lui ar fi rupt bara pe telefon. Dar problema exista DEJA, înainte de
   patch, și e mai gravă decât credeam:

   `onboarding.js:28` rescrie textul pastilei cu numele planului plus data:
       „Menținere Echilibrată · gata pe 30 septembrie”
   Pastila are `white-space:nowrap` (onboarding.css:45), deci lățimea ei minimă e
   textul întreg: 325,9px MĂSURAT. Într-un container flex, un element nu se poate
   micșora sub `min-content`, deci pastila nu cedează deloc.

   MĂSURAT pe repo-ul curent, FĂRĂ niciun patch, cu planul „Menținere echilibrată”:
     320px → pastila se termină la x=377,9  (57,9px tăiați de `overflow-x:hidden`)
     360px → idem, 17,9px tăiați
     390px → 377,9 față de marginea utilă 374 — intră în padding
   Adică pe telefoanele de 320-360px promisiunea de livrare e deja retezată azi,
   iar utilizatorul nu vede data.

   REPARAȚIA: pastila devine elastică, iar textul se trunchiază de la STÂNGA, nu
   de la dreapta. `direction:rtl` pe span-ul de text face ca `text-overflow:ellipsis`
   să taie începutul: numele planului (redundant — utilizatorul tocmai a ales
   planul) se pierde primul, iar data — promisiunea — rămâne mereu vizibilă.
   Textul e un singur șir latin, deci algoritmul bidi nu îl reordonează: verificat
   la 340/260/200/150px, ordinea cuvintelor rămâne identică, se schimbă doar unde
   apare „…”.

   REZULTAT MĂSURAT, cu cuvântul „Nutritie.ro” pornit și planul cel mai lung:
     320px → „… pe 30 septembrie”                        · fără depășire
     360px → „… · gata pe 30 septembrie”                 · fără depășire
     390px → „…brată · gata pe 30 septembrie”            · fără depășire
     414px → „…chilibrată · gata pe 30 septembrie”       · fără depășire
     430px → „… Echilibrată · gata pe 30 septembrie”     · fără depășire
     768px și peste → textul întreg
   `document.body.scrollWidth` = `clientWidth` la toate cele nouă lățimi, iar
   marginea din dreapta a pastilei cade exact pe padding-ul barei (374 la 390px,
   414 la 430px, 1392 la 1440px): nicio depășire orizontală, nicăieri.
   ====================================================================== */
.obar .eta { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Iconița de ceas nu se micșorează niciodată. */
.obar .eta .ico { flex: 0 0 auto; }
/* Span-ul de text e `#etaTxt` — îl țintim după formă, nu după id, ca regula să
   supraviețuiască dacă se schimbă id-ul; `onboarding.js:28` scrie în el. */
.obar .eta > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
}

/* =============================================================================
   ALINIERE LA ECRANELE DE CONT v7 (.aux-*)
   -----------------------------------------------------------------------------
   MĂSURAT înainte, pe cele trei suprafețe: fundalul câmpurilor, raza (10px),
   chenarul (1px rgba(255,255,255,.07)), checkbox-urile și tipografia erau DEJA
   identice cu ecranele de cont. Difereau exact două lucruri, amândouă moștenite
   din landing:
     · butonul principal — dreptunghi rotunjit la 14px, față de pastila (999px)
       de pe autentificare / creare cont / resetare parolă;
     · eticheta — mică și statică deasupra câmpului, față de eticheta plutitoare
       care urcă la focus.
   Blocul de mai jos aduce ambele la varianta din ecranele de cont.
   ========================================================================== */

/* --- butoanele: pastilă, ca `.cta` din chat-v7.css ------------------------- */
.btn,
.btn-ghost {
  border-radius: 999px;
}

/* --- eticheta plutitoare, portată 1:1 din `.aux-field` (auth-v7.css:35-62) --
   Padding-ul asimetric e obligatoriu: fără el eticheta urcată s-ar suprapune
   peste text. Placeholder-ul devine transparent — eticheta îi ține locul. */
.fld {
  position: relative;
}
.fld input,
.fld textarea {
  padding: 22px 14px 8px;
}
.fld input::placeholder,
.fld textarea::placeholder {
  color: transparent;
}
.fld label {
  position: absolute;
  left: 14px;
  top: 26px;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: 14.5px;
  color: var(--dim);
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base);
}
.fld.on label {
  transform: translateY(-50%) translateY(-13px) scale(.78);
  font-weight: 700;
  color: var(--accent-text);
}
/* Textarea: eticheta se ancorează SUS, nu pe mijloc — câmpul are mai multe rânduri,
   iar o etichetă centrată vertical ar sta în mijlocul textului. Ecranele de cont
   n-au textarea, deci aici nu există model de copiat; asta e adaptarea minimă. */
.fld:has(textarea) label {
  top: 22px;
}
.fld:has(textarea).on label {
  transform: translateY(-50%) translateY(-9px) scale(.78);
}

/* --- checklistul viu al parolei, ca pe creare cont ------------------------- */
.rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: -2px 0 12px;
}
.rules .rule {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--dim);
  background: var(--bg-elev);
  border: 1px solid var(--card-bd);
  border-radius: 999px;
  padding: 4px 10px;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.rules .rule.ok {
  color: #a6f0c6;
  border-color: rgba(1, 219, 105, .38);
  background: rgba(1, 219, 105, .1);
}

/* ---------------------------------------------------------------------------
   FEEDBACK PENTRU DATE GREȘITE — mesaj sub câmpul vinovat.
   Aceeași înfățișare ca `.aux-err` de pe ecranele de cont (12px, 600, #FF9DB0),
   ca eroarea să arate identic pe /cont/creare și în onboarding. Elementul
   `.ferr-f` e creat de `onboarding.js` doar când e nevoie.
   `.ferr` (mesajul de jos, al pasului) rămâne pentru grupuri — „Sex”, bifa de acord.
   ------------------------------------------------------------------------ */
.fld .ferr-f{
  margin: 6px 2px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #FF9DB0;
  text-align: left;
}
/* eticheta plutitoare devine roșie cât timp câmpul e marcat, ca perechea
   etichetă–mesaj să se citească ca un tot */
.fld.bad label{ color: #FF9DB0 !important; }
/* onboarding.css marchează doar `.fld input`; textarea-urile pasului 4 aveau
   chenarul neschimbat, deci eroarea lor era invizibilă */
.fld textarea[aria-invalid="true"]{ border-color: var(--danger); animation: shake 360ms ease-out; }
@media (prefers-reduced-motion: reduce){
  .fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"]{ animation: none; }
}

/* ---------------------------------------------------------------------------
   GRUP DE BIFE CU PRAG MINIM (`data-grup-minim`) — ustensilele de bază.
   Când niciuna nu e bifată, `validate()` pune `.bad` pe grup. Marcăm cardurile,
   nu un singur câmp: greșeala e a grupului, nu a unei opțiuni anume.
   ------------------------------------------------------------------------ */
.opts.bad .opt .box {
  border-color: var(--danger);
  animation: shake 360ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .opts.bad .opt .box { animation: none; }
}

/* ---------------------------------------------------------------------------
   REZUMATUL PLANULUI — butonul de plată rămâne pe ecran, textul derulează.
   `.sheet .panel` are `max-height: 88svh; overflow: auto`, deci derulează TOT,
   inclusiv bara de butoane de la final. Pe un rezumat lung (7 pași de date)
   „Continuă spre plată" ajungea sub margine și trebuia căutat prin derulare —
   exact pasul în care nu vrei să pui un obstacol.
   Panoul devine o coloană: capul (titlu, notă, data livrării) și butoanele stau
   pe loc, iar lista de date e singura care derulează.
   ------------------------------------------------------------------------ */
#sumSheet .panel {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* derularea trece pe #sumBody */
}
#sumSheet #sumBody {
  flex: 1 1 auto;
  min-height: 0; /* fără asta, un copil flex nu se lasă mai mic decât conținutul */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* afordanță de derulare, ca la caseta de disclaimer din chat */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
}
#sumSheet .grab,
#sumSheet h2,
#sumSheet .note,
#sumSheet .sum-hl,
#sumSheet .nav {
  flex: none;
}