/* ===========================================================================
   FLASHCARDS LMS — PAGINA UNUI MODUL

   Foaia aceasta ține doar ce s-a ivit odată cu împărțirea pe module: fâșia
   subțire de deasupra paginii și caseta modulelor care încă se scriu. Restul
   — cardurile, butoanele, tabelele — rămâne cum a fost, în `app.css`: un
   modul nu e un alt fel de aplicație, e aceeași aplicație pe altă pagină.

   DE CE O FOAIE DEOSEBITĂ

   Ca să se vadă, peste un an, ce a adus împărțirea pe module și ce era acolo
   dinainte. Amestecate în cele nouă mii de rânduri ale foii mari, rândurile
   de mai jos s-ar fi pierdut, iar cine ar fi vrut să scoată fâșia de sus ar
   fi trebuit s-o caute prin toată gazda.
   =========================================================================== */

/* =================================================== BARA DIN ANTETUL TEMEI

   NU E UN MENIU ȘI NU MAI E O FÂȘIE

   Până în 8.4.3, lucrurile de mai jos stăteau într-o fâșie proprie, desenată
   de aplicație deasupra fiecărui modul: `.fclms-modbar`. Fâșia a plecat cu
   totul. Pe o pagină care are deja antetul temei deasupra ei, o a doua fâșie
   cu poza și numele tău arăta tot a antet, oricât de subțire ar fi fost.

   Acum aceleași patru lucruri se pun o singură dată, în antetul temei, cu
   `[fclms_antet]`. De aici vin și cele două deosebiri de croială:

   SE AȘAZĂ ÎN RÂND, NU PE UN RÂND AL EI. `inline-flex`, nu `flex`: bara
   trebuie să încapă lângă meniul temei și lângă butonul de intrare, ca orice
   alt lucru din antet. Un `flex` ar fi cerut lățimea întreagă și ar fi împins
   meniul temei pe rândul de dedesubt.

   N-ARE NICIO LINIE ȘI NICIO MARGINE. Fâșia avea o linie sub ea, fiindcă
   despărțea două lucruri ale noastre. Aici nu desparte nimic: antetul își are
   liniile lui, iar una în plus, trasă de un plugin printre ele, ar fi arătat a
   greșeală de așezare.
   =========================================================================== */

.fclms-headbar {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	vertical-align: middle;
	max-width: 100%;
	/* Bara stă și în antetul temei, pe paginile site-ului: fără rândul
	   acesta, numele și punctele ar fi purtat litera temei, iar butonul
	   de lângă ele pe a aplicației. */
	font-family: var(--fc-font);
	font-size: var(--fc-bar);
}

/*
 * Fontul rămâne al temei. Bara stă printre lucrurile antetului, iar un scris
 * deosebit de al lor ar fi arătat lipit de altundeva. Mărimile și grosimile,
 * în schimb, sunt ale noastre: ele fac cele patru piese să se potrivească una
 * cu alta, oricât de mare ar fi scrisul din jur.
 */
.fclms-headbar__user {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 12px 5px 5px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-paper);
	color: var(--fc-ink);
	text-decoration: none;
	font-size: var(--fc-bar);
	font-weight: 700;
	line-height: 1;
	max-width: 100%;
	transition: box-shadow .15s ease, transform .15s ease;
}

/*
 * Temele scriu culorile legăturilor apăsat, adesea cu `!important`, iar o
 * carte de vizită albastră-subliniată în mijlocul antetului ar fi arătat a
 * text scăpat din pagină. Se scriu toate stările, ca niciuna să nu rămână pe
 * seama temei.
 */
.fclms-headbar__user,
.fclms-headbar__user:hover,
.fclms-headbar__user:focus,
.fclms-headbar__user:active,
.fclms-headbar__user:visited {
	color: var(--fc-ink);
	text-decoration: none;
}

.fclms-headbar__user:hover {
	transform: translateY(-1px);
	box-shadow: var(--fc-shadow-lift);
}

.fclms-headbar__user:focus-visible {
	outline: none;
	box-shadow: var(--fc-ring);
}

.fclms-headbar__face {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: block;
	flex: 0 0 auto;
}

/*
 * Numele lung se taie, nu se rupe în două rânduri: antetul trebuie să rămână
 * de o singură înălțime, altfel tot ce e sub el sare de la o pagină la alta,
 * după cum se cheamă omul conectat.
 */
.fclms-headbar__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 22ch;
}

/* ---------------------------------------------------- pastila punctelor

   AURUL NU MAI ÎMPRUMUTĂ CULOAREA ANTETULUI

   Pastila era zugrăvită cu aur subțiat — `rgba(accent, .16)` spre `.22` —
   fiindcă în aplicație stă pe hârtie albă, unde subțiat înseamnă auriu palid.
   În antetul temei, sub ea nu mai e hârtie albă, ci culoarea antetului tău. Pe
   un antet turcoaz, aurul subțiat lăsa turcoazul să răzbată și ieșea verde
   măsliniu: #8FBEAF, adică nici aur, nici turcoaz.

   Aici fundalul e deci opac. Degradeul se așază peste hârtia aplicației, scrisă
   ca strat de dedesubt în aceeași proprietate, așa că pastila arată la fel pe
   orice antet — turcoaz, alb, fotografie.

   Și e mai apăsat decât cel din aplicație: `.24` spre `.42` în loc de `.16`
   spre `.22`. Palidul avea înțeles pe alb, unde orice urmă de galben se vede;
   printre culorile tari ale unui antet, aceeași urmă s-ar fi pierdut. Capătul
   închis s-a oprit la `.42` fiindcă mai jos cifra #7A5A00 scade sub pragul de
   lizibilitate: 4,57 la `.42`, 4,27 la `.50`.
   ----------------------------------------------------------------------- */

.fclms-headbar .fclms-points {
	background:
		linear-gradient(135deg, rgba(var(--fc-accent-rgb), .24), rgba(var(--fc-accent-rgb), .42)),
		var(--fc-paper);
	border-color: rgba(var(--fc-accent-rgb), .55);
	color: #7A5A00;
}

