/*
 * ======================================================================
 * ECRANUL ÎNGUST
 * ======================================================================
 *
 * Foaia asta nu desenează nimic. Ea doar ține tot ce desenează celelalte
 * înăuntrul ecranului, în orice modul și pe orice filă.
 *
 * ----------------------------------------------------------------------
 * DE CE MAI ERA NEVOIE DE EA
 *
 * În `app.css` era deja scris un capitol cu același rost — „Nimic nu se
 * duce la dreapta” — dar el a fost scris pe rând, câte o regulă pentru
 * fiecare stricăciune văzută cu ochii: grila de carduri, tabelul de
 * notificări, caseta de căutare. Fiecare regulă era bună; împreună nu
 * făceau o lege, ci o listă. Iar o listă rămâne mereu în urma modulelor
 * noi: Comunitățile, Calendarul, Webinariile s-au scris după ea și n-au
 * fost trecute în ea.
 *
 * Aici se scrie legea, o dată, pentru tot. Trei rânduri fac nouă zecimi
 * din treabă, iar restul foii sunt cele câteva locuri unde legea singură
 * nu ajunge.
 *
 * ----------------------------------------------------------------------
 * CE ANUME LĂȚEA PAGINA — ȘI DE CE NU SE VEDEA DE UNDE
 *
 * Aproape totdeauna, același lucru: **o cutie de grilă sau de flexie
 * căreia nu i s-a spus că are voie să se strângă.**
 *
 * O cutie așezată într-o grilă are din născare `min-width: auto`, adică
 * „nu te face niciodată mai mică decât ce ai înăuntru”. Înăuntru poate fi
 * un rând de zece pastile care se dă la o parte cu degetul — un rând care,
 * el, se descurcă foarte bine pe un ecran îngust. Dar cutia din jur nu
 * știe asta: ea cere lățimea rândului întreg, o cere de la coloana grilei,
 * coloana o cere de la pagină, și pagina se lățește. Se lățește **toată**,
 * cu tot ce mai era în ea — de aceea fișele comunităților ajungeau tăiate
 * de marginea ecranului, deși grila lor era scrisă cum trebuie.
 *
 * Vinovatul nu se vede niciodată în locul unde apare stricăciunea. De
 * aceea au fost vânate una câte una, ani la rând, fără să se termine.
 *
 * `min-width: 0` pe cutiile de așezare rupe lanțul chiar la prima verigă.
 */

/* ==========================================================================
 * 0. MĂRIMEA LITEREI SE IA DUPĂ ECRAN
 * ========================================================================== */

/*
 * `--fc-type` e mărimea de la care se socotesc **toate** literele din
 * plugin. Șaisprezece puncte pe ecran de calculator, cum a fost dintotdeauna;
 * pe ecrane înguste, mai puțin — și nu în trepte, ci lin, cu lățimea.
 *
 * ----------------------------------------------------------------------
 * CUM SE CITEȘTE RÂNDUL
 *
 * `clamp(cel-puțin, cât-ar-vrea, cel-mult)`. Mijlocul crește cu lățimea
 * ferestrei: `.35vw` înseamnă „încă o treime de punct la fiecare sută de
 * puncte de ecran”. Capetele îl opresc: sub 320 nu mai coboară, peste 914
 * nu mai urcă. Între ele, litera se schimbă la fiecare punct de lățime, nu
 * la câteva praguri — deci nu există lățimea aceea nefericită, cu un punct
 * înaintea pragului, unde totul e cu o idee prea mare.
 *
 *   320 de puncte lățime → 13.9    (un telefon mic)
 *   412                  → 14.2    (un telefon obișnuit)
 *   768                  → 15.5    (o tabletă)
 *   914 și peste         → 16      (cum a fost)
 *
 * Fiecare mărime scrisă în foile pluginului se socotește din ea:
 * `font-size: calc(14 / 16 * var(--fc-type))` în loc de `font-size: 14px`.
 * Cifra dintâi rămâne la vedere — se citește tot „paisprezece” — iar
 * împărțirea la șaisprezece spune față de ce. Pe ecran lat iese exact
 * paisprezece, ca înainte; pe telefon, cu o zecime mai mic.
 *
 * ----------------------------------------------------------------------
 * DE CE O SINGURĂ MĂSURĂ ȘI NU `rem`
 *
 * `rem` se socotește din litera rădăcină a paginii, care e a temei
 * WordPress, nu a noastră. O temă care o pune la 15 puncte, sau un om care
 * și-a mărit litera din browser, ne-ar fi schimbat toate așezările fără
 * să știm de unde. `--fc-type` e a pluginului: se schimbă numai de aici.
 *
 * Ce nu se atinge: mărimile scrise în `em`, care se socotesc din litera de
 * lângă ele și se micșorează deci singure, odată cu ea. Și cele sub
 * unsprezece puncte, care erau deja alese ca fiind cele mai mici cu
 * putință — micșorate încă o dată, s-ar fi ghicit, nu citit.
 */
