/* ============================================================================
   95-controale.css · CONTROALELE TEMEI, DUPA DESIGNUL SECTIUNILOR

   ⚠⚠ CERUT: butoanele existente din tema sa fie la fel de rotunde si cu
      acelasi scris ca butoanele din sectiuni, casuta de cautare si butoanele
      de conectare / cont sa fie mai rotunjite, iar in sidebar grupul si
      intrarea sa fie putin mai mari.

   ⚠⚠ REPERUL E `.xar__more` (`sectiuni/14-argumente.css:163`), butonul „Vezi
      toate cele N". Masurat pe randare: raza 999px, 13,5px, greutate 600,
      umplutura 11px 18px. Tot ce urmeaza se aliniaza la el.

   ⚠⚠ FONTUL NU SE SCHIMBA, SI ASTA A FOST O SURPRIZA LA MASURATOARE. Prima
      citire spunea ca tema e pe Poppins si sectiunile pe Hanken Grotesk. Era
      bancul de vina, nu tema: aduna foile cu `glob`, adica alfabetic, iar
      `mds-design.css` (care face `--mds-sans: var(--mdsx-b)`, adica Hanken)
      cadea INAINTEA lui `mds-tokens.css`, care il punea la loc pe Poppins.
      Cu ordinea reala, tema e deja pe Hanken Grotesk peste tot. Deci aici se
      schimba RAZA si MARIMEA, nu familia.

   ⚠⚠ FISIER GLOBAL, nu de pagina de activ. Butoanele de cont si cautarea sunt
      in `header.php`, deci pe orice pagina. De aia sta in `assets/css/xtema/`
      si se incarca din `inc/sections/x-controale.php`, nu in `sectiuni/`, care
      se incarca doar pe pagina de activ (`01-css-sectiuni.php:68`).

   ⚠⚠ DE AIA NU SE FOLOSESC `--xr-p`, `--xf` SI `--xt-7`. Toate trei traiesc pe
      `:root` din `sectiuni/20-grup2.css`, care NU se incarca in afara paginii
      de activ: pe `/brokeri/` ar fi iesit raze si marimi goale. Valorile sunt
      scrise in cifre, cu numele treptei langa ele. Fontul vine din
      `--mds-sans`, care e remapat la Hanken pe tot site-ul.

   ⚠ NICIUN FISIER AL TEMEI NU SE ATINGE. Regulile de mai jos bat
     `mds-base.css`, `mds-shell.css`, `mds-asset.css` si `mds-search.css` prin
     ordine (se tipareste ultimul) si prin specificitate, acolo unde tema are
     deja doua clase.
   ============================================================================ */

:root{
  /* ⚠ Numele sunt cu prefix propriu, ca sa nu se ciocneasca nici cu `--mds-*`
     al temei, nici cu `--x*` al sectiunilor. */
  --xct-r:999px;      /* raza de pastila · egala cu `--xr-p` din sectiuni */
  --xct-t:13.5px;     /* treapta de text · egala cu `--xt-7` pe desktop */
  --xct-t-mic:12px;   /* treapta mica · egala cu `--xt-8` */
}

/* ══ BUTOANELE ═════════════════════════════════════════════════════════════
   ⚠⚠ CLASA REPETATA DE TREI ORI = (0,3,0), SI E MASURATA, nu prudenta oarba.
      Tema stilizeaza acelasi buton din trei locuri cu DOUA clase, deci la
      (0,2,0): `.mds-authbtns .mds-btn` (`mds-shell.css:45`),
      `.mds-drawer__auth .mds-btn` (`:76`) si `.mds-sn__foot .mds-btn`
      (`mds-asset.css:49`). Fiecare pune alta raza, alta inaltime si alt corp
      de litera - de aici veneau cele trei inaltimi diferite masurate: 33, 37
      si 32px. La (0,3,0) toate trei ajung la acelasi buton.
   ⚠ `min-height`, nu `height`: pe ecran tactil tema urca `--mds-btn-h` la 44px
     (`mds-tokens.css:60`), si tinta de apasare trebuie sa ramana mare. */
.mds-btn.mds-btn.mds-btn{
  height:auto; min-height:var(--mds-btn-h, 38px);
  padding:9px 18px; border-radius:var(--xct-r);
  font-size:var(--xct-t); font-weight:600; line-height:1.2;
  letter-spacing:-.01em;
}
/* ⚠ Butonul-text n-are fundal, deci nici umplutura mare: altfel „Conectează-te"
   parea la fel de apasabil ca „Cont gratuit", si nu e. */
.mds-btn--text.mds-btn--text.mds-btn--text{ padding:9px 12px; font-weight:500; }