.fclms-headbar .fclms-points--link,
.fclms-headbar .fclms-points--link:hover,
.fclms-headbar .fclms-points--link:focus,
.fclms-headbar .fclms-points--link:active,
.fclms-headbar .fclms-points--link:visited { color: #7A5A00; }

.fclms-headbar .fclms-points--link:hover { transform: translateY(-1px); }

.fclms-headbar .fclms-points--link:focus-visible {
	outline: none;
	box-shadow: var(--fc-ring);
}

/*
 * SUBLINIEREA VENITĂ DIN TEMĂ
 *
 * Cele trei bucăți ale barei sunt legături adevărate, deci temele le zugrăvesc
 * ca pe orice altă legătură din antet: subliniate, adesea cu `!important` sau
 * dintr-un selector mai apăsat decât al nostru. Ieșeau o carte de vizită și o
 * pastilă cu numele și cifra subliniate pe dedesubt, ca un text scăpat din
 * pagină.
 *
 * `!important` se scrie aici ca să oprească o regulă venită din afară, nu ca
 * să adauge una nouă — același motiv pentru care apare și în stratul întunecat.
 */
.fclms-headbar a,
.fclms-headbar a:hover,
.fclms-headbar a:focus,
.fclms-headbar a:active,
.fclms-headbar a:visited { text-decoration: none !important; }

/*
 * Butonul de ecran complet își împingea singur locul cu `margin-left: auto`,
 * fiindcă în bara de odinioară stătea la capătul unui rând lung. Aici nu mai e
 * niciun rând lung: împingerea l-ar fi rupt de grupul din care face parte.
 */
.fclms-headbar .fclms-fs {
	margin-left: 0;
	height: 36px;
	font-size: var(--fc-bar);
}

/*
 * ECRANUL COMPLET, NUMAI CU SEMNUL
 *
 * În aplicație butonul își poartă cuvântul: acolo stă într-un rând al nostru,
 * cu loc destul. În antet stă lângă meniul temei, iar „Ecran complet” e cel
 * mai lat lucru din toată bara — pe un ecran de laptop împingea meniul pe
 * rândul de dedesubt tocmai când abia încăpea.
 *
 * Cuvântul rămâne în `title` și în `aria-label`, deci se vede la trecerea cu
 * mausul și se aude la cititorul de ecran. Eticheta scrisă rămâne în pagină,
 * ascunsă: scriptul o schimbă în „Ieși din ecran complet” la intrare, iar
 * căutarea lui n-are de ce să dea peste gol.
 */
.fclms-headbar .fclms-fs--icon {
	width: 36px;
	padding: 0;
	justify-content: center;
}

.fclms-headbar .fclms-fs--icon .fclms-fs__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * BULINA DE CONT
 *
 * Numai poza, rotundă, cât clopoțelul de lângă ea. Numele omului nu spune
 * nimic celui care îl poartă — el știe cine e — dar mănâncă între zece și
 * douăzeci de caractere de lățime, adică exact cât îi trebuie meniului temei
 * ca să încapă pe un rând. Cine are loc îl cere înapoi cu `nume="da"`.
 */
.fclms-headbar__user--dot {
	padding: 3px;
	gap: 0;
}

.fclms-headbar__user--dot .fclms-headbar__face {
	width: 32px;
	height: 32px;
}

/*
 * Bara vizitatorului n-are decât ușa. Fără marginile din jur, butonul de
 * intrare stă în antet exact ca oricare alt buton al temei — care e chiar
 * ce era înainte, când shortcode-ul se punea de mână alături.
 */
.fclms-headbar--out {
	gap: 0;
}

/*
 * Pe telefon rămân numai semnele. Antetul unei teme are acolo, de obicei, un
 * logo și o clapă de meniu, iar un nume întreg plus cuvântul „Ecran complet”
 * le-ar fi împins pe amândouă afară din ecran.
 */
@media (max-width: 640px) {
	.fclms-headbar { gap: 6px; }
	.fclms-headbar__name { display: none; }
	.fclms-headbar__user { padding: 4px; }
	.fclms-headbar .fclms-fs { padding: 0 10px; }
	.fclms-headbar .fclms-fs--icon { padding: 0; }
}

/* ------------------------------------------------- hârtia, până la margini */

/*
 * CONȚINUTUL ÎN COLOANĂ, HÂRTIA DE LA UN CAPĂT LA ALTUL
 *
 * Aplicația era un card: hârtie albă cu colțuri rotunjite, așezată în
 * mijlocul paginii, cu marginile temei de o parte și de alta. Sub un antet
 * lat, colorat, cardul arăta ca o foaie pusă peste site, nu ca partea lui
 * de dedesubt — iar cele două colțuri de sus, rotunjite, spuneau limpede
 * „aici începe altceva”.
 *
 * Acum hârtia se întinde cât fereastra, iar conținutul își ține lățimea de
 * până acum: rândurile de dinăuntru au fiecare `max-width` și margini
 * automate, așa că se centrează singure în hârtia lățită. Nu s-a mutat
 * nimic din ce se citește; s-a lățit doar ce e sub el.
 *
 * DE CE NU SIMPLU `100vw`
 *
 * Fiindcă `100vw` numără și bara de derulare, care nu e parte din pagină.
 * Diferența e de vreo cincisprezece pixeli — destul cât să apară o bară de
 * derulare pe orizontală, adică exact stricăciunea pe care nimeni n-o
 * bănuiește de la o lățire de fundal. Lățimea adevărată o măsoară browserul
 * și o scrie în `--fc-bleed`; `100vw` rămâne dedesubt, ca plasă, pentru
 * clipa dinaintea primei măsurători.
 *
 * ----------------------------------------------------------------------
 * DE CE NU `50% - var(--fc-bleed) / 2`, CUM ERA SCRIS
 *
 * Fiindcă `50%` se socotește din **cutia părinte**, nu din fereastră.
 * Formula aceea iese zero — adică exact ce trebuie — numai dacă părintele e
 * lat cât fereastra. Când nu e, ea nu se face zero: se face negativă cu
 * jumătate din diferență, și trage hârtia afară din ecran, la stânga.
 *
 * Cu un părinte de 875 de puncte într-o fereastră de 1900:
 *
 *     50% din 875 = 437;   1900 / 2 = 950;   437 − 950 = −513
 *
 * Cinci sute treisprezece puncte de conținut, mutate dincolo de marginea
 * din stânga a ferestrei, de unde nu se pot nici citi, nici ajunge:
 * derularea merge spre dreapta, nu înapoi. Iar `narrow.css`, care se scrie
 * ultima și pune `max-width: 100%` pe orice `.fclms-app`, tăia și lățimea —
 * așa că din hârtie rămânea o fâșie, mutată la stânga *și* scurtată.
 *
 * În camerele obișnuite părintele chiar e lat cât fereastra, formula ieșea
 * zero și totul părea în regulă. De aceea a stat ascunsă: greșeala nu e în
 * cameră, e în ipoteza despre cine ține camera în brațe.
 *
 * Se măsoară acum unde ar sta cutia dacă n-ar avea nicio margine — o
 * scădere, fără să se atingă nimic din pagină — și se scrie în `--fc-lead`.
 * Marginea iese exact cât s-o aducă la marginea ferestrei, oricât de lat
 * sau de îngust ar fi părintele. Vezi `bleed()` din `modules.js`.
 *
 * Rezerva scrisă în `var()` e chiar formula veche: cât timp JavaScript-ul
 * n-a apucat să măsoare, purtarea rămâne cea de până acum, nu una nouă.
 */
.fclms-app--bleed {
	width: var(--fc-bleed, 100vw);
	max-width: var(--fc-bleed, 100vw);
	margin-left: calc(-1 * var(--fc-lead, calc(var(--fc-bleed, 100vw) / 2 - 50%)));
	margin-right: calc(var(--fc-lead, calc(var(--fc-bleed, 100vw) / 2 - 50%)) + 100% - var(--fc-bleed, 100vw));
	border-radius: 0;
}

/*
 * Lățimea hârtiei trece peste legea din `narrow.css`.
 *
 * Acolo scrie `.fclms-app { max-width: 100% }` — plasa care ține orice cutie
 * în locul primit — iar foaia aceea se scrie ultima, deci la greutăți egale
 * câștiga ea, și tăia tocmai singura cutie care are voie să iasă din
 * părinte. Are voie pe drept: marginea negativă de mai sus o așază fix pe
 * marginea ferestrei, deci nu naște nicio bară de derulare pe orizontală.
 *
 * Două nume de clasă în loc de unul îi dau greutatea de care are nevoie ca
 * să-și țină lățimea, fără să se atingă nimic din legea aceea.
 */
.fclms-app.fclms-app--bleed {
	max-width: var(--fc-bleed, 100vw);
}

/*
 * Colțurile drepte se cer și de la stratul de aspect: acolo hârtia primește
 * degradeurile ei, iar o rotunjire scrisă acolo ar fi răzbit peste cea de
 * mai sus fără să se vadă de unde vine.
 */
body .fclms-app--bleed,
body.fclms-fx .fclms-app--bleed { border-radius: 0; }

/*
 * O aplicație lipită de antet n-are nevoie de aer deasupra: primul rând
 * începe la o distanță de citit, nu la una de card. Jos rămâne cum era —
 * acolo urmează subsolul temei, care are aerul lui.
 */
.fclms-app--bleed { padding-top: 28px; }

/* ------------------------------------------------ modulele care se scriu */

/*
 * Caseta unui modul fără cuprins.
 *
 * Nu e o pagină de eroare și nu trebuie să semene cu una: pagina e la locul
 * ei, în meniu, iar ce lipsește e doar ce se va scrie în ea. De aceea e o
 * casetă liniștită, centrată, cu pictograma modulului în capul ei — aceeași
 * pe care omul o vede în meniul site-ului.
 */
.fclms-module-soon {
	text-align: center;
	max-width: 46rem;
	margin: 8vh auto;
	padding: 40px 32px;
}

.fclms-module-soon__mark {
	font-size: calc(46 / 16 * var(--fc-type, 16px));
	line-height: 1;
	margin-bottom: 14px;
	opacity: .85;
}

.fclms-module-soon .fclms-h2 { margin-top: 0; }

.fclms-module-soon p { margin-bottom: 10px; }
.fclms-module-soon p:last-child { margin-bottom: 0; }

/* ============================================ BUTONUL DE IEȘIRE DIN ECRAN COMPLET

   Ecranul complet se cere cutiei aplicației, nu paginii: browserul desenează
   atunci numai acea cutie, iar antetul temei, meniul și subsolul dispar de la
   sine — fără ca pluginul să știe cum se numesc în tema ta și fără să ascundă
   nimic cu mâna lui.

   Prețul e că butonul care a pornit totul stă în antet, deci dispare odată cu
   el. Scriptul face atunci acest buton, înăuntru, cât ține ecranul complet, și
   îl strânge la ieșire. Vezi `exitButton` din `editor.js`.

   Stă sus-dreapta, unde nu e niciodată text de citit, și e mic: e o ieșire, nu
   o invitație să pleci.
   =========================================================================== */

.fclms-fs-exit {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 99999;

	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 13px;

	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-ink);

	font-family: var(--fc-font);
	font-size: var(--fc-bar);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;

	/*
	 * Se retrage din calea privirii cât timp lucrezi, dar nu până la a se
	 * pierde: un buton de ieșire care nu se vede deloc e același lucru cu
	 * niciun buton de ieșire, iar tasta Escape nu există pe telefon.
	 */
	opacity: .55;
	box-shadow: var(--fc-shadow-lift);
	transition: opacity .15s ease, transform .15s ease;
}

