/* ═══════════════════════════════════════════════════════════════════════════
   96-legaturi.css - logoul si linkul catre pagina unui activ.       LOT 117

   Doua elemente, folosite de toate paginile care listeaza alte active:
   companiile dintr-un ETF, componentele unui indice, vecinii unei actiuni.

   ⚠ NUMELE FISIERULUI ARE 96, dupa `94-etf.css`, fiindca `01-css-sectiuni.php`
     incarca folderul alfabetic si formele de aici se aseaza PESTE randul cu
     bara, nu sub el.

   ⚠ NICIO MARIME DE TEXT NOUA. Initiala din patrat e singura cifra scrisa de
     mana din fisier, 10px, si e o eticheta de 20 de pixeli, nu text de citit:
     `--xt-8` ar da 12px si ar iesi din patrat pe literele late.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── patratul din stanga numelui ──
   ⚠ `position:relative` NU e de prisos: `.xef__f`, umplutura barei, e
     absoluta in `.xef__n`, iar fara pozitionare patratul ar trece pe sub ea.
     Aceeasi regula o are si `.xef__n em` (`94-etf.css`), din acelasi motiv. */
.xlg__s{
  position:relative; flex:none;
  width:20px; height:20px; margin-right:9px;
  border-radius:5px; overflow:hidden;
  display:grid; place-items:center;
  background:var(--mdsx-line-2);
  font:600 10px/1 var(--xf); color:var(--xc-ink2);
  font-variant-numeric:tabular-nums;
}
/* ⚠ `contain`, nu `cover`: logourile vin patrate dar cu margine alba inegala,
     iar `cover` taia exact coltul cu semnul. */
.xlg__s img{ display:block; width:100%; height:100%; object-fit:contain; }

/* ── linkul ──
   ⚠⚠ PRIMA VARIANTA NU AVEA SUBLINIERE IN REPAUS, si era gresita. Am scris
      atunci ca „zece linkuri albastre subliniate ar fi facut lista sa arate ca
      un index de wiki". Alternativa nu era aia: la randul asta unele companii
      au pagina si altele nu, iar daca linkul arata exact ca textul simplu,
      singurul mod de a afla care e care e sa plimbi mouse-ul peste zece randuri.
      Pe telefon, unde nu exista hover, nu se poate afla deloc.

   Tiparul e luat intreg de la `13-indicatoare.css:27`, linkul catre
   metodologie, unde tema a raspuns deja la aceeasi intrebare: subliniere
   permanenta in cea mai stinsa cerneala (`--xc-ink4`), culoarea textului
   neschimbata, iar accentul apare numai la hover. Se vede ca e link fara sa
   concureze cu cifrele de pe acelasi rand. */
.xlg__a{ color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--xc-ink4); }
.xlg__a:hover{ color:var(--xc-ac); text-decoration-color:currentColor; }
.xlg__a:focus-visible{ color:var(--xc-ac); text-decoration-color:currentColor;
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:3px; }

/* ⚠⚠ PATRATUL RAMANE SI PE TELEFON. Prima varianta il ascundea sub 560 de
      container, pe temeiul notei din lotul 109 despre „Taiwan Semiconductor
      Manufacturing Co. Ltd.". Nota era despre altceva, si costul adevarat e
      mult mai mic decat am presupus. Masurat la 390px, pe fondul real:

        fara patrat   0 nume rupte pe doua randuri · lista 356px
        cu patrat     0 nume rupte pe doua randuri · lista 356px

      Adica zero. Abia cu numele lungi puse dinadins pe primele randuri apare
      o diferenta, si e de un singur rand:

        fara patrat   1 nume rupt din 3 · lista 374px
        cu patrat     2 nume rupte din 3 · lista 393px

      Patratul mai mic nu ajuta: 17px si 16px dau exact aceleasi 2 nume rupte
      si aceiasi 393px, deci alegerea e intre „logo" si „fara logo", nu intre
      marimi. Un nume pe doua randuri se citeste bine (vezi poza de la lot 117);
      o lista fara logouri pe telefon inseamna ca cititorul de pe telefon, adica
      majoritatea, nu primeste deloc lucrul cerut. */