:root {
	--fc-type: clamp(13.92px, calc(12.8px + .35vw), 16px);
}

/*
 * ----------------------------------------------------------------------
 * ȘI MĂRIMILE ALESE DIN ASPECT
 *
 * Cele opt mărimi pe care le alege administratorul — textul, cartonașul,
 * butonul, pastila, câmpul, meniul — sunt scrise de PHP, în `EDUMAG_Theme`,
 * și acolo au primit aceeași strâmtorare, fiecare socotită din valoarea ei.
 * Alegerea rămâne a administratorului; ecranul îngust doar o ține în frâu.
 */

/* ==========================================================================
 * 1. CUTIILE DE AȘEZARE AU VOIE SĂ SE STRÂNGĂ
 * ========================================================================== */

/*
 * Regula se dă numai cutiilor care așază — nu și butoanelor, câmpurilor,
 * semnelor sau imaginilor. Deosebirea nu e de fală: un buton strâns sub
 * lățimea lui își rupe vorba în două, iar un semn strâns se turtește. Ele
 * își cer lățimea pe drept. Un `<div>` care ține alte cutii nu.
 *
 * `:where()` nu cântărește nimic, deci orice `min-width` scrisă anume,
 * oriunde în plugin, rămâne mai tare decât rândul acesta. Legea spune
 * „poți să te strângi”, nu „strânge-te”: cine are un temei să nu se
 * strângă și l-a scris, își ține temeiul.
 */
.fclms-app :where(div, section, article, aside, main, nav, header, footer,
	form, fieldset, ul, ol, li, dl, dd, p, figure, details),
.fclms-modal :where(div, section, article, aside, main, nav, header, footer,
	form, fieldset, ul, ol, li, dl, dd, p, figure, details),
.fca :where(div, section, article, aside, main, nav, header, footer,
	form, fieldset, ul, ol, li, dl, dd, p, figure, details),
.fclms-panel-wrap :where(div, section, article, aside, main, nav, header,
	footer, form, fieldset, ul, ol, li, dl, dd, p, figure, details) {
	min-width: 0;
}

/*
 * Perechea rândului de mai sus, pentru cutiile care se așază pe verticală
 * — coloane de grilă înalte, casete cu derulare înăuntru. Aceeași poveste,
 * doar întoarsă: fără ea, o listă lungă dintr-o casetă cu derulare împinge
 * caseta în jos în loc să se deruleze în ea.
 */
.fclms-app :where(.fclms-grid, [class$="__scroll"], [class*="__scroll "]) {
	min-height: 0;
}

/* ==========================================================================
 * 2. NIMIC NU DEPĂȘEȘTE LOCUL PRIMIT
 * ========================================================================== */

/*
 * Plasa de dedesubt. Legea de sus face să încapă; rândurile astea se
 * asigură că, dacă o cutie tot cere prea mult, cere pe seama ei, nu a
 * paginii.
 *
 * Nu se taie nimic cu `overflow: hidden`. O tăiere ascunde conținutul în
 * loc să-l facă să încapă, și ar fi prins sub ea și lucrurile lipite de
 * fereastră care trăiesc înăuntrul aplicației — sertarul de pe telefon,
 * ferestrele, bara din ecran complet.
 */
.fclms-app,
.fclms-modal { max-width: 100%; }

/*
 * Și copiii de-a dreptul ai aplicației, care până acum se sprijineau doar
 * pe buna-credință a fiecărei foi de modul.
 *
 * Straturile plutitoare fac excepție și e scris de ce: în ecran complet
 * ele se mută înăuntrul aplicației (vezi `seat` din `editor.js`), unde ar
 * fi căzut sub regula asta. Un strat plutitor își măsoară lățimea de la
 * fereastră, nu de la cutia în care s-a nimerit să stea.
 */
.fclms-app > *:not(.fclms-float) { max-width: 100%; }

/* Ce vine din afară — poze, filme, cadre, hărți — se strânge la lățimea
   locului. Doar lățimea: o poză cu măsuri scrise în pagină și-ar pierde
   raportul dacă i s-ar atinge amândouă. */
