/* ==========================================================================
   ROTIȚELE ȘI PAGINA LOR

   Nimic nou în îmbrăcăminte: aceleași `--fc-*` ca tot restul aplicației,
   aceeași rotunjire, aceeași umbră. O rotiță care ar fi arătat altfel decât
   butoanele de lângă ea ar fi părut lipită de altcineva.

   Culoarea camerei se ia din `--tile`, aceeași variabilă pe care o pune
   butonul camerei în `modules.css`. Așa, rotița de la Ședințe e albastră ca
   Ședințele, fără să știe nimic despre ele.
   ========================================================================== */

/* ------------------------------------------------------------------ CELULA

   Butonul camerei era, până acum, chiar celula grilei. Rotița nu poate sta
   înăuntrul lui — un buton într-o legătură nu se poate apăsa singur, iar
   cititoarele de ecran citesc grămada — deci celula a devenit un înveliș, cu
   legătura și rotița frați înăuntru.
*/
.fclms-panel__cell {
	position: relative;
	display: block;
}

.fclms-panel__cell > .fclms-panel__tile {
	width: 100%;
}

.fclms-panel__cog {
	box-sizing: border-box;
	position: absolute;
	top: 7px;
	right: 7px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;

	/* SE VEDE, ȘI DE CE

	   A stat o vreme stinsă pe jumătate, ca butonul camerei să rămână lucrul
	   cel mai limpede de pe el. Numai că o rotiță pe care o cauți nu e o
	   scurtătură: cine nu știe că e acolo se duce tot la Administrare, iar
	   mutarea n-a folosit nimănui.

	   Deci e îmbrăcată în culoarea camerei, cu un inel alb care o desprinde
	   de degradeul de sub ea. Se vede din colțul ochiului, fără să ceară
	   privirea. */
	color: #fff;
	background: rgba(var(--tile, var(--fc-primary-rgb)), .92);
	border: 2px solid var(--fc-surface);
	border-radius: 11px;
	box-shadow: 0 2px 6px rgba(20, 32, 44, .18);
	cursor: pointer;
	/* E o legătură de la 1.36.0: fără sublinierea pe care i-o pune tema. */
	text-decoration: none;

	transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s, background .16s;
}

.fclms-panel__cell:hover .fclms-panel__cog,
.fclms-panel__cog:hover,
.fclms-panel__cog:focus-visible {
	background: rgb(var(--tile, var(--fc-primary-rgb)));
	transform: scale(1.08) rotate(20deg);
	box-shadow: 0 4px 12px rgba(20, 32, 44, .26);
}

.fclms-panel__cog:focus-visible {
	outline: 2px solid rgb(var(--tile, var(--fc-primary-rgb)));
	outline-offset: 3px;
}

.fclms-panel__cog .fca-mark,
.fclms-panel__cog svg {
	width: 18px;
	height: 18px;
}

/* Rotirea la trecerea degetului e o glumă, nu o informație: cine a cerut mai
   puțină mișcare primește rotița stând. */
@media (prefers-reduced-motion: reduce) {
	.fclms-panel__cog,
	.fclms-panel__cell:hover .fclms-panel__cog { transform: none; transition: none; }
}

/* LEGĂTURILE ÎȘI ȚIN CULOAREA

   Rotița, rezultatele căutării, drumul de sus și rubricile paginii de setări
   sunt de la 1.36.0 legături. O temă care scrie `a:visited` ori `a:hover`
   cântărește cât o clasă și un element — mai mult decât clasa singură — și
   le-ar fi vopsit în culoarea ei legăturilor. Clasa scrisă de două ori trece
   peste ea fără `!important`. */
