/* FCLMS App — gazda: antet, subsol, paletă
 * ============================================================================
 *
 * CULORILE NU SE INVENTEAZĂ AICI
 *
 * Toate vin din variabilele lui EduMag, alese în Administrare →
 * Aspect. O paletă a gazdei, scrisă de mână în fișierul acesta, ar fi arătat
 * bine exact o zi: în ziua în care cineva schimbă culoarea de bază din panou,
 * antetul ar fi rămas verde peste un conținut albastru, și n-ar fi fost niciun
 * loc din care să se vadă de ce.
 *
 * Ce se scrie mai jos sunt numai mărimile gazdei — înălțimea celor două rânduri
 * — și cele câteva tente socotite din culoarea de bază.
 *
 * UN SINGUR FONT, ȘI ÎN ANTET
 *
 * Până la 1.38.24 antetul, subsolul, paleta de comenzi și bulele de lămurire
 * aveau un font al lor, fără serife, scris aici de mână (`--fca-chrome`):
 * serifele Merriweather, la treisprezece puncte într-un rând înalt, se
 * strângeau într-o pată. Socoteala era dreaptă cât timp fontul nu se putea
 * alege. De la 1.38.21 se alege — și atunci antetul rămânea singurul loc din
 * aplicație care nu asculta: alegeai Inter și vedeai Inter peste tot, afară
 * de bara de sus.
 *
 * Acum totul poartă `--fc-font`, fontul din Aspect → Scrisul. Cine vrea un
 * antet fără serife alege un font fără serife; nu se mai hotărăște în foaia
 * aceasta în locul lui.
 */