.fclms-fs-exit:hover,
.fclms-fs-exit:focus-visible { opacity: 1; transform: translateY(1px); }
.fclms-fs-exit:focus-visible { outline: none; box-shadow: var(--fc-ring); }

/* Pe telefon rămâne doar semnul: acolo lățimea e tot ce se poate pierde. */
@media (max-width: 640px) {
	.fclms-fs-exit { padding: 0 9px; gap: 0; }
	.fclms-fs-exit span { display: none; }
}

/*
 * Pagina fără aplicație — un articol, o pagină de prezentare — trece pe tot
 * ecranul cu `<main>`, care e prin definiție conținutul de căpetenie, fără
 * antet și fără subsol. Temele nu-i dau însă fundal: el vine, la ele, de la
 * `<body>`, iar `<body>` nu mai e desenat. Fără rândurile astea, textul ar
 * rămâne pe negrul pe care browserul îl pune sub orice ecran complet.
 */
main:fullscreen,
[role="main"]:fullscreen {
	background: var(--fc-paper);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 28px;
}
main:-webkit-full-screen,
[role="main"]:-webkit-full-screen {
	background: var(--fc-paper);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 28px;
}

/* ================================================================= PANOUL

   PAGINA PRINCIPALĂ A APLICAȚIEI

   Un antet în degrade și, sub el, butoanele camerelor — fiecare pe culoarea
   ei. Panoul n-are conținut al lui, e numai o hartă a gazdei; de aceea tot ce
   se vede aici e făcut ca să se apese, nu ca să se citească.

   CE ERA GREȘIT ÎNAINTE, ȘI SE VEDEA

   Butoanele erau pătrate mari cu un semn mic în mijloc și mult alb în jur.
   Aerul dintr-o casetă trebuie să fie în jurul a ceva; acolo era în jurul a
   nimic, iar ochiul citea golul, nu semnul. S-au strâns cu o treime și li s-a
   dat culoare: acum caseta e plină, iar rândul se citește dintr-o privire.

   DE CE FIECARE CAMERĂ ARE CULOAREA EI

   Fiindcă de pe pagina asta se pleacă din mers. Cincisprezece butoane de
   aceeași culoare cer citite numele; cincisprezece culori se învață în două
   zile, iar de-a treia mâna merge singură spre roșu pentru Meciuri și spre
   verde pentru Prieteni. Culoarea nu e o podoabă, e ce face pagina rapidă.

   Culorile se scriu ca trei cifre, nu ca `#rrggbb`, fiindcă din ele se fac
   apoi zece lucruri deosebite — fundal la 8%, chenar la 22%, umbră la 30% —
   iar `rgba()` are nevoie de cifrele despărțite. O cameră fără culoare scrisă
   aici o ia pe cea a gazdei: mai bine un buton albastru decât unul fără fund.

   DE CE NU SE MIȘCĂ NIMIC PENTRU CINE A CERUT LINIȘTE

   `prefers-reduced-motion` e o cerere a omului, făcută în sistemul lui, și se
   respectă. Butonul care sare sub deget e plăcut până în ziua în care nu e:
   la cineva cu rău de mișcare, o pagină întreagă care tresare la fiecare
   trecere a mouse-ului e de nefolosit.
   =========================================================================== */