/* ⚠ 999px, nu 50%: butonul e 40x40, deci cercul iese la fel, dar daca maine
   primeste o eticheta langa iconita, pastila ramane corecta. */
.mds-iconbtn.mds-iconbtn{ border-radius:var(--xct-r); }

.mds-lang__btn.mds-lang__btn{ border-radius:var(--xct-r); font-size:var(--xct-t); }

/* ⚠ Pastilele „Pro" si „curând" stau langa intrarile din sidebar; cu colt de
   5px langa intrari rotunde se vedea ca sunt din alt set. */
.mds-tag.mds-tag{ border-radius:var(--xct-r); }

/* ══ CASUTA DE CAUTARE DIN SIDEBAR ═════════════════════════════════════════ */
.mds-sn__search.mds-sn__search{ border-radius:var(--xct-r); font-size:var(--xct-t);
  padding:10px 16px; }

/* ══ FEREASTRA DE CAUTARE ══════════════════════════════════════════════════
   ⚠ 22px pe fereastra: aceeasi treapta ca `--xr-i` din sectiuni, adica raza
     cardurilor mici. Randurile raman la 14px, nu pastila: o pastila lata de
     500px in jurul unui rand de rezultat arata ca un buton, nu ca un rand.
   ⚠ Pe mobil fereastra e pe tot ecranul si tema ii pune deja `border-radius:0`
     (`mds-search.css:40`), la (0,1,0) intr-o interogare de media. Regula de
     aici e la (0,2,0), deci ar fi batut-o si ar fi lasat colturi rotunde
     lipite de marginea ecranului. De aia e inchisa in pragul de desktop. */
@media (min-width:641px){
  .mds-srch__box.mds-srch__box{ border-radius:22px; }
}
.mds-srch__close.mds-srch__close{ border-radius:var(--xct-r); }
.mds-srch__scope.mds-srch__scope{ font-size:13px; padding:6px 14px; }
.mds-srch__row.mds-srch__row{ border-radius:14px; }
.mds-srch__logo.mds-srch__logo,
.mds-srch__art.mds-srch__art{ border-radius:12px; }
.mds-srch__badge.mds-srch__badge{ border-radius:var(--xct-r); }
.mds-srch__foot kbd{ border-radius:7px; }

/* ══ SIDEBAR · GRUPUL SI INTRAREA ══════════════════════════════════════════
   ⚠⚠ NUMAI PE DESKTOP, si nu din comoditate. Sub 921px tema transforma
      sidebar-ul in banda de jos si ii da `.mds-sn__item{font-size:11px}`
      (`mds-asset.css:152`), la (0,1,0) intr-o interogare de media. Regulile de
      aici, la (0,2,0), ar fi crescut si taburile din banda aia si ar fi rupt-o.
      Banda de jos se reface oricum in lotul urmator.

   ⚠ GRUPUL: 10,5px -> 12px (`--xt-8`), greutate 500 -> 600, iconita 13 -> 16px
     si opacitatea de la .5 la .62. Era cel mai mic text din toata pagina, iar
     iconita lui se pierdea langa un titlu de sectiune de 20px.
   ⚠ INTRAREA: 12,5px -> 13,5px (`--xt-7`, treapta la care e scris textul din
     sectiuni), colt 8px -> pastila, si inaltimea minima 34 -> 36px ca sa nu se
     stranga randurile la textul mai mare. */
/* ⚠⚠ REPARATIE DE TEMA, gasita la masuratoare, nu cautata. Sub 921px sidebar-ul
      devine banda de jos, iar `mds-asset.css:150` ascunde titlurile de grup
      acolo: `.mds-sn__top,.mds-sn__search,.mds-sn__group,…{display:none}`, la
      (0,1,0) intr-o interogare de media. Dar `mds-design.css:131` scrie
      `.mds-sn__group{display:flex}`, tot la (0,1,0), si se tipareste DUPA
      (prioritate 20 fata de 10), deci castiga. Masurat pe randare la 390px:
      titlurile de grup chiar se vad, insirate printre taburile din banda.
   ⚠ Banda de jos se reface oricum in lotul urmator; pana atunci, o linie. */
@media (max-width:920px){
  .mds-sn__group.mds-sn__group{ display:none; }
}

@media (min-width:921px){
  .mds-sn__group.mds-sn__group{
    font-size:var(--xct-t-mic); font-weight:600; letter-spacing:.06em;
    gap:8px; padding-top:16px;
  }
  .mds-sn__group.mds-sn__group svg{ width:16px; height:16px; opacity:.62; }

  .mds-sn__item.mds-sn__item{
    font-size:var(--xct-t); min-height:36px;
    padding:8px 14px; border-radius:var(--xct-r);
  }
  .mds-sn__item.mds-sn__item.active{ font-weight:600; }
}