.fclms-app :where(img, video, canvas, iframe, embed, object),
.fclms-modal :where(img, video, canvas, iframe, embed, object) {
	max-width: 100%;
}

/* Semnele fac excepție: ele își iau măsura din litera de lângă ele și n-au
   ce căuta în socoteala de mai sus. */
.fclms-app .fclms-i,
.fclms-modal .fclms-i { max-width: none; }

/* ==========================================================================
 * 3. TABELELE SE DAU LA O PARTE CU DEGETUL
 * ========================================================================== */

/*
 * Un tabel nu se rupe pe rânduri ca un text: cere cât îi trebuie și, dacă
 * nu are, iese. Sunt două căi, și amândouă se folosesc, după caz.
 *
 * Cele câteva tabele late din fire — facturile, matricea de drepturi —
 * și-au primit de mult învelișul lor cu derulare, scris de mână acolo unde
 * era nevoie. Restul, adică cele mai multe, n-au niciunul: `narrow.js`
 * le pune unul, dar numai celor care chiar nu încap, și numai o dată.
 *
 * Învelișul se derulează în el, cu tabelul întreg înăuntru. Alternativa —
 * strâns cu de-a sila la lățimea ecranului — face din opt coloane opt
 * fâșii de câte trei litere, adică un tabel pe care nu-l mai poate citi
 * nimeni. Mai bine unul care se împinge cu degetul.
 */
.fclms-scrollx {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	/* Fără el, un tabel cu un rând de butoane la coadă își taie umbra
	   butonului apăsat de marginea învelișului. */
	padding-bottom: 2px;

	/*
	 * Semnul că mai e ceva dincolo de margine: o umbră subțire lipită de
	 * marginea din dreapta a învelișului. Nu se mișcă și nu se socotește
	 * nimic pentru ea — stă acolo, iar fundalul tabelului o acoperă când
	 * derularea a ajuns la capăt. Cine n-o vede n-a pierdut nimic:
	 * derularea merge la fel.
	 */
	background: linear-gradient(to right, transparent 88%, rgba(0, 0, 0, .07) 100%)
		right center / 24px 100% no-repeat;
}

.fclms-scrollx > .fclms-table { margin-bottom: 0; }

/*
 * Semnul de măsurat, pus și luat de `narrow.js` într-o clipă, între două
 * așezări ale paginii. Nu se vede niciodată: cât e pus, browserul n-a
 * apucat încă să deseneze nimic.
 *
 * `min-content` e lățimea sub care celulele nu se mai pot strânge deloc —
 * cea mai lungă vorbă din fiecare coloană, una lângă alta. Dacă tabelul nu
 * are nici atât, e strivit, nu strâmtorat, și primește înveliș.
 */
.fclms-scrollx-probe {
	width: min-content !important;
	max-width: none !important;
	min-width: 0 !important;
	table-layout: auto !important;
}

/* ==========================================================================
 * 4. LOCURILE UNDE LEGEA SINGURĂ NU AJUNGE
 * ========================================================================== */

/*
 * Cele câteva casete cărora li s-a scris anume o lățime cea mai mică în
 * puncte, ca să nu se înghesuie pe ecran mare. Pe ecran mare o cer mai
 * departe; pe telefon renunță la ea.
 *
 * Se scriu cu numele lor, nu cu o regulă care le prinde pe toate deodată:
 * o astfel de regulă ar fi turtit și tabelele late din învelișurile lor cu
 * derulare, unde lățimea cerută e tocmai ce le ține citibile.
 *
 * `min(…, 100%)` în loc de `0`: pe un ecran de 700 de puncte caseta își
 * ține măsura ei, pe unul de 320 se dă bătută. Un singur rând pentru
 * amândouă, în loc de două praguri de ecran.
 */
.fclms-app .fclms-mediagrid { min-width: min(460px, 100%); }
.fclms-app .fclms-rights__pick { min-width: min(150px, 100%); }
.fclms-app .fclms-report-filter .fclms-field { min-width: min(160px, 100%); }
.fclms-app .fclms-modpanel__do input[type="text"] { min-width: min(160px, 100%); }
.fclms-app .fclms-tablefilter .fclms-field:first-child { min-width: min(180px, 100%); }
.fclms-app .fclms-tablefilter .fclms-field + .fclms-field { min-width: min(160px, 100%); }
.fclms-app .fclms-study__actions .fclms-btn--big { min-width: min(168px, 100%); }