/* ------------------------------------------------------------ AERUL DIN JUR

   AICI ERA GREȘEALA CARE SE VEDEA CEL MAI TARE

   Banda în degrade și butoanele stăteau lipite de marginile cutiei, ca și cum
   pagina ar fi fost tăiată prea scurt. Nu lipsea o valoare, lipsea un stăpân:
   distanța dintre conținut și marginea cutiei era pusă de `.fclms-app`, adică
   de altcineva, iar acolo se scrie peste ea din patru locuri deosebite — foaia
   de bază, cea a modulelor, cea care măsoară cutia, stratul de aspect. Într-o
   așezare, ce rămânea în picioare era zero.

   Panoul își ia deci aerul în primire. Cutia din jur nu mai pune nimic, iar
   distanțele se scriu o singură dată, aici. Cine caută peste un an de ce e
   atâta spațiu în jurul butoanelor găsește un singur rând de schimbat, nu
   patru care se bat între ele.

   DE CE `clamp` ȘI NU O CIFRĂ

   Fiindcă aceeași distanță are alt înțeles pe un ecran de telefon și pe unul
   de masă: treizeci de pixeli sunt o margine frumoasă la 1400 de pixeli
   lățime și un sfert din ecran la 360. Se cere deci o măsură care crește cu
   fereastra, dar nu la nesfârșit — de la 16 la 32.

   Jos e mai mult decât sus, și anume. Sub ultimul rând de butoane urmează
   subsolul aplicației; fără aer între ele, rândul acela ar fi părut lipit de
   el, ca și cum ar fi făcut parte din subsol.
*/
.fclms-app.fclms-mod-panou,
.fca .fclms-app.fclms-mod-panou {
	padding: 0;
}

/*
   CUTIA PAGINII DINTÂI ÎNCEPE MAI JOS DECÂT CELELALTE

   Deasupra ei e rândul al doilea al antetului, o fâșie albă subțire cu numele
   camerei în ea. Lipită de el, cutia părea o urmare a antetului, nu un lucru
   deosebit de el — mai ales pe pagina asta, unde primul lucru dinăuntru e o
   bandă întunecată, care arăta atunci ca și cum ar fi ieșit din antet.

   Se dă deci deoparte cu o margine, iar în locul rămas se vede fundalul
   paginii — chiar cel care se vede și în stânga, și în dreapta cutiei. Nu se
   scrie nicio culoare aici și nu se pune niciun element: ce se vede în locul
   acela e ce era oricum acolo, dedesubt.

   DE CE MARGINE ȘI NU AER ÎNĂUNTRU

   Fiindcă sunt două lucruri deosebite, și numai unul dintre ele a fost cerut.
   Aerul dinăuntru împinge conținutul în jos și lasă cutia unde e; marginea
   mută cutia întreagă. Am încercat o versiune întâi cu aerul dinăuntru — se
   vedea aproape la fel, dar cutia rămăsese tot lipită de antet, adică
   greșeala rămăsese la locul ei, doar acoperită.

   `.fca` din față e pentru aplicație, unde foaia antetului scrie anume
   `margin-top: 0` pe cutia oricărui modul. Rândul de mai jos are un nume în
   plus, deci cântărește mai mult și trece peste el — numai pe pagina dintâi;
   celelalte camere rămân lipite de antet, cum au fost.
*/
.fclms-app.fclms-mod-panou,
.fca .fclms-app.fclms-mod-panou {
	margin-top: clamp(16px, 2vw, 30px);
}

/*
   ÎN APLICAȚIE, ACELAȘI AER, DAR ÎNĂUNTRU

   Regula de deasupra e bună pe o pagină obișnuită a site-ului, unde cutia
   chiar e o cutie: are colțuri, are margini, iar între ea și antetul temei se
   vede hârtia paginii — aceeași și sus, și în lături.

   În aplicație nu mai e așa, și de aici venea fâșia. Acolo hârtia se întinde
   de la un capăt la altul al ferestrei — `.fclms-app--bleed` — iar degradeul
   gazdei e scris tocmai pe ea. O margine deasupra ei scoate acei treizeci de
   pixeli din degrade și lasă în locul lor fundalul plat al paginii. Pus sub
   rândul alb al antetului, un fundal plat aproape alb nu se citește ca fundal:
   se citește ca o a doua bandă a antetului, mai groasă decât cea adevărată.

   Aerul e același, doar că trece dincoace de marginea hârtiei. Nimic nu se
   mută: `padding` și `margin` de aceeași măsură țin cutia în același loc pe
   ecran, iar ce era gol se umple acum cu degradeul care oricum urma dedesubt.

   De ce nu s-a scris așa de la început — vezi lămurirea de deasupra: acolo
   deosebirea dintre margine și aer chiar se vedea, fiindcă cutia avea o
   margine de văzut. Aici n-are; hârtia n-are nici colțuri, nici capăt.
*/
.fca .fclms-app.fclms-mod-panou {
	margin-top: 0;
	padding-top: clamp(16px, 2vw, 30px);
}

/*
   PAGINA DINTÂI STĂ ÎN RAMĂ, NU LIPITĂ DE STICLĂ

   Cele două lămuriri de mai sus sunt scrise pentru o pagină dintâi cu hârtia
   întinsă de la un capăt la altul al ferestrei. Rândul de aici o scoate din
   întindere, iar odată cu asta se schimbă și temeiul lor — de aceea a rămas
   scris acolo tot ce s-a gândit atunci, nu s-a șters: cine se întoarce peste
   un an vede și drumul, nu doar capătul.

   DE CE ALTFEL DECÂT CELELALTE CAMERE

   Fiindcă e altă natură. O cameră e un loc în care intri și stai: hârtia ei
   se întinde cap la cap tocmai ca să nu pară un card așezat peste antet, ci o
   urmare a lui. Pagina dintâi nu e un loc în care stai — e pragul din care se
   pleacă în celelalte. Un prag are ramă.

   Lipită de sticlă, cutia n-avea unde se sfârși: butoanele începeau la o
   palmă de margine, dar hârtia de sub ele mergea până în capăt, așa că ochiul
   nu vedea o cutie, ci o pagină tăiată. Cu rama în jur se vede ce e:
   degradeul gazdei dedesubt, iar peste el o singură foaie, cu colțuri.

   DESPRE MĂSURI

   Rama nu e `--fca-gutter`. Aceea e distanța de la scris până la marginea
   *ferestrei*, în camerele cu hârtia întinsă. Aici sunt două distanțe puse
   cap la cap: rama, până la marginea foii, și aerul dinăuntrul ei, pus de
   `.fclms-panel`. Adunate, dau aceeași linie de pornire ca în camerele
   celelalte — butoanele pagini dintâi și cartonașele de alături încep pe
   verticala aceeași, cum trebuie.

   `padding: 0` e nevoie scris: pe cutia oricărei camere din gazdă se pune
   aerul din lături, iar aici el ar fi venit peste aerul cardului.
*/
.fca .fclms-app.fclms-mod-panou {
	width: auto;
	max-width: 100%;
	margin: var(--fca-frame) var(--fca-frame) 0;
	padding: 0;
	border-radius: var(--fc-radius, 16px);
}

.fclms-panel {
	box-sizing: border-box;
	max-width: calc(var(--fc-content-max, 1100px) + 64px);
	margin: 0 auto;
	/* Aerul dinăuntrul cutiei. Nu e același lucru cu `--fca-gutter`, care e
	   distanța dintre scris și marginea *ferestrei* în camerele cu hârtia
	   întinsă cap la cap. Pagina dintâi n-are hârtia întinsă: are o cutie
	   cu ramă în jur, deci aerul ei e aerul unui card. Cele două se adună —
	   ramă plus aerul acesta — și dau aceeași linie de pornire ca în
	   celelalte camere. */
	padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.2vw, 32px) clamp(30px, 3.4vw, 52px);
}