.fclms-panel__cog.fclms-panel__cog,
.fclms-panel__cog.fclms-panel__cog:visited,
.fclms-panel__cog.fclms-panel__cog:hover { color: #fff; text-decoration: none; }

.fclms-cogfind__hit.fclms-cogfind__hit,
.fclms-cogfind__hit.fclms-cogfind__hit:visited,
.fclms-cogfind__hit.fclms-cogfind__hit:hover { color: var(--fc-ink); text-decoration: none; }

.fclms-cogpage__crumb.fclms-cogpage__crumb:visited { color: var(--fc-muted); }
.fclms-cogpage__crumb.fclms-cogpage__crumb:hover { color: var(--fc-primary); }

.fclms-cogpage__pill.fclms-cogpage__pill:visited,
.fclms-cogpage__pill.fclms-cogpage__pill:hover { color: var(--fc-ink); text-decoration: none; }

.fclms-cogpage__pill.fclms-cogpage__pill.is-on,
.fclms-cogpage__pill.fclms-cogpage__pill.is-on:visited,
.fclms-cogpage__pill.fclms-cogpage__pill.is-on:hover { color: #fff; }

/* ---------------------------------------------------------------- CĂUTAREA */

.fclms-cogfind {
	position: relative;
	margin: 0 0 14px;
}

.fclms-cogfind__in {
	width: 100%;
	padding: 11px 14px;
	font: inherit;
	color: var(--fc-ink);
	background: var(--fc-surface);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
}

.fclms-cogfind__in:focus {
	outline: 2px solid rgba(var(--fc-primary-rgb), .55);
	outline-offset: 1px;
	border-color: rgba(var(--fc-primary-rgb), .55);
}

.fclms-cogfind__hits {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: none;
}

.fclms-cogfind__hits.is-on { display: block; }

.fclms-cogfind__hit {
	box-sizing: border-box;
	display: block;
	width: 100%;
	text-decoration: none;
	text-align: left;
	font: inherit;
	color: var(--fc-ink);
	background: var(--fc-surface);
	border: 1px solid var(--fc-line);
	border-radius: 12px;
	padding: 10px 13px;
	margin-bottom: 6px;
	cursor: pointer;
}

.fclms-cogfind__hit:hover,
.fclms-cogfind__hit:focus-visible {
	border-color: rgba(var(--fc-primary-rgb), .5);
	background: rgba(var(--fc-primary-rgb), .04);
}

.fclms-cogfind__where {
	color: var(--fc-primary);
	font-weight: 700;
}

.fclms-cogfind__none {
	color: var(--fc-muted);
	padding: 10px 13px;
	background: var(--fc-surface);
	border: 1px dashed var(--fc-line);
	border-radius: 12px;
}

/* ------------------------------------------------------- PAGINA SETĂRILOR

   A fost o vreme sertar venit din dreapta, apoi o fereastră aproape cât
   ecranul. Oricât s-a lărgit, rămânea o fereastră: o ramă, un fundal
   întunecat dedesubt, o derulare înăuntrul altei derulări. Panourile de
   administrare — tabele de șapte coloane, câmpuri alături, previzualizarea
   temei — se citeau printr-o gaură.

   Acum setările au pagina lor, în rama pagini dintâi. Nimic din îmbrăcăminte
   nu e nou: aceleași `--fc-*`, aceeași lățime ca butoanele de Acasă, ca
   drumul „Acasă → Setări” să nu mute nimic din ce era deja pe ecran.

   CULOAREA CAMEREI

   Semnul de lângă titlu poartă culoarea camerei, din `--tile`. Lista
   culorilor nu se scrie a doua oară: `modules.css` o ține o singură dată,
   pentru butoanele de Acasă și pentru `fclms-roomtint--<cameră>` deopotrivă.
   Aici nu se pune nicio valoare lui `--tile` — pusă, ar fi bătut lista,
   fiindcă foaia aceasta se citește după ea. Se scrie numai rezerva, în
   fiecare `var()`: culoarea gazdei, pentru o cameră fără culoare a ei.

   CÂT DE SUS SE LIPEȘTE COLOANA

   Sub antetul aplicației, care e și el lipit: rândul întunecat, rândul alb,
   iar pe un site cu bara WordPress la vedere, încă bara. Afară din aplicație
   n-are ce ocoli.
*/
.fclms-cogpage {
	--cog-stick: 20px;

	box-sizing: border-box;
	max-width: calc(var(--fc-content-max, 1100px) + 64px);
	margin: 0 auto;
	padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.2vw, 32px) clamp(30px, 3.4vw, 52px);
	color: var(--fc-ink);
}

.fca .fclms-cogpage {
	--cog-stick: calc(var(--fca-deck-h, 60px) + var(--fca-rail-h, 42px) + 20px);
}

.fca.admin-bar .fclms-cogpage {
	--cog-stick: calc(var(--fca-deck-h, 60px) + var(--fca-rail-h, 42px) + 52px);
}

/* ------------------------------------------------------------- DRUMUL DE SUS */

.fclms-cogpage__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 18px;
	font-size: var(--fc-p);
	line-height: 1.4;
	color: var(--fc-muted);
}

.fclms-cogpage__crumb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 2px;
	color: var(--fc-muted);
	text-decoration: none;
	border-radius: 6px;
}