/*
 * Rândul unei cutii Leitner din Statistici: 150 de puncte pentru nume, 60
 * cei mai puțini pentru bară, 40 pentru cifră, plus două coloane de
 * mărimea conținutului și patru spații de câte 14. Fac peste 320 de puncte
 * cerute cu japca, adică mai mult decât rămâne dintr-un telefon după ce se
 * scad marginile casetei.
 *
 * Sub prag, numele urcă pe rândul lui și bara rămâne singură dedesubt, cu
 * cifrele la coadă. Nimic nu se ascunde — doar se așază pe două rânduri.
 */
@media (max-width: 600px) {
	.fclms-app .fclms-pbox {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 6px 10px;
	}

	.fclms-app .fclms-pbox__name { grid-column: 1 / -1; }
	.fclms-app .fclms-pbox__track { grid-column: 1; }
}

/* Grila de două coloane din fereastra de ales itemi: 180 plus 220 plus
   spațiul dintre ele fac 416 de puncte cerute cu japca, adică mai mult
   decât are un telefon. Sub prag, cele două liste stau una sub alta. */
@media (max-width: 640px) {
	.fclms-app .fclms-asm-pick,
	.fclms-modal .fclms-asm-pick {
		grid-template-columns: minmax(0, 1fr);
		max-height: none;
	}
}

/* ==========================================================================
 * 5. RÂNDURILE DE FILE ȘI DE PASTILE SE RUP, NU SE DERULEAZĂ
 * ========================================================================== */

/*
 * Un rând de file care nu încape avea până acum două purtări, după loc:
 * ori se rupea pe mai multe rânduri, ori se dădea la o parte cu degetul.
 * A doua se scoate peste tot.
 *
 * Nu fiindcă ar fi greu de folosit, ci fiindcă **nu se vede**. Un rând
 * care se derulează arată exact ca unul întreg, doar tăiat de marginea
 * ecranului: „Clasament gener…”. Nimic nu spune că mai e ceva dincolo, iar
 * cine nu știe că poate trage cu degetul de rândul acela nu află niciodată
 * că există o a treia filă. O filă pe care n-o vede nimeni e o filă care
 * nu există.
 *
 * Rupt pe două rânduri, se vede tot. Costă douăzeci de puncte de înălțime
 * — o dată, sus, unde oricum e loc — și nu ascunde nimic.
 *
 * Regulile de mai jos nu adaugă `flex-wrap: wrap` unde el lipsea din
 * scăpare: acolo l-a pus punctul 1. Ele scot `nowrap` și derularea scrise
 * anume, în cele patru locuri unde au fost scrise anume.
 */

/* --- rândul rubricilor din antetul aplicației --------------------------- */

/*
 * „Statistici / Clasament general / Clasament pe comunitate” la Progres,
 * „Premium / Cartonașele mele / Partajate cu mine” la Cartonașe. Sunt
 * urcate în antet de `app-shell.js` și se derulau într-o fâșie.
 *
 * Îndreptarea nu e scrisă aici, ci în `app-shell.css`, în blocul ei de sub
 * 1024, lângă regula pe care o schimbă. Și e scrisă acolo din nevoie, nu
 * din bunăvoință:
 *
 * `app-shell.css` nu atârnă de foaia asta, ci numai de `app.css`. WordPress
 * n-are, deci, niciun temei să o pună înaintea noastră, și de cele mai
 * multe ori o pune după. Scrisă aici, cu aceeași greutate de selector,
 * regula noastră pierdea la numărătoarea de la urmă — cea în care, la
 * greutăți egale, câștigă cine e scris ultimul. Se vedea limpede: rândul
 * de file de deasupra se rupea cum trebuie (regula lui e tot în
 * `app-shell.css`), iar cel de dedesubt se derula mai departe.
 *
 * Se putea și cu o greutate mai mare — `.fca .fca-rail__slot` — dar aceea
 * ar fi fost o victorie luată cu japca într-o întrecere pe care n-o vede
 * nimeni, și ar fi lăsat în `app-shell.css` o regulă moartă, care spune
 * altceva decât se întâmplă. Îndreptată la ea acasă, foaia spune adevărul.
 */

/* --- categoriile comunităților ----------------------------------------- */