/* -------------------------------------------------------------- BANDA DE SUS

   CE ERA ȘI DE CE S-A SCHIMBAT (1.10.19)

   Era o bandă întunecată cu un punctaj mărunt peste ea, două lumini rotunde
   în colțuri și o umbră lată dedesubt. Fiecare bucată era gândită, dar
   adunate spuneau anul în care au fost scrise: textura în puncte, umbra
   groasă și umbra de sub litere sunt trei semne ale unei epoci, iar trei
   semne laolaltă nu mai trec drept întâmplare.

   S-au scos toate trei. În locul lor:

   — un degrade de tip „mesh”, adică trei lumini mari și moi peste culoarea
     gazdei, care se întâlnesc fără să se atingă. Tot din culoarea aleasă în
     Aspect, ca și până acum: un site verde nu primește o bandă albastră.
   — un fir de lumină pe muchia de sus (`inset 0 1px 0`), în locul umbrei.
     Asta e ce dă azi impresia de sticlă: nu ce cade sub cutie, ci ce se
     prinde pe marginea ei.
   — grăunțele gazdei, aceleași pe care le poartă hârtia în stratul de aspect,
     la o transparență la care nu se văd, ci se simt.

   Umbra a rămas, dar colorată din culoarea gazdei și trasă mult mai sus
   (`-32px`): o umbră neagră lată e ce face o cutie să pară lipită pe pagină.

   PARTEA DIN DREAPTA

   Acolo stă acum unde ai ajuns: insigna treptei, numele ei, punctele și cât
   a mai rămas până la treapta următoare. Vezi lămurirea din
   `EDUMAG_Module_Panel::standing()` pentru ce caută acolo.
*/
.fclms-panel__hi {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 38px);
	margin-bottom: 22px;
	color: #fff;
	background:
		radial-gradient(760px 420px at 96% -20%, rgba(var(--fc-accent-rgb, 224, 161, 0), .34), transparent 62%),
		radial-gradient(620px 460px at 2% 118%, rgba(255, 255, 255, .16), transparent 64%),
		radial-gradient(900px 520px at 50% 140%, rgba(0, 0, 0, .28), transparent 70%),
		linear-gradient(142deg,
			var(--fc-primary) 0%,
			var(--fc-primary-dark, var(--fc-primary)) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		0 26px 50px -32px rgba(var(--fc-primary-rgb, 37, 99, 235), .7);
}

/* Grăunțele. `--fcm-grain` vine din stratul de aspect și e aceeași pânză pe
   care o poartă hârtia paginii; fără stratul acela nu se desenează nimic, iar
   banda rămâne curată. `soft-light` o face să se așeze pe degrade fără să-l
   spele. */
.fclms-panel__hi::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fcm-grain, none);
	background-size: 160px 160px;
	mix-blend-mode: soft-light;
	opacity: .5;
	pointer-events: none;
}

/*
 * SCENA TEMEI
 * ============================================================================
 *
 * Nea la Iarnă, frunze la Toamnă, inimi la Sf. Valentin, lilieci la Halloween.
 * Formele sunt scrise în pagină de `EDUMAG_Looks::scene()`, fiecare cu locul,
 * mărimea, transparența și durata ei în atributul `style`; aici stau doar
 * mișcările, care sunt aceleași pentru toate temele.
 *
 * Stratul e sub vorbă (`__hi-in` are `z-index: 1`) și nu prinde cursorul:
 * banda rămâne o bandă, nu devine un joc. Culoarea o iau din bandă
 * (`currentColor`, adică albul scrisului), deci o temă nouă nu cere forme noi.
 *
 * `overflow: hidden` de pe bandă le taie la margini — de aceea cele care cad
 * pot porni de deasupra ei și pleca pe dedesubt, fără să se vadă de unde vin.
 */
.fclms-scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

/* Lumina sărbătorii, scrisă în pagină de `EDUMAG_Looks::wash()`: două lumini
   mari, de culoarea temei, peste banda gazdei. `screen` adaugă lumină, nu
   vopsea — culoarea aleasă în Aspect rămâne dedesubt și se vede prin ea. */
.fclms-scene__wash {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Vălul. Podoabele s-au îngroșat (1.38.40) și, oricât ar sta ele la mijloc și
   spre dreapta, o bandă plină de culoare e o bandă pe care scrisul alb are mai
   puțin pe ce sta. Asta e umbra care i-o dă înapoi: întunecă stânga, unde e
   numele, și se stinge cu totul înainte de mijloc, ca să nu spele nimic. Stă
   deasupra formelor (e scris ultimul) și sub vorbă (`__hi-in` e pe stratul 1). */
.fclms-scene__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(97deg,
		rgba(0, 0, 0, .40) 0%,
		rgba(0, 0, 0, .26) 24%,
		rgba(0, 0, 0, .08) 44%,
		rgba(0, 0, 0, 0) 60%);
}

.fclms-scene__one {
	position: absolute;
	display: block;
	line-height: 0;
	color: #fff;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22));
	will-change: transform;
}

.fclms-scene__one svg { display: block; width: 100%; height: auto; }

/* Cele întinse pe toată lățimea: ghirlanda, nămetele, apa, pajiștea. */
.fclms-scene__one--span { left: 0; width: 100%; }

/* Întoarsă în oglindă: pânza din colțul din dreapta e aceeași cu cea din
   stânga. Merge numai la cele nemișcate — o mișcare își scrie și ea
   `transform`, iar a doua îl șterge pe primul. */
.fclms-scene__one--flip { transform: scaleX(-1); }

.fclms-scene__one--still { animation: none; }

/* Ce cade: de deasupra benzii până sub ea, învârtindu-se puțin. */
.fclms-scene__one--fall { animation-name: fclms-scene-fall; }
@keyframes fclms-scene-fall {
	from { transform: translate3d(0, -60px, 0) rotate(0deg); }
	to   { transform: translate3d(26px, 320px, 0) rotate(200deg); }
}

/* Frunza nu cade drept: se leagănă dintr-o parte în alta cât coboară. */
.fclms-scene__one--drift { animation-name: fclms-scene-drift; }
@keyframes fclms-scene-drift {
	0%   { transform: translate3d(0, -60px, 0) rotate(-10deg); }
	25%  { transform: translate3d(34px, 30px, 0) rotate(40deg); }
	50%  { transform: translate3d(-10px, 130px, 0) rotate(130deg); }
	75%  { transform: translate3d(30px, 230px, 0) rotate(220deg); }
	100% { transform: translate3d(0, 330px, 0) rotate(320deg); }
}

/* Ce se ridică: inimile, de jos în sus, stingându-se la capăt. */
.fclms-scene__one--rise { animation-name: fclms-scene-rise; }
@keyframes fclms-scene-rise {
	0%   { transform: translate3d(0, 20px, 0) scale(.85); opacity: 0; }
	18%  { opacity: .9; }
	78%  { opacity: .9; }
	100% { transform: translate3d(-26px, -320px, 0) scale(1.15); opacity: 0; }
}