.fclms-cogpage__crumb:hover {
	color: var(--fc-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fclms-cogpage__crumb svg,
.fclms-cogpage__crumb .fca-mark {
	width: 16px;
	height: 16px;
	flex: none;
}

.fclms-cogpage__sep {
	color: var(--fc-line);
}

/* ----------------------------------------------------------------- CAPUL */

.fclms-cogpage__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 30px;
}

.fclms-cogpage__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	color: #fff;
	background: linear-gradient(145deg,
		rgba(var(--tile, var(--fc-primary-rgb)), .95),
		rgba(var(--tile, var(--fc-primary-rgb)), .72));
	box-shadow: 0 8px 18px -8px rgba(var(--tile, var(--fc-primary-rgb)), .8);
}

.fclms-cogpage__mark .fca-mark,
.fclms-cogpage__mark svg {
	width: 26px;
	height: 26px;
}

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

.fclms-cogpage__say { min-width: 0; }

/* Numele scris de temă nu se moștenește: temele fac cu `h1` ce vor — îl scriu
   cu majuscule, îi pun o linie dedesubt, îl mută la mijloc. Aceeași croială ca
   la titlul de pe banda de Acasă. */
.fclms-cogpage__title {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
	text-transform: none;
	font-size: clamp(calc(var(--fc-h1) * 1.182), calc(2.6vw * var(--fc-h1-scale, 1)), calc(var(--fc-h1) * 1.545));
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--fc-ink);
}

.fclms-cogpage__lead {
	margin: 4px 0 0;
	font-size: var(--fc-p);
	color: var(--fc-muted);
}

.fclms-cogpage__empty {
	margin: 0;
	padding: 22px 20px;
	color: var(--fc-muted);
	background: var(--fc-surface);
	border: 1px dashed var(--fc-line);
	border-radius: var(--fc-radius);
}

/* ------------------------------------------------------------- SECȚIUNILE */

.fclms-cogpage__sect {
	margin-top: 34px;
	/* Legăturile rubricilor trimit spre secțiunea casei cu semn de carte;
	   fără rândul acesta, titlul ei ar fi rămas sub antetul lipit. */
	scroll-margin-top: var(--cog-stick);
}

.fclms-cogpage__head + .fclms-cogpage__sect { margin-top: 0; }

.fclms-cogpage__whose {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 14px;
	padding: 0 0 9px;
	border: 0;
	border-bottom: 1px solid var(--fc-line);
	text-transform: none;
	font-size: calc(var(--fc-p) * 1.133);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--fc-primary);
}

/* Lămurirea felului se strânge sub un „i” (vezi `tips.js`). Semnul rămâne
   lângă titlu, nu împins în capătul rândului de `space-between`. */
.fclms-cogpage__whose > .fclms-tip-wrap { margin: 0 auto 0 -10px; }

.fclms-cogpage__hint {
	font-weight: 400;
	font-size: var(--fc-small);
	letter-spacing: 0;
	color: var(--fc-muted);
}

.fclms-cogpage__name {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	text-transform: none;
	font-size: var(--fc-h2);
	font-weight: 700;
	color: var(--fc-ink);
}

/* Un drum, nu un panou: vorba în stânga, butonul în dreapta. Pe o pagină
   lată, butonul pus sub vorbă lăsa o jumătate de card goală lângă el. */
.fclms-cogpage__road {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 18px 20px;
	background: var(--fc-surface);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
}

.fclms-cogpage__road-name {
	flex: 1 0 100%;
	margin: 0;
	font-weight: 700;
	color: var(--fc-ink);
}

.fclms-cogpage__say-go {
	flex: 1 1 22rem;
	max-width: 70ch;
	margin: 0;
	color: var(--fc-muted);
}

.fclms-cogpage__go {
	flex: none;
	margin: 0 0 0 auto;
}

/* Paragrafele de mai sus au marginile lor, iar foaia de bază le pune altele
   tuturor paragrafelor din aplicație, cu un selector mai greu decât o clasă.
   Fără rândul acesta, butonul drumului nu se mai ducea în dreapta. */
.fclms-cogpage .fclms-cogpage__road-name,
.fclms-cogpage .fclms-cogpage__say-go { margin: 0; }
.fclms-cogpage .fclms-cogpage__go { margin: 0 0 0 auto; }
.fclms-cogpage .fclms-cogpage__lead { margin: 4px 0 0; }
.fclms-cogpage .fclms-cogpage__empty { margin: 0; }

/* Panoul de administrare, desenat întreg. Nu se rescrie nimic din el: i se
   scoate doar lățimea proprie, fiindcă stă într-o coloană, nu pe tot ecranul.
   Strânsul după lățime îl face `fit.css`, care măsoară cutia. */