/* ═══════════════════════════════════════════════════════════════════════════
   FOND <-> INDICE · randul de legatura                              LOT 119

   Acelasi rand in amandoua capitolele: patratul cu logo, numele, simbolul
   stins. Cand exista pagina, TOT randul e clicabil; cand nu, e acelasi rand,
   doar ca nu se apasa. Nimic nu sare de la o stare la alta.

   ⚠ NICIO MARIME DE TEXT NOUA. Numele ia `--xf-md`, simbolul `--xf-sm`,
     amandoua din aceeasi scara ca restul cardurilor.
   ═══════════════════════════════════════════════════════════════════════════ */

.xlf__l{ display:flex; flex-direction:column; gap:6px;
  margin:var(--xv-in) 0 0; }

/* ⚠⚠ RANDUL FARA PAGINA NU E PLIN, SI ASTA E DINADINS ALTFEL DECAT LA LISTELE
      DE COMPOZITIE. Acolo randul poarta o bara, un procent si o suma, iar
      numele e doar una dintre bucati, deci randurile trebuie sa arate la fel ca
      lista sa nu se zimteasca. Aici randul NU contine nimic altceva: el e
      butonul. Un dreptunghi plin pe toata latimea, care nu face nimic cand il
      apesi, e o promisiune mincinoasa, si cele mai multe randuri o sa fie asa
      multa vreme. Plin + sageata = se poate apasa. Contur = doar o informatie.
      Comparat pe trei variante randate, la 1440. */
.xlf__r{ display:flex; align-items:center; gap:0;
  padding:11px 13px; border-radius:var(--xr-c);
  background:transparent; box-shadow:inset 0 0 0 1px var(--mdsx-line-2);
  color:var(--xc-ink); text-decoration:none; }

/* ⚠ Patratul e mai mare aici decat in listele de compozitie, 24 fata de 20:
     acolo sta pe un rand de 8px inaltime, langa o bara si doua cifre, si orice
     peste 20 il ingrosa. Aici randul e singur si mai inalt, iar 20 aratau
     pierduti in el. Masurat la 1440 si la 390. */
.xlf__r .xlg__s{ width:24px; height:24px; border-radius:6px; margin-right:11px;
  font-size:11px; }

/* ⚠ `--xf-sm`, marimea numelor din listele de compozitie (`94-etf.css:101`).
     Prima varianta scria `--xf-md`, un nume pe care l-am inventat: scara temei
     e `--xt-1`..`--xt-8`, cu `--xf-sm` legat de `--xt-6`. Intr-un `font:`
     scurtat, o variabila nedefinita invalideaza TOATA declaratia, deci randul
     ar fi ramas cu fontul mostenit, fara nicio eroare nicaieri. Prins numarand
     variabilele folosite fata de cele definite, inainte de prima randare. */
.xlf__n{ font:600 var(--xf-sm)/1.3 var(--xf); letter-spacing:-.011em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xlf__s{ flex:none; margin-left:9px; font:400 var(--xf-sm)/1 var(--xf);
  font-style:normal; color:var(--xc-ink3); font-variant-numeric:tabular-nums; }

/* sageata de „se deschide in alta fila", numai pe randurile clicabile */
.xlf__i{ flex:none; width:15px; height:15px; margin-left:auto; padding-left:10px;
  box-sizing:content-box; color:var(--xc-ink4); }

.xlf__r--lk{ cursor:pointer; background:var(--mdsx-line-2); box-shadow:none;
  transition:background .15s ease, color .15s ease; }
.xlf__r--lk:hover{ background:var(--mdsx-line-3, var(--mdsx-line-2));
  color:var(--xc-ac); }
.xlf__r--lk:hover .xlf__i{ color:var(--xc-ac); }
.xlf__r--lk:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ⚠ Pe un singur rand, cardul nu are de ce sa fie o lista inghesuita: primeste
     aer si numele creste o treapta, fiindca e raspunsul intreg al capitolului. */
.xlf__l--unul .xlf__r{ padding:14px 15px; }
.xlf__l--unul .xlf__n{ font-size:var(--xt-5); }

@container mdsx (max-width:559px){
  .xlf__s{ display:none; }
}