/* Ce trece dintr-o margine în alta: liliecii. */
.fclms-scene__one--cross { animation-name: fclms-scene-cross; }
@keyframes fclms-scene-cross {
	from { transform: translate3d(-90px, 0, 0) rotate(-6deg); }
	50%  { transform: translate3d(50vw, -26px, 0) rotate(6deg); }
	to   { transform: translate3d(102vw, 0, 0) rotate(-6deg); }
}

/* Ce stă pe loc și respiră. */
.fclms-scene__one--float { animation-name: fclms-scene-float; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -12px, 0); }
}

/* Ce se clatină ușor din temelie: omul de nea, dovleacul, tortul. */
.fclms-scene__one--bob { animation-name: fclms-scene-bob; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-bob {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-2.5deg); }
	50%      { transform: translate3d(0, -9px, 0) rotate(2.5deg); }
}

.fclms-scene__one--sway { animation-name: fclms-scene-sway; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-sway {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
	50%      { transform: translate3d(10px, -8px, 0) rotate(6deg); }
}

.fclms-scene__one--swing { animation-name: fclms-scene-swing; animation-timing-function: ease-in-out; transform-origin: 50% 0; }
@keyframes fclms-scene-swing {
	0%, 100% { transform: rotate(-12deg); }
	50%      { transform: rotate(12deg); }
}

/* Ca leagănul, dar din mijloc: serpentinele. */
.fclms-scene__one--wobble { animation-name: fclms-scene-wobble; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-wobble {
	0%, 100% { transform: rotate(-9deg) scale(.98); }
	50%      { transform: rotate(9deg) scale(1.04); }
}

.fclms-scene__one--swim { animation-name: fclms-scene-swim; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-swim {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(22px, 6px, 0); }
}

.fclms-scene__one--twinkle { animation-name: fclms-scene-twinkle; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-twinkle {
	0%, 100% { transform: scale(.8); }
	50%      { transform: scale(1.18); }
}

.fclms-scene__one--spin { animation-name: fclms-scene-spin; }
@keyframes fclms-scene-spin { to { transform: rotate(360deg); } }

/* Becurile din ghirlandă și luna: nu se mișcă din loc, doar se aprind și se
   sting. Fiecare cu întârzierea lui, ca să nu clipească toate odată — o
   ghirlandă care clipește la unison e o ghirlandă stricată. */
.fclms-scene__one--shine { animation-name: fclms-scene-shine; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-shine {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

/* Artificiile: pornesc dintr-un punct, se deschid și se sting. Transparența
   scrisă pe bucată nu se mai vede la ele — o mișcare care ține de transparență
   o ia pe toată — și e bine așa: un artificiu care rămâne aprins nu e
   artificiu. */
.fclms-scene__one--burst { animation-name: fclms-scene-burst; animation-timing-function: cubic-bezier(.15, .7, .3, 1); }
@keyframes fclms-scene-burst {
	0%   { transform: scale(.12) rotate(0deg); opacity: 0; }
	10%  { opacity: .95; }
	60%  { transform: scale(1.02) rotate(14deg); opacity: .8; }
	100% { transform: scale(1.32) rotate(22deg); opacity: 0; }
}

/* Dovleacul: lumina dinăuntru, care crește și scade. Umbra colorată e ce dă
   impresia că arde ceva în el, nu forma. */
.fclms-scene__one--glow { animation-name: fclms-scene-glow; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-glow {
	0%, 100% { transform: scale(.98); filter: drop-shadow(0 0 5px rgba(255, 168, 60, .35)); }
	50%      { transform: scale(1.05); filter: drop-shadow(0 0 18px rgba(255, 168, 60, .9)); }
}

/* Păianjenul: coboară pe fir și se trage înapoi. Firul e desenat în forma lui,
   deasupra trupului, și se pierde peste muchia de sus a benzii. */
.fclms-scene__one--dangle { animation-name: fclms-scene-dangle; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-dangle {
	0%, 100% { transform: translate3d(0, -16px, 0); }
	50%      { transform: translate3d(0, 18px, 0) rotate(3deg); }
}

/* Fluturele: nu plutește, se zbate — patru popasuri, niciunul pe drumul
   dintre celelalte două. */
.fclms-scene__one--flutter { animation-name: fclms-scene-flutter; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-flutter {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
	25%      { transform: translate3d(16px, -12px, 0) rotate(7deg); }
	50%      { transform: translate3d(30px, 4px, 0) rotate(-5deg); }
	75%      { transform: translate3d(12px, 14px, 0) rotate(9deg); }
}

/* Inima mare: bate. */
.fclms-scene__one--pulse { animation-name: fclms-scene-pulse; animation-timing-function: ease-in-out; }
@keyframes fclms-scene-pulse {
	0%, 100% { transform: scale(.93); }
	18%      { transform: scale(1.1); }
	32%      { transform: scale(.99); }
	50%      { transform: scale(1.06); }
}

/*
 * Cine a cerut mai puțină mișcare primește aceeași scenă, neclintită.
 * Stinsă cu totul, temele de sărbătoare ar fi arătat la el ca oricare alta —
 * iar o preferință de aparat n-are de ce să-i schimbe tema aleasă. Cele care
 * ar fi stat deasupra benzii ori sub ea se trag înăuntru, ca să se vadă, iar
 * cele care se aprindeau rămân aprinse, nu stinse.
 */
@media (prefers-reduced-motion: reduce) {
	.fclms-scene__one { animation: none !important; }
	.fclms-scene__one--fall,
	.fclms-scene__one--drift { top: 12% !important; }
	.fclms-scene__one--rise { top: 62% !important; }
	.fclms-scene__one--cross { transform: translate3d(60px, 0, 0); }
	.fclms-scene__one--dangle { top: 0 !important; }
	.fclms-scene__one--burst,
	.fclms-scene__one--shine { opacity: .85 !important; }
}

/* Pe ecran îngust banda e mult mai scundă: ce cade ar trece prin ea fără să
   se vadă, iar formele mari ar sta peste nume. Rămân cele așezate — pânzele,
   dovlecii, baloanele — micșorate din colțul lor, ca să încapă. */
@media (max-width: 700px) {
	.fclms-scene__one--fall,
	.fclms-scene__one--drift,
	.fclms-scene__one--rise,
	.fclms-scene__one--cross { display: none; }

	.fclms-scene__one--bob,
	.fclms-scene__one--glow,
	.fclms-scene__one--pulse,
	.fclms-scene__one--sway,
	.fclms-scene__one--float,
	.fclms-scene__one--swing,
	.fclms-scene__one--flutter,
	.fclms-scene__one--wobble,
	.fclms-scene__one--dangle { zoom: .72; }

	.fclms-scene__veil {
		background: linear-gradient(104deg,
			rgba(0, 0, 0, .46) 0%,
			rgba(0, 0, 0, .30) 34%,
			rgba(0, 0, 0, .10) 58%,
			rgba(0, 0, 0, 0) 74%);
	}
}

.fclms-panel__hi-in {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 40px);
}

/* Vorba din stânga are o lățime de plecare, nu doar voie să crească: fără
   ea, cartonașul din dreapta i-ar fi luat din lățime până rămânea o coloană
   de cuvinte. Aceeași croială ca la capul secțiunilor strânse. */
.fclms-panel__say { flex: 1 1 18rem; min-width: 0; }

/*
   Numele scris de temă nu se moștenește aici. Temele fac cu `h1` ce vor —
   îl scriu cu majuscule, îi pun o linie dedesubt, îl mută la mijloc — iar
   pe banda noastră toate acestea ar fi arătat a nepotrivire, fiindcă banda
   nu e un titlu de articol. Se scrie deci anume ce trebuie să fie.

   Umbra de sub litere s-a scos: pe un degrade curat, alb gros de 800 se
   citește fără ajutor, iar ajutorul acela e chiar ce dădea aerul vechi.
*/
.fclms-panel__title {
	font-size: clamp(calc(var(--fc-h1) * 1.136), calc(3.2vw * var(--fc-h1-scale, 1)), calc(var(--fc-h1) * 1.682));
	font-weight: 800;
	text-transform: none;
	text-align: left;
	border: 0;
	padding: 0;
	letter-spacing: -.03em;
	line-height: 1.1;
	margin: 0 0 7px;
	color: #fff;
}

.fclms-panel__lead {
	margin: 0;
	font-size: var(--fc-p);
	color: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------- UNDE AI AJUNS

   Cartonașul de sticlă din dreapta benzii. Nu-și pune fundal propriu, ci o
   spoială albă peste degradeul de dedesubt — așa își ia culoarea din gazdă
   singur, fără să fie scrisă nicăieri, și rămâne bun și pe un site verde, și
   pe unul vișiniu.

   `backdrop-filter` e podoaba, nu temelia: unde lipsește, rămâne spoiala albă
   și chenarul, care sunt de ajuns. Nu se scrie nimic care să atârne de el.
*/
.fclms-panel__me {
	flex: 0 1 19rem;
	min-width: min(17rem, 100%);
	box-sizing: border-box;
	padding: 14px 16px 15px;
	border-radius: 18px;
	color: inherit;
	text-decoration: none;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .20);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Numai cartonașul care chiar duce undeva se aprinde sub deget. Cel scris
   fără legătură — când Progresul e stins — rămâne o fișă, iar o fișă care se
   ridică la trecerea mausului promite o apăsare pe care n-o poate ține. */
.fclms-panel__me--link {
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.fclms-panel__me--link:hover,
.fclms-panel__me--link:focus-visible {
	background: rgba(255, 255, 255, .17);
	border-color: rgba(255, 255, 255, .34);
	transform: translateY(-1px);
	text-decoration: none;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.fclms-panel__me--link { transition: none; }
	.fclms-panel__me--link:hover,
	.fclms-panel__me--link:focus-visible { transform: none; }
}

.fclms-panel__me-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Insigna. Pătrat cu colțuri moi, nu bulină: bulina o face să semene cu o
   poză de profil, iar aici nu e un om, e o treaptă. */
.fclms-panel__bdg {
	flex: none;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	font-size: calc(var(--fc-h1) * 1.091);
	line-height: 1;
	background: linear-gradient(155deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .07));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.fclms-panel__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fclms-panel__rank {
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fclms-panel__step {
	font-size: var(--fc-small);
	color: rgba(255, 255, 255, .68);
}

/* Cifra stă la capătul din dreapta, singură pe coloana ei, cu cifre de
   aceeași lățime: altfel numărul saltă în lături la fiecare punct câștigat. */
.fclms-panel__pts {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.fclms-panel__sum {
	font-weight: 800;
	font-size: var(--fc-h1);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.fclms-panel__lab {
	font-size: calc(var(--fc-small) * 0.88);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .62);
}

.fclms-panel__track {
	display: block;
	height: 5px;
	margin-top: 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	overflow: hidden;
}

.fclms-panel__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(255, 255, 255, .72), #fff);
}

.fclms-panel__next {
	margin: 9px 0 0;
	font-size: var(--fc-small);
	line-height: 1.4;
	color: rgba(255, 255, 255, .7);
}

.fclms-panel__next b {
	color: #fff;
	font-weight: 700;
}

/* Pe un ecran îngust cartonașul trece sub vorbă și ia rândul întreg: strâns
   lângă ea, n-ar mai fi încăput nici numele treptei, nici cifra. */
@media (max-width: 640px) {
	.fclms-panel__me { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ GRILA */

.fclms-panel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
	gap: 12px;
}

/* ------------------------------------------------------------------ BUTONUL

   Culoarea camerei se ține într-o singură variabilă, `--tile`, iar toate
   celelalte se socotesc din ea. Așa, o cameră nouă are nevoie de un singur
   rând scris mai jos ca să fie îmbrăcată din cap până-n picioare.
*/
.fclms-panel__tile {
	--tile: var(--fc-primary-rgb, 37, 99, 235);

	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 1 / .86;
	padding: 14px 10px;
	text-align: center;
	text-decoration: none;
	color: var(--fc-ink);
	border: 1px solid rgba(var(--tile), .18);
	border-radius: 18px;
	background:
		linear-gradient(160deg, rgba(var(--tile), .10) 0%, rgba(var(--tile), .02) 55%),
		var(--fc-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, border-color .18s;
}

/* Lumina din colț, aprinsă abia la trecerea degetului. Desenată tot timpul,
   dar stinsă: aprinsă din opacitate, ea nu cere browserului să deseneze din
   nou fundalul la fiecare trecere — iar un degrade redesenat de cincisprezece
   ori, pe un telefon, se simte. */
.fclms-panel__tile::after {
	content: "";
	position: absolute;
	top: -55%;
	right: -35%;
	width: 130%;
	height: 130%;
	background: radial-gradient(circle, rgba(var(--tile), .22), transparent 62%);
	opacity: 0;
	transition: opacity .18s;
	pointer-events: none;
}

.fclms-panel__tile:hover,
.fclms-panel__tile:focus-visible {
	color: var(--fc-ink);
	text-decoration: none;
	transform: translateY(-4px) scale(1.035);
	border-color: rgba(var(--tile), .45);
	box-shadow: 0 16px 30px -14px rgba(var(--tile), .55), 0 2px 6px rgba(0, 0, 0, .05);
}

.fclms-panel__tile:hover::after,
.fclms-panel__tile:focus-visible::after {
	opacity: 1;
}

.fclms-panel__tile:focus-visible {
	outline: 2px solid rgb(var(--tile));
	outline-offset: 2px;
}

.fclms-panel__tile:active {
	transform: translateY(-1px) scale(1.01);
}

/* Browserele fără `aspect-ratio` — vreo tabletă rămasă în urmă — n-ar fi avut
   nicio înălțime de la care să pornească, iar butoanele ar fi ieșit turtite
   pe textul dinăuntru. */
@supports not (aspect-ratio: 1 / 1) {
	.fclms-panel__tile { min-height: 124px; }
}

/* ------------------------------------------------------------------ SEMNUL */

.fclms-panel__mark {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: #fff;
	background: linear-gradient(145deg, rgba(var(--tile), .95), rgba(var(--tile), .72));
	box-shadow: 0 6px 14px -6px rgba(var(--tile), .85);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s;
}

.fclms-panel__tile:hover .fclms-panel__mark,
.fclms-panel__tile:focus-visible .fclms-panel__mark {
	transform: scale(1.1) rotate(-4deg);
	box-shadow: 0 10px 20px -8px rgba(var(--tile), .95);
}

.fclms-panel__mark .fca-mark {
	width: 23px;
	height: 23px;
}

.fclms-panel__mark .fca-mark--emoji {
	font-size: calc(22 / 16 * var(--fc-type, 16px));
	line-height: 1;
}

.fclms-panel__name {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: var(--fc-small);
	line-height: 1.25;
	letter-spacing: -.01em;
	/* Un nume lung — „Ora de clasă” — se rupe în două rânduri fără să
	   împingă caseta: măsura ei e dată de `aspect-ratio`, nu de text. */
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------- CULORILE CAMERELOR */

.fclms-panel__tile--cartonase,
.fclms-roomtint--cartonase { --tile: 79, 70, 229; }
.fclms-panel__tile--cursuri,
.fclms-roomtint--cursuri { --tile: 37, 99, 235; }
.fclms-panel__tile--comunitate,
.fclms-roomtint--comunitate { --tile: 13, 148, 136; }
.fclms-panel__tile--meditatii,
.fclms-roomtint--meditatii { --tile: 124, 58, 237; }
.fclms-panel__tile--ebooks,
.fclms-roomtint--ebooks { --tile: 217, 119, 6; }
.fclms-panel__tile--meciuri,
.fclms-roomtint--meciuri { --tile: 225, 29, 72; }
.fclms-panel__tile--clase,
.fclms-roomtint--clase { --tile: 8, 145, 178; }
.fclms-panel__tile--prieteni,
.fclms-roomtint--prieteni { --tile: 5, 150, 105; }
.fclms-panel__tile--mesaje,
.fclms-roomtint--mesaje { --tile: 2, 132, 199; }
.fclms-panel__tile--progres,
.fclms-roomtint--progres { --tile: 168, 85, 247; }
.fclms-panel__tile--abonamente,
.fclms-roomtint--abonamente { --tile: 234, 88, 12; }
.fclms-panel__tile--cont,
.fclms-roomtint--cont { --tile: 100, 116, 139; }
.fclms-panel__tile--facturi,
.fclms-roomtint--facturi { --tile: 101, 163, 13; }
.fclms-panel__tile--suport,
.fclms-roomtint--suport { --tile: 219, 39, 119; }
.fclms-panel__tile--birou,
.fclms-roomtint--birou { --tile: 71, 85, 105; }

/* ------------------------------------------- ADMINISTRAREA E DE ALT FEL

   Rândurile de mai sus îmbracă **camerele** — locurile în care se intră ca
   să înveți, să vorbești, să cumperi. Fiecare cu culoarea ei, ca ochiul să
   găsească butonul înainte să apuce să citească numele.

   Rubricile din Administrare arată la fel la prima vedere, dar nu sunt
   același lucru: nu sunt camere, sunt uneltele gazdei. O grilă la fel de
   colorată ca cea de Acasă spunea, fără să vrea, că cele două ecrane sunt de
   aceeași speță — iar cine ținea deschise amândouă filele le încurca.

   O singură culoare, neutră, pentru toate douăzeci și șase. Nu e sărăcie de
   desen, e o vorbă spusă limpede: aici nu se învață, aici se hotărăște.

   ----------------------------------------------------------------------
   ȘI O CIOCNIRE CARE SE ÎNCHIDE ODATĂ CU EA

   Numele claselor se scriu din cheia filei — `--ebooks`, `--cursuri` — iar
   unele chei ale panoului se nimeresc a fi chiar numele unor camere. Fila
   „Ebooks" din Administrare se îmbrăca deci singură în portocaliul camerei
   Ebooks și stătea aprinsă în mijlocul unei grile liniștite, fără ca cineva
   să fi cerut asta.

   Cele două nume de clasă de aici cântăresc mai mult decât unul singur, deci
   regula trece peste toate culorile camerelor, oricâte s-ar mai adăuga mâine
   și oricâte chei s-ar mai ciocni.
*/
.fclms-panel--admin .fclms-panel__tile {
	--tile: 82, 82, 91;
}

/* ------------------------------------------------------------- LINIȘTEA */

@media (prefers-reduced-motion: reduce) {
	.fclms-panel__tile,
	.fclms-panel__mark {
		transition: none;
	}

	.fclms-panel__tile:hover,
	.fclms-panel__tile:focus-visible,
	.fclms-panel__tile:active {
		transform: none;
	}

	.fclms-panel__tile:hover .fclms-panel__mark,
	.fclms-panel__tile:focus-visible .fclms-panel__mark {
		transform: none;
	}
}

/* --------------------------------------------------------------- ECRANE MICI

   Pe telefon butonul nu se mai mărește la apăsare: degetul îl acoperă oricum,
   iar o casetă care crește sub el mișcă rândul întreg. Rămâne culoarea, care
   se vede și acoperită.
*/
@media (max-width: 600px) {
	.fclms-panel { padding: 16px 14px 28px; }
	.fclms-panel__hi { padding: 24px 20px 26px; border-radius: 16px; margin-bottom: 16px; }
	.fclms-panel__title { font-size: calc(var(--fc-h1) * 1.045); }
	.fclms-panel__lead { font-size: calc(var(--fc-p) * 0.933); }
	.fclms-panel__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
	.fclms-panel__tile { border-radius: 15px; gap: 8px; padding: 12px 7px; }
	.fclms-panel__mark { width: 40px; height: 40px; border-radius: 12px; }
	.fclms-panel__mark .fca-mark { width: 20px; height: 20px; }
	.fclms-panel__name { font-size: calc(var(--fc-small) * 0.926); }
}

@media (hover: none) {
	.fclms-panel__tile:hover,
	.fclms-panel__tile:active { transform: none; }
	.fclms-panel__tile:hover .fclms-panel__mark { transform: none; }
}

/* ------------------------------------------------------- MODUL ÎNTUNECAT

   Aceleași culori, dar mai apăsat. Pe hârtie albă, un fundal la 10% dintr-o
   culoare se vede; pe hârtie închisă, la 10% nu se mai vede nimic — culoarea
   se pierde în negrul de sub ea, iar cele cincisprezece butoane redevin
   cincisprezece dreptunghiuri la fel, adică tocmai ce nu voiam.

   Nu se schimbă nicio culoare, doar cât de tare se apasă. Camera nouă,
   îmbrăcată cu un singur rând mai sus, primește și purtarea asta de la sine.
*/
html[data-fc-mode="dark"] .fclms-panel__tile {
	border-color: rgba(var(--tile), .30);
	background:
		linear-gradient(160deg, rgba(var(--tile), .26) 0%, rgba(var(--tile), .06) 58%),
		var(--fc-surface);
}

html[data-fc-mode="dark"] .fclms-panel__tile:hover,
html[data-fc-mode="dark"] .fclms-panel__tile:focus-visible {
	border-color: rgba(var(--tile), .62);
	box-shadow: 0 16px 32px -14px rgba(var(--tile), .70);
}

html[data-fc-mode="dark"] .fclms-panel__hi {
	box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .85);
}