.fclms-cogpage__pane { min-width: 0; }

.fclms-cogpage__pane > .fclms-panel-wrap {
	max-width: none;
	margin: 0;
}

/* RÂNDUL DE PASTILE DINĂUNTRUL UNUI PANOU NU SE FACE JGHEAB

   `fit.css` îl pune să alunece lateral când cutia scade sub 860 de puncte, și
   pe bună dreptate pe un telefon. Lângă coloana rubricilor însă, cutia trece
   pragul pe un ecran care e, de fapt, lat — iar o bară de derulat sub un rând
   care ar fi încăput pe două nu ajută pe nimeni. Pe ecran lat se rupe pe
   rânduri. */
@media (min-width: 900px) {
	.fclms-cogpage__pane .fclms-subtabs {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 6px;
	}

	.fclms-cogpage__pane .fclms-subtabs > * { flex: 0 1 auto; }
}

/* ------------------------------------------------- CASA, ÎN DOUĂ COLOANE

   Pe ecran lat, secțiunea casei se desface: rubricile la stânga, într-o
   coloană care rămâne pe loc la derulare, panoul la dreapta. Titlul trece
   peste amândouă.

   Sub 900 de puncte rubricile urcă deasupra panoului, pe un rând de pastile:
   o coloană de 230 de puncte luată dintr-o fereastră de 700 ar fi lăsat
   panoului mai puțin decât avea în fereastra de odinioară. */
.fclms-cogpage__rail {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}

.fclms-cogpage__pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	font-size: var(--fc-p);
	line-height: 1.3;
	color: var(--fc-ink);
	text-decoration: none;
	background: var(--fc-surface);
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	transition: border-color .15s, background-color .15s;
}

.fclms-cogpage__pill:hover {
	color: var(--fc-ink);
	border-color: rgba(var(--fc-primary-rgb), .5);
	background: rgba(var(--fc-primary-rgb), .04);
}

.fclms-cogpage__pill.is-on,
.fclms-cogpage__pill.is-on:hover {
	color: #fff;
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	font-weight: 700;
}

.fclms-cogpage__pill-mark {
	flex: none;
	width: 1.25em;
	text-align: center;
}

@media (min-width: 900px) {
	.fclms-cogpage__sect.has-rail {
		display: grid;
		grid-template-columns: 232px minmax(0, 1fr);
		gap: 0 32px;
		align-items: start;
	}

	.fclms-cogpage__sect.has-rail > .fclms-cogpage__whose { grid-column: 1 / -1; }

	.fclms-cogpage__sect.has-rail > .fclms-cogpage__rail {
		position: sticky;
		top: var(--cog-stick);
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 4px;
		margin: 0;
	}

	.fclms-cogpage__sect.has-rail .fclms-cogpage__pill {
		display: flex;
		width: 100%;
		padding: 10px 14px;
		border-radius: 12px;
	}

	/* Pe coloană, rubricile neaprinse nu-și mai poartă chenarul: șase
	   chenare unul sub altul ar fi fost un teanc de casete, nu o listă din
	   care se alege. Chenarul apare la trecerea mausului. */
	.fclms-cogpage__sect.has-rail .fclms-cogpage__pill:not(.is-on) {
		background: transparent;
		border-color: transparent;
	}

	.fclms-cogpage__sect.has-rail .fclms-cogpage__pill:not(.is-on):hover {
		background: var(--fc-surface);
		border-color: var(--fc-line);
	}
}

@media (max-width: 600px) {
	.fclms-cogpage { padding: 16px 14px 28px; }
	.fclms-cogpage__head { gap: 12px; margin-bottom: 22px; }
	.fclms-cogpage__mark { width: 44px; height: 44px; border-radius: 13px; }
	.fclms-cogpage__mark .fca-mark,
	.fclms-cogpage__mark svg { width: 22px; height: 22px; }
	.fclms-cogpage__road { padding: 14px 16px; }
	.fclms-cogpage__go,
	.fclms-cogpage__go .fclms-btn { width: 100%; }
	.fclms-cogpage__go .fclms-btn { box-sizing: border-box; justify-content: center; text-align: center; }
}

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

/* Vorba de deasupra grilei din Administrare: spune unde s-au mutat setările.
   Nu are chenar și nu are semn — e o lămurire, nu o înștiințare de eroare. */
.fclms-panel__left {
	margin: 0 0 14px;
	max-width: 70ch;
	font-size: var(--fc-p);
}