.fca {
	/* Cele două rânduri ale antetului. */
	--fca-deck-h: 60px;
	--fca-rail-h: 42px;

	/* Câmpul întunecat al rândului dintâi, socotit din culoarea de bază.
	   O trecere strânsă, nu un degrade: dă adâncime fără să pară podoabă. */
	--fca-deck: linear-gradient(180deg, var(--fc-primary, #1F5E7A), var(--fc-primary-dark, #164760));

	/* Alb curat pe câmp întunecat taie ochiul. Albul cu o urmă din culoarea
	   de dedesubt stă liniștit și se citește la fel de bine. */
	--fca-deck-ink: rgba(255, 255, 255, .78);
	--fca-deck-lit: #ffffff;
	--fca-hair: rgba(255, 255, 255, .14);
	--fca-warm: var(--fc-accent, #E0A100);


	/*
	 * AERUL DIN LĂTURI, SCRIS O SINGURĂ DATĂ
	 *
	 * Hârtia camerei se întinde de la un capăt la altul al ferestrei — așa e
	 * gândită, `.fclms-app--bleed`, ca aplicația să pară o urmare a antetului,
	 * nu un card așezat peste el. Ce nu trebuie să ajungă până în capete e
	 * *ce scrie pe hârtie*: un rând care începe la marginea sticlei se
	 * citește ca și cum pagina ar fi fost tăiată prea scurt.
	 *
	 * Măsura stă aici, pe rădăcină, nu la fiecare cameră. Până acum fiecare
	 * și-o punea singură — foaia de bază 28px, panoul 32, telefonul 16 — și
	 * de aceea nici nu se putea schimba dintr-un loc.
	 *
	 * `clamp`, fiindcă aceeași cifră are alt înțeles pe ecrane deosebite:
	 * cincizeci de pixeli sunt o margine frumoasă la 1900 de pixeli lățime și
	 * o treime din ecran la 360. Jos rămâne cât era pe telefon — acolo
	 * lățimea e tot ce ai și nu se dă din ea.
	 */
	--fca-gutter: clamp(16px, 3vw, 56px);

	/*
	 * RAMA — altceva decât aerul de mai sus
	 *
	 * `--fca-gutter` e distanța de la scris până la marginea ferestrei, în
	 * camerele a căror hârtie se întinde cap la cap. Rama e distanța de la
	 * *marginea unei cutii* până la fereastră, acolo unde cutia chiar e o
	 * cutie și în jurul ei se vede fundalul gazdei — pagina dintâi, deocamdată
	 * singura de felul acesta.
	 *
	 * Cifra e croită anume ca rama plus aerul dinăuntrul cardului să dea cât
	 * `--fca-gutter`: 24 + 32 = 56. Așa, butoanele paginii dintâi și
	 * cartonașele din camera de alături încep pe aceeași verticală, deși una
	 * stă într-o cutie și cealaltă pe hârtie întinsă.
	 */
	--fca-frame: clamp(10px, 1.3vw, 24px);

	background: var(--fc-paper, #F4F6F8);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* Sub bara WordPress, dacă e aprinsă din setări. */
.fca.admin-bar .fca-head { top: 32px; }

@media (max-width: 782px) {
	.fca.admin-bar .fca-head { top: 46px; }
}

/* ==========================================================================
 * PAGINA E A NOASTRĂ, DECI ȘI LĂȚIMEA EI
 * ==========================================================================
 *
 * `templates/app.php` scrie documentul întreg și nu cheamă `get_header()`,
 * tocmai ca aplicația să nu moștenească nici antetul temei, nici lățimile ei.
 * Atât doar că `wp_head()` se cheamă mai departe — și trebuie chemat, prin el
 * coboară stilurile și scripturile noastre. Odată cu ele coboară însă și
 * **foaia temei active**, care nu știe nimic despre pagina asta și își scrie
 * regulile ei despre `body`.
 *
 * O temă care pune pe `body` o lățime maximă, o margine, un `padding` ori un
 * `float` strâmtorează astfel gazda întreagă. Nu se vede ca o stricăciune: se
 * vede ca o gazdă îngustă, lipită într-o parte, cu antetul cu tot — și nimeni
 * nu bănuiește tema, fiindcă tema nu se vede nicăieri pe ecranul acela.
 *
 * Mai rău, hârtia întinsă a camerelor își socotește ieșirea din părinte; iar
 * dacă părintele e el însuși strâmt și tras într-o parte, socoteala e dreaptă
 * și rezultatul strâmb. Se repară capătul de sus al lanțului, nu veriga de la
 * mijloc.
 *
 * Rândurile de mai jos nu îmbracă nimic. Ele desfac doar ce a legat altcineva
 * pe documentul nostru, și numai pe pagina aplicației — clasa `.fca` stă pe
 * `body` numai acolo. Restul site-ului rămâne al temei, întreg.
 */
body.fca {
	/*
	 * Litera paginii întregi. Tema își scrie fontul pe `body`, iar tot ce
	 * se agață de `body` fără un font al lui — o bulă, un anunț, un meniu
	 * deschis — l-ar fi luat pe al ei.
	 */
	font-family: var(--fc-font);
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	position: static;
	transform: none;
}

/*
 * Și învelișul, pentru ziua în care o temă scrie ceva despre orice `div` de
 * la rădăcină. El e cutia din care își iau măsura toate camerele: strâmtat
 * aici, strâmtează tot ce e sub el.
 */
.fca .fca-shell {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Drumul scurt pentru cine umblă cu tastatura. Nu se vede până la Tab. */
.fca-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--fc-surface, #fff);
	color: var(--fc-ink, #1E2A38);
	font: 600 var(--fc-bar)/1 var(--fc-font);
	padding: 12px 18px;
	border-radius: 0 0 10px 0;
}

.fca-skip:focus {
	left: 0;
	outline: 2px solid var(--fca-warm);
	outline-offset: -2px;
}

/* ==========================================================================
 * ANTETUL
 * ========================================================================== */

.fca-head {
	position: sticky;
	top: 0;
	z-index: 60;
	font-family: var(--fc-font);
	/* Antetul are categoria lui de scris: tot ce nu-și spune singur
	   mărimea — un nume, o legătură fără clasă — o ia de aici. */
	font-size: var(--fc-bar);
}

/* ------------------------------------------------------ rândul dintâi */

.fca-deck {
	height: var(--fca-deck-h);
	background: var(--fca-deck);
	color: var(--fca-deck-ink);
	display: flex;
	align-items: stretch;
	gap: 4px;
	padding: 0 clamp(10px, 2.4vw, 22px);
}

.fca-brand {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--fca-deck-lit);
	text-decoration: none;
	padding-right: 14px;
	margin-right: 6px;
	flex: 0 0 auto;
	/* Un fir de lumină între semn și camere: desparte fără să deseneze o linie
	   care ar fi cerut, la rândul ei, o simetrie de cealaltă parte. */
	border-right: 1px solid var(--fca-hair);
}

.fca-brand:hover,
.fca-brand:focus-visible { color: var(--fca-deck-lit); }

/* SEMNUL APRINS, CÂND EȘTI CHIAR ÎN PANOU

   De la 1.18.1 panoul n-are pastilă în rândul de sus: se intră în el apăsând
   numele și semnul aplicației. Rămânea atunci o cameră în care nu se aprindea
   nimic nicăieri — singura din toată aplicația — iar rândul de sus spunea, în
   panou, că ești nicăieri.

   Nu se pune fundal, cum au pastilele. Semnul stă lipit de marginea din
   stânga și are dunga lui la dreapta; o pastilă în jurul lui ar fi cerut și
   dunga mutată, și o simetrie de cealaltă parte. Se aprinde deci ce se poate
   aprinde fără să se mute nimic: culoarea plină și o linie subțire dedesubt,
   aceeași grosime cu firul care desparte. */
.fca-brand.is-on { color: var(--fca-deck-lit); }

/* Linia stă sub căsuță, cât e căsuța desenată — nu cât cutia ei, care are
   aer de jur împrejur —, ca să pară subliniată casa, nu golul de lângă ea. */
.fca-brand.is-on::after {
	content: "";
	position: absolute;
	left: 4px;
	width: 20px;
	top: calc(50% + 16px);
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/*
 * CĂSUȚA
 *
 * Singurul lucru din colțul din stânga: semnul paginii dintâi. Mărimea e
 * scrisă în puncte, nu din scris — e un semn, nu un text, iar o căsuță
 * care crește cu „Antet și subsol” ar fi împins camerele din rând.
 */
.fca-brand .fca-brand__mark {
	flex: 0 0 auto;
	display: block;
	width: 28px;
	height: 28px;
	opacity: .92;
	transition: opacity .15s ease;
}

.fca-brand:hover .fca-brand__mark,
.fca-brand.is-on .fca-brand__mark { opacity: 1; }

/* --- butonul cu trei linii --- */

/*
 * BUTONUL CARE DESCHIDE SERTARUL
 *
 * Se scrie întotdeauna în pagină, dar se desenează numai pe ecrane înguste.
 *
 * E și singurul loc din care JavaScript află unde e hotarul dintre rândul
 * întins și sertar: scriptul nu ține minte un număr de pixeli, ci întreabă
 * dacă butonul acesta e desenat. Numărul stă scris o singură dată, în media
 * query de la capătul fișierului, și CSS-ul rămâne cel care hotărăște. Scris
 * în amândouă locurile, s-ar fi despărțit în ziua în care unul se schimbă.
 */
.fca-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	align-self: center;
	margin-right: 10px;
	padding: 0;
	border: 1px solid var(--fca-hair);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: var(--fca-deck-ink);
	cursor: pointer;
}

.fca-burger:hover,
.fca-burger:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: var(--fca-deck-lit);
}

/* Deschis, butonul își schimbă semnul în cruce: e chiar butonul cu care se
   închide la loc, iar trei linii care nu se schimbă n-ar fi spus asta. */
.fca-burger__shut { display: none; }
.fca-head.is-open .fca-burger__open { display: none; }
.fca-head.is-open .fca-burger__shut { display: block; }

/* --- camerele --- */

.fca-rooms {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.fca-rooms::-webkit-scrollbar { display: none; }

/*
 * O CAMERĂ E O PASTILĂ ÎNTREAGĂ, NU UN CUVÂNT CU UN SEMN LÂNGĂ EL
 *
 * Semnul și numele stau într-un singur trup: același fundal, aceeași
 * rotunjire, aceeași margine. Ochiul le ia drept un lucru, nu două, iar
 * degetul are ce apăsa — pastila întreagă e ținta, nu numai literele.
 *
 * Înălțimea e scrisă anume, nu lăsată să se întindă cât rândul. O pastilă
 * lipită de muchia de sus și de cea de jos ar fi fost o filă, nu un buton, și
 * ar fi cerut ochiului să socotească unde se sfârșește una și începe alta.
 */
.fca-room {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border-radius: 10px;
	background: transparent;
	color: var(--fca-deck-ink);
	text-decoration: none;
	font-size: var(--fc-bar);
	font-weight: 500;
	letter-spacing: -.005em;
	white-space: nowrap;
	flex: 0 0 auto;
	border: 0;
	transition: background-color 120ms ease, color 120ms ease;
}

.fca-room:hover {
	color: var(--fca-deck-lit);
	background: rgba(255, 255, 255, .11);
}

/*
 * CAMERA ÎN CARE EȘTI
 *
 * Până acum era un fir de aur pe muchia de jos a rândului. Firul era frumos
 * și era prea puțin: două linii de pixeli erau tot ce deosebea camera de
 * acum de celelalte cinci, iar pe ecrane înguste, unde numele plecau și
 * rămâneau semnele, nu mai rămânea nimic de citit.
 *
 * Aurul a rămas — e tot singura culoare tare din antet — dar a trecut de pe
 * muchie pe toată pastila. Se vede dintr-o privire, de la orice depărtare, și
 * nu mai cere ochiului să caute o dungă.
 *
 * Literele trec în întuneric, nu în alb: alb pe aur nu se citește. E aceeași
 * pereche de culori ca la butonul de intrare și la ecranul complet apăsat,
 * deci nu e o socoteală nouă, ci una deja folosită în gazdă.
 */
.fca-room.is-on {
	background: var(--fca-warm);
	color: #221802;
	font-weight: 600;
}

.fca-room.is-on:hover {
	background: var(--fca-warm);
	color: #221802;
	filter: brightness(1.06);
}

/* ==========================================================================
 * LEGĂTURILE VIZITATE
 * ==========================================================================
 *
 * Toate camerele din sertar sunt scrise la fel, cu aceeași clasă. Și totuși
 * „Acasă” se citea într-un albastru-violet stins, în timp ce celelalte erau
 * albe.
 *
 * Nu era o culoare de-a noastră. Era culoarea de legătură vizitată a temei
 * WordPress, care răzbătea prin.
 *
 * CUM RĂZBĂTEA
 *
 * `.fca-room { color: … }` cântărește o clasă. Regula temei — `a:visited` —
 * cântărește un element plus o pseudo-clasă, adică mai mult. La orice
 * legătură pe care browserul o știe vizitată, tema câștiga.
 *
 * De ce numai „Acasă”: fiindcă numai adresa ei se potrivea, literă cu
 * literă, cu ceva din istoricul browserului. Celelalte camere se deschid cu
 * adrese care poartă și fila (`?room=…&view=…`), iar o adresă puțin
 * deosebită e, pentru browser, o adresă nevizitată. Aceeași pagină, alt
 * drum către ea. De aceea stricăciunea părea a fi a unei singure rubrici,
 * când de fapt îl pândea pe fiecare: era destul ca cineva să ajungă o dată
 * la Calendar pe adresa lui scurtă și s-ar fi albăstrit și el.
 *
 * ÎNDREPTAREA
 *
 * `:any-link` prinde și legătura nouă, și pe cea vizitată, dintr-un singur
 * rând — nu mai trebuie scrise două culori care apoi se pot despărți.
 * Clasa scrisă de două ori dă greutatea: două clase plus pseudo-clasa bat
 * `a:visited` al oricărei teme. E aceeași unealtă folosită în `app.css`
 * pentru file și pentru rândurile panoului, din aceeași pricină.
 *
 * Se scriu numai culorile, nu și restul: culoarea e singurul lucru pe care
 * tema îl putea schimba, iar browserele nici nu lasă `:visited` să schimbe
 * altceva.
 */
.fca-room.fca-room:any-link { color: var(--fca-deck-ink); }
.fca-room.fca-room:any-link:hover { color: var(--fca-deck-lit); }

.fca-room.is-on.fca-room:any-link,
.fca-room.is-on.fca-room:any-link:hover { color: #221802; }

.fca-view.fca-view:any-link { color: var(--fc-muted, #6B7A8C); }
.fca-view.fca-view:any-link:hover { color: var(--fc-ink, #1E2A38); }

.fca-view.is-on.fca-view:any-link,
.fca-view.is-on.fca-view:any-link:hover { color: #fff; }

.fca-brand.fca-brand:any-link,
.fca-brand.fca-brand:any-link:hover { color: var(--fca-deck-lit); }

/* Și legăturile din subsol și din pagina de cameră negăsită: aceleași
   `<a>`-uri, aceeași pândă. */
.fca-rest__one.fca-rest__one:any-link { color: var(--fc-muted, #6B7A8C); }
.fca-rest__one.fca-rest__one:any-link:hover { color: var(--fc-ink, #1E2A38); }
.fca-lost__back.fca-lost__back:any-link,
.fca-lost__back.fca-lost__back:any-link:hover { color: #fff; }
.fca-skip.fca-skip:any-link { color: var(--fc-ink, #1E2A38); }

.fca-mark { flex: 0 0 auto; opacity: .85; }
.fca-room.is-on .fca-mark { opacity: 1; }
.fca-mark--emoji { font-size: var(--fc-bar); line-height: 1; font-style: normal; }

/*
 * Camerele care n-au urcat în antet și titlul lor.
 *
 * Se scriu în pagină întotdeauna, ca să fie gata în sertar, dar pe ecran lat
 * — unde sertarul nu există — n-au ce căuta în rândul de sus: acolo locul lor
 * e subsolul, cum a fost dintotdeauna.
 */
.fca-rooms__title,
.fca-room--rest { display: none; }

/* Pânza care stinge pagina cât timp sertarul e deschis. Nedeschis, nu e. */
.fca-veil { display: none; }

/*
 * Cât timp sertarul e deschis, pagina de dedesubt nu se mai derulează: altfel
 * degetul care voia să aleagă o cameră ar fi mișcat, de fapt, pagina din
 * spatele ei.
 *
 * Nu se scrie aici nicio regulă nouă. Oprirea derulării o are gazda de bază, în
 * `app.css`, sub numele `fclms-no-scroll`, și acolo trebuie să rămână: e
 * aceeași treabă pe care o cer și ferestrele modulelor, iar două clase care fac
 * același lucru s-ar fi stins una pe alta în ziua în care se deschid deodată.
 *
 * Are și o urmare de care era nevoie: la plimbarea fără încărcare de pagină,
 * `editor.js` păstrează de pe `<body>` numai clasele care nu încep cu `fca`.
 * O clasă a noastră ar fi fost ștearsă acolo pe tăcute; aceasta nu e a noastră.
 */

/* --- uneltele din dreapta --- */

.fca-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding-left: 12px;
	margin-left: 6px;
	border-left: 1px solid var(--fca-hair);
}

/* Butonul paletei. Arată ca o casetă de căutare fiindcă asta și e — doar că
   ce se caută în ea sunt camerele, nu textul din ele. */
.fca-jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 9px 0 11px;
	border: 1px solid var(--fca-hair);
	border-radius: 9px;
	background: rgba(255, 255, 255, .06);
	color: var(--fca-deck-ink);
	font: 500 var(--fc-bar)/1 var(--fc-font);
	cursor: pointer;
}

.fca-jump:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--fca-deck-lit);
}

.fca-jump__say { white-space: nowrap; }

.fca-jump__key {
	font: 500 calc(var(--fc-bar) * 0.786)/1 var(--fc-font);
	letter-spacing: .02em;
	padding: 4px 6px;
	border-radius: 5px;
	background: rgba(0, 0, 0, .22);
	color: rgba(255, 255, 255, .62);
}

/*
 * BARA GAZDEI DE BAZĂ, AȘEZATĂ PE CÂMP ÎNTUNECAT
 *
 * Punctele, clopoțelul, ecranul complet și poza ta sunt scrise de
 * `EDUMAG_Header::bar()`, care le croiește pentru un antet deschis la culoare.
 * Aici li se schimbă numai hainele — culoarea și chenarul — nu și purtarea.
 *
 * Se scrie cu `.fca` în față, deci numai înăuntrul aplicației. Aceeași bară,
 * pusă în antetul temei pe restul site-ului, rămâne cum era.
 */
.fca .fclms-headbar {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/*
 * PASTILA PUNCTELOR — NUMAI CEA DIN ANTET
 *
 * Se scrie `.fclms-headbar` anume. Semnul gazdei aplicației, `.fca`, stă pe
 * `<body>`, deci o regulă scrisă numai cu el atinge *fiecare* pastilă de
 * puncte din pagină — și sunt multe: pe fiecare set, pe fiecare pachet, și
 * una în fereastra contului.
 *
 * Culorile de aici sunt ale câmpului întunecat: literele aproape albe, pe un
 * fundal care e doar o urmă de alb. Duse pe hârtie deschisă, ele nu se sting,
 * ci pier: alb pe alb. Așa arăta pastila din fereastra contului — un cerc
 * palid și o cifră pe care trebuia s-o ghicești.
 *
 * Vecinele ei, clopoțelul și ecranul complet, erau scrise de la bun început cu
 * bara în față. Aceasta rămăsese singura fără.
 */
.fca .fclms-headbar .fclms-points {
	background: rgba(255, 255, 255, .09);
	border: 1px solid var(--fca-hair);
	color: var(--fca-deck-lit);
	border-radius: 9px;
	padding: 6px 11px;
	font: 600 var(--fc-bar)/1 var(--fc-font);
	text-decoration: none;
	box-shadow: none;
}

.fca .fclms-headbar .fclms-points:hover { background: rgba(255, 255, 255, .16); }
.fca .fclms-headbar .fclms-points__star { color: var(--fca-warm); }

.fca .fclms-bell,
.fca .fclms-fs {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--fca-hair);
	color: var(--fca-deck-ink);
	border-radius: 9px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: none;
}

.fca .fclms-bell:hover,
.fca .fclms-fs:hover {
	background: rgba(255, 255, 255, .14);
	color: var(--fca-deck-lit);
}

/* Butonul de ecran complet își poartă și un cuvânt scris. În antet n-are loc:
   rămâne semnul, iar cuvântul trăiește mai departe pentru cititoarele de ecran. */
.fca .fclms-fs__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fca .fclms-fs__icon { font-size: var(--fc-bar); line-height: 1; }

.fca .fclms-bell__count {
	background: var(--fc-danger, #C0392B);
	color: #fff;
	border: 2px solid var(--fc-primary-dark, #164760);
}

.fca .fclms-headbar__user {
	border-radius: 50%;
	padding: 0;
	background: none;
	border: 0;
}

.fca .fclms-headbar__face {
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: block;
	box-shadow: 0 0 0 1px var(--fca-hair);
}

.fca .fclms-headbar__user:hover .fclms-headbar__face {
	box-shadow: 0 0 0 2px var(--fca-warm);
}

/*
 * Privirea pornită, în gazda aplicației.
 *
 * Inelul trece peste cel de hover și peste firul obișnuit — e scris după
 * amândouă și cu aceeași greutate, deci câștigă. Dinadins: cât te uiți cu
 * ochii altui rol, nimic din bară nu trebuie să te lase să uiți.
 */
.fca .fclms-headbar__user.is-viewing .fclms-headbar__face,
.fca .fclms-headbar__user.is-viewing:hover .fclms-headbar__face {
	box-shadow: 0 0 0 3px #f5a623;
}

.fca .fclms-headbar__name { color: var(--fca-deck-lit); font: 600 var(--fc-bar)/1 var(--fc-font); }

/* Ușa pentru cine n-are cont. */
.fca .fclms-loginbtn {
	background: var(--fca-warm);
	color: #221802;
	border: 0;
	border-radius: 9px;
	padding: 8px 15px;
	font: 600 var(--fc-bar)/1 var(--fc-font);
}

.fca .fclms-loginbtn:hover { filter: brightness(1.08); }

/* ------------------------------------------------------ rândul al doilea */

.fca-rail {
	height: var(--fca-rail-h);
	background: var(--fc-surface, #fff);
	border-bottom: 1px solid var(--fc-line, #DDE4EC);
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 clamp(10px, 2.4vw, 22px);
	overflow-x: auto;
	scrollbar-width: none;
}

.fca-rail::-webkit-scrollbar { display: none; }

.fca-where {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fc-ink, #1E2A38);
	font-size: var(--fc-bar);
	font-weight: 600;
	letter-spacing: -.005em;
	white-space: nowrap;
	flex: 0 0 auto;
	padding-right: 15px;
}

.fca-where .fca-mark { opacity: .55; }

/* Filele urmează după un fir vertical: se vede că sunt ale camerei numite în
   stânga, nu un al doilea meniu al gazdei. */
.fca-views {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-left: 15px;
	border-left: 1px solid var(--fc-line, #DDE4EC);
	min-width: 0;
}

/*
 * FILELE, CROITE LA FEL CA ȘI CAMERELE
 *
 * Aceeași pastilă, doar pe câmp deschis în loc de câmp întunecat: aceeași
 * rotunjire, același fel de a se aprinde. Sunt două rânduri de meniu care fac
 * același lucru la două trepte deosebite; croite altfel, ar fi cerut ochiului
 * să învețe de două ori ce înseamnă „aici ești”.
 *
 * Firul de dedesubt a plecat și de aici, și odată cu el a plecat și grija pe
 * care o cerea: rândul are `overflow-x: auto`, deci și `overflow-y` era
 * socotit `auto`, iar un pixel ieșit în afară scotea o bară de derulare pe
 * verticală într-un rând înalt de patruzeci. O pastilă nu iese din rând.
 */
.fca-view {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 13px;
	border-radius: 8px;
	color: var(--fc-muted, #6B7A8C);
	text-decoration: none;
	font-size: var(--fc-bar);
	font-weight: 500;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color 120ms ease, color 120ms ease;
}

.fca-view:hover { color: var(--fc-ink, #1E2A38); background: var(--fc-paper, #F4F6F8); }

/*
 * Fila aleasă ia culoarea de bază a gazdei, plină, cu literele în alb. Nu
 * aurul de sus: aurul spune „camera în care ești”, iar dacă l-ar purta și
 * fila, cele două rânduri ar fi arătat ca două alegeri de același rang. Aici
 * sunt trepte: gazda deasupra, camera dedesubt.
 */
.fca-view.is-on {
	background: var(--fc-primary, #1F5E7A);
	color: #fff;
	font-weight: 600;
}

.fca-view.is-on:hover {
	background: var(--fc-primary, #1F5E7A);
	color: #fff;
	filter: brightness(1.1);
}

/*
 * FILELE CARE SUNT, DE FAPT, ALTE CAMERE
 *
 * Meciurile și Clasele live stau în rândul Cartonașelor, fiindcă acolo le e
 * locul — se joacă și se predă cu aceleași cartonașe. Dar nu sunt vederi ale
 * lor, sunt camere de sine stătătoare, cu adresa lor.
 *
 * Deosebirea se scrie în două feluri mărunte: un fir care le desparte de
 * file, și semnul camerei purtat alături de nume. Croite altfel — altă
 * culoare, altă formă — ar fi cerut ochiului să învețe încă un fel de
 * pastilă, pentru un lucru care se apasă la fel.
 */
.fca-views__cut {
	width: 1px;
	height: 18px;
	background: var(--fc-line, #DDE4EC);
	margin: 0 7px;
	flex: 0 0 auto;
}

.fca-view--room { gap: 7px; }

.fca-view--room .fca-mark { opacity: .6; }

.fca-view--room:hover .fca-mark,
.fca-view--room.is-on .fca-mark { opacity: 1; }

/* ==========================================================================
 * RUBRICILE CAMEREI, URCATE ÎN RÂND
 * ==========================================================================
 *
 * Rândul de pastile pe care și-l scrie camera — „Premium / Cartonașele mele /
 * Partajate cu mine” și frații lui — e mutat aici de `app-shell.js`. E același
 * element, cu aceleași clase ale gazdei de bază, deci vine cu hainele lui puse:
 * o bară lipită sus, cu fundal opac și o umbră sub ea, croită pentru locul din
 * care a plecat.
 *
 * Aici i se scot hainele acelea. Nu i se schimbă clasele — codul camerei își
 * caută rândul după ele — ci se scrie peste stiluri, de aici, unde ajungem
 * după `app.css` și avem ultimul cuvânt.
 */

.fca-rail__slot {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 0 1 auto;
}

/* Nechemat, locul nu e. O margine goală lăsată în rând ar fi împins filele
   fără ca nimeni să vadă de ce. */
.fca-rail__slot:empty { display: none; }

/* Firul vertical desparte rubricile de filele camerei, ca filele să se vadă
   ale camerei și rubricile ale vederii — două trepte, nu o listă lungă. */
.fca-views + .fca-rail__slot {
	margin-left: 13px;
	padding-left: 13px;
	border-left: 1px solid var(--fc-line, #DDE4EC);
}

.fca-rail .fclms-subtabs {
	/*
	 * Așezarea se scrie din nou, deși `app.css` o dă deja. Regulile de aici
	 * trebuie să stea și singure: dacă mâine rândul acela se croiește altfel
	 * în gazda de bază, antetul aplicației nu are voie să se strice odată cu
	 * el. E aceeași socoteală ca la culorile de mai sus.
	 */
	display: flex;
	align-items: center;
	position: static;
	top: auto;
	z-index: auto;
	margin: 0;
	padding: 0;
	gap: 4px;
	flex-wrap: nowrap;
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* Fâșia care lățea bara peste marginile paginii. În rând n-are ce lăți. */
.fca-rail .fclms-subtabs::before { display: none; }

/*
 * Pastilele iau croiala filelor, nu pe a lor.
 *
 * Ale lor sunt rotunde de tot, cu chenar de un pixel și jumătate și litere de
 * paisprezece: croite pentru mijlocul paginii, unde au loc. Puse lângă file,
 * două feluri de pastile alăturate ar fi arătat ca două meniuri lipite din
 * întâmplare, nu ca două trepte ale aceluiași drum.
 */
.fca-rail .fclms-subtabs .fclms-pill {
	display: inline-flex;
	align-items: center;
	font-family: inherit;
	cursor: pointer;
	height: 30px;
	padding: 0 13px;
	gap: 6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fc-muted, #6B7A8C);
	font-size: var(--fc-bar);
	font-weight: 500;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color 120ms ease, color 120ms ease;
}

.fca-rail .fclms-subtabs .fclms-pill:hover {
	background: var(--fc-paper, #F4F6F8);
	color: var(--fc-ink, #1E2A38);
}

/*
 * Rubrica aleasă nu ia culoarea plină a filei alese, ci numai o tentă din ea.
 *
 * Dacă ar lua-o, pe rând ar fi stat două pastile pline, una lângă alta, la fel
 * de tari: „Raft” și „Premium”, arătând ca două alegeri de același rang. Sunt
 * însă trepte — vederea deasupra, rubrica dedesubt — iar tenta o spune fără
 * să scrie nimic.
 */
.fca-rail .fclms-subtabs .fclms-pill.is-active {
	background: rgba(var(--fc-primary-rgb, 31, 94, 122), .12);
	color: var(--fc-primary, #1F5E7A);
	font-weight: 600;
}

.fca-rail .fclms-subtabs .fclms-pill.is-active:hover {
	background: rgba(var(--fc-primary-rgb, 31, 94, 122), .18);
}

/* Semnele din pastile — un diamant, un creion, două mâini — sunt emoji și
   vin cu mărimea lor. În rând se strâng. */
.fca-rail .fclms-subtabs .fclms-pill__icon,
.fca-rail .fclms-subtabs .fclms-pill > span:first-child { font-size: var(--fc-bar); }

.fca-rail .fclms-subtabs .fclms-pill:focus-visible {
	outline: 2px solid var(--fc-primary, #1F5E7A);
	outline-offset: 2px;
}

/*
 * Cifra de lângă un nume — cererile de prietenie nedeschise, mesajele
 * necitite — vine croită pentru o pastilă înaltă de treizeci și șase. În
 * rândul de treizeci se strânge, altfel ea singură ar fi umflat pastila
 * peste înălțimea filelor de lângă ea.
 */
.fca-rail .fclms-subtabs .fclms-pill .fclms-count,
.fca-rail .fclms-subtabs .fclms-pill .fclms-pill__count {
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	margin-left: 2px;
	font-size: calc(var(--fc-bar) * 0.75);
	line-height: 17px;
}

/* ==========================================================================
 * ÎNVELIȘUL ȘI ECRANUL COMPLET
 * ==========================================================================
 *
 * `.fca-shell` e elementul din jurul antetului, camerei, subsolului și
 * paletei. Adăugat pentru ecranul complet, el trebuie mai întâi să nu strice
 * nimic în afara lui: pagina era o coloană flexibilă scrisă pe `<body>`, iar
 * un element nou pus la mijloc ar fi rupt-o — subsolul ar fi urcat lipit de
 * conținut pe camerele scurte, în loc să stea la fund.
 *
 * Se face deci el coloana, iar `<body>` îl întinde cât pagina.
 */

.fca-shell {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

/*
 * PE TOT ECRANUL, CU GAZDA CU TOT
 *
 * Cerut pe tot ecranul, învelișul nu mai are pagina sub el: e chiar el
 * pagina. Deci își ia înălțimea întreagă și devine el cel care se derulează
 * — altfel conținutul mai lung decât ecranul n-ar mai fi putut fi ajuns cu
 * degetul, fiindcă derularea paginii de dedesubt nu se mai vede.
 *
 * Fundalul se scrie anume. Un element cerut pe tot ecranul primește de la
 * browser un fundal negru, iar culoarea paperului venea de pe `<body>`, care
 * acum nu se mai desenează: fără rândul acesta, gazda s-ar fi deschis cu
 * marginile negre în jurul fiecărei camere.
 *
 * Cele două nume — `:fullscreen` și `:-webkit-full-screen` — se scriu în
 * reguli deosebite. Puse într-o listă, un browser care nu-l cunoaște pe al
 * doilea aruncă regula întreagă, cu tot cu prima.
 */

.fca-shell:fullscreen {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--fc-paper, #F4F6F8);
}

.fca-shell:-webkit-full-screen {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--fc-paper, #F4F6F8);
}

/*
 * Varianta de rezervă, pentru browserele care nu dau ecran complet unui
 * element — Safari pe iPhone, mai ales. Nu e ecran complet adevărat, bara
 * browserului rămâne; e însă tot ce se poate face acolo, și e mai bine decât
 * un buton care nu face nimic.
 */
.fca-shell.is-faux-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 99998;
	height: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--fc-paper, #F4F6F8);
}

/*
 * CÂRLIGUL DE LA ÎNCĂRCARE
 *
 * Aceleași reguli ca varianta de rezervă, dar agățate de `<html>`, fiindcă
 * în clipa în care se scriu gazda încă nu e citită de browser. Țin numai cât
 * ține drumul lui `editor.js` până în subsol — vezi scriptul din capul
 * paginii, în `templates/app.php`.
 */
.fca-fs-hold .fca-shell {
	position: fixed;
	inset: 0;
	z-index: 99998;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--fc-paper, #F4F6F8);
	display: flex;
	flex-direction: column;
}

.fca-fs-hold .fca-head { top: 0; }
.fca-fs-hold body { overflow: hidden; }

/*
 * ANTETUL RĂMÂNE LIPIT SUS, DAR DE ÎNVELIȘ
 *
 * `position: sticky` se socotește față de ce se derulează. În pagină aceea e
 * fereastra; în ecran complet e învelișul. Regula nu se schimbă — sticky face
 * singur trecerea — dar ridicătura pusă pentru bara WordPress trebuie stinsă:
 * bara aceea a rămas afară, nedesenată, iar antetul ar fi stat cu treizeci și
 * doi de pixeli de gol deasupra lui, lipiți de nimic.
 */
.fca-shell:fullscreen .fca-head { top: 0; }
.fca-shell:-webkit-full-screen .fca-head { top: 0; }
.fca-shell.is-faux-fullscreen .fca-head { top: 0; }

/*
 * Subsolul se lipește de fundul ecranului și în ecran complet: pe o cameră
 * scurtă — „Nicio factură încă” — ar fi rămas altfel agățat sub trei rânduri
 * de text, cu o jumătate de ecran gol dedesubt.
 */
.fca-shell:fullscreen { display: flex; flex-direction: column; }
.fca-shell:-webkit-full-screen { display: flex; flex-direction: column; }
.fca-shell.is-faux-fullscreen { display: flex; flex-direction: column; }

/*
 * Paleta de comenzi e scrisă cu `position: fixed`, adică față de fereastră.
 * În ecran complet fereastra e învelișul, deci se așază singură cum trebuie —
 * dar numai fiindcă e înăuntrul lui. Lăsată afară, `Ctrl+K` ar fi deschis-o
 * într-o parte a paginii pe care browserul n-o mai desenează, iar apăsarea ar
 * fi părut că nu face nimic. Vezi `templates/app.php`.
 */

/* ==========================================================================
 * MIJLOCUL
 * ========================================================================== */

.fca-main {
	flex: 1 0 auto;
	width: 100%;
	outline: 0;
}

/*
 * Camera își păstrează lățimea pe care i-o dă foaia pluginului de bază. Aici
 * se scoate doar spațiul de care ea nu mai are nevoie: containerul `fclms-app`
 * își punea margini de sus ca să se desprindă de antetul temei, iar antetul
 * temei nu mai există.
 */
.fca .fclms-app--module { margin-top: 0; padding-top: clamp(14px, 2.4vw, 26px); }

/*
 * Aerul din lături, pus pe cutia camerei.
 *
 * Nu pe `.fca-main`: cutia dinăuntru e croită anume să iasă din el, până la
 * marginile ferestrei (`margin-left: calc(50% - var(--fc-bleed) / 2)`), deci
 * un `padding` pus acolo n-ar fi împins nimic. Aici, pe cutia însăși, e
 * chiar locul unde hârtia rămâne întinsă și numai scrisul de pe ea se trage
 * înăuntru.
 *
 * Antetul și subsolul nu sunt atinse: ele au socoteala lor, `.fca-deck__in`
 * și `.fca-foot__in`, și nu trec pe aici.
 *
 * Contul stă alături fiindcă își face cutia lui, fără `--module`, dar e tot
 * o cameră a gazdei și n-are de ce să se citească altfel decât celelalte.
 */
.fca .fclms-app--module,
.fca .fclms-app--account {
	padding-left: var(--fca-gutter);
	padding-right: var(--fca-gutter);
}

/* Camera care nu există. */
.fca-lost {
	max-width: 34rem;
	margin: clamp(40px, 12vh, 110px) auto;
	padding: 0 22px;
	text-align: center;
}

.fca-lost__say {
	font-family: var(--fc-font);
	font-size: var(--fc-p);
	color: var(--fc-muted, #6B7A8C);
	margin: 0 0 18px;
}

.fca-lost__back {
	display: inline-block;
	background: var(--fc-primary, #1F5E7A);
	color: #fff;
	text-decoration: none;
	font: 600 var(--fc-p)/1 var(--fc-font);
	padding: 12px 20px;
	border-radius: 10px;
}

/* ==========================================================================
 * SUBSOLUL
 * ========================================================================== */

.fca-foot {
	flex: 0 0 auto;
	margin-top: clamp(30px, 6vw, 64px);
	background: var(--fc-surface, #fff);
	border-top: 1px solid var(--fc-line, #DDE4EC);
	font-family: var(--fc-font);
	font-size: var(--fc-bar);
}

.fca-foot__in {
	max-width: var(--fc-content-max, 1200px);
	margin: 0 auto;
	padding: 26px clamp(14px, 3vw, 26px) 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 26px 40px;
	align-items: start;
}

/*
 * Camerele de jos, ca grilă.
 *
 * Fără cartonașe, fără chenare: sunt legături, iar o legătură arătată ca un
 * card cere să fie apăsată. Astea nu cer nimic — stau aici pentru clipa în
 * care cineva chiar caută factura de luna trecută.
 */
.fca-rest {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
	gap: 2px 10px;
}

.fca-rest__one {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	margin-left: -10px;
	border-radius: 8px;
	color: var(--fc-muted, #6B7A8C);
	text-decoration: none;
	font-size: var(--fc-bar);
	font-weight: 500;
}

.fca-rest__one:hover {
	background: var(--fc-paper, #F4F6F8);
	color: var(--fc-primary, #1F5E7A);
}

.fca-rest__one .fca-mark { opacity: .5; }
.fca-rest__one:hover .fca-mark { opacity: 1; }

.fca-sign { text-align: right; font-size: var(--fc-bar); color: var(--fc-muted, #6B7A8C); }

.fca-sign p { margin: 0 0 7px; }

.fca-sign__who { color: var(--fc-ink, #1E2A38); font-weight: 600; }

.fca-sign__links { display: flex; gap: 16px; justify-content: flex-end; }

.fca-sign__links a { color: var(--fc-primary, #1F5E7A); text-decoration: none; }
.fca-sign__links a:hover { text-decoration: underline; }

.fca-sign__note { max-width: 30ch; margin-left: auto; }

/*
 * COLȚUL CASEI: O SINGURĂ PIESĂ A GRILEI (1.39.17)
 *
 * Camerele din subsol, copyright-ul, versiunea și rețelele erau patru piese
 * așezate fiecare pe rândul ei de grilă. Iar rândurile își iau înălțimea de
 * la piesa cea mai înaltă — care e, în dreapta, tot colțul omului: nume,
 * legături, butonul de întoarcere. Așa, cele din stânga se trăgeau una de
 * alta, cu goluri de-o palmă între ele, în dreptul unor rânduri care nu
 * erau ale lor.
 *
 * Strânse într-o cutie, sunt o singură piesă și se așază una sub alta:
 * trei rânduri în stânga, trei în dreapta, nimic gol la mijloc.
 */
.fca-corner {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.fca-corner > * { margin: 0; }

.fca-copy { color: var(--fc-ink, #16202B); }

.fca-ver {
	font-size: .85em;
	color: var(--fc-muted, #6B7A8C);
}

/* Rețelele stau ceva mai jos: sunt butoane, nu un rând de scris. */
.fca-corner .fca-social { margin-top: 4px; }

.fca-sign { grid-column: 2; grid-row: 1; }

.fca-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fca-social__one {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--fc-line, #DDE4EC);
	border-radius: 50%;
	color: var(--fc-muted, #6B7A8C);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.fca-social__one:hover,
.fca-social__one:focus-visible {
	color: var(--fc-primary, #1F5E7A);
	border-color: var(--fc-primary, #1F5E7A);
	transform: translateY(-2px);
}

.fca-social__one svg { width: 19px; height: 19px; }

/*
 * DOCUMENTELE LEGALE, SUB REȚELE
 *
 * Scris mărunt și cuminte, fără chenare: sunt rânduri pe care nimeni nu le
 * caută în fiecare zi, dar care trebuie găsite din prima când sunt căutate.
 * Un rând de butoane mari acolo ar fi tras ochiul de la camerele casei, care
 * sunt drumuri umblate.
 *
 * Butonul de cookies stă în același rând și arată la fel, deși e buton: dacă
 * s-ar fi deosebit, ar fi părut o unealtă, nu o legătură — iar el e tot o cale
 * către o hotărâre luată o dată.
 */
.fca-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}

.fca-legal__one {
	font: inherit;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--fc-muted, #6B7A8C);
	text-decoration: none;
	transition: color .15s ease;
}

.fca-legal__one:hover,
.fca-legal__one:focus-visible {
	color: var(--fc-primary, #1F5E7A);
	text-decoration: underline;
}

/*
 * DRUMUL ÎNAPOI LA SITE
 *
 * Un buton conturat, nu o legătură scrisă printre celelalte: el scoate din
 * aplicație, iar lucrul acesta trebuie apăsat cu voie, nu nimerit.
 *
 * Săgeata se dă înapoi cu doi pași la trecerea cu mâna peste el — atât cât
 * să se vadă că e o plecare, nu un drum mai adânc în casă.
 */
.fca-sign__back { margin-top: 14px; margin-left: auto; }

.fca-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--fc-line, #DDE4EC);
	border-radius: 999px;
	background: var(--fc-surface, #fff);
	color: var(--fc-ink, #16202B);
	text-decoration: none;
	font: 600 var(--fc-bar) / 1 var(--fc-font);
}

.fca-back:hover,
.fca-back:focus-visible {
	border-color: var(--fc-primary, #1F5E7A);
	color: var(--fc-primary, #1F5E7A);
}

.fca-back svg {
	width: 16px;
	height: 16px;
	transition: transform .15s ease;
}

.fca-back:hover svg { transform: translateX(-2px); }

/* ==========================================================================
 * PALETA DE COMENZI
 * ========================================================================== */

.fca-pal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(60px, 14vh, 150px) 18px 18px;
	font-family: var(--fc-font);
}

.fca-pal[hidden] { display: none; }

.fca-pal__veil {
	position: absolute;
	inset: 0;
	background: rgba(15, 28, 38, .5);
	backdrop-filter: blur(3px);
}

.fca-pal__box {
	position: relative;
	width: min(560px, 100%);
	background: var(--fc-surface, #fff);
	border-radius: 16px;
	box-shadow: 0 24px 70px rgba(15, 28, 38, .34);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: min(62vh, 520px);
	/* Singura mișcare nechemată din toată gazda, și numai fiindcă arată de unde
	   a venit fereastra: crescută din nimic, se vede că e deasupra paginii,
	   nu o bucată nouă a ei. */
	animation: fca-rise 140ms cubic-bezier(.2, .8, .3, 1);
}

@keyframes fca-rise {
	from { opacity: 0; transform: translateY(-8px) scale(.985); }
	to { opacity: 1; transform: none; }
}

.fca-pal__field {
	border: 0;
	border-bottom: 1px solid var(--fc-line, #DDE4EC);
	padding: 18px 20px;
	font: 400 var(--fc-p)/1.3 var(--fc-font);
	color: var(--fc-ink, #1E2A38);
	background: none;
	outline: 0;
	width: 100%;
	box-sizing: border-box;
}

.fca-pal__field::placeholder { color: var(--fc-muted, #6B7A8C); }

.fca-pal__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.fca-pal__one {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 13px;
	border-radius: 9px;
	cursor: pointer;
	color: var(--fc-ink, #1E2A38);
	font-size: var(--fc-p);
}

/* Semnul vine din server ca desen ori ca emoji, iar scriptul îl pune într-un
   înveliș al lui. Învelișul e cel care ține alinierea, ca cele două feluri de
   semne să stea la fel de drept lângă nume. */
.fca-pal__markwrap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
}

.fca-pal__one .fca-mark { opacity: .55; }

/* Rândul ales, la tastatură sau sub cursor. Aceeași înfățișare pentru
   amândouă: sunt același lucru — „acesta se deschide dacă apeși acum”. */
.fca-pal__one.is-on {
	background: var(--fc-primary, #1F5E7A);
	color: #fff;
}

.fca-pal__one.is-on .fca-mark { opacity: 1; }
.fca-pal__one.is-on .fca-pal__view { color: rgba(255, 255, 255, .72); }

.fca-pal__room { font-weight: 500; }

.fca-pal__view {
	margin-left: auto;
	color: var(--fc-muted, #6B7A8C);
	font-size: var(--fc-small);
}

.fca-pal__none {
	padding: 26px 20px;
	text-align: center;
	color: var(--fc-muted, #6B7A8C);
	font-size: var(--fc-p);
}

.fca-pal__keys {
	display: flex;
	gap: 18px;
	padding: 10px 16px;
	border-top: 1px solid var(--fc-line, #DDE4EC);
	background: var(--fc-paper, #F4F6F8);
	color: var(--fc-muted, #6B7A8C);
	font-size: var(--fc-small);
}

.fca-pal__keys span { display: inline-flex; align-items: center; gap: 5px; }

.fca-pal__keys kbd {
	font: 500 calc(var(--fc-small) * 0.88)/1 var(--fc-font);
	background: var(--fc-surface, #fff);
	border: 1px solid var(--fc-line, #DDE4EC);
	border-radius: 4px;
	padding: 3px 5px;
	color: var(--fc-ink, #1E2A38);
}

/* ==========================================================================
 * INELUL DE LA TASTATURĂ
 * ==========================================================================
 *
 * Se scrie o dată, pentru tot ce se poate apăsa în gazdă. Pe câmp întunecat e
 * auriu, pe câmp deschis e în culoarea de bază: în amândouă locurile se vede,
 * ceea ce e singurul lucru care i se cere.
 */

.fca-room:focus-visible,
.fca-burger:focus-visible,
.fca-brand:focus-visible,
.fca-jump:focus-visible,
.fca .fclms-headbar :focus-visible {
	outline: 2px solid var(--fca-warm);
	outline-offset: -2px;
	border-radius: 8px;
}

/* Pe aur, inelul auriu n-ar avea cu ce se deosebi. Aceeași socoteală ca la
   butonul de ecran complet apăsat, câțiva rânduri mai jos. */
.fca-room.is-on:focus-visible { outline-color: var(--fca-deck-lit); }

/*
 * CE E FOCALIZAT SE VEDE CEL PUȚIN LA FEL DE BINE CA CE E SUB CURSOR
 *
 * Chenarul de mai sus spunea unde ai ajuns, dar nu spunea nimic despre
 * literele dinăuntrul lui: ele rămâneau în culoarea de repaus, alb la 78 la
 * sută. Iar camera apăsată păstrează focalizarea după apăsare, deci rămânea
 * pe ecran un buton încercuit cu litere mai stinse decât ale vecinilor lui —
 * arăta ca și cum tocmai acela ar fi fost stins, când de fapt tocmai el era
 * cel ales.
 *
 * Focalizarea primește deci aceeași lumină ca trecerea cursorului. E și
 * regula bună, dincolo de defectul acesta: ce e ales cu tastatura n-are voie
 * să se vadă mai prost decât ce e atins cu mouse-ul. Cine umblă cu tastatura
 * nu are cursor cu care să lămurească ce vede.
 *
 * Se scrie și pentru semn: el are în repaus 85 la sută, iar lăsat așa ar fi
 * rămas singurul lucru stins dintr-un buton altfel aprins.
 */
/*
 * Se scrie `:not(.is-on)` anume. Regula aceasta vine, în fișier, după cea care
 * dă pastila de aur, iar cele două au aceeași putere: fără paza aceasta,
 * camera în care ești și-ar fi pierdut aurul chiar în clipa în care e apăsată
 * — adică exact atunci când tocmai a devenit camera în care ești.
 */
.fca-room:not(.is-on):focus-visible {
	color: var(--fca-deck-lit);
	background: rgba(255, 255, 255, .11);
}

.fca-room:focus-visible .fca-mark { opacity: 1; }

/*
 * ȘI UNELTELE DIN DREAPTA, DUPĂ ACEEAȘI SOCOTEALĂ
 *
 * Butonul de ecran complet, clopoțelul și butonul paletei sunt croite la fel
 * ca o cameră: culoare de repaus stinsă, aprinsă numai de trecerea cursorului.
 * Aveau deci și același neajuns, iar la butonul de ecran complet se vedea cel
 * mai des — el se apasă, păstrează focalizarea, și rămâne încercuit și stins
 * chiar în clipa în care tocmai a făcut ce i s-a cerut.
 *
 * Fundalul de la focalizare se ia din starea de sub cursor a fiecăruia, nu
 * unul singur pentru toate: clopoțelul și ecranul complet îl au ceva mai
 * apăsat decât paleta, iar o valoare unică i-ar fi făcut pe unii să sară în
 * ochi mai tare decât pe alții, fără niciun temei.
 *
 * Chipul din capătul rândului nu intră aici: el nu are culoare de literă, ci
 * un inel în jur, și îl primește deja de la regula lui.
 */
.fca-jump:focus-visible {
	color: var(--fca-deck-lit);
	background: rgba(255, 255, 255, .12);
}

.fca .fclms-bell:focus-visible,
.fca .fclms-fs:focus-visible {
	color: var(--fca-deck-lit);
	background: rgba(255, 255, 255, .14);
}

.fca .fclms-headbar__user:focus-visible .fclms-headbar__face,
.fca .fclms-headbar__user:focus-within .fclms-headbar__face {
	box-shadow: 0 0 0 2px var(--fca-warm);
}

/*
 * BUTONUL DE ECRAN COMPLET, ÎN ANTETUL APLICAȚIEI
 *
 * Aici erau două lucruri stricate deodată, și amândouă veneau din același
 * loc: `app.css` scrie butonul cu `!important`.
 *
 * Are dreptate s-o facă, în lumea lui: acolo butonul stă pe hârtie deschisă,
 * într-un antet alb, și e croit ca să se vadă pe ea. Antetul aplicației e
 * însă câmp întunecat, iar regulile noastre pentru el — scrise fără
 * `!important`, cum se cuvine — pierdeau lupta fără să se audă nimic.
 *
 * Urmarea, întâi: butonul nu semăna cu vecinii lui, clopoțelul și paleta,
 * deși e croit să le semene.
 *
 * Urmarea, a doua, și cea care se simțea: apăsat, `syncButtons()` îi pune
 * clasa `is-on`, iar `app.css` o desenează în albastrul lui de bază — culoare
 * bună pe alb, dar aproape una cu fundalul pe teal-ul antetului. Butonul își
 * schimba cinstit starea și nu se vedea. De aici a pornit tot: „nu apare ca
 * fiind apăsat butonul”.
 *
 * Se răspunde deci cu aceeași armă, dar numai înăuntrul aplicației — `.fca`
 * în față, ca nimic din restul site-ului să nu simtă. `!important` scris ca
 * răspuns la un `!important` e o urâțenie, dar e urâțenia cinstită: cealaltă
 * cale ar fi fost să scoatem `!important`-ul din `app.css` și să vedem peste
 * o lună ce s-a stricat în paginile obișnuite.
 *
 * Aprins, butonul ia aurul gazdei. E singura culoare tare din antet și e
 * păstrată pentru un singur lucru: firul de sub camera în care ești. Aici nu
 * se bat, fiindcă nu stau alături — firul e jos, pe muchie, butonul sus, în
 * dreapta.
 */
.fca .fclms-headbar .fclms-fs,
.fca .fclms-headbar .fclms-bell {
	background-color: rgba(255, 255, 255, .06) !important;
	color: var(--fca-deck-ink) !important;
	border-color: var(--fca-hair) !important;
}

.fca .fclms-headbar .fclms-fs:hover,
.fca .fclms-headbar .fclms-bell:hover,
.fca .fclms-headbar .fclms-fs:focus-visible,
.fca .fclms-headbar .fclms-bell:focus-visible {
	background-color: rgba(255, 255, 255, .14) !important;
	color: var(--fca-deck-lit) !important;
}

.fca .fclms-headbar .fclms-fs.is-on {
	background-color: var(--fca-warm) !important;
	border-color: transparent !important;
	color: #221802 !important;
}

.fca .fclms-headbar .fclms-fs.is-on:hover {
	filter: brightness(1.08);
}

/* Pe aur, chenarul auriu de focalizare n-ar mai avea cu ce se deosebi. */
.fca .fclms-headbar .fclms-fs.is-on:focus-visible {
	outline-color: var(--fca-deck-lit);
}

.fca-view:focus-visible,
.fca-rest__one:focus-visible,
.fca-lost__back:focus-visible,
.fca-pal__field:focus-visible {
	outline: 2px solid var(--fc-primary, #1F5E7A);
	outline-offset: 2px;
}

/* Iar pe fila plină, unde inelul în culoarea de bază s-ar fi pierdut în ea. */
.fca-view.is-on:focus-visible { outline-color: var(--fc-ink, #1E2A38); }

/* ==========================================================================
 * ECRANE ÎNGUSTE
 * ==========================================================================
 *
 * DE CE, TOTUȘI, UN SERTAR
 *
 * Aici scria până acum că nu se face un al doilea fel de meniu: camerele rămân
 * în rândul lor și se dau la o parte cu degetul, ca să nu fie două sisteme de
 * navigat pe același ecran, fiecare cu felul lui de a greși.
 *
 * Temeiul era bun. Greșit era că soluția aceea chiar *era* un al doilea
 * sistem, doar unul nemărturisit: pe lat citeai nume, pe îngust ghiceai semne,
 * iar camera aprinsă putea sta oriunde dincolo de marginea din dreapta. Și mai
 * era ceva ce nu se putea drege: un rând care se derulează n-are cum spune că
 * mai e ceva după margine. Degetul află numai dacă încearcă — iar cine nu
 * încearcă rămâne cu jumătate de gazdă nevăzută.
 *
 * Sertarul nu adaugă un al doilea meniu, fiindcă nu e scris a doua oară. Sunt
 * aceleași legături, cu aceleași clase și aceeași cameră aprinsă, doar așezate
 * una sub alta în loc de una lângă alta; CSS-ul le mută, nimeni nu le copiază.
 * Nu se pot depărta între ele, fiindcă sunt același lucru.
 *
 * Și mai câștigă ceva: în el încap și camerele care nu urcaseră în antet. Pe
 * ecran lat ele stau în subsol, la capătul paginii; pe telefon, unde paginile
 * sunt lungi, capătul paginii e departe.
 *
 * Hotarul e la 1024: acolo intră și tableta în picioare, și cea culcată. Sub
 * el, șase camere cu numele lor, semnul gazdei și uneltele din dreapta nu mai
 * încap într-un rând — și tocmai asta se vedea, cu uneltele împinse afară din
 * ecran.
 */

@media (max-width: 1024px) {
	.fca-burger { display: inline-flex; }

	/* Firele de lumină despărțeau camerele de semn într-o parte și de unelte
	   în cealaltă. Camerele au plecat în sertar, deci amândouă ar fi rămas
	   să despartă ceva de nimic. */
	.fca-brand { border-right: 0; padding-right: 0; margin-right: 0; }
	.fca-tools { border-left: 0; padding-left: 0; }

	/* Uneltele se duc singure în dreapta, fiindcă rândul camerelor — care
	   umplea golul dintre ele și semn — nu mai e acolo să-l umple. */
	.fca-tools { margin-left: auto; }

	/*
	 * BUTONUL ȘI SEMNUL GAZDEI RĂMÂN DEASUPRA SERTARULUI
	 *
	 * Sertarul e lat de trei sute de pixeli și se deschide din colțul din
	 * stânga sus — adică taman peste butonul din care a fost deschis. Lăsat
	 * dedesubt, butonul se făcea nevăzut chiar în clipa în care își schimba
	 * semnul în cruce, iar sertarul se putea închide numai cu pânza sau cu
	 * Escape: două lucruri pe care nu le vede nimeni pe un telefon.
	 *
	 * Ridicate, cele două stau în fâșia goală din capul sertarului — de aceea
	 * are el o margine de sus cât rândul dintâi — și se citesc mai departe ca
	 * un antet: crucea și numele gazdei, în același loc în care erau.
	 *
	 * Numerele se socotesc înăuntrul antetului, nu al paginii: `.fca-head` are
	 * `z-index: 60`, deci face o lume a lui, iar pânza și sertarul se așază
	 * unul față de altul numai acolo.
	 */
	.fca-head.is-open .fca-burger,
	.fca-head.is-open .fca-brand {
		position: relative;
		z-index: 135;
	}

	.fca-jump__say,
	.fca-jump__key { display: none; }
	.fca-jump { width: 34px; padding: 0; justify-content: center; }

	/* --- sertarul --- */

	.fca-rooms {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 130;
		width: min(310px, 84vw);
		display: block;
		box-sizing: border-box;
		/*
		 * Marginea de sus e cât rândul dintâi al antetului, plus puțin. E
		 * fâșia goală în care rămân, ridicate deasupra sertarului, crucea de
		 * închidere și numele gazdei — vezi regula lor, mai sus. Fără ea,
		 * crucea ar fi căzut peste prima cameră din listă.
		 */
		padding: calc(var(--fca-deck-h) + 8px) 12px calc(14px + env(safe-area-inset-bottom, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--fc-primary-dark, #164760);
		box-shadow: 12px 0 40px rgba(15, 28, 38, .3);

		/*
		 * Închis, sertarul nu e doar dus în afara ecranului: e stins cu
		 * totul. Mutat numai cu `transform`, ar fi rămas în drumul
		 * Tab-ului — cine umblă cu tastatura ar fi străbătut cincisprezece
		 * legături nevăzute înainte de a ajunge la conținut.
		 *
		 * `visibility` se stinge după ce alunecarea s-a sfârșit, nu odată
		 * cu ea: stinsă la început, sertarul ar fi pierit dintr-o dată în
		 * loc să iasă pe unde a intrat.
		 */
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform 220ms cubic-bezier(.2, .8, .3, 1), visibility 0s 220ms;
	}

	.fca-head.is-open .fca-rooms {
		visibility: visible;
		transform: none;
		transition: transform 220ms cubic-bezier(.2, .8, .3, 1), visibility 0s;
	}

	/* În sertar, pastila ține rândul întreg: e o listă, iar într-o listă
	   ținta se caută pe verticală, nu pe orizontală. */
	.fca-room {
		display: flex;
		width: 100%;
		height: 44px;
		box-sizing: border-box;
		margin-bottom: 2px;
		font-size: calc(var(--fc-bar) * 1.071);
	}

	.fca-rooms__title {
		display: block;
		margin: 16px 0 6px;
		padding: 16px 14px 0;
		border-top: 1px solid var(--fca-hair);
		font-size: calc(var(--fc-bar) * 0.821);
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .45);
	}

	.fca-room--rest { display: flex; }

	.fca-head.is-open .fca-veil {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 125;
		background: rgba(15, 28, 38, .5);
		backdrop-filter: blur(2px);
	}

	/* --- rândul al doilea --- */

	/*
	 * Filele nu se mai dau la o parte cu degetul, ci trec pe rândul
	 * următor. Un rând care se derulează ascunde ce e dincolo de margine
	 * fără să spună; unul care se rupe în două arată tot, și costă
	 * douăzeci de pixeli de înălțime.
	 *
	 * Numele camerei ia rândul lui întreg. Nu ca să fie mai arătos, ci ca
	 * filele să înceapă întotdeauna de la aceeași margine din stânga: puse
	 * după el, prima filă ar fi început în alt loc la fiecare cameră, după
	 * cât de lung e numele.
	 */
	.fca-rail {
		height: auto;
		min-height: var(--fca-rail-h);
		flex-wrap: wrap;
		align-content: center;
		gap: 7px 0;
		padding-top: 8px;
		padding-bottom: 8px;
		overflow: visible;
	}

	.fca-where { width: 100%; padding-right: 0; }

	.fca-views {
		width: 100%;
		flex-wrap: wrap;
		gap: 5px;
		padding-left: 0;
		border-left: 0;
	}

	/*
	 * Firul dintre file și camerele oaspete se stinge aici. Rândul se rupe
	 * pe mai multe rânduri, deci firul putea să cadă la începutul unuia — un
	 * beț vertical singur, care nu mai desparte nimic. Deosebirea rămâne
	 * scrisă în semnul purtat de fiecare cameră.
	 */
	.fca-views__cut { display: none; }

	/*
	 * Rubricile urcate iau și ele rândul lor. Firul vertical care le
	 * despărțea de file n-ar mai fi despărțit nimic, fiind acum una sub
	 * alta; se scriu în schimb cu litere mai mici, iar treapta se vede din
	 * așezare.
	 *
	 * SE RUP, NU SE DERULEAZĂ
	 *
	 * Aici scria, până acum, `overflow-x: auto`, cu socoteala că rubricile
	 * sunt trei sau patru și scurte, iar ruperea ar fi crescut antetul cu
	 * încă un rând pentru un câștig de câțiva pixeli.
	 *
	 * Socoteala nu ține. „Premium / Cartonașele mele / Partajate cu mine”
	 * cere aproape cinci sute de puncte cu semnele lor cu tot, iar pe un
	 * telefon se citea „Partajate cu mi”, tăiat de marginea ecranului.
	 * Câștigul nu era de câțiva pixeli: era o rubrică întreagă, pe care
	 * nimic n-o arăta că mai există. Un rând care se derulează arată exact
	 * ca unul întreg, doar tăiat — nu are nicio umbră, nicio bară, niciun
	 * semn. Cine nu știe că poate trage cu degetul de el nu află niciodată
	 * ce e dincolo.
	 *
	 * Rândul în plus costă douăzeci de puncte de înălțime, sus, o dată. O
	 * rubrică nevăzută costă rubrica.
	 */
	.fca-rail__slot,
	.fca-views + .fca-rail__slot {
		width: 100%;
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		overflow-x: visible;
	}

	.fca-rail .fclms-subtabs {
		flex-wrap: wrap;
		row-gap: 5px;
	}
}

@media (max-width: 720px) {
	.fca { --fca-deck-h: 54px; --fca-rail-h: 40px; }

	.fca-foot__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.fca-sign { text-align: left; }
	.fca-sign__links { justify-content: flex-start; }
	.fca-sign__note { margin-left: 0; }
	.fca-sign__back { margin-left: 0; }

	/* Pe o coloană, locurile scrise anume n-au ce hotărî. */
	.fca-corner,
	.fca-sign { grid-column: auto; grid-row: auto; }

	.fca-pal { padding-top: 12vh; }
	.fca-pal__keys { display: none; }
}

/* Bara gazdei de bază se strânge și ea: pe telefon, punctele scrise cu cifre
   mari mănâncă tocmai lățimea de care are nevoie numele gazdei.

   BUTONUL DE ECRAN COMPLET RĂMÂNE

   Până la 1.10.26 el era cel care pleca aici, ca să facă loc numelui gazdei.
   Era socoteala greșită: pe telefon și pe tabletă ecranul e mic, deci acolo e
   cel mai mult de câștigat din ascunderea antetului și a subsolului. Tocmai
   unde folosea mai mult, lipsea.

   Locul se lua de la numele gazdei; de la 1.38.25 antetul n-are nume, doar
   căsuța, care rămâne și aici și duce tot Acasă. */
@media (max-width: 560px) {
	.fca .fclms-headbar .fclms-points { padding: 6px 8px; font-size: calc(var(--fc-bar) * 0.857); }
	.fca-tools { gap: 5px; padding-left: 8px; }
	.fca-burger { margin-right: 8px; }
}

/* ==========================================================================
 * MIȘCAREA, PENTRU CINE N-O VREA
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fca-pal__box { animation: none; }
	.fca * { transition-duration: .01ms !important; }
}

/* ==========================================================================
 * TIPĂRIREA
 * ==========================================================================
 *
 * Se tipăresc diplome și facturi din camerele acestea. Antetul, subsolul și
 * paleta n-au ce căuta pe hârtie: sunt drumuri, iar hârtia nu duce nicăieri.
 */

@media print {
	.fca-head,
	.fca-foot,
	.fca-pal,
	.fca-skip { display: none !important; }

	.fca { background: #fff; }
}