/*
 * Pe telefon, coloana din stânga a Comunităților se culca într-un rând care
 * se derula. Unsprezece categorii, din care se vedeau două și jumătate.
 *
 * Acum se rup pe câte rânduri au nevoie, ca un buchet de etichete. Pastila
 * își ține lățimea ei — `flex: 0 1 auto` — deci una scurtă nu se întinde
 * cât rândul, iar una lungă se poate strânge dacă altfel ar rămâne singură.
 */
@media (max-width: 859px) {
	.fclms-mod-comunitate .fclms-com-spaces {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 4px;
	}

	.fclms-mod-comunitate .fclms-com-space {
		flex: 0 1 auto;
	}

	/*
	 * Numele nu se mai taie cu trei puncte: într-un rând care se derula,
	 * tăierea ținea pastilele de aceeași măsură; într-un buchet care se
	 * rupe, ea ar ascunde tocmai cuvântul după care se alege.
	 */
	.fclms-mod-comunitate .fclms-com-space__name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/* --- rândurile de sub-file din panou și din module ---------------------- */

/*
 * `fit.css` le pune să se deruleze când cutia panoului e strâmtă. Motivul
 * scris acolo — „un rând de opt pastile rupt ar ocupa un sfert de ecran” —
 * ținea pentru un panou de administrare înalt cât fereastra. Pe telefon nu
 * ține: acolo un sfert de ecran e mai ieftin decât o filă nevăzută.
 */
@media (max-width: 860px) {
	.fclms-app .fclms-subtabs,
	.fclms-panel-wrap .fclms-subtabs {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 5px;
	}
}

/* ==========================================================================
 * 6. FERESTRELE PE TELEFON
 * ========================================================================== */

/*
 * O fereastră lipită de marginile ecranului nu se mai citește ca o
 * fereastră, ci ca o pagină nouă — și, mai rău, nu se mai vede pe unde se
 * apasă ca să se închidă. Rămâne o palmă de întuneric de jur împrejur.
 */
@media (max-width: 560px) {
	.fclms-modal-back { padding: 12px; box-sizing: border-box; }
	.fclms-modal { padding: 18px 16px; max-height: 86vh; }
	.fclms-modal__head h2 { font-size: var(--fc-h2); }

	/*
	 * Butoanele din subsolul ferestrei se întind pe rândul întreg. Două
	 * butoane înghesuite la un capăt, pe un ecran de patru sute de
	 * puncte, se apasă unul în locul celuilalt — iar unul dintre ele e,
	 * de obicei, „Șterge”.
	 */
	.fclms-modal__foot { flex-wrap: wrap; gap: 8px; }
	.fclms-modal__foot .fclms-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
 * 7. RÂNDURILE DE UNELTE
 * ========================================================================== */

/*
 * Orice rând de unelte se rupe pe mai multe rânduri când nu încape. Era
 * scris pentru bara de sus și pentru câteva rânduri anume; se scrie acum
 * pentru toate, fiindcă un rând de butoane care nu se rupe e o stricăciune
 * indiferent în ce modul se întâmplă.
 *
 * Nu se atinge nimic din ce se derulează anume — filele, rândurile de
 * pastile de mai sus: acolo `nowrap` e o alegere, nu o scăpare, iar ele
 * își spun numele.
 */
@media (max-width: 860px) {
	.fclms-app :where(.fclms-toolbar, .fclms-row, .fclms-box-row, .fclms-com-tools,
		.fclms-grp-head, .fclms-modal__foot, .fclms-card__head, .fclms-actions) {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
 * 8. CE NU SE FACE AICI
 * ==========================================================================
 *
 * Nu se ascunde nimic sub un prag de ecran. O coloană ștearsă pe telefon e
 * o informație pe care cineva o caută și n-o găsește, fără să afle
 * vreodată că i-a fost luată. Ce nu încape coboară, se rupe sau se
 * micșorează puțin — dar rămâne.
 *
 * Nu se strâng literele **ca să încapă ceva anume**. Micșorarea de la
 * punctul 0 e o singură măsură, aceeași pentru toată aplicația, socotită
 * din lățimea ecranului și oprită la 87 la sută. Ea nu se pune vreodată pe
 * o casetă anume ca s-o facă să intre: aceea e calea prin care un tabel
 * ajunge scris cu litere de nouă puncte, iar ecranul mic e tocmai cel
 * ținut cel mai departe de ochi, într-un autobuz, cu o mână.
 *
 * Nu se pune `overflow-x: hidden` pe `body`. Ascunde stricăciunea și
 * omoară derularea lipită — bara din ecran complet, capul de tabel lipit,
 * coloana din stânga a comunității nu s-ar mai fi lipit de nimic.
 */