/* ============================================================================ 90-tooltip.css · UN SINGUR FEL DE TOOLTIP PE TOATA PAGINA ⚠⚠ CERUT, dupa un inventar facut pe pagina randata: cele 145 de iconite „i" din noua sectiuni se deschideau in trei feluri diferite. Acum: pe MOBIL bloc in flux, pe latimea randului, care IMPINGE continutul pe DESKTOP fereastra ancorata langa iconita, stransa in ecran ⚠⚠ FISIER DE SUPRASCRIERE, nu de rescriere. Fiecare sectiune isi pastreaza regulile ei de deschidere (`.NS__rt:checked ~ .NS__tip{display:block}`) si tipografia ei. Aici se schimba NUMAI geometria, si numai acolo unde se abate de la fel. Asa nu se atinge niciun fisier de sectiune si nu se poate strica ce merge deja. ⚠⚠ SE INCARCA ULTIMUL. `01-css-sectiuni.php` face `glob`, care intoarce sortat, iar `90-` vine dupa `56-forensic.css`. Ordinea asta NU e un amanunt: regulile sectiunilor sunt la (0,3,0) (`.xaf__rt:checked ~ .xaf__tip`), iar VARIANTELE lor sunt la (0,4,0) (`.xrs__rt:checked ~ .xrs__tip.xrs__tip--r`, la fel la Piata). Masurat: cu (0,3,0) exact acele doua sectiuni ramaneau pe vechiul comportament. De aia clasa e repetata de patru ori, `.mdsx .x-tip.x-tip.x-tip.x-tip` = (0,5,0): trece peste oricare dintre ele fara sa depinda de ordinea fisierelor. Nu se pune `!important` nicaieri, in afara unui singur loc, marcat. ⚠ CLASELE `x-tip` si `x-tipx` SUNT PUSE IN MARCAJ, langa cele de sectiune: 14 tooltipuri si 14 inchizatoare, in zece fisiere. Un selector care enumera namespace-urile ar fi mers si el, dar ar fi tacut in ziua in care apare al unsprezecelea. ============================================================================ */ /* ══ MOBIL ═════════════════════════════════════════════════════════════════ Mecanismul era deja bun aproape peste tot: bloc in flux, care impinge continutul. Se indreapta doua feluri de abateri, amandoua masurate. */ /* ⚠⚠ ABATEREA 1 · SUMAR DATE PLUTEA PESTE CONTINUT. `.xhd__tip` era `position:absolute; top:calc(100% - 4px)`, deci acoperea randurile de sub el in loc sa le impinga - masurat, „Volum" ramanea pe jumatate ascuns. Era singurul din pagina care facea asta. */ .mdsx .x-tip.x-tip.x-tip.x-tip{ position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; } .mdsx .xhd__tr:checked ~ .x-tip.xhd__tip{ margin-top:8px; } /* ⚠⚠ ABATEREA 2 · CINCI SECTIUNI IL STRANGEAU INTR-O CASUTA DE 162px. La Flux, Forensic, Dividende, Riscuri si Piata explicatia se deschide intr-o casuta dintr-o grila de doua coloane: masurat la 390px, 130px latime si 9 randuri la Flux, 16 la Forensic. Pe langa asta, casuta vecina ramanea goala. Cand se deschide, casuta se intinde pe tot randul, deci textul capata aceeasi latime ca in restul paginii. ⚠⚠ RISCURI SI PIATA AU INTRAT IN LISTA ABIA LA A DOUA MASURATOARE: ele au si randuri largi, si casute inguste, iar prima trecere, care lua o iconita pe sectiune, a prins numai randul. De aia verificarea deschide FIECARE dintre cele 155 de iconite, nu un esantion. ⚠ `:has()` e deja folosit in tema pe aceleasi pagini (`13-indicatoare.css`, `34-financiare.css`). Fara el, ramane comportamentul de azi: ingust, dar nu stricat. ⚠ NUMAI PE MOBIL. Pe desktop fereastra pluteste oricum, deci casuta n-are de ce sa se mai intinda - vezi blocul de desktop de mai jos. */ .mdsx .xfx__tri .xfx__c:has(.xfx__rt:checked), .mdsx .xfr__tri .xfr__c:has(.xfr__rt:checked), .mdsx .xdv__tri .xdv__c:has(.xdv__rt:checked), .mdsx .xrs__tri .xrs__c:has(.xrs__rt:checked), .mdsx .xpm__tri .xpm__c:has(.xpm__rt:checked){ grid-column:1 / -1; } /* ══ DESKTOP · FEREASTRA ANCORATA DE ICONITA ═══════════════════════════════ ⚠⚠ CERUT, dupa ce prima incercare a fost respinsa: fereastra trebuie sa apara IN ZONA iconitei apasate, nu centrata pe ecran, si FARA fundal intunecat. Varianta centrata cu voal a fost stearsa din fisierul asta; daca cineva o reface, s-a mai incercat si nu se vrea. ⚠⚠ ASEZAREA O FACE `mds-xdp.js`, SI NU DIN CAPRICIU. O fereastra ancorata trebuie sa faca doua lucruri pe care CSS-ul singur nu le poate face: sa stie unde e iconita apasata, si sa nu treaca de marginea ecranului cand iconita e langa ea. Scriptul citeste pozitia declansatorului, aseaza fereastra sub el si o strange intre marginile ecranului. ⚠⚠ FARA JAVASCRIPT NU SE STRICA NIMIC: scriptul e cel care pune `is-pop`, iar regulile de mai jos atarna de clasa aia. Fara ea, explicatia ramane bloc in flux si pe desktop, adica exact varianta de mobil. Degradare, nu pana. ⚠ `--x-pop:1` E CONTRACTUL DINTRE CSS SI SCRIPT. Pragul de desktop e o interogare de CONTAINER (`.mdsx`), nu de fereastra, deci scriptul n-ar fi putut sa-l reproduca dintr-un `matchMedia` fara sa se poata desincroniza. Asa intreaba chiar CSS-ul: daca proprietatea e 1, suntem pe desktop. */ @container mdsx (min-width:900px){ .mdsx .x-tip{ --x-pop:1; } /* ⚠ Fundalul ramane INVIZIBIL, dar ramane: e mecanismul prin care o apasare oriunde in afara ferestrei o inchide. Doar voalul negru a plecat. */ .mdsx .x-tipx.x-tipx{ z-index:60; background:none; cursor:default; } /* ⚠⚠ BUTONUL DE INCHIDERE E IN FEREASTRA, in coltul din dreapta sus, si e un ELEMENT PROPRIU: `