/*
 * AE Portal — scheletul.
 *
 * Tokenurile sunt cele din mock-up, luate ca atare: --bg-app, --surface-1..3,
 * --card-bg, --glass, --hairline, --ink-1..3, --br-*, --ac-*, --umbra-1/2,
 * --r-*, --sp-*. Nu „inspirate din" — aceleași nume, aceleași valori. Așa,
 * dacă schimbi ceva în machetă, se mută aici printr-o singură înlocuire.
 *
 * Ce am adus din mock-up dincolo de culori:
 *   - carduri plate: --card-bg, contur de un fir, --r-lg, umbră scurtă
 *   - butoane cu degrade diagonal și hover pe luminozitate, nu pe salt
 *   - pastile (chips) pe --surface-3, cu colț rotund complet
 *   - meniu cu stări de sticlă: --glass la hover, --glass-strong la curent
 *   - bara laterală cu degrade și estompare, bara de sus la 78% peste fundal
 *
 * Scris pentru telefon întâi, lărgit apoi. Mock-up-ul e desenat doar pentru
 * ecran mare; aici aceleași piese trebuie să încapă și pe 390px.
 *
 * Fișierul ăsta nu conține niciun cod de culoare. Toate vin din ae-teme.css.
 */

/* ==========================================================================
   1. Baza
   ========================================================================== */
#ae-portal, #ae-portal * { box-sizing: border-box; }

/* ═══ MĂRIMEA TEXTULUI DE CITIT ═══════════════════════════════════════════
   Trei cifre care se mișcă împreună, din butonul „Mărimea literei" din panoul
   de teme. Stau pe `:root` (nu pe `#ae-portal`) fiindcă atributul pe care se
   schimbă, `data-litera`, stă pe `<html>` — ca `data-tema` și `data-mod`.

   La literă mare, MĂSURA SE STRÂNGE, nu se lărgește: 46 de semne în loc de 66.
   Pare pe dos și nu e. Cercetarea de tipar mare (APH, Consiliul American al
   Nevăzătorilor) cere 39–43 de semne — cu litera mărită, ochiul face salturi
   mai lungi și rătăcește mai ușor rândul la întors. Un rând lung cu literă
   mare e mai greu de citit decât unul lung cu literă mică.

   Interlinia scade puțin (1,7 → 1,55) din același motiv întors pe dos: cu cât
   litera e mai mare, cu atât are nevoie de mai puțin aer între rânduri ca să
   se țină rândul. Rămâne peste 1,5, pragul WCAG 1.4.8. */
:root {
	--proza-marime: 19px;
	--proza-rand:   1.7;
	/* 58ch, nu 66. `ch` e lățimea cifrei „0", care e mai LATĂ decât litera mică
	   obișnuită — deci o coloană de 66ch încape vreo 75 de semne adevărate.
	   Am măsurat în browser, cu un alfabet, nu am ghicit: 66ch dădea 75 de
	   semne (peste banda bună), 58ch dă 66. Regula lui Butterick, „două-trei
	   alfabete pe rând", se verifică la fel de bine. */
	--proza-masura: 58ch;
	--proza-spatiu: 1.5em;
}
[data-litera="mare"] {
	--proza-marime: 24px;
	--proza-rand:   1.55;
	--proza-masura: 38ch;   /* ≈43 de semne adevărate — vârful benzii de tipar mare */
	--proza-spatiu: 1.4em;
}

#ae-portal {
	position: relative;
	min-height: 100dvh;
	color: var(--ink-1);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* atâta loc cât ocupă bara de jos pe telefon, ca ultimul card să nu rămână sub ea */
	padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Aceeași lumină ca în mock-up: o pată caldă sus-dreapta și una adâncă
   jos-stânga. Amândouă din culoarea de marcă, deci se schimbă cu tema. */
#ae-portal .ae-fundal {
	position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(900px 600px at 88% -10%, color-mix(in srgb, var(--br-400) 22%, transparent), transparent 60%),
		radial-gradient(700px 500px at 4% 100%, color-mix(in srgb, var(--br-600) 40%, transparent), transparent 60%),
		var(--bg-app);
	transition: background .35s ease;
}

/* În modul zi, aceeași rețetă face invers decât trebuie.

   br-600 e o culoare închisă. Peste un fundal întunecat, la 40%, îl luminează
   discret — frumos. Peste un fundal deschis îl ÎNTUNECĂ, iar colțul din
   stânga-jos ajunge destul de închis cât să scadă contrastul textului de
   deasupra lui: linkul „← Toate albumele" măsura 3.32:1 acolo, față de 4.5:1
   cât trebuie.

   Deci în zi lumina chiar luminează: colțul de jos-stânga e alb, nu colorat.
   Textul de deasupra lui câștigă contrast în loc să piardă.

   Colțul de sus rămâne colorat, dar slab — și cu o culoare pe care n-o mai
   ajustează nimeni. Motivul e o capcană în care am și căzut o dată: dacă
   fundalul se face din --br-300, iar --br-300 e și culoarea linkurilor, atunci
   generatorul de teme închide br-300 ca să treacă pragul de contrast… ceea ce
   închide și fundalul… ceea ce strică din nou contrastul. O buclă care se
   strânge la fiecare rulare. Fundalul și textul nu au voie să depindă de
   aceeași variabilă. */
[data-mod="zi"] #ae-portal .ae-fundal {
	background:
		radial-gradient(900px 600px at 88% -10%, color-mix(in srgb, var(--br-400) 10%, transparent), transparent 60%),
		radial-gradient(700px 500px at 4% 100%, rgba(255, 255, 255, .6), transparent 62%),
		var(--bg-app);
}

#ae-portal a { color: inherit; text-decoration: none; }
#ae-portal :focus-visible { outline: 2px solid var(--ae-aur); outline-offset: 3px; border-radius: var(--r-sm); }
/* Bifele și butoanele radio sunt desenate de sistem. Fără linia asta rămân
   albastre în orice temă — singurul albastru din portal, exact în mijlocul
   formularului de acces. */
#ae-portal { accent-color: var(--br-400); }
/* Auriul aurei urmașilor (v168) — vezi „AURA URMAȘILOR". Scris o dată, aici,
   ca să fie același în toate temele: AE a cerut „un galben auriu", nu
   culoarea casei. */
#ae-portal { --ae-aur: #C8801C; }

/* ==========================================================================
   2. Bara de sus
   ========================================================================== */
#ae-portal .ae-sus {
	position: sticky; top: var(--bara-admin, 0px); z-index: 40;
	display: flex; align-items: center; gap: var(--sp-4);
	/* 14px pe verticală, nu 11: antetul e primul lucru pe care cade ochiul,
	   iar la 11 respirația de deasupra titlului era mai mică decât cea dintre
	   două pastile. Măsura vine din documentare (vezi lecția 24): întâi prea
	   mult aer, apoi scazi — nu invers. */
	padding: 14px 16px;
	border-bottom: 1px solid var(--hairline);
	background: color-mix(in srgb, var(--bg-app) 78%, transparent);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* marca: cerc de 44px cu lumină difuză sus-stânga, exact ca în mock-up */
#ae-portal .ae-marca { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
#ae-portal .ae-marca--bara { display: none; }   /* apare doar de la 900px, în bara laterală */
#ae-portal .ae-marca-cerc {
	width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
	border-radius: 50%; border: 1px solid var(--ae-aur); color: var(--ink-1);
	background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ae-aur) 35%, transparent), transparent 70%);
}
#ae-portal .ae-marca svg { width: 27px; height: 27px; display: block; }
#ae-portal .ae-marca-text { display: flex; flex-direction: column; line-height: 1.2; }
#ae-portal .ae-marca-text b { font-size: 14px; letter-spacing: 2.5px; font-weight: 600; text-transform: uppercase; }
#ae-portal .ae-marca-text i { font-style: normal; font-size: 11px; letter-spacing: 1px; color: var(--ink-3); }
/* Pe telefonul îngust, marca mănâncă titlul ecranului. Întâi a plecat numele
   scris, și a fost de-ajuns o vreme. De când în dreapta stă și ceasul, nu mai
   e: titlul ajunsese „Pano…", iar data de sub el, „Luni, 3 …".

   Deci pleacă și cercul. Nu se pierde nimic — el ducea la Panou, iar pe telefon
   bara de jos are Panou ca prim buton, la degetul mare. Un drum în plus spre
   același loc nu merită titlul ecranului. */
@media (max-width: 560px) {
	#ae-portal .ae-sus .ae-marca { display: none; }
}

#ae-portal .ae-titlu { flex: 1 1 auto; min-width: 0; }
#ae-portal .ae-titlu h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .3px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ae-portal .ae-titlu p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* butoanele rotunde din bara de sus — 44px, cât cere degetul */
#ae-portal .ae-rotund {
	flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-3); color: var(--ink-2); cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-rotund:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-rotund svg { width: 19px; height: 19px; display: block; }
#ae-portal .ae-eu { display: none; }   /* numele apare de la tabletă în sus */
#ae-portal .ae-inapoi { display: none; font-size: 12px; color: var(--ink-3);
	padding: 6px 2px; transition: color .16s ease; }
#ae-portal .ae-inapoi:hover { color: var(--ink-1); }

/* ==========================================================================
   3. Navigația
   Pe telefon: bară jos, în bătaia degetului mare.
   De la 900px în sus: coloană în stânga, ca bara laterală din mock-up.
   ========================================================================== */
#ae-portal .ae-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	display: flex; justify-content: space-around; align-items: stretch;
	padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--hairline);
	background: color-mix(in srgb, var(--bg-app) 82%, transparent);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#ae-portal .ae-nav-grup { display: none; }   /* etichetele de grup, doar pe ecran mare */

/* Pe telefon, bara de jos are loc pentru cel mult cinci degete. Restul
   ecranelor intră într-o foaie care urcă la apăsarea pe „Mai mult".
   Nouă iconițe pe 390px ar însemna etichete tăiate — adică nimeni nu mai
   citește nimic. */
#ae-portal .ae-nav-restul {
	position: fixed; left: 12px; right: 12px; z-index: 50;
	bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-2);
	background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--sp-3); box-shadow: var(--umbra-2);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
}
#ae-portal .ae-nav-restul.deschis { opacity: 1; visibility: visible; transform: translateY(0); }
#ae-portal .ae-nav-restul .ae-nav-item { min-height: 62px; }
#ae-portal .ae-nav-mai { background: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; }

#ae-portal .ae-nav-item {
	flex: 1 1 0; min-width: 0; min-height: 56px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	padding: 6px 2px; border-radius: var(--r-sm); border: 1px solid transparent;
	color: var(--ink-2); font-size: 10px; letter-spacing: .2px; text-align: center;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-nav-item svg { width: 21px; height: 21px; display: block; color: var(--ink-3); }
#ae-portal .ae-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#ae-portal .ae-nav-item:hover { background: var(--glass); color: var(--ink-1); }
/* Curentul: fundal de sticlă mai apăsat, contur de un fir, iconița în culoarea
   de marcă. Trei semnale slabe, nu unul tare — exact ca în mock-up. */
#ae-portal .ae-nav-item[aria-current="page"] {
	background: var(--glass-strong); color: var(--ink-1); border-color: var(--hairline);
}
#ae-portal .ae-nav-item[aria-current="page"] svg { color: var(--ae-aur); }

/* ==========================================================================
   4. Conținutul
   ========================================================================== */
#ae-portal .ae-continut { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
#ae-portal .ae-sectiune + .ae-sectiune { margin-top: var(--sp-5); }
#ae-portal .ae-sectiune > h2 {
	margin: 0 0 var(--sp-3); font-size: 13px; font-weight: 600; letter-spacing: .4px;
	color: var(--ink-2);
}

#ae-portal .ae-grila { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
#ae-portal .ae-grila--2 { grid-template-columns: 1fr 1fr; }

/* Cardul din mock-up: plat, nu de sticlă. Fundalul e --card-bg, care la temele
   „sticlă" (fum, roz, chihlimbar) e deja translucid, iar --blur îl estompează.
   La verde și indigo --blur e 0 și cardul e opac. O singură regulă, două
   comportamente, decise din temă. */
#ae-portal .ae-card {
	position: relative; min-width: 0;
	background: var(--card-bg); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--sp-5); box-shadow: var(--umbra-1);
	backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
	/* proprietăți numite, nu „all": „all" ar prinde și fundalul, care nu se
	   poate interpola fluid și dă un salt la început */
	transition: background .35s ease, border-color .35s ease,
	            transform .18s ease, box-shadow .18s ease;
}
/* Ridicarea de 3px la hover e detaliul din mock-up care face cardul să pară
   apăsabil. O punem doar unde există cu adevărat un cursor. */
@media (hover: hover) {
	#ae-portal a.ae-card:hover { transform: translateY(-3px); box-shadow: var(--umbra-2); }
}
#ae-portal a.ae-card:active { transform: none; }

/* `display: block` nu e cosmetic: un <span> e inline, iar pe elementele inline
   lățimea și înălțimea se ignoră. Fără el, `svg { width: 100% }` se raporta la
   lățimea cardului și iconița creștea cât toată caseta. */
#ae-portal .ae-card-icon { display: block; width: 26px; height: 26px; color: var(--ae-aur); margin-bottom: var(--sp-3); }
#ae-portal .ae-card-icon svg { width: 100%; height: 100%; display: block; }
#ae-portal .ae-card h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
#ae-portal .ae-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
#ae-portal .ae-card-nota { font-size: 11.5px; color: var(--ink-3); }
/* Pe telefon, opt carduri cu 24px de margine interioară fac o pagină pe care
   derulezi mult și vezi puțin. 16px ajunge, iar cardul rămâne aerisit. */
@media (max-width: 520px) {
	#ae-portal .ae-card { padding: var(--sp-4); }
	#ae-portal .ae-card-icon { margin-bottom: var(--sp-2); }
}

/* pastila din mock-up: colț rotund complet, fundal --surface-3, un fir de contur */
#ae-portal .ae-eticheta {
	display: inline-block; margin-top: var(--sp-3);
	font-size: 11.5px; padding: 5px 11px; border-radius: var(--r-pill);
	background: var(--surface-3); border: 1px solid var(--hairline); color: var(--ink-2);
}
/* varianta aurie, pentru ce ține de stare, nu de acțiune */
#ae-portal .ae-eticheta--aur {
	background: color-mix(in srgb, var(--ac-400) 16%, transparent);
	border-color: color-mix(in srgb, var(--ac-400) 38%, transparent);
	color: var(--ac-300);
}
/* ac-500, nu ac-400 ca în machetă: pe spălătura aurie de 16% peste card alb,
   ac-400 dă 3.70:1 — sub pragul de 4.5. ac-500 e aceeași culoare, doar mai
   închisă, și trece cu 5.5:1. */
[data-mod="zi"] #ae-portal .ae-eticheta--aur { color: var(--ac-500); }

/* salutul — „hero" din mock-up, dar la o mărime care încape pe telefon */
#ae-portal .ae-salut h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 500;
	letter-spacing: -.4px; color: var(--ink-2); text-transform: none; }
#ae-portal .ae-salut h2 strong { font-weight: 600; color: var(--ink-1); }
#ae-portal .ae-salut p { margin: var(--sp-3) 0 0; }
#ae-portal .ae-salut p span {
	display: inline-block; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
	padding: 4px 10px; border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--ac-400) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--ac-400) 38%, transparent);
	color: var(--ac-300);
}
[data-mod="zi"] #ae-portal .ae-salut p span { color: var(--ac-500); }

/* starea „încă nu e nimic aici" — chenar punctat auriu, ca „locked" din mock-up */
#ae-portal .ae-gol {
	display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
	text-align: center; padding: var(--sp-7) var(--sp-5);
	border: 1px dashed color-mix(in srgb, var(--ac-400) 45%, transparent); border-radius: var(--r-lg);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ac-400) 8%, transparent),
		color-mix(in srgb, var(--bg-app) 25%, transparent));
}
#ae-portal .ae-gol svg { width: 34px; height: 34px; color: var(--ac-300); }
[data-mod="zi"] #ae-portal .ae-gol svg { color: var(--ac-400); }
#ae-portal .ae-gol h3 { margin: 0; font-size: 15px; font-weight: 600; }
#ae-portal .ae-gol p { margin: 0 auto; max-width: 440px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* ==========================================================================
   5. Butoane
   Degrade diagonal și hover pe luminozitate, ca în mock-up. Fără translate:
   butonul nu fuge de sub cursor (defectul pe care l-am reparat deja pe pagina
   de autentificare).

   O singură abatere de la machetă, și e măsurată. Mock-up-ul termină degradeul
   în --br-400, cu scris alb. Am calculat contrastul pe toate cele zece
   combinații temă × mod: albul pe br-400 pică în șapte din zece (2.32:1 la
   chihlimbar noapte, față de 4.5:1 cât cere un text de 12.5px), iar pe br-500
   în patru din zece. Pe br-600 trece peste tot, cu minimum 5.62:1.

   Deci degradeul merge br-700 → br-600, iar strălucirea de sus o dă o dungă de
   lumină de un pixel, nu fundalul de sub litere. Aceeași senzație de buton
   lucios, fără text pe care unii nu-l pot citi.
   ========================================================================== */
#ae-portal .ae-buton {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 44px; padding: 10px 18px;
	font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .4px;
	border-radius: var(--r-sm); border: 1px solid var(--hairline); cursor: pointer;
	background: linear-gradient(135deg, var(--br-700), var(--br-600)); color: #fff;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ae-aur) 45%, transparent), var(--umbra-1);
	transition: filter .16s ease;
}
#ae-portal .ae-buton:hover { filter: brightness(1.14); }
#ae-portal .ae-buton--fantoma { background: var(--glass); color: var(--ink-1); }
#ae-portal .ae-buton--fantoma:hover { background: var(--glass-strong); filter: none; }
/* Butonul „de aur" (cumulatul CECCAR). AE, 3 noiembrie, pe tema Fum, ziua:
   „de ce butonul descarca nu e vizibil si frumos? E prea intunecat, prea
   negru". Avea scrisul mereu închis (#22190a), gândit pentru aurul deschis
   al nopții — dar ziua, accentele temelor sunt ÎNCHISE (ca să se vadă pe
   fundal alb), și scrisul închis pe albastrul-închis al Fumului ieșea la
   2,5 : 1. Socotit pentru toate cele opt teme: ziua scrisul alb pe
   accentele închise (între 5,1 și 8,2 : 1), noaptea scrisul închis pe
   accentele deschise (între 5,6 și 9,8 : 1). Pragul e 4,5 — proba-ceccar îl
   socotește pe toate cele șaisprezece perechi. */
#ae-portal .ae-buton--aur { background: linear-gradient(135deg, var(--ac-400), var(--ac-300)); color: #22190a; }
[data-mod="zi"] #ae-portal .ae-buton--aur { background: linear-gradient(135deg, var(--ac-500), var(--ac-400)); color: #fff; }

/* ==========================================================================
   6. Alegătorul de teme
   ========================================================================== */
#ae-portal .ae-teme {
	position: fixed; z-index: 60; left: 12px; right: 12px;
	bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--sp-4); box-shadow: var(--umbra-2);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
}
#ae-portal .ae-teme.deschis { opacity: 1; visibility: visible; transform: translateY(0); }
#ae-portal .ae-teme h3 { margin: 0 0 var(--sp-3); font-size: 10px; letter-spacing: 1.6px;
	text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
#ae-portal .ae-teme-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
#ae-portal .ae-tema {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	min-height: 64px; padding: 9px 6px; border-radius: var(--r-sm); cursor: pointer;
	border: 1px solid var(--hairline); background: var(--surface-3); color: var(--ink-2);
	font-family: inherit; font-size: 11.5px;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}
#ae-portal .ae-tema:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-tema[aria-pressed="true"] { border-color: var(--ae-aur); color: var(--ink-1); }
#ae-portal .ae-bulina { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hairline); }

#ae-portal .ae-mod { display: flex; gap: 2px; margin-top: var(--sp-3);
	background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 3px; }
#ae-portal .ae-mod button {
	flex: 1; min-height: 38px; border: none; background: none; cursor: pointer;
	border-radius: var(--r-pill); color: var(--ink-2); font-family: inherit; font-size: 12px;
	display: flex; align-items: center; justify-content: center; gap: 7px;
	transition: background .16s ease, color .16s ease;
}
/* Pastila apăsată.

   Aici scria `background: var(--br-600); color: #fff`, la fel în ambele moduri.
   În modul zi era corect. În modul NOAPTE, br-600 și pista pe care stă
   (surface-3) sunt aproape aceeași culoare — la Smarald, 1.25:1 între ele. Deci
   butonul „Noapte" era apăsat, dar nu se vedea apăsat.

   Lecția, și merită ținută minte: contrastul TEXTULUI pe pastilă nu spune nimic
   despre dacă vezi pastila. Sunt două verificări diferite, iar noi o făceam
   doar pe prima.

   `--pastila-bg` și `--pastila-ink` se calculează per temă și per mod în
   ia-teme.js: se încearcă toate nuanțele de marcă și se alege cea care se vede
   cel mai bine pe pistă dintre cele pe care textul rămâne lizibil. Măsurat:
   minimum 5.79:1 pastilă-pe-pistă, minimum 9.94:1 text-pe-pastilă. */
#ae-portal .ae-mod button[aria-pressed="true"] {
	background: var(--pastila-bg, var(--br-600));
	color: var(--pastila-ink, #fff);
	font-weight: 600;
}
#ae-portal .ae-mod svg { width: 16px; height: 16px; }

/* ==========================================================================
   7. Tabletă — de la 640px
   ========================================================================== */
@media (min-width: 640px) {
	#ae-portal .ae-continut { padding: var(--sp-6) var(--sp-5); max-width: 1520px; margin: 0 auto; }
	#ae-portal .ae-grila { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
	#ae-portal .ae-sus { padding: var(--sp-4) var(--sp-5); }
	#ae-portal .ae-titlu h1 { font-size: 17px; }
	#ae-portal .ae-eu { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
	#ae-portal .ae-eu .nume { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
	#ae-portal .ae-eu .nume strong { color: var(--ink-1); font-weight: 600; }
	#ae-portal .ae-inapoi { display: inline-block; }
	#ae-portal .ae-salut h2 { font-size: 34px; }
	#ae-portal .ae-teme { left: auto; right: var(--sp-5); width: 340px; bottom: auto; top: 72px; }
}

/* ==========================================================================
   8. Ecran mare — de la 900px: navigația trece în stânga
   ========================================================================== */
@media (min-width: 900px) {
	#ae-portal { padding-bottom: 0; padding-left: 264px; }

	/* Bara laterală din mock-up: degrade de la --surface-1 la --bg-app, un fir
	   de contur în dreapta, estompare de 12px. */
	#ae-portal .ae-nav {
		top: var(--bara-admin, 0px); bottom: 0; right: auto; width: 264px;
		flex-direction: column; justify-content: flex-start; align-items: stretch;
		gap: 2px; padding: 0 var(--sp-4) var(--sp-5);
		border-top: none; border-right: 1px solid var(--hairline);
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--surface-1) 82%, transparent),
			color-mix(in srgb, var(--bg-app) 82%, transparent));
		backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
		overflow-y: auto;
		/* v187 — AE: „In panoul din stanga este prea inghesuit." Vinovatul,
		   văzut în captura lui: pe Windows, ascensorul CLASIC al sistemului —
		   lat, cu săgeți — se așeza ÎN bară și îi mânca vreo 17px. Ascensorul
		   devine subțire și discret: fără săgeți, șina străvezie, doar un fir
		   de cerneală stinsă. Pe Mac ascensorul plutitor era deja discret —
		   acolo nu se schimbă nimic.

		   v190, plătită pe loc: în v187 pusesem șanțul PE AMBELE laturi, ca
		   iconițele să stea la mijloc. Măsurat abia acum: șanțul dublu mânca
		   21px dintr-o bară de 72 — mai mult decât ascensorul pe care-l
		   alungasem. Ce a urmat e lecția: subsolul (roata + SP) nu mai
		   încăpea în lățime, bara a scos o DERULARE ORIZONTALĂ, iar bara
		   aceea de jos a mâncat din înălțime și a împins roata și SP afară
		   din ochi. AE: „Rotita si Sp nici nu se vad." Deci: șanț pe o
		   singură latură, iar sideways nu se derulează NICIODATĂ o coloană
		   de meniu — overflow-x: hidden e chezășia că nu se mai repetă. */
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--ink-3) 38%, transparent) transparent;
		scrollbar-gutter: stable;
		overflow-x: hidden;
	}
	#ae-portal .ae-nav-grup {
		display: block; margin: var(--sp-3) 0 var(--sp-2) var(--sp-2);
		font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3);
	}
	#ae-portal .ae-nav-item {
		flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
		min-height: 42px; gap: var(--sp-3); padding: 10px var(--sp-3);
		font-size: 13.5px; text-align: left;
	}
	#ae-portal .ae-nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
	#ae-portal .ae-nav-item span { max-width: none; }
	/* Înălțimea de 62px e a foii de pe telefon, unde rândurile au iconiță peste
	   text. În coloană, dacă rămâne, jumătate din meniu are rânduri mai înalte
	   decât cealaltă — se vede imediat și arată ca o greșeală de aliniere. */
	#ae-portal .ae-nav-restul .ae-nav-item { min-height: 42px; }

	/* `display: contents` face containerul să dispară din așezare, iar copiii
	   lui curg direct în coloana barei laterale — deci aceleași ecrane, fără
	   markup dublat.

	   Atenție la capcană: `visibility: hidden` din starea de foaie SE MOȘTENEȘTE
	   la copii, iar `display: contents` nu o oprește — caseta dispare, moștenirea
	   rămâne. Fără cele trei linii de mai jos, jumătate din meniu era invizibilă
	   pe ecran mare, fără niciun semn că ar exista. */
	#ae-portal .ae-nav-restul {
		display: contents;
		visibility: visible; opacity: 1; transform: none;
	}
	#ae-portal .ae-nav-mai { display: none; }

	/* Sigla trece în capul barei laterale — acolo îi e locul, e capul coloanei
	   de navigație, nu un element al barei de titlu.

	   NU o poziționăm fix din bara de sus, deși ar părea mai simplu. Motivul e
	   o capcană: `backdrop-filter` pe un element îl face bloc de referință
	   pentru descendenții cu `position: fixed`. Adică `left: 0` n-ar mai
	   însemna marginea ecranului, ci marginea barei de sus — iar sigla ar
	   rămâne peste titlu. Același lucru fac `filter`, `transform` și
	   `will-change`.

	   Soluția: două elemente, fiecare la locul lui, fiecare afișat pe rândul
	   de ecran unde are sens. */
	#ae-portal .ae-sus .ae-marca { display: none; }
	#ae-portal .ae-marca--bara {
		display: flex; height: 70px; flex: 0 0 auto; align-items: center;
		margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: 0 var(--sp-4);
		border-bottom: 1px solid var(--hairline);
	}
	#ae-portal .ae-sus { padding: var(--sp-4) var(--sp-6); }
	#ae-portal .ae-continut { padding: var(--sp-6); }
	#ae-portal .ae-teme { right: var(--sp-6); }
}

/* ==========================================================================
   8b. Meniul restrâns la iconițe
   ==========================================================================
   Butonul de sub marcă îl strânge la 72px — documentarea zice 56–72px pentru
   iconițe de 24px cu aer de 16px pe laturi, tooltip obligatoriu pe fiecare
   (title-ul e pus în șablon), tranziție de 200–300ms, stare ținută minte.
   Atributul stă pe <html> (ca tema) și se pune înainte de desenare. */

#ae-portal .ae-nav-strange { display: none; }

@media (min-width: 900px) {
	#ae-portal { transition: padding-left .22s ease; }
	#ae-portal .ae-nav { transition: width .22s ease, padding .22s ease; }

	#ae-portal .ae-nav-strange {
		display: flex; align-items: center; gap: var(--sp-3);
		flex: 0 0 auto; min-height: 36px; padding: 6px var(--sp-3);
		margin-bottom: var(--sp-2);
		border: 1px solid transparent; border-radius: var(--r-md);
		background: none; cursor: pointer; font-family: inherit;
		font-size: 12px; color: var(--ink-3, var(--ink-2)); text-align: left;
	}
	#ae-portal .ae-nav-strange:hover { background: var(--glass); color: var(--ink-1); }
	#ae-portal .ae-nav-strange svg { flex: 0 0 18px; transition: transform .22s ease; }

	/* v191 — AE, după ce lățisem bara la 120px: „oribil. Mult prea ingust.
	   panoul poate fi ingust cum era initial, dar vreau ca rotita si SP sa fie
	   vizibile pentru ca sunt folosite. Acum sunt inghesuite. Poti fi pe doua
	   randuri, dar sa fie vizibile si utilizabile."

	   Deci mă întorc la lățimea de la început — 72px, bara e a iconițelor —
	   iar cele două unelte stau pe DOUĂ RÂNDURI, fiecare cât toată lățimea
	   dinăuntru, cu 40px de înălțime (pragul degetului, nu al ochiului). Ce
	   greșisem de două ori la rând: în v187 le-am lăsat pe două rânduri, dar
	   ÎNGHESUITE — roata cerea 63px într-un loc de 51 și ieșea afară; în v190
	   le-am pus pe un rând și am lățit bara după ele, adică am plătit cu
	   lățimea întregii bare pentru un rând de jos. Acum nu se plătește nimic:
	   aerul din laturi scade la 6px, uneltele se întind cât încape, iar
	   ce nu încape (numele omului) se dă la o parte. */
	html[data-meniu="strans"] #ae-portal { padding-left: 72px; }
	html[data-meniu="strans"] #ae-portal .ae-nav { width: 72px; padding: 0 6px var(--sp-5); }
	html[data-meniu="strans"] #ae-portal .ae-marca--bara {
		justify-content: center; margin: 0 -6px var(--sp-3); padding: 0;
	}
	html[data-meniu="strans"] #ae-portal .ae-marca--bara .ae-marca-text { display: none; }
	html[data-meniu="strans"] #ae-portal .ae-nav-strange { justify-content: center; padding: 6px 0; }
	html[data-meniu="strans"] #ae-portal .ae-nav-strange span { display: none; }
	/* săgețile se întorc: acum arată spre desfăcut */
	html[data-meniu="strans"] #ae-portal .ae-nav-strange svg { transform: scaleX(-1); }

	/* Etichetele de grup nu încap nici în bara strânsă. Nu dispar de tot:
	   rămâne o linie subțire — grupurile se văd, chiar dacă nu se mai citesc. */
	html[data-meniu="strans"] #ae-portal .ae-nav-grup {
		height: 0; overflow: hidden; padding: 0;
		margin: var(--sp-2) 4px; border-top: 1px solid var(--hairline);
	}
	html[data-meniu="strans"] #ae-portal .ae-nav-item {
		justify-content: center; gap: 0; padding: 10px 0;
	}
	html[data-meniu="strans"] #ae-portal .ae-nav-item > span { display: none; }

	/* Subsolul barei strânse: DOUĂ RÂNDURI, cum a zis AE („Poti fi pe doua
	   randuri, dar sa fie vizibile si utilizabile"). Fiecare unealtă ia toată
	   lățimea dinăuntru (align-items: stretch) și cel puțin 40px pe verticală
	   — sub atât nu se mai nimerește cu mâna. Marginile negative sunt croite
	   pentru aerul barei LARGI; aici aerul e de 6px, și dacă rămân cele largi
	   subsolul iese în lături — chiar felul de scurgere care a scos derularea
	   orizontală în v187. */
	html[data-meniu="strans"] #ae-portal .ae-jos {
		flex-direction: column; align-items: stretch; justify-content: center;
		gap: 6px; padding: 8px 6px; margin-inline: -6px;
	}
	html[data-meniu="strans"] #ae-portal .ae-setari-bara {
		flex: 0 0 auto; width: auto; justify-content: center;
		min-height: 40px; padding: 8px 4px;
	}
	/* Numele omului nu încape la 72px — dar roata rămâne roată, iar `title`
	   spune al cui e panoul. */
	html[data-meniu="strans"] #ae-portal .ae-setari-bara span { display: none; }
	/* SP își PĂSTREAZĂ literele și aici: un beculeț fără nume nu spune nimic,
	   iar AE le folosește pe amândouă. Măsurat, „● SP" cere 37px — încape în
	   cei ~49 dinăuntru, cu aer de rezervă. */
	html[data-meniu="strans"] #ae-portal .ae-syno--bara {
		flex: 0 0 auto; justify-content: center;
		min-height: 38px; gap: 5px; padding: 8px 4px;
	}
}

/* Telefon culcat: bara de jos ar mânca jumătate din ecran. O subțiem. */
@media (max-height: 480px) and (orientation: landscape) {
	#ae-portal .ae-nav-item { min-height: 44px; font-size: 9px; }
	#ae-portal .ae-nav-item svg { width: 17px; height: 17px; }
	#ae-portal { padding-bottom: 52px; }
}

/* Cine a cerut mai puțină mișcare o primește. */
@media (prefers-reduced-motion: reduce) {
	#ae-portal *, #ae-portal *::before, #ae-portal *::after {
		transition-duration: .01ms !important; animation-duration: .01ms !important;
	}
	#ae-portal a.ae-card:hover { transform: none; }
}

/* ==========================================================================
   9. Albume și poze
   ========================================================================== */
#ae-portal .ae-titlu-mare { margin: 6px 0 0; font-size: 26px; font-weight: 600;
	letter-spacing: -.4px; text-transform: none; color: var(--ink-1); }
#ae-portal .ae-subtitlu { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
#ae-portal .ae-inapoi-link { font-size: 11.5px; color: var(--ae-aur); transition: color .16s ease; }
#ae-portal .ae-inapoi-link:hover { text-decoration: underline; }

/* Grila de albume — cardul de album din mock-up: --r-md, --surface-1,
   ridicare de 3px la hover cu umbra lungă. */
#ae-portal .ae-albume { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#ae-portal .ae-album { display: block; border-radius: var(--r-md); overflow: hidden;
	background: var(--surface-1); border: 1px solid var(--hairline);
	transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
	#ae-portal .ae-album:hover { transform: translateY(-3px); box-shadow: var(--umbra-2); }
}
/* aspect-ratio ține locul înainte ca poza să se încarce, deci pagina nu mai
   sare când sosesc imaginile — cel mai supărător defect al unei galerii */
#ae-portal .ae-album-poza { display: block; aspect-ratio: 4 / 3; background: var(--surface-3); }
#ae-portal .ae-album-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ae-portal .ae-album-gol { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); }
#ae-portal .ae-album-text { display: block; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
#ae-portal .ae-album-text strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
#ae-portal .ae-album-text em { display: block; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

/* Grila de poze */
/* ═══ GRILA DE POZE: RÂNDURI ALINIATE, NU PĂTRATE ═════════════════════════
   Aici scria `grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))` și
   `aspect-ratio: 1`. Pe monitorul lat al lui AE ieșeau nouă poze pe rând, de
   170 de puncte, fiecare tăiată pătrat. Vezi comentariul lung din
   `ae_grila_poze()` pentru de ce e greșit; aici e cum se repară.

   ARITMETICA, în trei rânduri de CSS. Fiecare poză pornește de la o lățime
   proporțională cu proporția ei (`flex-basis: ar × H`) și crește tot
   proporțional cu ea (`flex-grow: ar`). Spațiul rămas pe rând se împarte după
   `flex-grow`, deci fiecare ajunge la `ar × H'` cu ACELAȘI H' — adică toate
   pozele de pe un rând au aceeași înălțime, rândul umple lățimea, și NICIUNA
   nu se taie. Asta face Flickr, doar că din JavaScript.

   `::after` cu creștere uriașă e paznicul ultimului rând: fără el, trei poze
   rămase la coadă s-ar întinde cât tot ecranul, ca niște panorame false. */
#ae-portal .ae-poze {
	--poze-rand: 150px;   /* înălțimea către care ținteau rândurile */
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
#ae-portal .ae-poze::after { content: ""; flex-grow: 999999; }
#ae-portal .ae-poze .ae-poza {
	flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--poze-rand));
	aspect-ratio: var(--ar, 1.5);
}
#ae-portal .ae-poza { position: relative; display: block; aspect-ratio: 1;
	border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--hairline);
	background: var(--surface-3); transition: opacity .16s ease; }
/* `object-position` sus, nu la mijloc — pentru grilele care TOT taie (albume,
   bilețele). Capetele stau în treimea de sus a unei poze în picioare, deci o
   tăiere centrată e cea mai proastă alegere posibilă dintre toate. */
#ae-portal .ae-poza img { width: 100%; height: 100%; object-fit: cover;
	object-position: 50% 35%; display: block; }
/* În rândurile aliniate nu se taie nimic, deci nici nu se mută nimic. */
#ae-portal .ae-poze .ae-poza img { object-position: 50% 50%; }
#ae-portal .ae-poza:hover { opacity: .86; }

/* ---------- teancul: primele rânduri, apoi un buton cu cifra ----------
   Ascunse din CSS, nu din PHP: la apăsare se aranjează TOATE într-o singură
   grilă, nu se lipește un al doilea rând de poze sub primul. */
/* BLOC SIMPLU, nu flex-coloană. Prima variantă era `display:flex` cu
   `align-items:flex-start`, ca butonul să nu se întindă cât rândul — și a ieșit
   pe dos: `flex-start` a strâns GRILA la lățimea conținutului ei, iar la
   șablonul „Clasic" pozele au ajuns de 126 de puncte pe un monitor de 2600.
   Un bloc obișnuit face ce trebuie fără să ceară nimic: grila (bloc) umple,
   butonul (`inline-flex`) stă cât scrie pe el. */
#ae-portal .ae-poze-grup { display: block; }
#ae-portal .ae-poze--teanc .ae-poza:nth-child(n+7) { display: none; }
#ae-portal .ae-poze-grup:has(.ae-teanc-bifa:checked) .ae-poze--teanc .ae-poza { display: block; }
#ae-portal .ae-teanc-buton {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; margin-top: var(--sp-3); padding: 0 16px;
	border-radius: var(--r-pill); border: 1px solid var(--hairline);
	background: var(--surface-2); color: var(--ink-2);
	font-size: 13px; cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-teanc-buton:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-teanc-bifa:focus-visible + .ae-teanc-buton {
	outline: 3px solid var(--br-400); outline-offset: 2px;
}
#ae-portal .ae-teanc-buton .ae-teanc-mai-putin { display: none; }
#ae-portal .ae-poze-grup:has(.ae-teanc-bifa:checked) .ae-teanc-mai { display: none; }
#ae-portal .ae-poze-grup:has(.ae-teanc-bifa:checked) .ae-teanc-mai-putin { display: inline; }

@media (min-width: 640px) {
	#ae-portal .ae-albume { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
	/* Rânduri mai înalte pe ecrane mai mari — și mai multe poze deodată
	   înainte de buton. Ținta de 300 e cea a lui Flickr; noi stăm puțin sub ea
	   fiindcă pozele astea stau ÎNTR-O POVESTE, nu într-o galerie: după două-trei
	   rânduri trebuie să urmeze textul, nu încă un ecran de poze. */
	#ae-portal .ae-poze { --poze-rand: 210px; }
	#ae-portal .ae-poze--teanc .ae-poza:nth-child(n+7) { display: block; }
	#ae-portal .ae-poze--teanc .ae-poza:nth-child(n+13) { display: none; }
	#ae-portal .ae-titlu-mare { font-size: 34px; }
}

/* ---------- treptele albumului (pozele 301–600…) ----------
   Trepte cu CIFRE, nu „pagina 2": „301–600" spune ce primești înainte să
   apeși. Aceeași înălțime de deget ca peste tot. */
#ae-portal .ae-trepte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
#ae-portal .ae-treapta {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	border-radius: var(--r-pill); border: 1px solid var(--hairline);
	background: var(--surface-2); color: var(--ink-2);
	font-size: 13px; font-variant-numeric: tabular-nums; text-decoration: none;
	transition: background .16s ease, color .16s ease;
}
#ae-portal a.ae-treapta:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-treapta.e-aici {
	background: var(--pastila-bg, var(--br-600)); color: var(--pastila-ink, #fff);
	border-color: transparent; font-weight: 600;
}

/* ---------- cadrul din film ----------
   Semnul stă JOS, ca să nu acopere fața nimănui, și spune cu vorbe ce e —
   nu doar un triunghi, pe care l-ai putea lua drept buton de pornit. */
#ae-portal .ae-poza-film {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 4px 8px; font-size: 10.5px; letter-spacing: .3px;
	background: color-mix(in srgb, var(--bg-app) 72%, transparent); color: var(--ink-1);
	border-top: 1px solid var(--hairline);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Poză cu excepție: se vede doar de cine administrează albumul. Marcajul e
   discret intenționat — nu e o eroare, e o stare pe care ai ales-o. */
#ae-portal .ae-poza--restrictie { outline: 2px solid var(--warn); outline-offset: -2px; }
#ae-portal .ae-poza-semn { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	background: color-mix(in srgb, var(--bg-app) 68%, transparent); color: var(--ink-1);
	border-top: 1px solid var(--hairline);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	font-size: 10px; line-height: 1.4; padding: 4px; text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   10. Formulare în portal — album nou, încărcare
   ========================================================================== */
#ae-portal .ae-mesaj { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
	font-size: 12.5px; line-height: 1.6; margin-bottom: var(--sp-4);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-2); }
#ae-portal .ae-mesaj--eroare { border-color: color-mix(in srgb, var(--crit) 55%, transparent);
	background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--ink-1); }

#ae-portal .ae-plic { background: var(--card-bg); border: 1px solid var(--hairline);
	border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--umbra-1);
	backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
#ae-portal .ae-plic > summary { list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5);
	font-size: 13px; font-weight: 600; letter-spacing: .4px; }
#ae-portal .ae-plic > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-plic[open] > summary { border-bottom: 1px solid var(--hairline); }
#ae-portal .ae-form { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column;
	gap: var(--sp-4); align-items: flex-start; }
/* Într-o coloană flex, un buton se întinde pe toată lățimea dacă nu-i spui
   altfel. Un buton lat cât ecranul arată a bară, nu a buton. */
#ae-portal .ae-form > .ae-buton, #ae-portal .ae-incarca > .ae-buton { align-self: flex-start; }
#ae-portal .ae-form > .ae-camp, #ae-portal .ae-form > .ae-bife { align-self: stretch; }

#ae-portal .ae-camp { display: block; }
#ae-portal .ae-camp span { display: block; font-size: 11px; letter-spacing: .6px;
	text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
/* 16px e pragul sub care iOS mărește singur pagina la atingerea câmpului */
#ae-portal .ae-camp input { width: 100%; min-height: 46px; font-size: 16px; font-family: inherit;
	padding: 0 var(--sp-4); border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-1); outline: none; }
#ae-portal .ae-camp input::placeholder { color: var(--ink-3); }

/* Listele de ales arată ca și câmpurile de scris. Fără rândurile astea,
   browserul le desenează cu înfățișarea lui de sistem — gri, mic, cu totul
   altă formă decât restul formularului. Pe telefon iese și mai rău: un select
   de sistem lângă un câmp îmbrăcat de noi arată ca o bucată nefinisată.
   „appearance: none" scoate înfățișarea de sistem, iar săgeata o desenăm noi
   ca fundal, ca să nu depindem de nicio imagine. */
#ae-portal .ae-camp select { width: 100%; min-height: 46px; font-size: 16px; font-family: inherit;
	padding: 0 44px 0 var(--sp-4); border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background-color: var(--surface-2);
	color: var(--ink-1); outline: none; cursor: pointer;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
	background-size: 18px 18px; }

#ae-portal .ae-camp select:focus-visible,
#ae-portal .ae-camp input:focus-visible { border-color: var(--br-400); }

#ae-portal .ae-bife { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
#ae-portal .ae-bife legend { padding: 0 6px; font-size: 11px; letter-spacing: .6px;
	text-transform: uppercase; color: var(--ink-3); }
#ae-portal .ae-bife label { display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
	margin-right: var(--sp-4); font-size: 12.5px; color: var(--ink-2); cursor: pointer; }

/* Zona de încărcare */
#ae-portal .ae-incarca { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
#ae-portal .ae-fisiere { display: block; width: 100%; cursor: pointer; }
#ae-portal .ae-fisiere input { position: absolute; opacity: 0; width: 0; height: 0; }
#ae-portal .ae-fisiere-text { display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg); text-align: center;
	border: 1px dashed color-mix(in srgb, var(--ac-400) 45%, transparent);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ac-400) 8%, transparent),
		color-mix(in srgb, var(--bg-app) 25%, transparent));
	transition: border-color .16s ease, background .16s ease; }
#ae-portal .ae-fisiere:hover .ae-fisiere-text,
#ae-portal .ae-fisiere input:focus-visible + .ae-fisiere-text {
	border-color: var(--ac-400); background: color-mix(in srgb, var(--ac-400) 14%, transparent); }
#ae-portal .ae-fisiere-text strong { font-size: 14px; font-weight: 600; }
#ae-portal .ae-fisiere-text em { font-style: normal; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-limite { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }

/* ==========================================================================
   11. Vizualizatorul de poze

   Sticlă mată peste galerie, nu un ecran negru. Pozele de dedesubt rămân
   vizibile, doar estompate — așa nu pierzi contextul: vezi în continuare unde
   ești în album, iar închiderea nu mai e o trecere bruscă din beznă în lumină.

   Tenta vine din tema activă, deci vizualizatorul se schimbă odată cu ea —
   inclusiv în modul zi, unde sticla e deschisă, nu întunecată.
   ========================================================================== */
/* Regula asta lipsea, și de la ea veneau toate trei.

   `#ae-portal * { box-sizing: border-box }` prinde doar ce e ÎN portal, iar
   dialogul stă în <body>, în afara lui. Deci `.ae-viz-cadru` avea înălțime
   100dvh PLUS 174px de padding — adică era cu 174px mai înalt decât ecranul.
   De acolo: poza împinsă în jos și tăiată la bază. */
dialog.ae-viz, dialog.ae-viz * { box-sizing: border-box; }

dialog.ae-viz {
	width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
	margin: 0; padding: 0; border: none; overflow: hidden;
	color: var(--ink-1);
	font-family: var(--font);

	/* Estomparea se aplică pe DIALOG, nu pe ::backdrop: pseudo-elementul acela
	   încă nu moștenește variabilele temei în toate browserele, iar aici avem
	   nevoie de culoarea temei. */
	background: color-mix(in srgb, var(--bg-app) 58%, transparent);
	backdrop-filter: blur(34px) saturate(1.18);
	-webkit-backdrop-filter: blur(34px) saturate(1.18);
}
dialog.ae-viz::backdrop { background: transparent; }

/* deschidere lină, fără salt */
dialog.ae-viz { opacity: 0; transition: opacity .18s ease; }
dialog.ae-viz[open] { opacity: 1; }

dialog.ae-viz .ae-viz-cadru {
	margin: 0; height: 100dvh;

	/* `grid-template-rows: minmax(0, 1fr)` nu e o rafinare, e reparația unui
	   defect real — și greu de văzut, fiindcă apare doar la pozele înalte.

	   `place-items: center` centrează ELEMENTUL în rândul lui. Nu spune nimic
	   despre cât de înalt e rândul. Iar un rând `auto` crește cât conținutul,
	   chiar dacă recipientul are înălțime fixă: pur și simplu dă pe dinafară.
	   Deci `max-height: 100%` de pe poză se raporta la un rând de 1200px, nu la
	   ecran — adică nu limita nimic. O poză de telefon, în picioare, ieșea cu o
	   treime sub marginea de jos și se tăia acolo.

	   `minmax(0, 1fr)` forțează rândul să fie exact cât recipientul: nici mai
	   mult (1fr nu depășește), nici mai puțin (minimul e 0, nu „cât conținutul").
	   Abia atunci `max-height: 100%` are față de ce să se măsoare. */
	display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;

	/* Sus mai puțin, jos mai mult: poza urcă deasupra balonului cu titlul.

	   Nu e o toană — e centrare optică. Ochiul percepe centrul geometric ca
	   fiind prea jos, iar aici mai e și balonul care trage privirea în jos.
	   Ridicarea e de 22px, adică sub 3% din înălțime: destul cât să se vadă,
	   prea puțin cât să înghesuie butonul de închidere de sus. */
	padding: calc(80px + env(safe-area-inset-top, 0px)) 76px calc(124px + env(safe-area-inset-bottom, 0px));
}
dialog.ae-viz img {
	max-width: 100%; max-height: 100%; display: block; object-fit: contain;
	border-radius: var(--r-md);
	/* umbra lungă face poza să plutească deasupra sticlei, nu să stea lipită */
	box-shadow: var(--umbra-2), 0 30px 70px rgba(0, 0, 0, .28);
}

/* ---------- butoanele ----------
   Aceeași rețetă ca „badge" din mock-up: fundalul aplicației la 68%, un fir
   de contur, estompare. Merge la fel de bine pe fundal închis și pe deschis,
   pentru că pornește din culoarea temei, nu din alb fix. */
dialog.ae-viz button, dialog.ae-viz .ae-viz-descarca {
	position: absolute; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	padding: 0; line-height: 0;
	width: 48px; height: 48px; border-radius: var(--r-md); cursor: pointer;
	border: 1px solid var(--hairline);
	background: color-mix(in srgb, var(--surface-1) 72%, transparent);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	color: var(--ink-1);
	box-shadow: var(--umbra-1);
	transition: background .16s ease, border-color .16s ease, transform .16s cubic-bezier(.22,.61,.36,1);
}
dialog.ae-viz button:hover, dialog.ae-viz .ae-viz-descarca:hover {
	background: var(--surface-2); border-color: var(--ae-aur);
}
dialog.ae-viz button:active { transform: scale(.94); }
dialog.ae-viz button svg { width: 21px; height: 21px; display: block; }
dialog.ae-viz :focus-visible { outline: 2px solid var(--ae-aur); outline-offset: 3px; }

dialog.ae-viz .ae-viz-inchide { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
dialog.ae-viz .ae-viz-sag { top: 50%; transform: translateY(-50%); }
dialog.ae-viz .ae-viz-sag:active { transform: translateY(-50%) scale(.94); }
dialog.ae-viz .ae-viz-sag--st { left: 16px; }
dialog.ae-viz .ae-viz-sag--dr { right: 16px; }
dialog.ae-viz [hidden] { display: none !important; }

/* ---------- mărirea ----------
   Butoanele stau sub cel de închidere, într-o coloană. Nu jos-dreapta ca la
   hartă: acolo, pe telefon, e deja săgeata de „poza următoare", iar două
   butoane care se ating cu degetul în același loc sunt un buton greșit apăsat. */
dialog.ae-viz .ae-viz-zoom--plus  { top: calc(72px  + env(safe-area-inset-top, 0px)); right: 16px; }
dialog.ae-viz .ae-viz-zoom--minus { top: calc(128px + env(safe-area-inset-top, 0px)); right: 16px; }
dialog.ae-viz button[disabled] { opacity: .42; cursor: default; }
dialog.ae-viz button[disabled]:hover {
	background: color-mix(in srgb, var(--surface-1) 72%, transparent);
	border-color: var(--hairline);
}
dialog.ae-viz button[disabled]:active { transform: none; }

/* Degetele sunt ale pozei, nu ale browserului: fără asta, două degete ar mări
   toată pagina de dedesubt în loc de poză. */
dialog.ae-viz .ae-viz-cadru { touch-action: none; }
dialog.ae-viz img { transform-origin: center center; will-change: transform; }
/* Lin doar când mărirea vine dintr-un buton, o tastă sau o dublă atingere.
   La două degete nu: acolo poza trebuie să stea lipită de ele, iar o tranziție
   ar face-o să alerge după deget cu o zecime de secundă întârziere. */
dialog.ae-viz img.e-lin { transition: transform .2s cubic-bezier(.22,.61,.36,1); }
dialog.ae-viz--marit img { cursor: grab; }
dialog.ae-viz--marit img:active { cursor: grabbing; }

/* ---------- bara de jos ---------- */
dialog.ae-viz .ae-viz-jos {
	position: absolute; left: 50%; transform: translateX(-50%);
	bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2;
	display: flex; align-items: center; gap: 6px;
	max-width: calc(100% - 32px);
	padding: 6px 6px 6px var(--sp-4); border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--surface-1) 72%, transparent);
	border: 1px solid var(--hairline);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	box-shadow: var(--umbra-2);
	font-size: 12.5px;
}
dialog.ae-viz .ae-viz-titlu { flex: 0 1 auto; min-width: 0; color: var(--ink-2);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.ae-viz .ae-viz-contor { flex: 0 0 auto; color: var(--ink-3);
	font-variant-numeric: tabular-nums; padding: 0 4px; }
dialog.ae-viz .ae-viz-descarca {
	position: static; width: auto; height: 34px; padding: 0 15px;
	border-radius: var(--r-pill); font-size: 12px; font-weight: 600; letter-spacing: .4px;
	text-decoration: none; box-shadow: none; color: #fff;
	background: linear-gradient(135deg, var(--br-700), var(--br-600));
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
dialog.ae-viz .ae-viz-descarca:hover {
	background: linear-gradient(135deg, var(--br-700), var(--br-600));
	border-color: var(--hairline); filter: brightness(1.14);
}

/* Pe telefon, săgețile coboară în dreptul degetului mare. La mijlocul
   ecranului arată bine în capturi, dar nu ajungi la ele fără să muți mâna. */
@media (max-width: 640px) {
	dialog.ae-viz .ae-viz-sag { top: auto; transform: none;
		bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
	dialog.ae-viz .ae-viz-sag:active { transform: scale(.94); }
	dialog.ae-viz .ae-viz-titlu { display: none; }
	/* Jos e mai aglomerat decât pe ecran mare: întâi săgețile (la 78px, ca să
	   ajungi la ele cu degetul mare), apoi balonul. Poza se oprește deasupra
	   amândurora. */
	dialog.ae-viz .ae-viz-cadru { padding: calc(72px + env(safe-area-inset-top, 0px)) 12px calc(140px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	dialog.ae-viz, dialog.ae-viz * { transition-duration: .01ms !important; }
}

/* Dialogul primește cursorul (vezi ae-vizualizator.js), dar el nu e un buton —
   n-are ce arăta un inel în jurul întregului ecran. */
dialog.ae-viz:focus, dialog.ae-viz:focus-visible { outline: none; }

/* ==========================================================================
   12. Poveștile — nunta, botezul, moțul

   Un album e un teanc de poze. O poveste are o ordine: poza de sus, filmul,
   momentele pe rând, apoi pozele. De aceea are stiluri proprii, nu doar
   carduri.
   ========================================================================== */

/* ---------- capul paginii ---------- */
#ae-portal .ae-hero {
	position: relative; isolation: isolate;
	display: flex; align-items: flex-end;
	/* `svh`, nu `vh`: pe telefon, `vh` socotește ecranul FĂRĂ barele browserului,
	   deci capul poveștii creștea sub ele și împingea titlul afară din vedere
	   tocmai la prima deschidere. `svh` ia ecranul cel mic — cel pe care îl vezi
	   când barele sunt la locul lor. Unde `svh` nu merge, rămâne `vh`. */
	min-height: 46vh; min-height: 46svh; max-height: 560px;
	/* CAPUL NU MAI URCĂ PESTE CE E ÎNAINTEA LUI.

	   Aici scria `margin-top: calc(-1 * var(--sp-5))` — o urcare pusă ca poza
	   de deschidere să se lipească de marginea de sus a paginii. Merge, atâta
	   vreme cât capul e CHIAR PRIMUL lucru de pe ecran. Dar nu e mereu: după ce
	   stingi creionul, portalul scrie un rând — „Doar citești. Nimic de apăsat
	   din greșeală." — iar poza urca peste el și îl tăia pe din două. AE l-a
	   prins într-o captură, cu jumătate de rând ieșind de sub fotografie.

	   Regula e acum condiționată: urcă doar când chiar n-are nimic deasupra.
	   Marginile din stânga și din dreapta rămân — ele fac poza să iasă până în
	   marginile paginii, și n-au cum să acopere nimic. */
	margin: 0 calc(-1 * var(--sp-4)) var(--sp-5);
	padding: var(--sp-6) var(--sp-4) var(--sp-5);
	overflow: hidden;
	background: var(--surface-2);
}
/* Urcarea, DOAR când capul e primul lucru din pagină. `:first-child` de două
   ori: și povestea să fie prima din conținut, și capul primul din poveste. */
#ae-portal .ae-continut > *:first-child > .ae-hero:first-child,
#ae-portal .ae-continut > .ae-hero:first-child { margin-top: calc(-1 * var(--sp-5)); }
@media (min-width: 640px) {
	#ae-portal .ae-continut > *:first-child > .ae-hero:first-child,
	#ae-portal .ae-continut > .ae-hero:first-child { margin-top: calc(-1 * var(--sp-6)); }
}

#ae-portal .ae-hero-poza {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Vălul nu e decor. E singurul lucru care garantează că textul se citește.

   O poză de nuntă poate fi orice: rochie albă în soare, sau biserică în
   penumbră. Text alb pe prima are contrast 1.1:1 — invizibil. Nu putem ști
   dinainte ce poză pui, deci nu putem alege culoarea textului după ea.

   Soluția e să nu depindem de poză: punem sub text un strat închis care se
   îngroașă spre bază, acolo unde stă scrisul. Peste ORICE poză, fundalul de
   sub litere ajunge cel puțin la fel de închis ca stratul ăsta. Contrastul
   devine o proprietate a vălului, nu a norocului.

   Alfa de 0.82 jos nu e aleasă cu ochiul: e cea mai mică valoare la care albul
   trece de 4.5:1 chiar și peste alb pur. Am măsurat-o. */
#ae-portal .ae-hero-val {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to top,
		rgba(8, 12, 10, .86) 0%,
		rgba(8, 12, 10, .80) 22%,
		rgba(8, 12, 10, .68) 42%,
		rgba(8, 12, 10, .34) 68%,
		rgba(8, 12, 10, .10) 100%);
}

#ae-portal .ae-hero-text { position: relative; max-width: 720px; }
/* Culorile hero-ului sunt fixe, nu din temă: stau peste o poză, nu peste o
   suprafață a temei, iar poza nu se schimbă odată cu tema. */
/* Linkul stă cel mai sus din blocul de text, adică acolo unde vălul e cel mai
   subțire. Peste o poză aproape albă, #cfe6da măsura 3.33:1. Alb spart trece,
   și pe poză deschisă, și pe poză întunecată. */
#ae-portal .ae-hero-text .ae-inapoi-link { color: #eaf3ee; }
#ae-portal .ae-hero-text .ae-inapoi-link:hover { color: #fff; }
#ae-portal .ae-hero h2 {
	margin: var(--sp-2) 0 0; color: #fff;
	font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.6px;
	text-transform: none;
}
#ae-portal .ae-hero-sub { margin: var(--sp-2) 0 0; color: #e8f0ea; font-size: 14px; line-height: 1.5; }
#ae-portal .ae-hero-data { margin: var(--sp-3) 0 0; }
#ae-portal .ae-hero-data span {
	display: inline-block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
	padding: 5px 12px; border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Fără poză, capul paginii nu se preface: devine o bandă a temei. */
#ae-portal .ae-hero--simplu { min-height: 0; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
#ae-portal .ae-hero--simplu h2 { color: var(--ink-1); }
#ae-portal .ae-hero--simplu .ae-hero-sub { color: var(--ink-2); }
#ae-portal .ae-hero--simplu .ae-inapoi-link { color: var(--ae-aur); }
#ae-portal .ae-hero--simplu .ae-hero-data span {
	background: color-mix(in srgb, var(--ac-400) 16%, transparent);
	border-color: color-mix(in srgb, var(--ac-400) 38%, transparent); color: var(--ac-300);
}
[data-mod="zi"] #ae-portal .ae-hero--simplu .ae-hero-data span { color: var(--ac-500); }

/* ---------- povestea scrisă ----------
   -------------------------------------------------------------------------
   TREI CIFRE, ȘI DE UNDE VIN. Aici scria, până azi: `max-width: 720px`,
   `font-size: 15px`, `color: var(--ink-2)`. Le-am măsurat în browser, pe
   desenul nou, și au ieșit așa:

     · 85 DE SEMNE PE RÂND pe ecran mare. Optimul e 50–75; PLAFONUL WCAG
       (1.4.8) e 80. Pe telefon ieșeau 44, deci acolo era bine — defectul era
       numai pe ecran lat, unde 720px la 15px se întind prea mult.
     · 15 PIXELI. GOV.UK — sistemul cel mai testat pe oameni de toate felurile
       — pune proza la 19px, ȘI PE TELEFON LA FEL (mobilul e condiția mai grea
       de citit, nu cea mai ușoară). NN/g cere minimum 16 pentru cititori peste
       65. Marcela și Gelu citesc poveștile de pe telefon.
     · CERNEALA SECUNDARĂ. Contrastul TRECE (11,25:1 noaptea, 7,31:1 ziua) —
       nu era un defect de accesibilitate, și n-am de gând să pretind că era.
       Dar cerneala a doua e haina legendelor de sub poze. Povestea familiei nu
       e o legendă; poartă cerneala întâi.

   MĂSURA E ÎN `ch`, NU ÎN PIXELI, și asta e partea care contează cel mai
   mult. `ch` ține de mărimea literei. Când bunicul apasă „literă mare", proza
   urcă la 24px — iar dacă lățimea ar fi rămasă în pixeli, rândul s-ar fi
   SCURTAT în semne, dar coloana ar fi rămas la fel de lată pe ecran. Cu `ch`
   se strâng amândouă odată. Cercetarea de tipar mare (APH, ACB) cere 39–43 de
   semne la mărimea aia — mult sub 50–75 — fiindcă ochiul face salturi mai mari
   și se pierde mai ușor la întorsul rândului.

   Variabilele stau pe `:root`, nu aici, fiindcă mărimea literei e o hotărâre a
   PORTALULUI, nu a Poveștilor: același comutator trebuie să miște și
   cronologia, și orice text lung de mâine. */
#ae-portal .ae-proza {
	max-width: var(--proza-masura);
	font-size: var(--proza-marime);
	line-height: var(--proza-rand);
	color: var(--ink-1);
}
#ae-portal .ae-proza p {
	margin: 0 0 var(--proza-spatiu);
	font-size: inherit; line-height: inherit; color: inherit;
	/* Niciodată aliniat pe ambele margini: spațiile inegale fac „râuri albe",
	   pe care WCAG 1.4.8 le descrie ca greu sau imposibil de citit pentru
	   cititorii cu dificultăți de citire. */
	text-align: left;
	/* Fără cuvinte rămase singure pe ultimul rând. Unde nu merge, nu strică. */
	text-wrap: pretty;
}
#ae-portal .ae-proza p:last-child { margin-bottom: 0; }
#ae-portal .ae-proza > *:first-child { margin-top: 0; }

/* ═══ CÂT DE LATĂ E O POVESTE ══════════════════════════════════════════════
   AE, uitându-se la botez pe monitorul lui: „Așa trebuie să stea textul? […]
   Să fie senzația de suficient pe ecran."

   CE ERA. Textul stătea pe 700 de puncte, pozele se lățeau pe 1440 (tot ce
   permite `.ae-continut`), iar pe un monitor de 2600 rămânea o palmă de gol în
   dreapta. Trei lățimi fără nicio legătură între ele: nu arăta puțin fiindcă
   ERA puțin, arăta puțin fiindcă stătea strâmb.

   CIFRA PENTRU 1160. Cercetarea de urmărit privirea (NN/g) spune că 80% din
   fixări cad în jumătatea stângă a ecranului, cu vârful pe la 600 de puncte de
   margine — iar lățirea ferestrei de la 1024 la 1920 (900 de puncte în plus!)
   a mutat vârful doar cu 200. Pozele puse dincolo de vreo 1200 de puncte nu
   sunt „mai multe poze", sunt poze puse unde nu se uită nimeni.

   DOUĂ AXE CONCENTRICE, nu o singură margine. Prima reparație a lipit totul
   de marginea stângă a coloanei de 1160 — iar AE s-a uitat pe monitorul lui
   și a spus exact ce era: „pe telefon se vede bine, dar pe un ecran mai mare
   arată ciudat". Avea dreptate. Textul de 700 lipit de stânga unei coloane de
   1160 lasă o gaură de o palmă în dreapta lui — pagina părea trasă într-o
   parte, nu așezată.

   Așezarea corectă e cea pe care o folosesc toate publicațiile care pun text
   îngust lângă poze late (are și nume: coloane „content / feature"): TEXTUL DE
   CITIT stă pe o coloană de 66 de semne, centrată; POZELE, filmul și harta ies
   mai late, la 1160, centrate PE ACELAȘI MIJLOC. Fiecare bandă iese simetric
   din cea dinăuntru — la stânga și la dreapta textului rămâne același aer, iar
   pozele îl încadrează, nu îl împing.

   Prima mea încercare de „centrat" eșuase dintr-un singur motiv: titlul din
   cap rămânea la marginea paginii în timp ce proza se muta spre mijloc. Acum
   TOT ce se citește — titlul, semnătura, proza, capetele de capitol — stă pe
   aceeași axă de 66 de semne, deci titlul începe exact deasupra primului
   cuvânt. Pe telefon nu se schimbă nimic: acolo ambele coloane sunt oricum
   cât ecranul. */
#ae-portal .ae-poveste { --media-masura: 1160px; }

/* Coloana: toate bucățile poveștii, aceeași lățime, centrate pe ecran.
   `*`, nu `section` — unele șabloane scot grila de poze sau filmul fără s-o
   învelească în `section` (vezi „Zi povestită"), și tocmai alea rămâneau
   întinse pe 1456 de puncte. */
#ae-portal .ae-poveste > *:not(.ae-hero) {
	max-width: var(--media-masura);
	margin-inline: auto;
}
/* Proza e o bucată din coloană — cutia ei ține 1160, dar RÂNDURILE dinăuntru
   se opresc la măsura de citit și stau la mijlocul cutiei, pe aceeași axă cu
   pozele. */
#ae-portal .ae-poveste > .ae-proza > * { max-width: var(--proza-masura); margin-inline: auto; }

/* Capul rămâne cât toată pagina — e o poză de deschidere, nu conținut de
   citit — dar VORBELE din el intră în aceeași coloană, ca titlul să înceapă
   exact deasupra primei poze și a primului cuvânt. */
#ae-portal .ae-poveste > .ae-hero { max-width: none; }
#ae-portal .ae-poveste .ae-hero-text {
	/* Pe axa PROZEI, nu a pozelor: titlul trebuie să înceapă exact deasupra
	   primului cuvânt al poveștii. Aici a eșuat prima încercare de centrat.

	   `font-size` NU E DECOR: măsura e în `ch`, iar `ch` se socotește din
	   litera elementului. Cutia asta avea litera de 16 și proza de 19 — deci
	   „aceeași măsură" ieșea 590 într-un loc și 701 în celălalt, iar titlul
	   începea cu o jumătate de palmă mai la dreapta decât primul cuvânt.
	   Aceeași literă, aceeași măsură, aceeași margine. Copiii (titlul,
	   subtitlul) își pun mărimile lor peste, ca și până acum. */
	font-size: var(--proza-marime);
	max-width: var(--proza-masura); width: 100%; margin-inline: auto;
}
/* Titlul are măsura LUI, mult mai scurtă decât a prozei: un titlu de 40 de
   pixeli întins pe 1160 dă rânduri pe care ochiul le pierde la întors. */
#ae-portal .ae-poveste .ae-hero h2 { max-width: 20ch; }
#ae-portal .ae-poveste .ae-hero-sub { max-width: 46ch; }

/* ---------- semnătura și capătul poveștii ---------- */
/* „scrisă de Mada · 6 august 2026". Stă sub cap, discret, dar acolo: e
   proveniență, nu decor. Vezi comentariul din `ae_poveste()`. */
/* `> .ae-poveste-semnat`, nu doar clasa: regula coloanei („tot ce e copil
   direct ia 1160") numără DOUĂ clase prin `:not(.ae-hero)` și o bătea pe asta,
   care număra una. Semnătura ieșea lată cât pozele, deși îi scrisesem măsura
   prozei. Specificitatea nu se vede la citit — se vede la măsurat. */
#ae-portal .ae-poveste > .ae-poveste-semnat {
	/* `width: 100%`, ca să umple măsura chiar când vorbele-s puține: altfel
	   cutia se strânge pe conținut, se centrează STRÂNSĂ, și semnătura pornea
	   cu o sută de puncte mai la dreapta decât titlul de deasupra ei. */
	width: 100%; max-width: var(--proza-masura);
	margin: 0 auto var(--sp-4);
	display: flex; flex-wrap: wrap; gap: 10px;
	/* Litera cutiei = litera prozei, ca `ch`-ul măsurii să dea ACELAȘI număr —
	   a treia oară când mă mușcă asta azi (întâi capul, acum semnătura).
	   Vorbele dinăuntru rămân mici, prin `span`. */
	font-size: var(--proza-marime); color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-poveste-semnat > span { font-size: 13px; }
#ae-portal .ae-poveste-semnat b { font-weight: 650; color: var(--ink-2); }
#ae-portal .ae-poveste-semnat span + span::before {
	content: "·"; margin-right: 10px; opacity: .6;
}

/* Capătul. Un semn mic, centrat pe măsura textului — nu o linie pe toată
   lățimea, care ar arăta ca un despărțitor de secțiune, adică a mai urmat
   ceva. Ăsta spune „gata". */
#ae-portal .ae-poveste-capat {
	/* Centrat pe TOATĂ povestea, nu pe coloana de text. E capătul întregului,
	   iar sub el stau harta și pozele, care se întind cât pagina; un semn
	   centrat pe coloana de text ar fi părut pus strâmb. */
	margin: var(--sp-6) 0 var(--sp-5);
	text-align: center; font-size: 15px; letter-spacing: 6px;
	color: var(--ink-3, var(--ink-2)); opacity: .7;
}

/* Uneltele stau la COADĂ acum, nu între cap și primul paragraf. */
#ae-portal .ae-unelte { margin-top: var(--sp-5); }

/* ---------- mărimea literei, în panoul de teme ---------- */
#ae-portal .ae-litera { display: flex; gap: 8px; margin-top: 8px; }
#ae-portal .ae-litera button {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 44px; padding: 0 10px; border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-2);
	font-family: inherit; font-size: 13px; cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-litera button:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-litera button[aria-pressed="true"] {
	background: var(--pastila-bg, var(--br-600)); color: var(--pastila-ink, #fff);
	border-color: transparent; font-weight: 600;
}
/* „A" mic și „A" mare: semnul arată ce face butonul, nu doar îl scrie. */
#ae-portal .ae-litera button span { font-size: 13px; font-weight: 700; line-height: 1; }
#ae-portal .ae-litera button .ae-litera-mare { font-size: 19px; }
#ae-portal .ae-teme-nota {
	margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3, var(--ink-2));
}

/* ═══ (?) — EXPLICAȚIILE „CUM SE FOLOSEȘTE", STRÂNSE ══════════════════════
   AE: explicațiile de folosire să fie ascunse și să apară doar prin hover.
   Pe calculator: hover. Pe telefon, unde hover nu există: o atingere pe (?)
   — bula se deschide și se închide la a doua atingere sau la Escape (vezi
   ae-teme.js). Bula stă absolut, deci nu împinge nimic când se deschide. */
#ae-portal .ae-cum { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
#ae-portal .ae-cum-b {
	width: 22px; height: 22px; border-radius: 50%;
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 650;
	line-height: 1; cursor: help; display: inline-grid; place-items: center; padding: 0;
	transition: background .15s ease, color .15s ease;
}
#ae-portal .ae-cum-b:hover, #ae-portal .ae-cum-b[aria-expanded="true"] {
	background: var(--br-600); color: #fff; border-color: transparent;
}
[data-mod="noapte"] #ae-portal .ae-cum-b:hover,
[data-mod="noapte"] #ae-portal .ae-cum-b[aria-expanded="true"] { background: var(--ae-aur); color: #06170F; }
/* ANCORATĂ LA STÂNGA SEMNULUI, nu centrată pe el. Prima variantă se centra —
   iar pe Cronologie, unde (?) stă aproape de marginea conținutului, jumătate
   de bulă intra SUB meniul lateral și AE a citit o propoziție tăiată la
   jumătate. Ancorată la stânga, bula crește numai spre dreapta, unde e loc.
   `z-index` peste meniu, pentru orice alt colț în care s-ar mai întâlni. */
#ae-portal .ae-cum-text {
	position: absolute; z-index: 60; top: calc(100% + 8px); left: -6px;
	width: max-content; max-width: min(46ch, 78vw);
	padding: 10px 13px; border-radius: 10px;
	background: var(--surface-1); border: 1px solid var(--hairline);
	box-shadow: var(--umbra-2); color: var(--ink-2);
	font-size: 12.5px; line-height: 1.6; text-align: left;
	opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
#ae-portal .ae-cum:hover .ae-cum-text,
#ae-portal .ae-cum-b:focus-visible + .ae-cum-text,
#ae-portal .ae-cum-b[aria-expanded="true"] + .ae-cum-text {
	opacity: 1; pointer-events: auto;
}

/* ---------- filmul ---------- */
#ae-portal .ae-video {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
	border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
	border: 1px solid var(--hairline); background: var(--surface-2);
	box-shadow: var(--umbra-1);
}
#ae-portal .ae-video img, #ae-portal .ae-video iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0;
}
/* Miniatura de la YouTube are benzi negre sus și jos la 16:9; `cover` le taie. */
#ae-portal .ae-video-poza { object-fit: cover; }
#ae-portal .ae-video-buton {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 76px; height: 76px; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center; padding: 0;
	border: 1px solid rgba(255, 255, 255, .34);
	background: rgba(12, 16, 14, .58); color: #fff;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
	transition: transform .16s cubic-bezier(.22,.61,.36,1), background .16s ease;
}
#ae-portal .ae-video-buton svg { width: 34px; height: 34px; margin-left: 4px; }
@media (hover: hover) {
	#ae-portal .ae-video:hover .ae-video-buton { transform: translate(-50%, -50%) scale(1.07); background: rgba(12, 16, 14, .72); }
}
#ae-portal .ae-video-buton:active { transform: translate(-50%, -50%) scale(.95); }

/* ---------- cronologia ---------- */
#ae-portal .ae-cronologie { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; max-width: 720px; }
/* Firul se oprește la ultimul punct, nu curge în gol sub el. */
#ae-portal .ae-cronologie::before {
	content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px;
	width: 2px; background: var(--br-700);
}
#ae-portal .ae-moment { position: relative; padding-bottom: var(--sp-5); }
#ae-portal .ae-moment:last-child { padding-bottom: 0; }
#ae-portal .ae-moment::before {
	content: ''; position: absolute; left: -30px; top: 5px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--ae-aur); box-shadow: 0 0 0 3px var(--bg-app);
}
#ae-portal .ae-moment-cand { font-size: 11px; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; }
#ae-portal .ae-moment h3 { margin: 3px 0 4px; font-size: 15px; font-weight: 600; }
#ae-portal .ae-moment p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }

/* ---------- lista de povești ---------- */
/* Listă adevărată (`ul`), nu o grămadă de `div`: cititorul de ecran spune
   „listă cu cinci povești" și te poți plimba prin ea cu comenzile lui de
   listă. Marcatorii se scot; înțelesul rămâne. */
#ae-portal .ae-povesti {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--sp-4); grid-template-columns: 1fr;
}
#ae-portal .ae-poveste-card {
	position: relative;
	display: flex; flex-direction: column;
	border-radius: var(--r-lg); overflow: hidden;
	border: 1px solid var(--hairline); background: var(--card-bg); box-shadow: var(--umbra-1);
	transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
	#ae-portal .ae-poveste-card:hover { transform: translateY(-3px); box-shadow: var(--umbra-2); }
}
#ae-portal .ae-poveste-poza {
	position: relative; display: block;
	aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden;
}
#ae-portal .ae-poveste-poza > img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#ae-portal .ae-poveste-jos {
	display: flex; flex-direction: column; gap: 4px;
	padding: var(--sp-4); flex: 1 1 auto;
}
#ae-portal .ae-poveste-titlu { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 650; }
#ae-portal .ae-poveste-titlu a {
	color: var(--ink-1); text-decoration: none;
}
/* Legătura de pe titlu se întinde peste tot cardul: o singură oprire la
   tastatură, un singur anunț la cititorul de ecran, dar toată suprafața de
   apăsat — mult peste cei 44 de pixeli pe care WCAG îi cere pentru degete
   nesigure. */
#ae-portal .ae-poveste-titlu a::after { content: ""; position: absolute; inset: 0; }
#ae-portal .ae-poveste-titlu a:hover { text-decoration: underline; }
/* Inelul de focus se desenează, altfel, doar în jurul titlului — adică nu se
   vede unde ești. Îl mutăm pe card. */
#ae-portal .ae-poveste-card:has(a:focus-visible) {
	outline: 3px solid var(--br-400); outline-offset: 2px;
}
#ae-portal .ae-poveste-titlu a:focus-visible { outline: none; }
#ae-portal .ae-poveste-cand {
	margin: 0; font-size: 12px; letter-spacing: .3px; text-transform: uppercase;
	color: var(--ink-3, var(--ink-2));
}
/* Cele două rânduri din poveste. Se opresc la două — și se opresc CURAT, cu
   trei puncte, nu tăiate la jumătatea unui cuvânt. */
#ae-portal .ae-poveste-sub {
	margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (min-width: 640px) {
	#ae-portal .ae-hero { margin: 0 calc(-1 * var(--sp-5)) var(--sp-5);
		padding: var(--sp-7) var(--sp-5) var(--sp-6); min-height: 52vh; min-height: 52svh; }
	#ae-portal .ae-hero h2 { font-size: 44px; }
	#ae-portal .ae-hero-sub { font-size: 15px; }
	/* `auto-fill`, nu `auto-fit`. Diferența se vede exact când ai două povești:
	   cu `auto-fit` coloanele goale se strâng și cele două cartoșane se întind
	   cât tot ecranul, ceea ce arată ca o pagină stricată. Cu `auto-fill`
	   coloanele rămân, cartoșanele își păstrează mărimea și stau cuminți la
	   stânga. O arhivă tânără trebuie să arate tânără, nu ruptă. */
	#ae-portal .ae-povesti { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (min-width: 900px) {
	#ae-portal .ae-hero { margin: 0 calc(-1 * var(--sp-6)) var(--sp-6);
		padding: var(--sp-7) var(--sp-6) var(--sp-6); }
	#ae-portal .ae-hero h2 { font-size: 52px; }
}

/* ==========================================================================
   13. Formularele portalului

   Aici stăteau, până acum, 40 de rânduri care îmbrăcau formularele Ultimate
   Member în hainele portalului: fiecare regulă cu `!important`, fiecare
   selector legat de o clasă a pluginului. Nu mai avem plugin, deci nu mai avem
   ce îmbrăca — formularele noastre folosesc `.ae-camp` și `.ae-buton` de la
   început, ca tot restul.

   Rămâne un singur lucru care nu exista înainte: câmpul ascuns cu numele
   utilizatorului. Îl punem în formularul de parolă ca gestionarul de parole din
   browser să știe al cui cont e — fără el îți oferă parola altcuiva. E `hidden`,
   dar `.ae-form` e un flex container, iar un `display:flex` pus greșit peste
   `[hidden]` l-ar face vizibil. Îl legăm cu lacăt.
   ========================================================================== */
#ae-portal .ae-form [hidden] { display: none !important; }

/* ==========================================================================
   14. Roata dințată: cont, site, ieșire

   Trei lucruri pe care le faci rar. În bara de sus stăteau lângă titlul
   ecranului, care se citește de fiecare dată — adică ocupau atenție permanentă
   pentru ceva ce apeși o dată pe lună.
   ========================================================================== */
#ae-portal .ae-rotund--setari { display: inline-grid; }
#ae-portal .ae-setari-bara { display: none; }

#ae-portal .ae-setari {
	position: fixed; z-index: 60; left: 12px; right: 12px;
	bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--sp-2); box-shadow: var(--umbra-2);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
}
#ae-portal .ae-setari.deschis { opacity: 1; visibility: visible; transform: translateY(0); }

#ae-portal .ae-setari-cine { padding: var(--sp-3) var(--sp-3) var(--sp-3);
	border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-2); }
#ae-portal .ae-setari-cine strong { display: block; font-size: 14px; font-weight: 600; }
#ae-portal .ae-setari-cine em { display: block; margin-top: 3px; font-style: normal;
	font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }

#ae-portal .ae-setari-item {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: 11px var(--sp-3); border-radius: var(--r-sm);
	color: var(--ink-2); font-size: 13.5px; min-height: 44px;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-setari-item svg { flex: 0 0 18px; color: var(--ink-3); }
#ae-portal .ae-setari-item:hover { background: var(--glass); color: var(--ink-1); }
#ae-portal .ae-setari-item:hover svg { color: var(--ae-aur); }
#ae-portal .ae-setari-item--iesire { color: var(--ink-3); }

/* ==========================================================================
   15. Poveștile: hartă, editor, cele cinci așezări
   ========================================================================== */

/* ---------- harta ---------- */
#ae-portal .ae-harta {
	position: relative; overflow: hidden; isolation: isolate;
	height: 340px; border-radius: var(--r-lg);
	border: 1px solid var(--hairline); background: var(--surface-2);
	cursor: grab; touch-action: none;
}
#ae-portal .ae-harta--trage { cursor: grabbing; }
#ae-portal .ae-harta-placi { position: absolute; inset: 0; }
#ae-portal .ae-harta-placi img {
	position: absolute; top: 0; left: 0; width: 256px; height: 256px;
	display: block; transform-origin: 0 0; user-select: none; -webkit-user-drag: none;
}
#ae-portal .ae-harta-desen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ae-portal .ae-harta-traseu {
	fill: none; stroke: var(--ae-aur); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1 9; opacity: .95;
	/* Linie punctată, nu continuă: nu e drumul exact, e ordinea locurilor.
	   O linie plină ar promite un traseu pe care nu-l știm. */
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
#ae-portal .ae-harta-semne { position: absolute; inset: 0; pointer-events: none; }
#ae-portal .ae-harta-semn { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 6px; }
#ae-portal .ae-harta-semn b {
	flex: 0 0 26px; width: 26px; height: 26px; margin: -13px 0 0 -13px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--br-600); color: #fff; font-size: 12px; font-weight: 600;
	border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
#ae-portal .ae-harta-semn i {
	margin-top: -13px; font-style: normal; font-size: 11.5px; white-space: nowrap;
	padding: 3px 8px; border-radius: var(--r-pill);
	background: rgba(12, 16, 14, .74); color: #fff;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Creditul stă în stânga jos, ca să lase colțul din dreapta butoanelor —
   acolo ajunge degetul mare fără să muți mâna. */
#ae-portal .ae-harta-credit {
	position: absolute; left: 6px; bottom: 6px; z-index: 3;
	font-size: 10px; padding: 2px 7px; border-radius: var(--r-pill);
	background: rgba(255,255,255,.82); color: #23301f; text-decoration: none;
}

/* ---------- comenzile hărții ----------
   Rotița și cele două degete rămân, dar amândouă cer nimereală. Un buton nu:
   apeși, se întâmplă exact un pas, și niciodată în altă parte a paginii.
   Butoanele sunt albe în toate temele, fiindcă stau pe hartă, nu pe portal —
   fundalul lor sunt plăcile, care sunt deschise la culoare oricum ar fi tema. */
#ae-portal .ae-harta-comenzi {
	position: absolute; right: 10px; bottom: 10px; z-index: 4;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#ae-portal .ae-harta-grup {
	display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.10);
}
#ae-portal .ae-harta-buton {
	width: 44px; height: 44px; padding: 0; margin: 0; border: 0; cursor: pointer;
	display: grid; place-items: center; background: #fff; color: #1b241a;
	transition: background .12s ease;
}
#ae-portal .ae-harta-buton svg {
	width: 20px; height: 20px; fill: none; stroke: currentColor;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
#ae-portal .ae-harta-grup .ae-harta-buton + .ae-harta-buton { border-top: 1px solid rgba(0,0,0,.14); }
#ae-portal .ae-harta-buton--singur {
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.10);
}
#ae-portal .ae-harta-buton:hover { background: #f1f4ef; }
#ae-portal .ae-harta-buton:active { background: #e4e9e0; }
#ae-portal .ae-harta-buton:focus-visible { outline: 3px solid var(--ae-aur); outline-offset: 2px; z-index: 1; }
#ae-portal .ae-harta-buton[disabled] { color: #6f7a6c; cursor: default; background: #fff; }

/* ---------- scara ----------
   Un „L" întors: linia de jos e lungimea, iar numărul stă deasupra ei. */
#ae-portal .ae-harta-scara {
	position: absolute; left: 8px; bottom: 28px; z-index: 3;
	height: 9px; min-width: 30px; pointer-events: none;
	border: 2px solid rgba(27,36,26,.85); border-top: 0;
	background: linear-gradient(to top, rgba(255,255,255,.5), transparent);
	/* Un fir alb pe dinafară: altfel, peste o pădure sau peste apă, linia
	   neagră a scării dispare în fundal. */
	box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
#ae-portal .ae-harta-scara b {
	position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
	font-size: 10px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
	color: #1b241a; background: rgba(255,255,255,.86);
	padding: 0 4px; border-radius: 3px;
}

/* Cât timp harta nu e „prinsă", rotița derulează pagina, nu mărește harta.
   Un semn discret spune de ce — dar numai acolo unde există rotiță. Pe
   tabletă n-are ce căuta: acolo sunt butoanele și cele două degete. */
@media (hover: hover) and (pointer: fine) {
	#ae-portal .ae-harta:not(.ae-harta--prinsa)::after {
		content: 'apasă harta ca să mărești cu rotița';
		position: absolute; inset: auto 0 0 0; z-index: 2;
		padding: 7px 66px; text-align: center; font-size: 11px; color: #fff;
		background: linear-gradient(to top, rgba(8,12,10,.68), transparent);
		pointer-events: none;
	}
}
#ae-portal .ae-opriri { list-style: none; margin: var(--sp-4) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--sp-2); }
#ae-portal .ae-opriri li { display: flex; align-items: center; gap: 7px;
	font-size: 12.5px; color: var(--ink-2);
	background: var(--surface-3); border: 1px solid var(--hairline);
	border-radius: var(--r-pill); padding: 5px 12px 5px 5px; }
#ae-portal .ae-opriri span { width: 20px; height: 20px; border-radius: 50%;
	display: grid; place-items: center; font-size: 11px; font-weight: 600;
	background: var(--br-600); color: #fff; }

/* ---------- așezările ---------- */
#ae-portal .ae-poze-doua { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-5) 0; }
#ae-portal .ae-poze-doua .ae-poza { aspect-ratio: 4 / 3; }
#ae-portal .ae-poze-moment { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 6px; margin-top: var(--sp-3); }
#ae-portal .ae-video--mic { max-width: 460px; margin-top: var(--sp-3); }
#ae-portal .ae-moment-loc { display: inline-block; margin-top: 2px; font-size: 11.5px; color: var(--ae-aur); }
#ae-portal .ae-moment-loc::before { content: '📍 '; }

#ae-portal .ae-capitol { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
#ae-portal .ae-capitol:first-child { margin-top: 0; padding-top: 0; border-top: none; }
#ae-portal .ae-capitol-cap { display: flex; align-items: baseline; gap: var(--sp-3);
	margin-bottom: var(--sp-3); flex-wrap: wrap;
	/* Pe axa prozei: capul capitolului e text de citit, nu marginea pozelor.
	   Litera cutiei = litera prozei, ca măsura în `ch` să iasă la fel;
	   copiii au mărimile lor. */
	font-size: var(--proza-marime);
	max-width: var(--proza-masura); margin-inline: auto; }
#ae-portal .ae-capitol-nr { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ac-300); }
[data-mod="zi"] #ae-portal .ae-capitol-nr { color: var(--ac-500); }
#ae-portal .ae-capitol-cap h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
/* LOCUL STĂ LÂNGĂ TITLU, nu la capătul ecranului. Aici scria `margin-left:auto`
   — adică „împinge-l cât de departe poți". Pe monitorul lat al lui AE, „Lacul
   Aroneanu" era la stânga și „Aroneanu, Zona Metropolitană Iași" la o palmă și
   jumătate depărtare, în dreapta de tot. Două vorbe despre același loc, așezate
   ca și cum n-ar avea nimic în comun. */
#ae-portal .ae-capitol-cap em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
#ae-portal .ae-capitol-cap em::before { content: "· "; opacity: .6; }

/* POVESTEA CAPITOLULUI E TEXT DE CITIT, nu o etichetă. În captura lui AE se
   întindea pe toată lățimea, la 12,5 pixeli, și se lipea de prima poză — patru
   rânduri de 190 de semne fiecare, care ating fotografiile. Primește deci
   aceeași măsură ca proza poveștii și aceeași literă, plus aer până la poze.
   Aceleași cifre, același motiv: nu există „text scurt" care să merite 190 de
   semne pe rând. */
#ae-portal .ae-capitol > .ae-subtitlu {
	max-width: var(--proza-masura);
	margin: 0 auto var(--sp-4);
	/* Litera prozei ÎNTREAGĂ, nu 86% din ea — și nu (doar) de dragul
	   alinierii: povestea capitolului E proză, patru rânduri scrise de om,
	   nu o etichetă. O micșorasem ca s-o deosebesc de text; o deosebește
	   deja cerneala a doua. Iar la aceeași literă, măsura în `ch` dă același
	   număr — deci începe fix sub titlul capitolului, pe axă. */
	font-size: var(--proza-marime);
	line-height: 1.65;
	color: var(--ink-2);
}

/* Perechile „atunci / acum" nu se lățesc cât coloana: la 1160 fiecare poză
   ieșea de 570×760, adică un ecran de om pentru două poze. 820 le aduce la o
   mărime la care le poți compara dintr-o privire — care e tot rostul lor. */
#ae-portal .ae-atunci { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
	margin-bottom: var(--sp-5); max-width: 820px; }
#ae-portal .ae-atunci figure { margin: 0; }
#ae-portal .ae-atunci .ae-poza { aspect-ratio: 3 / 4; }
#ae-portal .ae-atunci figcaption { margin-top: var(--sp-2); font-size: 11px;
	letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }

/* Uneltele stau la COADA poveștii de la v2.37.0, nu între cap și primul
   paragraf. Rândul ăsta le trăgea în sus cu o margine negativă — bun pentru
   locul vechi, greșit pentru cel nou. Aerul îl dă acum regula de mai sus. */
#ae-portal .ae-poveste > .ae-unelte { font-size: var(--proza-marime);
	max-width: var(--proza-masura); margin-inline: auto; }

/* ---------- editorul ---------- */
#ae-portal .ae-editor .ae-sectiune > h2 { color: var(--ae-aur); }
#ae-portal .ae-sabloane { display: grid; gap: var(--sp-3);
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#ae-portal .ae-sablon { display: block; cursor: pointer; }
#ae-portal .ae-sablon input { position: absolute; opacity: 0; width: 0; height: 0; }
#ae-portal .ae-sablon-cutie {
	display: block; height: 100%; padding: var(--sp-4);
	background: var(--card-bg); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	box-shadow: var(--umbra-1);
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#ae-portal .ae-sablon-desen { display: block; width: 100%; height: auto; margin-bottom: var(--sp-3);
	fill: var(--ink-3); opacity: .75; transition: fill .16s ease, opacity .16s ease; }
#ae-portal .ae-sablon-cutie strong { display: block; font-size: 14px; font-weight: 600; }
#ae-portal .ae-sablon-cutie em { display: block; margin-top: 4px; font-style: normal;
	font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
@media (hover: hover) {
	#ae-portal .ae-sablon:hover .ae-sablon-cutie { transform: translateY(-2px); }
}
/* Alesul se vede din trei semne deodată — contur, desen colorat, fundal — ca
   să nu depindă de percepția culorii. */
#ae-portal .ae-sablon input:checked + .ae-sablon-cutie {
	border-color: var(--ae-aur); background: var(--glass-strong);
	box-shadow: var(--umbra-2), inset 0 0 0 1px var(--ae-aur);
}
#ae-portal .ae-sablon input:checked + .ae-sablon-cutie .ae-sablon-desen { fill: var(--ae-aur); opacity: 1; }
#ae-portal .ae-sablon input:focus-visible + .ae-sablon-cutie { outline: 2px solid var(--ae-aur); outline-offset: 3px; }

#ae-portal .ae-select { width: 100%; min-height: 46px; font-size: 16px; font-family: inherit;
	padding: 0 var(--sp-3); border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-1); }
#ae-portal .ae-camp textarea { width: 100%; font-size: 16px; font-family: inherit; line-height: 1.6;
	padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-1); resize: vertical; }
#ae-portal .ae-camp--scurt { max-width: 220px; }
#ae-portal .ae-bifa { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; min-height: 44px; }

#ae-portal .ae-momente { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
#ae-portal .ae-moment-editor { background: var(--card-bg); border: 1px solid var(--hairline);
	border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--umbra-1); }
#ae-portal .ae-moment-cap { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
#ae-portal .ae-moment-nr { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-size: 12px; font-weight: 600;
	background: var(--surface-3); border: 1px solid var(--hairline); color: var(--ink-2); }
#ae-portal .ae-moment-titlu { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600;
	min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-1); font-family: inherit; }
#ae-portal .ae-moment-cand { flex: 0 0 96px; width: 96px; font-size: 16px; text-align: center;
	min-height: 44px; border-radius: var(--r-sm); font-family: inherit;
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-2); }
#ae-portal .ae-moment-scoate { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
	border-radius: var(--r-sm); border: 1px solid transparent; background: none;
	color: var(--ink-3); cursor: pointer; transition: background .16s ease, color .16s ease; }
#ae-portal .ae-moment-scoate:hover { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--ink-1); }
#ae-portal .ae-moment-scoate svg { width: 18px; height: 18px; }
#ae-portal .ae-moment-text { width: 100%; font-size: 16px; font-family: inherit; line-height: 1.6;
	padding: var(--sp-3); border-radius: var(--r-sm); resize: vertical;
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-1); }
#ae-portal .ae-moment-jos { display: grid; gap: var(--sp-3); margin-top: var(--sp-3);
	grid-template-columns: 1fr; }

#ae-portal .ae-loc-rand { display: flex; gap: var(--sp-2); }
#ae-portal .ae-loc-nume { flex: 1 1 auto; min-width: 0; min-height: 46px; font-size: 16px; font-family: inherit;
	padding: 0 var(--sp-4); border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-1); }
#ae-portal .ae-loc-cauta { flex: 0 0 auto; min-height: 46px; }
#ae-portal .ae-loc-rezultate { margin-top: var(--sp-2); border: 1px solid var(--hairline);
	border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
#ae-portal .ae-loc-rezultate button { display: block; width: 100%; text-align: left; cursor: pointer;
	padding: 10px var(--sp-3); border: none; background: none; color: var(--ink-2);
	font-family: inherit; font-size: 12.5px; line-height: 1.4; min-height: 44px; }
#ae-portal .ae-loc-rezultate button:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-loc-rezultate button + button { border-top: 1px solid var(--hairline); }
#ae-portal .ae-loc-stare { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }

#ae-portal .ae-editor-jos { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
#ae-portal .ae-sterge { background: none; border: none; cursor: pointer; font-family: inherit;
	font-size: 12.5px; color: var(--ink-3); text-decoration: underline; padding: var(--sp-3) 0; }
#ae-portal .ae-sterge:hover { color: var(--crit); }

@media (min-width: 640px) {
	#ae-portal .ae-harta { height: 420px; }
	#ae-portal .ae-moment-jos { grid-template-columns: 1fr 1fr; }
	#ae-portal .ae-moment-jos .ae-loc { grid-column: 1 / -1; }
}

/* ==========================================================================
   16. Ecran mare: roata coboară în colțul barei laterale
   ========================================================================== */
@media (min-width: 900px) {
	#ae-portal .ae-rotund--setari { display: none; }

	/* `margin-top: auto` o împinge la baza coloanei, oricât de puține ecrane
	   ar avea omul în meniu. */
	#ae-portal .ae-setari-bara {
		display: flex; align-items: center; gap: var(--sp-3);
		margin: auto calc(-1 * var(--sp-4)) 0; padding: var(--sp-4);
		border-top: 1px solid var(--hairline);
		background: none; border-left: none; border-right: none; border-bottom: none;
		color: var(--ink-2); font-family: inherit; font-size: 13px; cursor: pointer;
		text-align: left; width: calc(100% + 2 * var(--sp-4));
		transition: background .16s ease, color .16s ease;
	}
	#ae-portal .ae-setari-bara:hover { background: var(--glass); color: var(--ink-1); }
	#ae-portal .ae-setari-bara svg { flex: 0 0 18px; color: var(--ink-3); }
	#ae-portal .ae-setari-bara:hover svg { color: var(--ae-aur); }
	#ae-portal .ae-setari-bara span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	#ae-portal .ae-setari { left: 12px; right: auto; width: 248px; bottom: 74px; }
}

/* ==========================================================================
   17. Vremea

   Un buletin meteo obișnuit îți dă tabelul și te lasă pe tine să scoți
   concluzia. Aici e invers: sus stă cifra mare (cât e afară), imediat sub ea
   stau sfaturile, și abia apoi tabelele — pentru cine vrea să sape.

   Niciun cod de culoare aici, ca peste tot în fișierul ăsta: toate vin din
   variabilele temei, deci ecranul arată bine în toate cele opt teme fără să
   scriem nimic de opt ori.
   ========================================================================== */

/* ---------- cifra mare ---------- */
#ae-portal .ae-vreme-acum {
	display: grid; gap: var(--sp-5); align-items: center;
	padding: var(--sp-5); border-radius: var(--r-lg);
	border: 1px solid var(--hairline); background: var(--card-bg);
	box-shadow: var(--umbra-1);
	/* lumina din colț, ca la carduri — dar mai apăsată, e capul ecranului */
	background-image: radial-gradient(120% 90% at 12% -20%,
		color-mix(in srgb, var(--br-400) 14%, transparent), transparent 62%);
}
#ae-portal .ae-vreme-cifra strong { display: block; font-size: 64px; line-height: 1;
	font-weight: 300; letter-spacing: -2px; color: var(--ink-1); }
#ae-portal .ae-vreme-cifra span { display: block; margin-top: 6px; font-size: 16px; color: var(--ink-1); }
#ae-portal .ae-vreme-cifra em { display: block; margin-top: 2px; font-style: normal;
	font-size: 13px; color: var(--ink-3); }

#ae-portal .ae-vreme-detalii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3) var(--sp-4); margin: 0; }
#ae-portal .ae-vreme-detalii dt { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
	color: var(--ink-3); }
#ae-portal .ae-vreme-detalii dd { margin: 2px 0 0; font-size: 14px; color: var(--ink-1); }
#ae-portal .ae-vreme-sursa { margin-top: var(--sp-3); }

/* ---------- sfaturile ---------- */
#ae-portal .ae-sfaturi { display: grid; gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
#ae-portal .ae-sfat {
	padding: var(--sp-4); border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--surface-2);
	/* Dunga din stânga poartă nivelul. Culoarea singură n-ar fi de ajuns —
	   cine n-o distinge citește oricum titlul, care spune același lucru. */
	border-left: 3px solid var(--br-400);
}
#ae-portal .ae-sfat h3 { margin: 0 0 5px; font-size: 14px; color: var(--ink-1); }
#ae-portal .ae-sfat p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
#ae-portal .ae-sfat--atentie { border-left-color: var(--warn); }
#ae-portal .ae-sfat--grav { border-left-color: var(--crit);
	background: color-mix(in srgb, var(--crit) 8%, var(--surface-2)); }

/* ---------- orele ---------- */
/* Se trage cu degetul. 24 de ore nu încap pe un telefon nici dacă le
   înghesuim — iar înghesuite n-ar mai spune nimic. */
/* Graficul pe ore. Trei lucruri, toate din aceeași greșeală: era lipit de
   marginile lui.
     · `padding` orizontal: fără el, prima și ultima oră erau TĂIATE pe jumătate
       de marginea cutiei. Pe ecran arăta ca un desen stricat, nu ca unul care
       se derulează.
     · masca din dreapta: un grafic care se termină brusc la marginea cutiei
       arată terminat. Unul care se stinge arată că mai are. Ăsta e singurul
       semn că se poate trage cu degetul — rândul de sub el se citește după. */
#ae-portal .ae-vreme-ore {
	overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
	padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--surface-2);
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
/* SVG-UL UMPLE CUTIA, apoi se derulează.
 *
 * Avea `width: auto`, adică exact 960 de unități — cât zice desenul. Pe un
 * monitor lat, cutia era de 1.400 și rămânea o treime goală în dreapta: „nu se
 * incadreaza frumos pe sectiune" (AE). Pe telefon, invers: 960 într-o cutie de
 * 350, deci se derula.
 * `width: 100%` + `min-width` rezolvă amândouă: se ÎNTINDE când are loc (și
 * crește proporțional în înălțime, ceea ce pe un ecran lat se citește chiar mai
 * bine) și se derulează când n-are. */
#ae-portal .ae-vreme-ore svg {
	display: block; width: 100%; min-width: 680px; height: auto; max-width: none;
}
#ae-portal .ae-vreme-ore:focus-visible { outline: 2px solid var(--ae-aur); outline-offset: 2px; }

/* Banda orelor de noapte. NU o culoare de temă: vezi comentariul din
   ecrane/vreme.php pentru cele două încercări care n-au ținut. O cerneală
   albastră translucidă e mai închisă decât orice card, în orice temă. */
#ae-portal .ae-vreme-noapte { fill: #0A1A2A; opacity: .10; }
[data-mod="noapte"] #ae-portal .ae-vreme-noapte { fill: #000; opacity: .30; }

/* ---------- cele șapte zile ---------- */
#ae-portal .ae-vreme-zile { list-style: none; margin: 0; padding: 0; }
#ae-portal .ae-vreme-zile li {
	display: grid; align-items: center; gap: var(--sp-3);
	grid-template-columns: 72px 24px 1fr 44px 64px;
	padding: 11px var(--sp-4); border-bottom: 1px solid var(--hairline);
}
#ae-portal .ae-vreme-zile li:last-child { border-bottom: none; }
#ae-portal .ae-vreme-zi-nume { font-size: 13.5px; color: var(--ink-1); }
#ae-portal .ae-vreme-zi-nume em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
#ae-portal .ae-vreme-zi-cer { font-size: 12.5px; color: var(--ink-2); }

/* Desenul de pe rândul zilei. Aceleași culori ca pe pastilele cu orașe — un
   soare galben sus și un soare cenușiu jos ar fi două lucruri, nu unul. */
#ae-portal .ae-vreme-zi-semn { display: inline-flex; justify-content: center; }
#ae-portal .ae-vreme-zi-semn svg { width: 20px; height: 20px; }

/* --ink-2, nu --series-1.

   Albastrul de grafic pare alegerea firească pentru „șanse de ploaie", și așa
   era scris aici la început. Dar `--series-1` e verificat la 3:1 — pragul
   pentru FORME (o bară, o linie), nu pentru text mic, care cere 4.5. Măsurat pe
   ecran, cădea în cinci din cele șaisprezece combinații.

   Lecția, și e ușor de repetat: o culoare validată ca element grafic nu e
   validată ca text. Albastrul rămâne unde îi e locul — pe bastonașele din
   grafic, care sunt forme. */
#ae-portal .ae-vreme-zi-ploaie { font-size: 12px; color: var(--ink-2); text-align: right; }
#ae-portal .ae-vreme-zi-bara { display: none; }
#ae-portal .ae-vreme-zi-grade { text-align: right; font-size: 13.5px; white-space: nowrap; }
#ae-portal .ae-vreme-zi-grade b { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-vreme-zi-grade i { font-style: normal; color: var(--ink-3); margin-left: 6px; }

/* ---------- soarele ----------
   Flex cu space-between, nu grid cu coloane egale. Cu coloanele egale, ultima
   („Mâine") ÎNCEPEA la un sfert de card de margine și textul ei scurt lăsa un
   gol lat cât o palmă până la dreapta — AE l-a văzut pe captură: „nu este
   width până în margine". Așa, primul titlu stă lipit de stânga, ultimul de
   dreapta, iar pe telefon se rup singure pe două rânduri. */
#ae-portal .ae-vreme-soare { display: flex; flex-wrap: wrap; justify-content: space-between;
	gap: var(--sp-4) var(--sp-5); padding: var(--sp-4) var(--sp-5); }
#ae-portal .ae-vreme-soare > div { flex: 0 1 auto; min-width: 7rem; }
#ae-portal .ae-vreme-soare dt { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
	color: var(--ink-3); }
#ae-portal .ae-vreme-soare dd { margin: 3px 0 0; font-size: 18px; color: var(--ink-1); }

/* ---------- de la tabletă în sus ---------- */
@media (min-width: 720px) {
	#ae-portal .ae-vreme-acum { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
	#ae-portal .ae-vreme-detalii { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Bara de temperatură apare abia aici: pe telefon n-are lățime în care să
	   spună ceva, iar o bară de 20px care nu spune nimic e doar zgomot. */
	#ae-portal .ae-vreme-zile li { grid-template-columns: 82px 26px 1fr 48px 120px 68px; }
	#ae-portal .ae-vreme-zi-bara { display: block; position: relative; height: 6px;
		border-radius: var(--r-pill); background: var(--surface-3); }
	#ae-portal .ae-vreme-zi-bara i { position: absolute; top: 0; height: 6px; border-radius: var(--r-pill);
		background: linear-gradient(90deg, var(--series-1), var(--ac-400)); }
}

/* ---------- vremea, pe panou ---------- */
#ae-portal .ae-panou-vreme {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
	gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--hairline); border-radius: var(--r-lg);
	background: var(--card-bg); box-shadow: var(--umbra-1);
	background-image: radial-gradient(110% 90% at 8% -30%,
		color-mix(in srgb, var(--br-400) 12%, transparent), transparent 60%);
	transition: border-color .16s ease, box-shadow .16s ease;
}
#ae-portal .ae-panou-vreme:hover { border-color: var(--br-400); box-shadow: var(--umbra-2); }
#ae-portal .ae-panou-vreme-grade { font-size: 34px; font-weight: 300; letter-spacing: -1px;
	line-height: 1; color: var(--ink-1); }
#ae-portal .ae-panou-vreme-text b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-1); }
/* Sfatul se taie la două rânduri: pe panou vrei să știi CĂ e ceva, nu tot.
   Textul întreg e la o atingere distanță, pe ecranul de vreme. */
#ae-portal .ae-panou-vreme-text i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; margin-top: 3px; font-style: normal; font-size: 12.5px;
	line-height: 1.5; color: var(--ink-2); }
#ae-portal .ae-panou-vreme-sageata { color: var(--ink-3); display: grid; place-items: center; }

/* ---------- unde: cele șase locuri ---------- */
/* Se rup pe două rânduri pe telefon, NU se trag cu degetul.

   Prima variantă era un scroller orizontal. Arăta mai curat — dar cel ales
   („Unde ești") e ultimul din șase, deci pe un ecran de 390px stătea în afara
   cadrului: intrai pe ecran și nu vedeai pentru ce oraș te uiți. Un control
   care își ascunde propria stare e mai rău decât unul care ocupă un rând în
   plus. */
/* „ae-pastile" e numele generic: aceleași pastile servesc și fluxul, unde nu e
   vorba de locuri. Vechile nume rămân, ca să nu rescriem un ecran care merge. */
/* RÂNDURILE DE PASTILE, cu regula 2-la-1 din documentare: între lucrurile
   din același grup, 8-12px; între grupuri diferite, cel puțin dublu. Ce era:
   6px între pastile și 16px spre orice — adică aproape totuna, iar AE a numit
   exact senzația: „par un pic înghesuite". Grupurile se citesc din spațiu,
   nu din chenare. */
#ae-portal .ae-vreme-locuri, #ae-portal .ae-pastile {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3);
}
#ae-portal .ae-vreme-loc, #ae-portal .ae-pastila {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
	min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-2); font-size: 13px; text-decoration: none; white-space: nowrap;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
#ae-portal .ae-vreme-loc:hover, #ae-portal .ae-pastila:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-vreme-loc svg, #ae-portal .ae-pastila svg { width: 15px; height: 15px; opacity: .8; }
/* Aceleași variabile ca la pastila zi/noapte — calculate să se vadă pe pista
   lor în toate cele șaisprezece combinații de temă și mod. */
#ae-portal .ae-vreme-loc.e-ales, #ae-portal .ae-pastila.e-aleasa {
	background: var(--pastila-bg, var(--br-600)); color: var(--pastila-ink, #fff);
	border-color: transparent; font-weight: 600;
}

/* ---------- filele: pentru noi / pentru Evelina ---------- */
/* Butoanele radio există, dar nu se văd: ele țin starea, iar `label` le apasă.
   Nu le ascundem cu `display:none` — aia le-ar scoate și din calea tastaturii.
   Le facem de un pixel, transparente, sub capul filei. */
#ae-portal .ae-fila-comutator {
	position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
#ae-portal .ae-file-capete {
	display: inline-flex; gap: 3px; margin-bottom: var(--sp-4);
	padding: 3px; border-radius: var(--r-pill);
	background: var(--surface-3); border: 1px solid var(--hairline);
}
#ae-portal .ae-fila-cap {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 38px; padding: 0 16px; border-radius: var(--r-pill);
	color: var(--ink-2); font-size: 13px; cursor: pointer; white-space: nowrap;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-fila-cap:hover { color: var(--ink-1); }
#ae-portal .ae-fila-numar {
	min-width: 20px; padding: 0 5px; border-radius: var(--r-pill);
	background: var(--glass-strong); color: inherit;
	font-size: 11px; font-weight: 600; text-align: center; line-height: 18px;
}
/* Pastila roșie doar când chiar e ceva grav dincolo. Dacă ar fi mereu roșie,
   n-ar mai însemna nimic. */
#ae-portal .ae-fila-numar.e-grav { background: var(--crit); color: #fff; }

/* Fila ascunsă e ascunsă de tot: `display:none` o scoate și din citirea cu
   voce tare, și din căutarea cu Ctrl+F. O filă „ascunsă" pe care o găsește
   căutarea derutează mai rău decât una lipsă. */
#ae-portal .ae-fila { display: none; }
#ae-portal #ae-fila-noi:checked ~ .ae-fila--noi,
#ae-portal #ae-fila-evelina:checked ~ .ae-fila--evelina { display: block; }
#ae-portal #ae-fila-noi:checked ~ .ae-file-capete label[for="ae-fila-noi"],
#ae-portal #ae-fila-evelina:checked ~ .ae-file-capete label[for="ae-fila-evelina"] {
	background: var(--pastila-bg, var(--br-600)); color: var(--pastila-ink, #fff); font-weight: 600;
}
/* Conturul de tastatură se pune pe CAP, fiindcă butonul e invizibil — altfel
   cine umblă cu Tab n-ar vedea unde a ajuns. */
#ae-portal .ae-fila-comutator:focus-visible + .ae-fila-cap,
#ae-portal #ae-fila-noi:focus-visible ~ .ae-file-capete label[for="ae-fila-noi"],
#ae-portal #ae-fila-evelina:focus-visible ~ .ae-file-capete label[for="ae-fila-evelina"] {
	outline: 2px solid var(--ae-aur); outline-offset: 2px;
}
#ae-portal .ae-vreme-sursa em { font-style: normal; color: var(--warn); }

/* ==========================================================================
   18. Traseul
   ========================================================================== */
#ae-portal .ae-traseu-form .ae-camp { max-width: 420px; }
#ae-portal .ae-traseu-rand span { color: var(--ink-3); }

/* ---------- azi / mâine / poimâine ---------- */
#ae-portal .ae-traseu-zile {
	display: inline-flex; gap: 3px; padding: 3px;
	border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--hairline);
}
#ae-portal .ae-traseu-zi {
	display: inline-flex; align-items: baseline; gap: 6px;
	min-height: 38px; padding: 0 16px; border-radius: var(--r-pill);
	color: var(--ink-2); font-size: 13px; text-decoration: none; line-height: 38px;
	transition: background .16s ease, color .16s ease;
}
#ae-portal .ae-traseu-zi:hover { color: var(--ink-1); }
#ae-portal .ae-traseu-zi em { font-style: normal; font-size: 11px; color: var(--ink-3); }
#ae-portal .ae-traseu-zi.e-ales {
	background: var(--pastila-bg, var(--br-600)); color: var(--pastila-ink, #fff); font-weight: 600;
}
#ae-portal .ae-traseu-zi.e-ales em { color: inherit; opacity: .75; }

/* ---------- harta traseului ---------- */
/* Mai înaltă decât cea din povești: acolo se arată un loc, aici un drum, iar un
   drum are nevoie de spațiu ca să se vadă unde cotește. */
#ae-portal .ae-harta--traseu { height: 400px; }
@media (max-width: 720px) { #ae-portal .ae-harta--traseu { height: 300px; } }

/* ---------- lista, oraș cu oraș ---------- */
/* Rândul NU mai e o grilă: grila s-a mutat pe `summary`, înăuntrul
   acordeonului. Cât timp a rămas și aici, `<details>` cădea în prima coloană a
   ei și tot conținutul ieșea îngust, pe o singură colonetă. Două grile
   suprapuse pe același conținut e o rețetă sigură de aranjare stricată. */
#ae-portal .ae-traseu-lista { list-style: none; margin: 0; padding: 0; }
#ae-portal .ae-traseu-lista li { border-bottom: 1px solid var(--hairline); }
#ae-portal .ae-traseu-lista li:last-child { border-bottom: none; }
#ae-portal .ae-traseu-oras { font-size: 13.5px; color: var(--ink-1); }
#ae-portal .ae-traseu-oras em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
#ae-portal .ae-traseu-cer { font-size: 12.5px; color: var(--ink-2); }
#ae-portal .ae-traseu-semne { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
/* Semnele poartă și cuvântul, nu doar culoarea: „zăpadă" se citește și fără ea. */
#ae-portal .ae-semn {
	padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
	background: var(--glass-strong); color: var(--ink-2); white-space: nowrap;
}
#ae-portal .ae-semn--zapada { background: var(--ink-1); color: var(--surface-1); }
#ae-portal .ae-semn--vant { background: var(--warn); color: #1a1300; }
#ae-portal .ae-traseu-grade { text-align: right; font-size: 13.5px; white-space: nowrap; }
#ae-portal .ae-traseu-grade b { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-traseu-grade i { font-style: normal; color: var(--ink-3); margin-left: 5px; }

@media (max-width: 620px) {
	/* Descrierea cerului cade prima pe ecran mic: semnele („zăpadă", „70 km/h")
	   spun mai mult în mai puțin loc. */
	#ae-portal .ae-traseu-cer { display: none; }
}

/* ---------- formularul de traseu: sugestii, plus, minus ---------- */
#ae-portal .ae-traseu-randuri { display: grid; gap: var(--sp-3); }
/* Grilă, nu flex.

   Cu flex, căsuța de text ieșea 26 de pixeli peste butonul „−" și îl acoperea
   pe jumătate. Motivul e vechi de când lumea în CSS: un element flexibil nu
   coboară sub lățimea conținutului lui decât dacă îi spui anume, iar `width:
   100%` pe câmpul dinăuntru se socotea față de altceva decât credeam.
   `minmax(0, 1fr)` spune limpede „ia tot ce rămâne, dar poți coborî oricât",
   iar a doua coloană are exact 46 de pixeli. Nu mai e nimic de ghicit. */
#ae-portal .ae-traseu-rand {
	display: grid; grid-template-columns: minmax(0, 1fr) 46px;
	align-items: end; gap: 8px; max-width: 470px;
}
#ae-portal .ae-traseu-rand .ae-camp { min-width: 0; }
#ae-portal .ae-traseu-cutie input[type="text"] { width: 100%; }
#ae-portal .ae-traseu-eticheta { display: block; font-size: 11px; letter-spacing: .6px;
	text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
#ae-portal .ae-traseu-cutie { position: relative; display: block; }

/* Minusul e ascuns din HTML și îl arată scriptul. Un buton care nu face nimic
   e mai rău decât unul lipsă — iar fără JavaScript ăsta n-ar face nimic. */
#ae-portal .ae-traseu-minus {
	flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
	border: 1px solid var(--hairline); border-radius: var(--r-sm);
	background: var(--surface-3); color: var(--ink-3); cursor: pointer;
	transition: color .16s ease, border-color .16s ease;
}
#ae-portal .ae-traseu-minus:hover { color: var(--crit); border-color: var(--crit); }
#ae-portal .ae-traseu-plus { display: none; margin-top: var(--sp-3); gap: 7px; align-items: center; }
#ae-portal .ae-traseu-form.ae-cu-js .ae-traseu-plus { display: inline-flex; }

/* ---------- lista de sugestii ---------- */
/* Resetul de majuscule stă AICI, pe listă, nu pe cutia care o conține.

   `#ae-portal .ae-camp span` (eticheta câmpului: 11px, majuscule, cenușiu)
   prinde orice span dintr-un `.ae-camp`, iar cutia sugestiilor e tot un span.
   Am încercat întâi să-l anulez pe cutie — și n-a mers, fiindcă `.ae-camp span`
   are un selector de element în plus, deci cântărește mai mult.

   Pe listă merge fără luptă: o valoare MOȘTENITĂ pierde întotdeauna în fața
   uneia scrise anume pentru elementul acela, indiferent de cât cântărește
   regula de la care s-ar fi moștenit. */
#ae-portal .ae-sugestii {
	text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--ink-1);
	position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
	margin: 0; padding: 4px; list-style: none;
	max-height: 260px; overflow-y: auto;
	background: var(--surface-1); border: 1px solid var(--hairline);
	border-radius: var(--r-md); box-shadow: var(--umbra-2);
}
#ae-portal .ae-sugestii[hidden] { display: none; }
#ae-portal .ae-sugestii li {
	padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
	display: flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center;
}
#ae-portal .ae-sugestii li b { font-size: 14px; font-weight: 600; color: var(--ink-1); }
#ae-portal .ae-sugestii li i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
#ae-portal .ae-sugestii li:hover,
#ae-portal .ae-sugestii li.e-ales { background: var(--glass-strong); }

/* ---------- acordeonul de pe fiecare oraș ---------- */
/* `<details>` e un element pe care browserul îl știe: merge cu tastatura, îl
   citește cititorul de ecran, se deschide singur la Ctrl+F. Zero JavaScript. */
#ae-portal .ae-traseu-oras-det > summary {
	display: grid; align-items: center; gap: var(--sp-3);
	grid-template-columns: 30px minmax(0, 1fr) auto 58px 20px;
	padding: 11px var(--sp-4); cursor: pointer; list-style: none;
	transition: background .16s ease;
}
#ae-portal .ae-traseu-oras-det > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-traseu-oras-det > summary:hover { background: var(--glass); }
#ae-portal .ae-traseu-semn-vreme { color: var(--ae-aur); display: grid; place-items: center; }
#ae-portal .ae-traseu-sageata { color: var(--ink-3); display: grid; place-items: center;
	transition: transform .2s ease; }
#ae-portal .ae-traseu-oras-det[open] .ae-traseu-sageata { transform: rotate(180deg); }
#ae-portal .ae-traseu-oras-det[open] > summary { background: var(--glass); }

#ae-portal .ae-traseu-zile-mici {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
#ae-portal .ae-zi-mica {
	display: grid; justify-items: center; gap: 3px; text-align: center;
	padding: var(--sp-3); border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--surface-2);
}
/* Ziua pe care o privești acum, însemnată — ca să știi unde ești când te uiți
   la trei zile deodată. */
#ae-portal .ae-zi-mica.e-ales { border-color: var(--br-400); background: var(--surface-3); }
/* --ink-2, nu --ink-3.

   Măsurat pe pixelii randați: ink-3 pe cardul de zi din acordeon dă 4,34:1 la
   Brumă și 4,36 la Chihlimbar — sub pragul de 4,5 pentru text mic. Cerneala a
   treia e făcută pentru text pe fundalul PAGINII, care e mai închis; aici stă
   pe un card, care e mai deschis, deci contrastul scade.

   (Numerele astea au ieșit abia după ce am reparat harnașamentul de desen, care
   lipea cele două fișiere CSS într-unul singur și mânca începutul celui de-al
   doilea. Până atunci măsuram alt ecran decât cel livrat.) */
#ae-portal .ae-zi-mica-nume { font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
	color: var(--ink-2); }
#ae-portal .ae-zi-mica-desen { color: var(--ae-aur); margin: 2px 0; }
#ae-portal .ae-zi-mica-cer { font-size: 12.5px; color: var(--ink-2); }
#ae-portal .ae-zi-mica-grade { font-size: 15px; }
#ae-portal .ae-zi-mica-grade b { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-zi-mica-grade i { font-style: normal; color: var(--ink-3); margin-left: 5px; }
#ae-portal .ae-zi-mica-detalii { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
#ae-portal .ae-zi-mica-detalii em { font-style: normal; font-size: 11.5px; color: var(--ink-2); }

@media (max-width: 620px) {
	#ae-portal .ae-traseu-oras-det > summary { grid-template-columns: 26px minmax(0, 1fr) 52px 18px; }
	/* Semnele („zăpadă", „70 km/h") cad pe ecran mic: sunt în acordeon oricum. */
	#ae-portal .ae-traseu-oras-det > summary .ae-traseu-semne { display: none; }
}

/* ==========================================================================
   19. De pe NAS: tabelul de vizibilitate, listele de bifat, totalul
   ========================================================================== */

#ae-portal .ae-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#ae-portal .ae-tabel th, #ae-portal .ae-tabel td {
	padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--hairline);
}
#ae-portal .ae-tabel thead th { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
#ae-portal .ae-tabel tbody th { color: var(--ink-1); font-weight: 500; }
#ae-portal .ae-tabel tbody tr:last-child th,
#ae-portal .ae-tabel tbody tr:last-child td { border-bottom: 0; }
#ae-portal .ae-tabel td { text-align: center; }
/* Pe telefon un tabel de 4 coloane nu încape. Îl lăsăm să alunece pe
   orizontală, cu prima coloană lipită — altfel nu mai știi al cui e rândul. */
#ae-portal .ae-nas-tabel { overflow-x: auto; }
@media (max-width: 640px) {
	#ae-portal .ae-tabel tbody th {
		position: sticky; left: 0; z-index: 1; background: var(--surface-1);
	}
}

/* ---------- bifa ---------- */
#ae-portal .ae-bifa {
	display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
	padding: 6px 2px; font-size: 13.5px; color: var(--ink-1); min-height: 34px;
}
#ae-portal .ae-bifa input[type="checkbox"] {
	/* 20px, nu 13 cât dă browserul: sub atât degetul ratează, iar pe ecranul
	   ăsta sunt sute de bife una sub alta. */
	width: 20px; height: 20px; flex: 0 0 20px; margin: 0;
	accent-color: var(--br-600); cursor: pointer;
}
#ae-portal .ae-bifa b {
	margin-left: auto; padding-left: 12px;
	font-size: 12px; font-weight: 600; color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
/* Eticheta care există doar pentru cititoarele de ecran: într-un tabel de
   bife, coloana spune ce înseamnă, dar cine ascultă pagina n-are coloane. */
#ae-portal .ae-doar-citit {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- listele de ales ---------- */
#ae-portal .ae-nas-grup { border-top: 1px solid var(--hairline); padding: var(--sp-3) 0 0; margin-top: var(--sp-3); }
#ae-portal .ae-nas-grup > summary {
	cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px;
	font-weight: 600; font-size: 14.5px; color: var(--ink-1); padding: 4px 0;
}
#ae-portal .ae-nas-grup > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-nas-grup > summary::before {
	content: '›'; display: inline-block; transition: transform .16s ease; color: var(--ink-3);
}
#ae-portal .ae-nas-grup[open] > summary::before { transform: rotate(90deg); }
#ae-portal .ae-nas-grup > summary em { font-style: normal; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-nas-lista {
	list-style: none; margin: var(--sp-2) 0 var(--sp-3); padding: 0;
	/* Peste 400px punem derulare proprie: o listă de 1230 de oameni ar face
	   pagina lungă de câțiva metri, iar butonul de salvat ar dispărea. */
	max-height: 400px; overflow-y: auto;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2);
}
/* Rândul din listă: GRILĂ, nu flex-cu-`:has()`.
   -------------------------------------------------------------------------
   Prima variantă suna așa:

       #ae-portal .ae-nas-lista li:has(.ae-nas-unde) { display: flex; }

   adică „fă rândul flex NUMAI dacă are o listă de destinație înăuntru".
   Merge — până nimerești un browser la care `:has()` nu se aplică. Atunci
   rândul rămâne bloc, eticheta ia toată lățimea, iar lista de destinație se
   suprapune peste numele albumului. Exact ce a văzut AE pe Opera.

   Ce e rău la varianta aia nu e că a picat undeva, ci CUM a picat: nu s-a
   stricat ceva ce nu se vedea, s-a stricat chiar lucrul de care ai nevoie ca
   să bifezi. Iar un ecran de setări ilizibil pe un browser oarecare e un
   ecran în care nu poți avea încredere.

   Grila n-are nevoie de nimic condiționat. Trei coloane: numele, „scoate",
   destinația. Rândurile care n-au ultimele două (oamenii, etichetele) au
   coloanele goale, late de zero — fiindcă `auto` pe o coloană fără conținut e
   exact zero. Aceeași regulă, pentru toate rândurile, în orice browser.
   Suprapunerea devine cu neputință: două celule de grilă nu se calcă. */
#ae-portal .ae-nas-lista li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 8px;
	padding-right: 10px;
	border-bottom: 1px solid var(--hairline);
}
#ae-portal .ae-nas-lista li:last-child { border-bottom: 0; }
#ae-portal .ae-nas-lista .ae-bifa {
	display: flex; align-items: center; gap: 8px;
	min-width: 0; padding: 7px 12px;
}
/* Numele lung se rupe în rând, nu iese din celulă. „Cununia Civila - poze
   telefon" pe un ecran îngust are nevoie de două rânduri, și e în regulă —
   ce nu e în regulă e să treacă peste lista de alături. */
#ae-portal .ae-nas-lista .ae-bifa span { min-width: 0; overflow-wrap: anywhere; }
#ae-portal .ae-nas-lista li:hover { background: var(--glass); }

/* Calea dosarului de telefon, sub nume.
   Două telefoane se pot chema amândouă „iPhone" — unul al lui AE, unul al
   Mădălinei. Numele singur nu spune al cui e care; calea spune. Mică și
   stinsă, fiindcă e de citit o dată, când bifezi, și niciodată după aceea. */
#ae-portal .ae-nas-cale {
	display: block; margin-top: 2px;
	font-size: 11.5px; line-height: 1.35; color: var(--ink-3, var(--ink-2));
	overflow-wrap: anywhere; opacity: .8;
}
/* Cifra din dreapta rândului. Când e tăiată de fereastră (un telefon cu 18.000
   de poze care aduce 300), are `title` cu totalul — punctat, ca să se vadă că
   e ceva de citit acolo. */
#ae-portal .ae-nas-cate { font-variant-numeric: tabular-nums; }
#ae-portal .ae-nas-cate[title] {
	cursor: help; border-bottom: 1px dotted currentColor;
}

#ae-portal .ae-nas-conturi { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
#ae-portal .ae-nas-conturi fieldset {
	border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-3);
	min-width: 0;
}
#ae-portal .ae-nas-conturi legend { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 0 6px; }
#ae-portal .ae-nas-conturi .ae-bifa { display: flex; }

/* ---------- totalul ---------- */
#ae-portal .ae-nas-total {
	position: sticky; top: 8px; z-index: 5;
	display: flex; align-items: baseline; gap: 8px;
	margin-bottom: var(--sp-3);
	padding: 10px var(--sp-4); border-radius: var(--r-pill);
	border: 1px solid var(--hairline);
	background: color-mix(in srgb, var(--surface-1) 86%, transparent);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	box-shadow: var(--umbra-1);
}
#ae-portal .ae-nas-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
#ae-portal .ae-nas-total span { font-size: 12.5px; color: var(--ink-2); }
/* Peste zece mii, cifra singură nu mai spune nimic — toate numerele mari arată
   la fel. Culoarea spune. */
#ae-portal .ae-nas-total.e-mult { border-color: var(--ae-aur); }
#ae-portal .ae-nas-total.e-foarte-mult strong { color: #c9603f; }

#ae-portal .ae-camp--mic { max-width: 320px; }
#ae-portal .ae-nas-casa + .ae-nas-casa { margin-top: var(--sp-4); }

/* Fiecare album își alege destinația pe rândul lui. Selectul stă lipit de
   dreapta, după numărul de poze, ca să nu împingă numele. */
#ae-portal .ae-nas-unde {
	font-family: inherit; font-size: 12px; max-width: 130px;
	padding: 5px 8px; border-radius: var(--r-sm, 8px);
	border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-2);
}

#ae-portal .ae-nas-scoate {
	font-size: 11.5px; color: var(--ink-3); text-decoration: none;
	padding: 4px 9px; border-radius: var(--r-pill);
	border: 1px solid transparent; white-space: nowrap;
}
#ae-portal .ae-nas-scoate:hover { color: #d07a58; border-color: #d07a58; }
#ae-portal .ae-nas-scoase { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
#ae-portal .ae-nas-scoase li {
	display: flex; align-items: center; gap: 10px; padding: 6px 0;
	border-bottom: 1px solid var(--hairline); font-size: 13px;
}
#ae-portal .ae-nas-scoase li:last-child { border-bottom: 0; }
#ae-portal .ae-nas-scoase code { color: var(--ink-2); font-size: 12px; }
#ae-portal .ae-nas-scoase a { margin-left: auto; font-size: 12px; color: var(--ae-aur); }

/* ---------------------------------------------------------------------------
   20. Cadranul de spațiu
   ---------------------------------------------------------------------------
   O bară, nu un tabel. Întrebarea la care răspunde e „mai am loc?", iar la
   întrebarea aia se răspunde dintr-o privire sau deloc. Culoarea se schimbă
   singură la 70% și la 90%: până acolo nu are de ce să-ți atragă atenția.
--------------------------------------------------------------------------- */

#ae-portal .ae-loc { margin: var(--sp-3) 0 var(--sp-4); }

#ae-portal .ae-loc-bara {
	height: 14px;
	border-radius: 999px;
	background: var(--surface-3);
	overflow: hidden;
}

#ae-portal .ae-loc-bara span {
	display: block;
	height: 100%;
	background: var(--br-400);
	border-radius: 999px;
	transition: width .3s ease;
}

#ae-portal .ae-loc-bara.e-aproape span { background: var(--warn); }
#ae-portal .ae-loc-bara.e-plina span   { background: var(--crit); }

#ae-portal .ae-loc-cifre {
	margin: var(--sp-2) 0 0;
	font-size: .95rem;
	color: var(--ink-2);
}

#ae-portal .ae-loc-cifre strong { color: var(--ink-1); font-size: 1.05rem; }
#ae-portal .ae-loc-cifre span { display: block; margin-top: 2px; font-size: .88rem; }

@media (min-width: 600px) {
	#ae-portal .ae-loc-cifre span { display: inline; margin-left: var(--sp-1); }
}

/* ---------------------------------------------------------------------------
   21. Fluxul trecător — steluța de „păstrează"
   ---------------------------------------------------------------------------
   Un singur control, care e și starea, și butonul. Stă în colțul din dreapta
   sus, unde pozele de familie n-au fețe — oamenii sunt în mijloc.

   34px, nu mai mic: sub atât nu-l nimerești cu degetul. Și nu mai mare: într-o
   miniatură de 110px pe telefon, orice peste asta începe să acopere poza.

   Pe mouse apare la trecerea peste poză. Pe atingere nu există „trecere
   peste", deci acolo se vede tot timpul, pe jumătate stins — altfel butonul
   n-ar exista deloc pentru jumătate din oameni, exact cei care se uită mai des
   la flux. Cele deja păstrate se văd întotdeauna, peste tot: aia nu e o
   comandă ascunsă, e o stare pe care trebuie s-o poți citi dintr-o privire.
--------------------------------------------------------------------------- */

#ae-portal .ae-poza-loc { position: relative; }

#ae-portal .ae-stea { position: absolute; top: 4px; right: 4px; z-index: 3; margin: 0; }

#ae-portal .ae-stea button {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
	border: 1px solid var(--hairline);
	color: var(--ink-2);
	background: color-mix(in srgb, var(--bg-app) 72%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background .15s ease, color .15s ease;
}

#ae-portal .ae-stea button svg { fill: none; stroke: currentColor; stroke-width: 1.7; }

#ae-portal .ae-stea.e-tinuta button {
	color: var(--bg-app);
	background: var(--br-400);
	border-color: transparent;
}

#ae-portal .ae-stea.e-tinuta button svg { fill: currentColor; stroke: currentColor; }

#ae-portal .ae-stea button:hover { background: var(--surface-2); color: var(--ink-1); }
#ae-portal .ae-stea.e-tinuta button:hover { background: var(--ae-aur); color: var(--bg-app); }

#ae-portal .ae-stea button:focus-visible {
	outline: 2px solid var(--br-400);
	outline-offset: 2px;
}

/* Fără mouse: se văd tot timpul, dar discret. */
#ae-portal .ae-stea { opacity: .72; transition: opacity .15s ease; }
#ae-portal .ae-stea.e-tinuta { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
	#ae-portal .ae-stea { opacity: 0; }
	#ae-portal .ae-poza-loc:hover .ae-stea,
	#ae-portal .ae-stea:focus-within { opacity: 1; }
	#ae-portal .ae-stea.e-tinuta { opacity: 1; }
}

/* Cât mai stau pozele din ziua asta. Lângă titlul zilei, mic și fără culoare
   de alarmă: e o informație, nu o urgență. */
#ae-portal .ae-trece {
	margin-left: var(--sp-3);
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-3);
	white-space: nowrap;
}

/* Formularele de golire stau unul sub altul, cu aer între ele: două butoane
   roșii alăturate sunt două butoane pe care le apeși pe cel greșit. */
#ae-portal .ae-nas-reia + .ae-nas-reia { margin-top: var(--sp-4);
	padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }

/* Aer între explicație și câmpul la care se referă. Fără el, textul lung se
   lipește de listă și pare că face parte din ea. */
#ae-portal .ae-limite + .ae-camp { margin-top: var(--sp-4); }
#ae-portal .ae-camp + .ae-camp { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------------
   22. Vremea pe pastilele cu orașe
   ---------------------------------------------------------------------------
   Pastilele arătau doar numele. Cu desenul și gradele pe ele, rândul de sus
   răspunde la întrebarea de dinaintea întrebării — „unde plouă?" — fără să mai
   apeși nimic.

   Culoarea desenului spune felul vremii. Pe un rând de șase pastile, culoarea
   se citește înaintea formei: vezi galbenul de la Constanța din capătul
   celălalt al ecranului. Dar culoarea nu e SINGURUL semn — desenul e diferit,
   iar textul e în `title` și în vorbirea pentru cititorul de ecran. Cine nu
   deosebește galbenul de albastru pierde o comoditate, nu informația.

   Pe pastila aleasă totul devine alb: pe fundalul plin, un galben pal ar fi
   ieșit murdar.
--------------------------------------------------------------------------- */

#ae-portal .ae-vreme-pastila-semn { display: inline-flex; }
#ae-portal .ae-vreme-pastila-semn svg { width: 16px; height: 16px; opacity: 1; }


#ae-portal .ae-vreme-pastila-grad {
	font-weight: 600;
	font-size: 12.5px;
	color: var(--ink-1);
	margin-left: 1px;
}

#ae-portal .ae-vreme-loc.e-ales .ae-vreme-pastila-semn,
#ae-portal .ae-vreme-loc.e-ales .ae-vreme-pastila-grad {
	color: var(--pastila-ink, #fff);
}

/* Cu desen și grade, pastilele sunt mai late. Pe telefon rândul se derulează
   pe orizontală oricum; îi strângem puțin marginile ca să încapă una în plus
   pe ecran, fiindcă a doua pastilă pe jumătate vizibilă e singurul lucru care
   spune că rândul se poate trage. */
@media (max-width: 600px) {
	#ae-portal .ae-vreme-loc.are-vreme { padding: 0 11px; gap: 4px; }
}

/* ---------------------------------------------------------------------------
   23. Paza — cine intră și cine iese
   ---------------------------------------------------------------------------
   Un tabel, dar unul care se poate citi și pe telefon. Pe ecran lat sunt patru
   coloane; sub 700px, fiecare rând devine o cărticică — fiindcă un tabel de
   patru coloane pe 390px fie iese din ecran, fie ajunge la trei litere pe rând.
--------------------------------------------------------------------------- */

#ae-portal .ae-paza-cap.e-atentie { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
#ae-portal .ae-paza-cap.e-grav {
	border-color: color-mix(in srgb, var(--crit) 55%, transparent);
	background: color-mix(in srgb, var(--crit) 10%, transparent);
}
#ae-portal .ae-paza-cap h3 { margin-top: 0; }

#ae-portal .ae-paza-lista { padding: 0; overflow: hidden; }
#ae-portal .ae-paza-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
#ae-portal .ae-paza-tabel th { text-align: left; font-size: 11px; letter-spacing: .6px;
	text-transform: uppercase; color: var(--ink-3); font-weight: 500;
	padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); }
#ae-portal .ae-paza-tabel td { padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--hairline); vertical-align: top; }
#ae-portal .ae-paza-tabel tr:last-child td { border-bottom: none; }

#ae-portal .ae-paza-cand b { display: block; font-size: 14px; color: var(--ink-1); }
#ae-portal .ae-paza-cand i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
#ae-portal .ae-paza-cine { font-weight: 600; color: var(--ink-1); word-break: break-word; }
#ae-portal .ae-paza-unde b { display: block; font-weight: 500; font-variant-numeric: tabular-nums;
	color: var(--ink-2); word-break: break-all; }
#ae-portal .ae-paza-unde i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

/* Culoarea spune felul rândului dintr-o privire. Dar nu numai culoarea:
   coloana „Ce" scrie în cuvinte, pentru cine n-o deosebește. */
#ae-portal .ae-paza-tabel tr.e-refuz .ae-paza-ce { color: var(--crit); font-weight: 600; }
#ae-portal .ae-paza-tabel tr.e-refuz { background: color-mix(in srgb, var(--crit) 7%, transparent); }
#ae-portal .ae-paza-tabel tr.e-intrare .ae-paza-ce { color: var(--ae-aur); }
#ae-portal .ae-paza-tabel tr.e-iesire .ae-paza-ce { color: var(--ink-3); }

#ae-portal .ae-paza-mai { display: flex; gap: var(--sp-3); justify-content: center; }

@media (max-width: 700px) {
	#ae-portal .ae-paza-tabel thead { position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	#ae-portal .ae-paza-tabel, #ae-portal .ae-paza-tabel tbody,
	#ae-portal .ae-paza-tabel tr, #ae-portal .ae-paza-tabel td { display: block; }
	/* `text-align: left` scris pe șleau: pe telefon rândurile devin cărticele,
	   iar `display: block` pe un `td` pierde alinierea moștenită din tabel și
	   ia centrarea cardului. Ieșea un jurnal centrat pe mijloc, care se citește
	   ca un afiș, nu ca o listă. */
	#ae-portal .ae-paza-tabel tr { padding: var(--sp-3) var(--sp-4);
		border-bottom: 1px solid var(--hairline); text-align: left; }
	#ae-portal .ae-paza-tabel td { padding: 1px 0; border: none; text-align: left; }
	#ae-portal .ae-paza-cand b { display: inline; }
	#ae-portal .ae-paza-cand i { margin-left: 6px; }
	#ae-portal .ae-paza-unde b { display: inline; }
	#ae-portal .ae-paza-unde i::before { content: ' · '; }
}

/* Semnul roșu de pe rândul din roata dințată, când sunt încercări eșuate. */
#ae-portal .ae-setari-semn {
	margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill);
	background: var(--crit); color: #fff; font-size: 11px; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   24. Versiuni
   ---------------------------------------------------------------------------
   Prima cutie răspunde la singura întrebare cu care intri aici: a ajuns
   urcarea? De asta numărul e mare și stă sus.
--------------------------------------------------------------------------- */

#ae-portal .ae-versiuni-acum.e-vechi { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
#ae-portal .ae-versiuni-numar { margin: var(--sp-2) 0 var(--sp-3); }
#ae-portal .ae-versiuni-numar strong { font-size: 34px; letter-spacing: -1px; color: var(--ink-1); }
#ae-portal .ae-versiuni-numar span { margin-left: var(--sp-3); font-size: 13px; color: var(--ink-3); }
#ae-portal .ae-versiuni-mediu { font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-versiuni-mediu em { font-style: italic; }
#ae-portal .ae-versiuni-butoane { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

#ae-portal .ae-versiuni { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
#ae-portal .ae-versiune { padding: var(--sp-4); border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--card-bg); margin-bottom: var(--sp-3); }
#ae-portal .ae-versiune.e-acum { border-color: var(--br-400); }

#ae-portal .ae-versiune-cap { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
#ae-portal .ae-versiune-nr { font-size: 17px; font-weight: 700; color: var(--ink-1);
	font-variant-numeric: tabular-nums; }
#ae-portal .ae-versiune-titlu { font-size: 14px; color: var(--ink-2); }
#ae-portal .ae-versiune-data { font-style: normal; font-size: 12px; color: var(--ink-3); }

#ae-portal .ae-versiune-stare { margin-left: auto; padding: 2px 10px; border-radius: var(--r-pill);
	font-size: 11px; font-weight: 600; letter-spacing: .3px; white-space: nowrap;
	background: var(--surface-3); color: var(--ink-3); }
#ae-portal .ae-versiune.e-acum .ae-versiune-stare { background: var(--br-400); color: var(--bg-app); }
#ae-portal .ae-versiune.e-intermediar .ae-versiune-stare {
	background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--ink-1); }
#ae-portal .ae-versiune.e-nu-e .ae-versiune-stare {
	background: color-mix(in srgb, var(--crit) 20%, transparent); color: var(--ink-1); }

#ae-portal .ae-versiune-ce { margin: var(--sp-3) 0 0; padding-left: 18px; }
#ae-portal .ae-versiune-ce li { font-size: 13px; line-height: 1.65; color: var(--ink-2); margin-bottom: 3px; }

#ae-portal .ae-necazuri { list-style: none; margin: var(--sp-3) 0; padding: 0; }
#ae-portal .ae-necazuri li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline);
	font-size: 12.5px; line-height: 1.6; }
#ae-portal .ae-necazuri li:last-child { border-bottom: none; }
#ae-portal .ae-necazuri b { color: var(--ink-3); font-weight: 500; font-size: 11.5px; display: block; }
#ae-portal .ae-necazuri span { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-necazuri i, #ae-portal .ae-necazuri em { display: block; font-style: normal; color: var(--ink-2); }
#ae-portal .ae-necazuri em { font-size: 11.5px; color: var(--ink-3); }

@media (min-width: 700px) {
	#ae-portal .ae-necazuri b { display: inline; margin-right: var(--sp-3); }
}

/* ---------------------------------------------------------------------------
   25. Ceasul
   ---------------------------------------------------------------------------
   Ora mare, sus. La o setare de ceas, singura verificare care contează e să te
   uiți la ea și la ceasul de la mână — dacă ar trebui să te duci pe alt ecran
   ca s-o vezi, ai schimba-o de trei ori până nimerești.

   Când ceasul e mutat (sunteți plecați), cutia își schimbă culoarea. Nu ca
   alarmă: ca să nu rămână uitat pe Madrid trei săptămâni după ce v-ați întors.
--------------------------------------------------------------------------- */

/* Selectorii de aici sunt scriși cu `.ae-card` în față dinadins. Regula
   generală `#ae-portal .ae-card p { font-size: 12.5px }` vine mai sus în
   fișier, dar are aceeași greutate — iar la greutate egală câștigă ultima
   scrisă doar dacă e la fel de specifică. Fără `.ae-card`, ora ieșea de
   12,5 pixeli, adică exact cât un rând de explicație. */
#ae-portal .ae-ceas-acum { text-align: center; }
#ae-portal .ae-ceas-acum.e-plecat { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }

#ae-portal .ae-card.ae-ceas-acum .ae-ceas-ora {
	margin: var(--sp-2) 0 0;
	font-size: 58px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -2px;
	color: var(--ink-1);
	font-variant-numeric: tabular-nums;
}

#ae-portal .ae-card.ae-ceas-acum .ae-ceas-zi { margin: var(--sp-2) 0 0; font-size: 14px; color: var(--ink-2); }
#ae-portal .ae-card.ae-ceas-acum .ae-ceas-unde { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-ceas-acum .ae-limite { margin-top: var(--sp-3); }
#ae-portal .ae-ceas-butoane { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

/* Ora de pe rândul din roata dințată. Așa vezi dacă ceasul e potrivit fără să
   mai intri nicăieri — și dacă a rămas uitat pe alt fus, o vezi în aceeași
   clipă în care deschizi panoul. */
#ae-portal .ae-setari-ora {
	margin-left: 6px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--ink-3);
}

/* Pașii dintr-o cutie de „ce faci acum". Numerotați, cu aer între ei: o listă
   de pași înghesuită se citește ca un paragraf, iar un paragraf nu se
   bifează. */
#ae-portal .ae-pasi { margin: var(--sp-3) 0 var(--sp-4); padding-left: 22px; }
#ae-portal .ae-pasi li { font-size: 12.5px; line-height: 1.65; color: var(--ink-2);
	margin-bottom: var(--sp-2); }
#ae-portal .ae-pasi li::marker { color: var(--ae-aur); font-weight: 700; }

/* ---------------------------------------------------------------------------
   26. Culorile vremii
   ---------------------------------------------------------------------------
   Un singur loc pentru toate desenele de vreme — și pastilele cu orașe, și
   rândurile săptămânii. Erau scrise de două ori, cu aceleași valori; a doua
   oară le-aș fi schimbat doar pe unele.

   DE CE DOUĂ SETURI. Le-am ales la început privind tema întunecată, unde arată
   bine: un soare galben deschis pe verde închis se vede de la un metru. Pe modul
   de zi, pe alb, aceleași culori ies la 1,9:1 — sub jumătate din pragul de 3:1
   pentru elemente grafice. Adică pe ecranul lui AE, ziua, soarele era o pată
   galbenă abia vizibilă.

   Valorile de mai jos nu sunt alese din ochi: sunt măsurate față de toate cele
   trei fundaluri deschise pe care le au temele, și trec de 4:1 pe cea mai slabă
   dintre ele. Culoarea rămâne recunoscibilă — galben e tot galben, doar mai
   închis — dar acum se și vede.
--------------------------------------------------------------------------- */

#ae-portal {
	--vr-senin:    #e8b53a;
	--vr-nori:     var(--ink-3);
	--vr-ploaie:   #5aa9e6;
	--vr-ninsoare: #9fd8f5;
	--vr-polei:    #7fc4de;
	--vr-ceata:    var(--ink-3);
	--vr-furtuna:  #b98ae0;
	/* Seninul de noapte: un soare galben la ora unu noaptea e o minciună mică
	   și supărătoare. */
	--vr-noapte:   #9fb0c8;

	/* Două culori care nu sunt de vreme, dar trăiesc după aceeași regulă:
	   „ceva nu e în regulă" (beculețul roșu de la Synology) și „ceva e de
	   verificat" (NAS-ul care a amuțit). Le-am scris întâi cu hexuri fixe,
	   direct în regula lor — mergeau, dar nu se schimbau între zi și noapte,
	   adică exact greșeala pe care o repară toată secțiunea asta.

	   Măsurate, ca și celelalte: peste 4,5:1 pe cel mai slab fundal din
	   fiecare set. */
	--vr-rau:      #ff6b5a;
	--vr-atentie:  #e0a63a;
}

[data-mod="zi"] #ae-portal {
	--vr-senin:    #9a6c08;
	--vr-ploaie:   #2d7fbd;
	--vr-ninsoare: #2f7d9f;
	--vr-polei:    #2d7089;
	--vr-furtuna:  #8250b8;
	--vr-noapte:   #4a5a72;
	--vr-rau:      #a8281b;
	--vr-atentie:  #8a6206;
}

#ae-portal .e-senin    { color: var(--vr-senin); }
#ae-portal .e-nori     { color: var(--vr-nori); }
#ae-portal .e-ploaie   { color: var(--vr-ploaie); }
#ae-portal .e-ninsoare { color: var(--vr-ninsoare); }
#ae-portal .e-polei    { color: var(--vr-polei); }
#ae-portal .e-ceata    { color: var(--vr-ceata); }
#ae-portal .e-furtuna  { color: var(--vr-furtuna); }
#ae-portal .e-senin.e-noapte { color: var(--vr-noapte); }

/* ---------------------------------------------------------------------------
   27. Semnul de viață
   ---------------------------------------------------------------------------
   Un rând care răspunde la „mai vine ceva?" fără SSH și fără jurnal. Punctul
   verde pulsează cât timp chiar vin poze — e singurul lucru din portal care se
   mișcă singur, dinadins: mișcarea înseamnă „acum", iar „acum" e tot ce vrei
   să afli când te uiți la o trimitere de trei ore.

   `prefers-reduced-motion` îl oprește. Cine a cerut mai puțină mișcare a
   cerut-o pentru un motiv, iar punctul rămâne verde și fără să pulseze.
--------------------------------------------------------------------------- */

#ae-portal .ae-viu {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md); border: 1px solid var(--hairline);
	background: var(--surface-2); font-size: 12.5px; color: var(--ink-2);
}
#ae-portal .ae-viu strong { color: var(--ink-1); }
#ae-portal .ae-viu.e-merge { border-color: color-mix(in srgb, var(--br-400) 60%, transparent); }

#ae-portal .ae-viu-punct {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--br-400); flex: 0 0 auto;
	animation: ae-puls 1.6s ease-in-out infinite;
}

@keyframes ae-puls {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.75); }
}

@media (prefers-reduced-motion: reduce) {
	#ae-portal .ae-viu-punct { animation: none; }
}

/* Tăcerea NAS-ului. Nu e o eroare — poate ai oprit NAS-ul dinadins — dar e o
   stare despre care trebuie să afli, și care nu se poate deosebi de „n-am făcut
   poze săptămâna asta" dacă n-o scriem. Chihlimbariu, nu roșu. */
#ae-portal .ae-viu.e-tace {
	border-color: color-mix(in srgb, var(--vr-atentie) 55%, transparent);
	background: color-mix(in srgb, var(--vr-atentie) 8%, var(--surface-2));
}

/* ---------- 28. când s-au înnoit pozele, în Flux ----------
   -------------------------------------------------------------------------
   Rândul ăsta a locuit întâi în Setări, deasupra cadranului de spațiu, și
   AE l-a mutat aici cu o singură propoziție: „când mă aflu acolo vreau să
   știu când au fost actualizate pozele".

   Deosebirea față de `.ae-viu` nu e doar de loc, e de greutate. În Setări era
   un instrument de măsură și avea voie să arate ca unul. Aici stă deasupra
   pozelor familiei, deci trebuie să se citească dintr-o privire și să tacă în
   rest: fără chenar, fără fundal, doar un rând mic.
   ------------------------------------------------------------------------- */
#ae-portal .ae-prospetime {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 var(--sp-3);
	font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
#ae-portal .ae-prospetime strong { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-prospetime-nota { color: var(--ink-3, var(--ink-2)); }
#ae-portal .ae-prospetime-adu {
	margin-left: auto;
	padding: 3px 10px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-2); text-decoration: none; font-size: 12px; white-space: nowrap;
}
#ae-portal .ae-prospetime-adu:hover { color: var(--ink-1); border-color: var(--ink-3, var(--ink-2)); }
/* Pe telefon nu-l împingem în dreapta: acolo rândul se rupe oricum, iar un
   buton lipit de marginea din dreapta, singur pe rândul lui, arată a greșeală. */
@media (max-width: 520px) {
	#ae-portal .ae-prospetime-adu { margin-left: 0; }
}

/* Butonul „Adu acum" din Setări, cu lămurirea de lângă el. */
#ae-portal .ae-nas-acum {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	margin: var(--sp-3) 0;
}
#ae-portal .ae-nas-acum .ae-limite { margin: 0; flex: 1 1 240px; }

/* ---------- 29. știrile ----------
   -------------------------------------------------------------------------
   Un rând de știre e, înainte de orice, un TITLU care duce în altă parte. Deci
   titlul e cel mai mare lucru din rând, iar restul — ora, sursa, orașele — stau
   sub el, mici și stinse. Rezumatul e la mijloc: se citește dacă vrei, se sare
   dacă nu.

   Fără poze, dinadins. Fluxul lor trimite și imagini, dar o listă de titluri cu
   poze devine un ziar — iar asta nu e un ziar, e o fereastră spre unul.
   ------------------------------------------------------------------------- */
/* ---------- lista de știri ----------
   -------------------------------------------------------------------------
   Rescrisă după ce m-am documentat, nu după gust. Ce s-a schimbat, și de ce:

   1. BUGET DE TREI RÂNDURI. Titlul se taie la trei rânduri, rezumatul la două.
      NetNewsWire face la fel, cu o socoteală și mai strânsă (rezumatul primește
      exact rândurile pe care nu le-a luat titlul). Rostul e același: rândurile
      să aibă înălțimi apropiate. O listă în care un rând are 60 de puncte și
      următorul 180 nu se mai scanează, se citește pe bucăți.

   2. IERARHIA DIN GREUTATE ȘI CULOARE, NU DIN MĂRIME. Titlul e cu doar ~15%
      mai mare decât rezumatul (17 față de 15), dar la 600 față de 400 și pe o
      culoare mai deschisă. Un salt de mărime de 2× — cum se face în articole —
      ar fi costat 40% din câte rânduri încap pe un ecran de telefon. Așa fac și
      NetNewsWire (aceeași mărime, altă greutate) și Guardian (1,15×).

   3. UN PUNCT ÎN MARGINE ȘI O LINIE RETRASĂ. Fiecare rând are un punct mic la
      stânga și o linie subțire care începe de la text, nu de la marginea
      paginii. Fără ele, o listă fără poze devine o singură textură, iar ochiul
      n-are de ce se agăța — NN/g numește felul ăsta de citit „F-pattern" și e
      cel mai prost. Cu repere, devine „layer-cake": sari din titlu în titlu.

   4. LĂȚIME DE 65 DE CARACTERE. Regula tipografică veche (Butterick: 45–90;
      WCAG 1.4.8: cel mult 80). Pe un laptop lat, o listă întinsă pe toată
      pagina obligă ochiul să caute începutul rândului următor.
   ------------------------------------------------------------------------- */
/* 36rem = 576px. La rezumatul de 15px ies vreo 76 de caractere pe rând — sub
   pragul de 80 din WCAG 1.4.8 și în mijlocul intervalului 45–90 al lui
   Butterick. `65ch` ar fi părut mai deștept, dar `ch` se măsoară pe cifra „0",
   care în fontul ăsta e mai lată decât litera obișnuită: ieșeau 88 de
   caractere, adică prea mult. Măsurat în browser, nu socotit din cap. */
#ae-portal .ae-stiri { list-style: none; margin: 0; padding: 0; max-width: 36rem; }

#ae-portal .ae-stire {
	position: relative;
	padding: 12px 0 14px 18px;
}
/* Linia RETRASĂ, de la text în dreapta — nu de la marginea paginii. O scară de
   linii pe toată lățimea se ceartă cu textul pentru atenție. */
#ae-portal .ae-stire + .ae-stire { border-top: 1px solid var(--hairline); }

/* Punctul din margine. De obicei nu spune nimic anume — dă fiecărui rând un
   început care nu e o literă. DAR pe rândurile noi se aprinde: se face bară și
   ia culoarea semnului (vezi `.ae-stire.e-noua::before`, mai jos). Scria aici
   „n-are stare"; de când există semnul „nou", are. */
#ae-portal .ae-stire::before {
	content: ""; position: absolute; left: 2px; top: 20px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--ink-3, var(--ink-2)); opacity: .35;
}

#ae-portal .ae-stire-titlu {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: .1px;
	color: var(--ink-1); text-decoration: none;
	overflow-wrap: anywhere;
}
#ae-portal .ae-stire-titlu:hover { text-decoration: underline; }

#ae-portal .ae-stire-rezumat {
	/* PATRU rânduri, nu două. Două era alegerea mea, după rețeta NetNewsWire —
	   listă strânsă, se scanează repede. AE a corectat-o cu întrebarea pentru
	   care există rezumatul: „să înțeleg la ce se referă fără s-o deschid".
	   La două rânduri, jumătate din rezumate se opreau exact înaintea
	   explicației. Patru țin un paragraf de ziar; ce trece de-atât e deja
	   articol, și ăla se citește la ei. */
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
	overflow: hidden;
	margin: 5px 0 0;
	font-size: 15px; line-height: 1.5; color: var(--ink-2);
	overflow-wrap: anywhere;
}

/* Rândul de jos: orașul și ziarul la stânga, ora la dreapta. Ora aliniată la
   dreapta face o coloană dreaptă în jos, care ține loc de riglă când derulezi. */
#ae-portal .ae-stire-jos {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 8px 0 0;
	font-size: 13px; font-weight: 500; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-stire-izvor { color: inherit; text-decoration: none; }
#ae-portal .ae-stire-izvor:hover { text-decoration: underline; }
#ae-portal .ae-stire-ora {
	margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Orașul, ca o etichetă mică — și e PRIMUL lucru de pe rând, înaintea
   ziarului. Pentru familia asta, „e despre orașul nostru?" e întrebarea
   dinaintea lui „care ziar?". */
#ae-portal .ae-stire-zona {
	padding: 1px 8px; border-radius: var(--r-pill);
	border: 1px solid var(--br-600); color: var(--ae-aur);
	font-size: 11.5px; font-weight: 600;
}

/* Subiectul — „Economie", „IT", „Extern" — aceeași formă ca orașul, dar fără
   culoarea de marcă: orașul e AL FAMILIEI (e din Vreme), subiectul e doar o
   rubrică de ziar. Două feluri de informație, două greutăți. */
#ae-portal .ae-stire-et {
	padding: 1px 8px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); color: var(--ink-2);
	font-size: 11.5px; font-weight: 600;
}

/* Căutarea: un rând discret sub pastile, care se desface în formular. */
#ae-portal .ae-cauta { max-width: 36rem; margin: var(--sp-3) 0 0; }
#ae-portal .ae-cauta[open] { margin-bottom: var(--sp-4); }
#ae-portal .ae-cauta > summary {
	display: inline-flex; align-items: center; gap: 6px;
	cursor: pointer; list-style: none;
	font-size: 13.5px; font-weight: 600; color: var(--ink-2);
	padding: 6px 0;
}
#ae-portal .ae-cauta > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-cauta > summary:hover { color: var(--ink-1); }
#ae-portal .ae-cauta-forma {
	display: flex; gap: 8px; flex-wrap: wrap;
	margin: var(--sp-2) 0 0;
}
/* Căsuța pe rândul ei, întreagă; alegerile și butonul dedesubt, pe un rând.
   Așa se rupe la fel pe orice lățime — nu un buton rămas singur sub coloană. */
#ae-portal .ae-cauta-forma input[type="search"] {
	flex: 1 1 100%; min-width: 0;
	padding: 9px 14px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-1); font: inherit; font-size: 14px;
}
#ae-portal .ae-cauta-forma select {
	flex: 1 1 8rem; min-width: 0;
	padding: 8px 10px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-1); font: inherit; font-size: 13px;
}

/* Titlul de zi rămâne lipit de marginea de sus cât derulezi ziua aia. Fără el,
   după douăzeci de rânduri nu mai știi în ce zi ești — iar reperele sunt exact
   ce pierde o listă lungă (NN/g). */
#ae-portal .ae-zi-cap {
	/* Sub ANTET, nu sub marginea ecranului: antetul e lipicios și el, iar un
	   titlu de zi care se ascundea sub el nu mai spunea nimănui în ce zi e.
	   `--sus-h` e măsurat de un rând de JS din șablon; fără el (în probe),
	   zero — adică exact purtarea veche. */
	position: sticky; top: calc(var(--bara-admin, 0px) + var(--sus-h, 0px)); z-index: 2;
	padding: 8px 0; margin: 0 0 4px;
	background: linear-gradient(var(--bg-app) 70%, transparent);
	font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--ink-2);
}
#ae-portal .ae-zi + .ae-zi { margin-top: var(--sp-5); }

#ae-portal .ae-mai-multe {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	max-width: 36rem; margin-top: var(--sp-4);
}
#ae-portal .ae-mai-multe .ae-limite { margin: 0; }

@media (max-width: 560px) {
	#ae-portal .ae-stire-titlu { font-size: 16px; }
	#ae-portal .ae-stire-rezumat { font-size: 14.5px; }
}

/* Al doilea rând de pastile, cel cu orașele: mai mic decât cel de sus, ca să se
   vadă din prima care e principal și care e amănunt. */
#ae-portal .ae-pastile--mici { margin-top: 0; }
#ae-portal .ae-pastile--mici .ae-pastila { font-size: 12.5px; padding: 6px 14px; }

/* Cifra din pastilă: câte știri sunt acolo. Ca să nu apeși pe una goală. */
#ae-portal .ae-pastila b {
	margin-left: 6px; font-weight: 600; opacity: .65;
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-pastila.e-aleasa b { opacity: .85; }

/* ---------- 30. ușa spre Synology, cu beculeț ----------
   -------------------------------------------------------------------------
   Stă deasupra roții dințate, în amândouă barele: pe telefon în antet, pe
   ecran mare în colțul de jos-stânga. Același cod, două așezări.

   Beculețul are trei stări, și toate trei înseamnă ceva:
     · cenușiu  — încă se întreabă (durează o clipă, dar există)
     · verde    — merge, și pâlpâie ca să se vadă că e o măsurătoare vie
     · roșu     — nu răspunde; nu pâlpâie, fiindcă nu e nimic în mișcare

   Verdele pâlpâie DINADINS, iar roșul nu. Mișcarea înseamnă „acum"; un roșu
   care ar clipi ar părea o alarmă, și nu e o alarmă — e o constatare.
   ------------------------------------------------------------------------- */
#ae-portal .ae-syno {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px; border-radius: var(--r-md);
	color: var(--ink-2); text-decoration: none;
	font-size: 13px; line-height: 1.2;
	border: 1px solid transparent;
}
#ae-portal .ae-syno:hover {
	color: var(--ink-1); background: var(--glass);
	border-color: var(--hairline);
}
#ae-portal .ae-syno svg { flex: 0 0 auto; opacity: .8; }
#ae-portal .ae-syno-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* CULORILE SUNT ALE TALE, din macheta pe care mi-ai trimis-o: mentă #35D6C4
   pentru „merge", roșu #d64545 pentru „nu răspunde". Nu le-am luat din temă
   dinadins — un beculeț de stare trebuie să însemne același lucru la toate cele
   șaisprezece combinații de temă și mod. O stare care își schimbă culoarea când
   schimbi tema nu mai e o stare, e o decorațiune.

   Am luat și inelul care se umflă (`box-shadow` de la 0 la 8px, opac spre
   transparent): se vede mai bine decât o pâlpâire de opacitate, mai ales pe un
   punct de opt puncte pe un ecran de telefon ținut la un metru.

   ȘI ROȘUL PULSEAZĂ ACUM. Ziceam, la lecția 20, că n-ar trebui — că mișcarea
   înseamnă alarmă. M-am răzgândit când am văzut macheta ta: fără puls, roșul
   arată la fel cu cenușiul lui „încă se verifică" pentru cine nu deosebește
   bine culorile, iar aia e chiar întrebarea la care beculețul trebuie să
   răspundă. Pulsul spune „am verificat", nu „fugi". */
#ae-portal .ae-syno-bec {
	width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
	background: #94a3b8; opacity: .8;
	transition: background-color .3s ease;
}
#ae-portal .ae-syno.e-viu .ae-syno-bec {
	background: #35D6C4; opacity: 1;
	animation: ae-puls-verde 2s infinite;
}
#ae-portal .ae-syno.e-mort .ae-syno-bec {
	background: #d64545; opacity: 1;
	animation: ae-puls-rosu 2s infinite;
}
@keyframes ae-puls-verde {
	0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(53, 214, 196, .7); }
	70%  { transform: scale(1);   box-shadow: 0 0 0 8px rgba(53, 214, 196, 0); }
	100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(53, 214, 196, 0); }
}
@keyframes ae-puls-rosu {
	0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(214, 69, 69, .7); }
	70%  { transform: scale(1);   box-shadow: 0 0 0 8px rgba(214, 69, 69, 0); }
	100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(214, 69, 69, 0); }
}
/* Cine a cerut sistemului „mai puțină mișcare" o primește: rămâne culoarea și
   un inel fix, care spune același lucru fără să se miște. */
@media (prefers-reduced-motion: reduce) {
	#ae-portal .ae-syno.e-viu .ae-syno-bec,
	#ae-portal .ae-syno.e-mort .ae-syno-bec { animation: none; }
	#ae-portal .ae-syno.e-viu .ae-syno-bec  { box-shadow: 0 0 0 4px rgba(53, 214, 196, .25); }
	#ae-portal .ae-syno.e-mort .ae-syno-bec { box-shadow: 0 0 0 4px rgba(214, 69, 69, .25); }
}

/* În antetul de telefon e strâmt: rămâne doar beculețul și pictograma. */
#ae-portal .ae-syno--sus .ae-syno-text { display: none; }
#ae-portal .ae-syno--sus { padding: 8px; }
@media (min-width: 900px) {
	/* Pe ecran mare antetul de sus nu există; jos, pe rândul roții, e loc. */
	#ae-portal .ae-syno--sus { display: none; }
}

/* Pe rândul de jos al barei laterale, lângă roată și lângă numele tău. Scurtat
   la „SP" fiindcă rândul mai ține două lucruri — iar beculețul e oricum partea
   care se citește dintr-o privire. */
#ae-portal .ae-syno--bara {
	flex: 0 0 auto; gap: 6px; padding: 8px 10px;
	border: 1px solid var(--hairline);
}
#ae-portal .ae-syno--bara svg { display: none; }
#ae-portal .ae-syno--bara .ae-syno-text {
	font-size: 12px; font-weight: 600; letter-spacing: .6px;
}
@media (max-width: 899px) {
	#ae-portal .ae-syno--bara { display: none; }
}

/* ---------- 31. calendarul ----------
   -------------------------------------------------------------------------
   Chenarul vine de la Google cu 800×600 bătut în cod. Aici nu: se întinde după
   lățimea ecranului, iar înălțimea se socotește altfel pe telefon decât pe
   laptop.

   Pe ecran mare un raport fix (4:3) ține luna întreagă fără să taie nimic. Pe
   telefon un raport ar fi făcut-o cât o timbră — acolo punem o înălțime în
   unități de ecran, și oricum modul din start e lista, nu luna.
   ------------------------------------------------------------------------- */
/* Pastilele calendarului sunt mai mici decât cele din Vreme, dinadins: acolo
   sunt șapte orașe și pastila e ținta principală a ecranului; aici sunt doi
   oameni deasupra unui chenar mare, iar pastila e doar un comutator. Rămân
   peste 24×24 puncte (WCAG 2.5.8), deci degetul le prinde. */
#ae-portal .ae-pastile--cal .ae-pastila {
	min-height: 34px; padding: 0 12px; font-size: 12.5px;
}

/* CUPRINSUL CALENDARULUI SE OPREȘTE LA 880 DE PUNCTE. Pe un monitor de 27 de
   țoli, chenarul întins pe toată lățimea făcea căsuțele lunii cât niște
   cartoane de A4 — „cam mare și greu de citit", vorba lui AE, care l-a văzut
   pe un ecran mai lat decât al meu. Un calendar se citește ca un tabel, iar un
   tabel prea lat obligă ochiul la drumuri lungi între zi și oră. */
#ae-portal .ae-cal-cuprins { max-width: 880px; }

#ae-portal .ae-cal-chenar {
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	overflow: hidden; background: #fff;
	/* `min(70vh, 560px)`, nu 70vh gol: pe o tabletă întoarsă pe lung, 70% din
	   ecran e mai mult decât are nevoie o listă de evenimente, iar chenarul
	   împingea restul paginii sub marginea de jos. */
	height: min(70vh, 560px); min-height: 380px;
}
@media (min-width: 760px) {
	/* 4:3, dar cu tavan: pe chenarul plafonat la 880 de puncte lățime, asta
	   înseamnă cel mult vreo 660 pe înălțime — o lună întreagă încape, și
	   rămâne loc și de rândul de dedesubt fără derulat. */
	#ae-portal .ae-cal-chenar { height: auto; aspect-ratio: 4 / 3; min-height: 0; max-height: 660px; }
}
#ae-portal .ae-cal-chenar iframe {
	display: block; width: 100%; height: 100%; border: 0;
}

#ae-portal .ae-cal-comenzi {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	margin-bottom: var(--sp-3);
}
#ae-portal .ae-cal-mod {
	padding: 5px 12px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-2); font-size: 12.5px; cursor: pointer;
}
#ae-portal .ae-cal-mod:hover { color: var(--ink-1); }
#ae-portal .ae-cal-mod[aria-pressed="true"] {
	background: var(--ink-1); color: var(--surface-1); border-color: var(--ink-1);
}
#ae-portal .ae-cal-afara {
	margin-left: auto; font-size: 12.5px; color: var(--ink-2); text-decoration: none;
}
#ae-portal .ae-cal-afara:hover { text-decoration: underline; }
@media (max-width: 520px) { #ae-portal .ae-cal-afara { margin-left: 0; } }

/* ---------- 32. jurnalul: CAIETELE, nu „filele" ----------
   -------------------------------------------------------------------------
   Clasa se chema `.ae-fila`, ca la filele „Pentru noi / Pentru Evelina" din
   Vreme și Traseu — și regula de aici, venind mai târziu în fișier, călca
   `display: none` al filelor: amândouă listele de sfaturi stăteau mereu pe
   ecran, iar comutatorul „nu făcea nimic" (AE l-a prins pe Traseu). Două
   lucruri diferite n-au voie să poarte același nume — acum caietele de scris
   se cheamă `.ae-caiet`.

   Trei ferestre. Pe ecran mare stau una lângă alta, ca să le vezi pe toate
   deodată — ăsta e tot rostul unui număr fix de ferestre. Pe telefon curg una
   sub alta.

   Casetele de scris n-au chenar gros și n-au umbră: e o pagină de caiet, nu un
   formular. Singurul lucru care se vede e rândul de sus, cu numele și cu ora la
   care s-a scris ultima oară.
   ------------------------------------------------------------------------- */
#ae-portal .ae-jurnal {
	display: grid; gap: var(--sp-4);
	/* `auto-fit`, nu trei coloane bătute în cod. Azi sunt trei ferestre; dacă
	   mâine se adaugă a patra, cu trei coloane fixe ar cădea singură pe un rând,
	   lată cât toată pagina, lângă trei înguste. Așa se așază singure: câte încap
	   pe un ecran lat, două câte două pe unul mijlociu, una sub alta pe telefon. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

#ae-portal .ae-caiet {
	display: flex; flex-direction: column;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2); overflow: hidden;
}
#ae-portal .ae-caiet-cap {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px; border-bottom: 1px solid var(--hairline);
	background: var(--surface-1);
}
#ae-portal .ae-caiet-titlu {
	flex: 1 1 auto; min-width: 0;
	border: 0; background: transparent; padding: 2px 0;
	color: var(--ink-1); font-size: 14px; font-weight: 600;
	font-family: inherit;
}
#ae-portal .ae-caiet-titlu:focus { outline: 2px solid var(--hairline); outline-offset: 2px; }
#ae-portal .ae-caiet-stare {
	flex: 0 0 auto; font-size: 11.5px; color: var(--ink-3, var(--ink-2));
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-caiet-text {
	border: 0; background: transparent; resize: vertical;
	padding: 12px; min-height: 220px;
	color: var(--ink-1); font-size: 14px; line-height: 1.6;
	font-family: inherit;
}
#ae-portal .ae-caiet-text:focus { outline: 0; }

/* ---------- 33. grupurile: pe panou și în foaia „Mai mult" ----------
   -------------------------------------------------------------------------
   Aceleași grupuri, în aceleași cuvinte, în trei locuri: bara laterală de pe
   ecran mare, foaia de pe telefon, și cartonașele de pe panou. Un om nu
   trebuie să învețe două hărți ale aceluiași portal.

   Titlul de grup de pe panou e mai mic decât titlul secțiunii („Ce poți
   deschide") și mai mare decât textul cartonașelor. Ierarhia se citește din
   mărime, nu din chenare — un chenar în plus pe fiecare grup ar fi făcut
   panoul să arate ca un formular.
   ------------------------------------------------------------------------- */
#ae-portal .ae-grup-titlu {
	margin: var(--sp-5) 0 var(--sp-3);
	font-size: 10px; font-weight: 600; letter-spacing: 1.6px;
	text-transform: uppercase; color: var(--ink-3);
}
/* Primul grup vine imediat sub „Ce poți deschide", deci n-are ce despărți. */
#ae-portal .ae-sectiune > h2 + .ae-grup-titlu { margin-top: 0; }

/* „Se lucrează la ele" stă mai șters decât restul panoului: e informație
   adevărată, dar nu e ceva de făcut acum. */
#ae-portal .ae-sectiune--urmeaza { margin-top: var(--sp-6); }
#ae-portal .ae-sectiune--urmeaza .ae-card { opacity: .72; }
#ae-portal a.ae-sectiune--urmeaza .ae-card:hover,
#ae-portal .ae-sectiune--urmeaza a.ae-card:hover { opacity: 1; }
#ae-portal .ae-sectiune--urmeaza .ae-subtitlu { margin: -4px 0 var(--sp-4); }

/* Pe telefon, etichetele de grup se văd în foaia „Mai mult", nu în bara de
   jos: acolo sunt cinci iconițe pe un rând, iar un cuvânt între ele ar rupe
   rândul. În foaie, unde rândurile curg unul sub altul, ele sunt exact ce
   lipsea — altfel foaia e o listă de opt lucruri fără nicio ordine vizibilă. */
@media (max-width: 899px) {
	#ae-portal .ae-nav-restul .ae-nav-grup {
		display: block; grid-column: 1 / -1;
		margin: var(--sp-3) 0 2px var(--sp-2);
		font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
		color: var(--ink-3);
	}
	#ae-portal .ae-nav-restul .ae-nav-grup:first-child { margin-top: 0; }
}

/* Grila cartonașelor de pe panou are un NUMĂR de coloane, nu „câte încap".
   `auto-fit` — care e bun pentru albume — colapsează pistele goale, deci un
   grup cu un singur ecran își întinde cartonașul pe toată lățimea paginii.
   Cât timp panoul era o singură grămadă de unsprezece, nu se vedea. De când e
   pe grupuri, un grup cu un singur ecran e lucrul obișnuit: așa arată panoul
   bunicii, care are drept doar la Povești. */
@media (min-width: 640px) {
	#ae-portal .ae-grila--ecrane { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	#ae-portal .ae-grila--ecrane { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 34. ceasul din antet, și rândul de jos al barei ----------
   -------------------------------------------------------------------------
   În dreapta sus stătea ușa spre Synology. A plecat jos, printre unelte, și
   i-a luat locul ora — lucrul la care te uiți de zeci de ori pe zi fără să-ți
   dai seama.

   Ora e a PORTALULUI, ca tot restul (salutul, data, „mai stă 8 zile"). Când
   dispozitivul e în alt fus, se văd amândouă, cu numele țărilor sub ele. Al
   doilea ceas apare doar atunci — un rând care e gol nouăzeci și nouă la sută
   din timp nu-și merită locul.

   `font-variant-numeric: tabular-nums` ca să nu salte cifrele la fiecare
   minut: în fonturile obișnuite „1" e mai îngust decât „8", iar un ceas care
   își schimbă lățimea trage ochiul exact când n-ar trebui.
   ------------------------------------------------------------------------- */
#ae-portal .ae-ceas-antet {
	display: flex; align-items: center; gap: var(--sp-3);
	flex: 0 0 auto; margin-left: auto;
}
#ae-portal .ae-ceas-loc { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
#ae-portal .ae-ceas-loc b {
	font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--ink-1);
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-ceas-loc i {
	font-style: normal; font-size: 10px; letter-spacing: .6px;
	color: var(--ink-3); text-transform: uppercase;
}
/* Cât timp e o singură oră, eticheta n-are ce spune: toată casa e în același
   fus, iar „ROMÂNIA" sub ceas ar fi un cuvânt care nu răspunde la nicio
   întrebare. Apare abia când sunt două ore de deosebit. */
#ae-portal .ae-ceas-antet:not(.e-doua) .ae-ceas-loc i { display: none; }
#ae-portal .ae-ceas-antet.e-doua .ae-ceas-loc b { font-size: 14px; }
/* Punctul dintre ele. Un chenar ar fi fost prea mult pentru două cifre. */
#ae-portal .ae-ceas-antet.e-doua .ae-ceas-loc--aici { padding-left: var(--sp-3); border-left: 1px solid var(--hairline); }
@media (max-width: 560px) {
	#ae-portal .ae-ceas-antet { gap: var(--sp-2); }
	#ae-portal .ae-ceas-loc b { font-size: 14px; }
	#ae-portal .ae-ceas-antet.e-doua .ae-ceas-loc b { font-size: 12.5px; }
	#ae-portal .ae-ceas-antet.e-doua .ae-ceas-loc i { font-size: 9px; }
}

/* Rândul de jos al barei laterale: roata cu numele tău, plus uneltele care nu
   sunt ecrane. `margin-top: auto` îl lipește de fundul coloanei, oricât de
   puține ecrane ar avea omul în meniu — de aia a plecat de pe buton pe rând. */
#ae-portal .ae-jos { display: none; }
@media (min-width: 900px) {
	#ae-portal .ae-jos {
		display: flex; align-items: center; gap: var(--sp-2);
		margin: auto calc(-1 * var(--sp-4)) 0; padding: var(--sp-3) var(--sp-4);
		border-top: 1px solid var(--hairline);
		/* v190 — AE: „Rotita si Sp nici nu se vad." Pe un monitor scund (îl
		   are pe unul, lecția v179) meniul e mai lung decât fereastra, iar
		   subsolul pleca la vale odată cu ecranele. Acum se LIPEȘTE de fundul
		   barei: ecranele curg pe sub el, uneltele rămân sub mână. Fundalul
		   e al lui, altfel rândurile s-ar citi prin el. */
		position: sticky; bottom: 0; z-index: 1;
		background: color-mix(in srgb, var(--bg-app) 92%, transparent);
		backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
		/* v191: fără asta, când meniul e mai lung decât fereastra, coloana
		   flexibilă STRÂNGE tocmai subsolul — măsurat pe monitor scund: 101px
		   de unelte turtite la 17, cu SP ieșit din ochi. Uneltele nu se
		   strâng: se strâng ecranele de deasupra, care oricum se derulează. */
		flex: 0 0 auto;
	}
	#ae-portal .ae-jos .ae-setari-bara {
		flex: 1 1 auto; margin: 0; padding: 8px; width: auto;
		border-top: none; border-radius: var(--r-md);
	}
}

/* ---------- 35. lista de ziare, din setările Știrilor ----------
   -------------------------------------------------------------------------
   Rândul are numele deasupra și ADRESA FLUXULUI dedesubt, mică. Adresa e acolo
   pentru o singură clipă din viața portalului, dar aia contează: când o sursă
   tace, primul lucru pe care vrei să-l poți face e s-o deschizi într-o filă și
   să vezi cu ochii tăi dacă mai răspunde.
   ------------------------------------------------------------------------- */
#ae-portal .ae-surse { list-style: none; margin: var(--sp-2) 0 var(--sp-4); padding: 0; }
#ae-portal .ae-surse li + li { border-top: 1px solid var(--hairline); }
#ae-portal .ae-surse .ae-bifa {
	display: grid; align-items: center; min-height: 52px;
	grid-template-columns: auto 1fr;
	grid-template-areas: "bifa nume" "bifa adresa";
	gap: 0 10px; padding: 8px 0;
}
#ae-portal .ae-surse .ae-bifa input[type="checkbox"] { grid-area: bifa; }
#ae-portal .ae-surse-nume {
	grid-area: nume; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	color: var(--ink-1); font-size: 13.5px; font-weight: 600;
}
#ae-portal .ae-surse-nume em {
	font-style: normal; font-weight: 400; font-size: 10.5px;
	padding: 1px 7px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); color: var(--ink-3);
}
#ae-portal .ae-surse-adresa {
	grid-area: adresa; font-size: 11px; color: var(--ink-3);
	overflow-wrap: anywhere; line-height: 1.4;
}
/* În setări, titlul de grup n-are ce despărți de marginea de sus a foii. */
#ae-portal .ae-nas-grup .ae-grup-titlu { margin-top: var(--sp-4); }
#ae-portal .ae-nas-grup .ae-grup-titlu + .ae-limite { margin-top: 0; }

/* Rândul care explică fila e ULTIMUL din grupul de comenzi. După el vine
   conținutul — alt grup — deci saltul e dublu: 24px, nu 12. Regula 2-la-1. */
#ae-portal .ae-limite + .ae-sectiune { margin-top: var(--sp-5); }
#ae-portal .ae-stiri-coloana > .ae-limite { margin-bottom: var(--sp-5); }

/* ---------- 36. însemnările: scrii ceva și alegi cine îl vede ----------
   -------------------------------------------------------------------------
   Caseta de scris are trei părți, în ordinea în care gândește omul: despre ce
   e vorba, ce am de spus, cui. Destinatarul e ULTIMUL dinadins — dacă ar fi
   primul, l-ai alege înainte să știi ce scrii, iar cercetarea spune că exact
   acolo se nasc greșelile de public.

   Propoziția de sub bife („O vede numai Mada.") e cea mai importantă bucată
   din tot ecranul, și de asta nu e o etichetă mică și cenușie: 18 din 27 de
   oameni n-au observat niciodată eticheta de public de la Google+.
   ------------------------------------------------------------------------- */
#ae-portal .ae-scriu {
	display: flex; flex-direction: column; gap: var(--sp-3);
	max-width: 36rem;
	padding: var(--sp-4); border-radius: var(--r-lg);
	border: 1px solid var(--hairline); background: var(--card-bg, var(--surface-2));
}
#ae-portal .ae-scriu-titlu, #ae-portal .ae-scriu-text {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; padding: 10px 12px;
}
#ae-portal .ae-scriu-titlu { font-size: 15px; font-weight: 600; }
#ae-portal .ae-scriu-text { font-size: 15px; line-height: 1.55; resize: vertical; min-height: 120px; }
#ae-portal .ae-scriu-titlu:focus, #ae-portal .ae-scriu-text:focus {
	outline: 0; border-color: var(--br-600);
}

#ae-portal .ae-scriu-cui { border: 0; margin: 0; padding: 0; }
#ae-portal .ae-scriu-cui legend {
	padding: 0; margin-bottom: 6px;
	font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3);
}
#ae-portal .ae-scriu-tinte { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ținta e o pastilă cu bifă înăuntru. Bifa rămâne o bifă adevărată — se prinde
   cu tastatura și o citește cititorul de ecran — dar arată ca un buton, fiindcă
   asta e: alegi, nu completezi un formular. */
#ae-portal .ae-tinta {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
	min-height: 36px; padding: 0 12px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-2); font-size: 13px;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
#ae-portal .ae-tinta:hover { color: var(--ink-1); background: var(--glass-strong); }
#ae-portal .ae-tinta input[type="checkbox"] {
	width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--br-600);
}
#ae-portal .ae-tinta:has(input:checked) {
	background: var(--pastila-bg, var(--br-600)); color: var(--pastila-ink, #fff);
	border-color: transparent; font-weight: 600;
}

#ae-portal .ae-scriu-spune {
	margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-1);
}

/* ---------- însemnarea scrisă ---------- */
#ae-portal .ae-insemnare {
	max-width: 36rem; margin: 0 0 var(--sp-4);
	padding: var(--sp-4); border-radius: var(--r-lg);
	border: 1px solid var(--hairline); background: var(--card-bg, var(--surface-2));
}
/* Ce-ai scris tu e aliniat la dreapta și puțin altfel colorat, ca într-o
   mesagerie: ochiul deosebește dintr-o privire cine a vorbit, fără să citească
   numele. */
#ae-portal .ae-insemnare.e-a-mea {
	margin-left: auto; border-color: var(--br-600);
}
#ae-portal .ae-insemnare-cap {
	display: flex; align-items: baseline; gap: 8px;
	font-size: 12.5px; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-insemnare-cine { font-weight: 600; color: var(--ink-2); }
#ae-portal .ae-insemnare-ora { margin-left: auto; font-variant-numeric: tabular-nums; }
#ae-portal .ae-insemnare-titlu {
	margin: 6px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink-1);
}
#ae-portal .ae-insemnare-text {
	margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--ink-1);
	overflow-wrap: anywhere;
}
#ae-portal .ae-insemnare-cui {
	margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3, var(--ink-2));
}

#ae-portal .ae-raspunsuri {
	list-style: none; margin: var(--sp-3) 0 0; padding: 0 0 0 var(--sp-3);
	border-left: 2px solid var(--hairline);
}
#ae-portal .ae-raspunsuri li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
#ae-portal .ae-raspunsuri .ae-insemnare-cine { margin-right: 6px; }

#ae-portal .ae-insemnare-jos {
	display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
	margin-top: var(--sp-3); font-size: 13px;
}
#ae-portal .ae-insemnare-jos summary { cursor: pointer; color: var(--ink-2); }
#ae-portal .ae-insemnare-jos summary:hover { color: var(--ink-1); }
#ae-portal .ae-insemnare-jos details { flex: 1 1 100%; }
#ae-portal .ae-insemnare-jos textarea {
	width: 100%; box-sizing: border-box; margin: 8px 0;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 14px; padding: 10px 12px; resize: vertical;
}
#ae-portal .ae-insemnare-sterg { color: var(--ink-3, var(--ink-2)); text-decoration: none; }
#ae-portal .ae-insemnare-sterg:hover { color: var(--vr-rau); text-decoration: underline; }

/* Coloana știrilor, la mijloc pe ecran lat. Sub 900 de puncte nu face nimic —
   acolo coloana umple oricum lățimea. */
@media (min-width: 900px) {
	#ae-portal .ae-stiri-coloana { max-width: 40rem; margin-inline: auto; }
	#ae-portal .ae-stiri-coloana .ae-stiri,
	#ae-portal .ae-stiri-coloana .ae-mai-multe { max-width: none; }
}

/* ---------- 37. fluxul: aprecieri, comentarii, emoji ----------
   -------------------------------------------------------------------------
   Jurnalul a devenit flux, cum a cerut AE: „vrem să participe și alții la
   bucuria noastră cu o apreciere sau un comentariu". Reacțiile sunt cinci și
   toate calde — e un jurnal de bucurii, nu un loc de dezbateri, deci nu
   există „nu-mi place".
   ------------------------------------------------------------------------- */
#ae-portal .ae-reactii {
	display: flex; gap: 6px; flex-wrap: wrap;
	margin-top: var(--sp-3);
}
#ae-portal .ae-reactie {
	display: inline-flex; align-items: center; gap: 5px;
	min-height: 34px; padding: 0 10px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	text-decoration: none; font-size: 15px; line-height: 1;
	transition: transform .12s ease, border-color .16s ease, background .16s ease;
}
#ae-portal .ae-reactie:hover { transform: translateY(-1px); border-color: var(--br-600); }
#ae-portal .ae-reactie b {
	font-size: 12px; font-weight: 600; color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
/* A ta e aprinsă: chenar de marcă, nu altă culoare de fundal — semnul e
   oricum colorat, fundalul colorat ar fi țipat. */
#ae-portal .ae-reactie.e-a-mea { border-color: var(--br-400); background: var(--glass-strong); }
#ae-portal .ae-reactie.e-a-mea b { color: var(--ink-1); }

#ae-portal .ae-reactii-cine {
	margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3, var(--ink-2));
}

/* Rândul de emoji de deasupra casetelor de scris. Pe telefon nu se arată:
   acolo tastatura de emoji e la un deget distanță, iar rândul ar fi mâncat
   un rând de ecran degeaba. */
#ae-portal .ae-emoji { display: none; }
@media (min-width: 900px) {
	#ae-portal .ae-emoji { display: flex; gap: 4px; flex-wrap: wrap; }
	#ae-portal .ae-emoji-b {
		border: 0; background: none; cursor: pointer;
		font-size: 17px; line-height: 1; padding: 6px;
		border-radius: var(--r-md);
		transition: background .12s ease, transform .12s ease;
	}
	#ae-portal .ae-emoji-b:hover { background: var(--glass-strong); transform: scale(1.15); }
}

/* ---------- 38. videoteca: player mare, playlist în dreapta ----------
   -------------------------------------------------------------------------
   Ca la YouTube, cum a cerut AE. Pe ecran mare: playerul ia două treimi,
   playlist-ul o treime, și derulează singur dacă e lung. Pe telefon: playerul
   sus, lista sub el — și după ce alegi un film, pagina urcă singură la player.
   ------------------------------------------------------------------------- */
#ae-portal .ae-cinema {
	display: grid; gap: var(--sp-4);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	#ae-portal .ae-cinema {
		grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
		align-items: start;
	}
	/* Panoul nu crește pagina: stă cât playerul, antetul rămâne, rândurile
	   derulează înăuntru. */
	#ae-portal .ae-cinema-panou { max-height: 70vh; }
}

#ae-portal .ae-cinema-rama {
	aspect-ratio: 16 / 9;
	border-radius: var(--r-lg); overflow: hidden;
	border: 1px solid var(--hairline); background: #000;
}
#ae-portal .ae-cinema-rama iframe { display: block; width: 100%; height: 100%; border: 0; }
#ae-portal .ae-cinema-titlu {
	margin: var(--sp-3) 0 0; font-size: 17px; font-weight: 600; line-height: 1.3;
}

#ae-portal .ae-cinema-lista {
	display: flex; flex-direction: column; gap: 6px;
	padding: var(--sp-2);
	overflow-y: auto; min-height: 0;
	/* chenarul și fundalul sunt ale PANOULUI (.ae-cinema-panou) — lista doar
	   curge și derulează înăuntrul lui, sub antet. */
}
#ae-portal .ae-cinema-rand {
	position: relative;
	display: flex; align-items: center; gap: var(--sp-3); text-align: left;
	/* 28 în dreapta, ca titlul lung să nu intre sub „×"-ul de scos. */
	padding: 8px 28px 8px 8px; border: 1px solid transparent; border-radius: var(--r-md);
	background: none; cursor: pointer; font-family: inherit; width: 100%;
	transition: background .14s ease, border-color .14s ease;
}
#ae-portal .ae-cinema-rand:hover { background: var(--glass-strong); }
#ae-portal .ae-cinema-rand.e-ales {
	background: var(--glass-strong); border-color: var(--br-600);
}
#ae-portal .ae-cinema-poza {
	flex: 0 0 96px; width: 96px; aspect-ratio: 16 / 9;
	border-radius: var(--r-sm, 6px); overflow: hidden;
	display: grid; place-items: center;
	background: var(--surface-1); color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-cinema-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ae-portal .ae-cinema-despre { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ae-portal .ae-cinema-despre b {
	font-size: 13.5px; font-weight: 600; color: var(--ink-1); line-height: 1.35;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
#ae-portal .ae-cinema-despre i {
	font-style: normal; font-size: 11.5px; color: var(--ink-3, var(--ink-2));
}
/* „×"-ul de scos: mic, în colț, doar pentru părinți. `stopPropagation` în
   HTML, ca apăsarea pe el să nu pornească filmul pe care tocmai îl scoți. */
#ae-portal .ae-cinema-scot {
	position: absolute; top: 6px; right: 8px;
	font-size: 15px; line-height: 1; text-decoration: none;
	color: var(--ink-3, var(--ink-2)); padding: 4px;
}
#ae-portal .ae-cinema-scot:hover { color: var(--vr-rau); }

#ae-portal .ae-video-forma { max-width: 36rem; }

/* Uneltele de administrare din playlist (doar cu creionul pornit). */
#ae-portal .ae-cinema-unelte {
	display: flex; align-items: center; gap: 2px;
	position: absolute; top: 4px; right: 6px;
}
#ae-portal .ae-cinema-unelte a {
	padding: 4px 6px; text-decoration: none; font-size: 13px; line-height: 1;
	color: var(--ink-3, var(--ink-2)); border-radius: var(--r-sm, 6px);
}
#ae-portal .ae-cinema-unelte a:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-cinema-unelte .ae-cinema-scot:hover { color: var(--vr-rau); }
#ae-portal .ae-cinema-rand { cursor: pointer; }

#ae-portal .ae-cinema-creion { position: absolute; bottom: 4px; right: 6px; font-size: 12px; }
#ae-portal .ae-cinema-creion summary {
	list-style: none; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm, 6px);
	color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-cinema-creion summary:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-cinema-creion[open] {
	position: static; flex-basis: 100%; order: 9;
	padding: 8px; border-top: 1px dashed var(--hairline); margin-top: 6px;
}
#ae-portal .ae-cinema-creion form {
	display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0;
}
#ae-portal .ae-cinema-creion input[type="text"],
#ae-portal .ae-cinema-creion select {
	flex: 1 1 160px; min-width: 0;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 13px; padding: 7px 10px;
}
#ae-portal .ae-cinema-rand { flex-wrap: wrap; }

/* ---------- modul teatru ----------
   Ca la YouTube: playerul pe toată lățimea coloanei de conținut, lista
   dedesubt. Înălțimea playerului e ținută în frâu de fereastră (nu de lățime):
   pe un monitor de 27", un 16:9 pe toată lățimea ar ieși din ecran cu totul. */
#ae-portal .ae-cinema.e-teatru { grid-template-columns: 1fr; }
#ae-portal .ae-cinema.e-teatru .ae-cinema-rama {
	width: min(100%, calc((100dvh - 260px) * 16 / 9));
	margin-inline: auto;
}
#ae-portal .ae-cinema.e-teatru .ae-cinema-sub {
	width: min(100%, calc((100dvh - 260px) * 16 / 9));
	margin-inline: auto;
}
@media (min-width: 900px) {
	#ae-portal .ae-cinema.e-teatru .ae-cinema-panou { max-height: 44vh; }
}
#ae-portal .ae-cinema-sub {
	display: flex; align-items: flex-start; gap: var(--sp-3);
	margin-top: var(--sp-3);
}
#ae-portal .ae-cinema-sub .ae-cinema-titlu { margin: 0; flex: 1 1 auto; }
#ae-portal .ae-cinema-teatru { flex: 0 0 auto; }
#ae-portal .ae-cinema-teatru[aria-pressed="true"] {
	background: var(--pastila-bg, var(--br-600));
	color: var(--pastila-ink, #fff);
	border-color: transparent;
}
/* Pe telefon lista e oricum sub player — teatrul n-are ce lățime să dea. */
@media (max-width: 899px) {
	#ae-portal .ae-cinema-teatru { display: none; }
}

/* ---------- panoul de playlist, cu antet — ca la YouTube ----------
   AE: „pastilele să nu fie sus ca pastile, că arată urât." YouTube nu are
   pastile: playlist-ul e un panou cu antet — numele listei, poziția („2/12"),
   și un comutator discret. Exact asta e mai jos. */
#ae-portal .ae-cinema-panou {
	display: flex; flex-direction: column;
	border: 1px solid var(--hairline); border-radius: var(--r-lg);
	background: var(--card-bg, var(--surface-2)); overflow: hidden;
}
#ae-portal .ae-cinema-panou--gol { max-width: 24rem; }
#ae-portal .ae-cinema-panou--gol .ae-limite { margin: 0; padding: var(--sp-3); }
#ae-portal .ae-cinema-cap {
	position: relative;
	display: flex; align-items: center; gap: var(--sp-2);
	padding: 10px var(--sp-3);
	border-bottom: 1px solid var(--hairline);
	background: var(--surface-3);
}
#ae-portal .ae-cinema-cap-nume { min-width: 0; flex: 1 1 auto; }
#ae-portal .ae-cinema-cap-nume b {
	display: block; font-size: 13.5px; font-weight: 650; color: var(--ink-1);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ae-portal .ae-cinema-cap-nume i {
	font-style: normal; font-size: 11.5px; color: var(--ink-3, var(--ink-2));
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-cinema-alege { position: static; }
#ae-portal .ae-cinema-alege > summary {
	list-style: none; cursor: pointer;
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	color: var(--ink-2);
}
#ae-portal .ae-cinema-alege > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-cinema-alege > summary:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-cinema-alege[open] > summary svg { transform: rotate(180deg); }
#ae-portal .ae-cinema-alege nav {
	position: absolute; right: 8px; top: calc(100% - 4px); z-index: 5;
	min-width: 200px; padding: 6px;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); box-shadow: var(--umbra-2);
}
#ae-portal .ae-cinema-alege nav a {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	padding: 8px 10px; border-radius: var(--r-sm, 6px);
	text-decoration: none; font-size: 13px; color: var(--ink-1);
}
#ae-portal .ae-cinema-alege nav a:hover { background: var(--glass-strong); }
#ae-portal .ae-cinema-alege nav a[aria-current="true"] { font-weight: 650; background: var(--glass); }
#ae-portal .ae-cinema-alege nav a i {
	font-style: normal; font-size: 11.5px; color: var(--ink-3, var(--ink-2));
}

/* Gospodăria, SUB fereastra video — un rând de text discret, doar cu creionul. */
#ae-portal .ae-cinema-administrare {
	display: flex; gap: var(--sp-4); flex-wrap: wrap;
	margin-top: var(--sp-2);
}
#ae-portal .ae-discret > summary {
	list-style: none; cursor: pointer;
	font-size: 12.5px; color: var(--ink-3, var(--ink-2));
	padding: 4px 0;
}
#ae-portal .ae-discret > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-discret > summary:hover { color: var(--ink-1); text-decoration: underline; }
#ae-portal .ae-discret[open] > summary { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-discret form {
	display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 0;
}
#ae-portal .ae-discret input[type="text"] {
	flex: 1 1 170px; min-width: 0;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 13px; padding: 7px 10px;
}
#ae-portal .ae-discret .ae-limite { display: block; margin: 6px 0 0; }
#ae-portal .ae-discret .ae-insemnare-sterg { display: inline-block; margin-top: 6px; }

/* ---------- rearanjarea prin tragere ---------- */
#ae-portal .ae-cinema-apuc {
	flex: 0 0 auto; cursor: grab; user-select: none;
	color: var(--ink-3, var(--ink-2)); font-size: 13px; letter-spacing: -1px;
	padding: 2px 2px 2px 0;
}
#ae-portal .ae-cinema-rand[draggable="true"]:active .ae-cinema-apuc { cursor: grabbing; }
#ae-portal .ae-cinema-rand.e-tras {
	opacity: .45; border-style: dashed; border-color: var(--br-600);
}

/* Creionul din antet: aprins când administrezi. */
#ae-portal .ae-creion { text-decoration: none; }
#ae-portal .ae-creion.e-pornit {
	background: var(--pastila-bg, var(--br-600));
	color: var(--pastila-ink, #fff);
	border-color: transparent;
}

/* ---------- 39. plățile: de plătit + tabelul lună × furnizor ----------
   -------------------------------------------------------------------------
   Două forme, pentru două întrebări: o LISTĂ pentru „ce am de plătit acum"
   (se citește de sus în jos, cea mai apropiată scadență prima) și un TABEL
   pentru „cum a fost anul" — ce a cerut AE, „ca un excel".

   Culorile spun starea fără să scrie nimic: verde plătit, galben de plătit,
   roșu trecut de scadență. Dar nu DOAR culoarea — cifra e acolo oricum, iar
   restanțele au și contur mai gros: cine nu deosebește roșul de verde (unul
   din doisprezece bărbați) trebuie să vadă la fel de bine.
   ------------------------------------------------------------------------- */
#ae-portal .ae-plati-cap { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
#ae-portal .ae-plati-cap h2 { margin: 0 0 4px; }
#ae-portal .ae-plati-restant {
	display: inline-block; margin-left: 6px; padding: 1px 8px;
	border-radius: var(--r-pill); background: color-mix(in srgb, var(--crit) 18%, transparent);
	color: var(--crit); font-weight: 700; font-size: 12px;
}

#ae-portal .ae-plati-lista { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: 52rem; }
#ae-portal .ae-plata {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	padding: 10px var(--sp-3); margin-bottom: 6px;
	border: 1px solid var(--hairline); border-left: 3px solid var(--warn);
	border-radius: var(--r-md); background: var(--card-bg, var(--surface-2));
}
#ae-portal .ae-plata.e-restanta { border-left-width: 4px; border-left-color: var(--crit); }
#ae-portal .ae-plata-cine { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
#ae-portal .ae-plata-cine b { font-size: 14px; color: var(--ink-1); }
#ae-portal .ae-plata-cine b em { font-style: normal; font-weight: 400; color: var(--ink-2); }
#ae-portal .ae-plata-cine i { font-style: normal; font-size: 12px; color: var(--ink-3, var(--ink-2)); }
#ae-portal .ae-plata-cand { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
#ae-portal .ae-plata.e-restanta .ae-plata-cand { color: var(--crit); font-weight: 600; }
#ae-portal .ae-plata-cat {
	font-size: 15px; font-weight: 700; color: var(--ink-1);
	font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto;
}
#ae-portal .ae-plata-fac { display: flex; align-items: center; gap: var(--sp-2); }
#ae-portal .ae-plata-bifa {
	display: grid; place-items: center; width: 32px; height: 32px;
	border-radius: 50%; border: 1px solid var(--hairline);
	text-decoration: none; color: var(--ink-2); font-size: 15px;
}
#ae-portal .ae-plata-bifa:hover {
	background: color-mix(in srgb, var(--ok) 20%, transparent);
	border-color: var(--ok); color: var(--ink-1);
}
#ae-portal .ae-plati-lista--ale-lui .ae-plata { opacity: .8; border-left-style: dashed; }

/* Tabelul. Pe telefon nu-l strivim în coloane de 2cm — se derulează lateral,
   cu prima coloană (luna) lipită, ca să nu pierzi reperul. */
#ae-portal .ae-tabel-invelis { overflow-x: auto; margin: var(--sp-4) 0 var(--sp-3); }
#ae-portal .ae-tabel-plati { border-collapse: collapse; width: 100%; font-size: 13px; }
#ae-portal .ae-tabel-plati th,
#ae-portal .ae-tabel-plati td {
	border: 1px solid var(--hairline); padding: 7px 10px; text-align: right; white-space: nowrap;
}
#ae-portal .ae-tabel-plati thead th {
	text-align: left; font-size: 12px; font-weight: 650; color: var(--ink-1);
	background: var(--surface-3); position: sticky; top: 0; z-index: 1;
}
#ae-portal .ae-tabel-plati thead th i {
	display: block; font-style: normal; font-size: 10.5px; font-weight: 500;
	color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-tabel-plati tbody th {
	text-align: left; font-weight: 600; color: var(--ink-2);
	position: sticky; left: 0; background: var(--card-bg, var(--surface-2)); z-index: 1;
}
#ae-portal .ae-tabel-total { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-1); }
#ae-portal .ae-celula { font-variant-numeric: tabular-nums; }
#ae-portal .ae-celula a { text-decoration: none; color: inherit; display: block; }
#ae-portal .ae-celula a:hover { text-decoration: underline; }
#ae-portal .ae-celula-goala { color: var(--ink-3, var(--ink-2)); }
#ae-portal .ae-celula--platita { background: color-mix(in srgb, var(--ok) 14%, transparent); }
#ae-portal .ae-celula--neplatita { background: color-mix(in srgb, var(--warn) 16%, transparent); }
#ae-portal .ae-celula--restanta {
	background: color-mix(in srgb, var(--crit) 18%, transparent);
	box-shadow: inset 0 0 0 1px var(--crit); font-weight: 700;
}
#ae-portal .ae-celula--goala a { color: var(--ink-3, var(--ink-2)); text-align: center; }
/* Factura a venit, dar n-are ce plăti: 0 lei sau sold negativ. Se vede, nu strigă. */
#ae-portal .ae-celula--nimic { color: var(--ink-2); font-weight: 400; }

/* Formularul unei celule: apare deasupra tabelului, nu într-o fereastră. */
#ae-portal .ae-plati-forma {
	display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
	max-width: 52rem; margin: var(--sp-3) 0 0;
	padding: var(--sp-3); border: 1px dashed var(--hairline);
	border-radius: var(--r-lg); background: var(--surface-2);
}
#ae-portal .ae-plati-forma > strong { flex-basis: 100%; font-size: 13.5px; }
#ae-portal .ae-plati-forma label {
	display: flex; flex-direction: column; gap: 3px; flex: 1 1 8rem;
	font-size: 11.5px; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-plati-forma label.ae-bifa { flex-direction: row; align-items: center; gap: 6px; flex: 0 0 auto; }
#ae-portal .ae-plati-forma input[type="text"],
#ae-portal .ae-plati-forma input[type="url"],
#ae-portal .ae-plati-forma input[type="date"] {
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 13px; padding: 7px 10px; min-width: 0;
}
#ae-portal .ae-plati-forma-jos { display: flex; align-items: center; gap: var(--sp-3); }

/* Tabelele de gospodărit (case, furnizori): câmpuri, nu cifre. */
#ae-portal .ae-tabel-plati--forma td { text-align: left; }
#ae-portal .ae-tabel-plati--forma input[type="text"],
#ae-portal .ae-tabel-plati--forma input[type="url"],
#ae-portal .ae-tabel-plati--forma select {
	width: 100%; min-width: 7rem;
	border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 12.5px; padding: 6px 8px;
}
#ae-portal .ae-mijloc { text-align: center; }

/* Notița unei proprietăți — biletul de adus aminte, sub antetul casei. */
#ae-portal .ae-plati-nota {
	max-width: 52rem; margin: var(--sp-3) 0 0;
	padding: 8px var(--sp-3);
	border-left: 3px solid var(--ac-400); border-radius: var(--r-sm, 6px);
	background: color-mix(in srgb, var(--ac-400) 8%, transparent);
	font-size: 13px; color: var(--ink-2);
}

/* ---------- 40. panoul de acces ---------- */
#ae-portal .ae-tabel-acces td,
#ae-portal .ae-tabel-acces th { text-align: left; white-space: normal; }
#ae-portal .ae-tabel-acces thead th { vertical-align: top; }
#ae-portal .ae-tabel-acces thead input[type="text"] {
	width: 100%; min-width: 6.5rem;
	border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 12px; font-weight: 650; padding: 5px 8px;
}
#ae-portal .ae-tabel-acces thead input[readonly] { opacity: .7; }
#ae-portal .ae-acces-sterg {
	display: block; margin-top: 4px;
	font-size: 10.5px; font-weight: 500; color: var(--crit);
}
#ae-portal .ae-acces-grup th {
	background: var(--surface-3); font-size: 11px; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-tabel-acces tbody th { font-weight: 500; color: var(--ink-1); }
#ae-portal .ae-tabel-acces input[type="checkbox"] { width: 16px; height: 16px; }
#ae-portal .ae-acces-nou { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
#ae-portal .ae-acces-nou label {
	display: flex; flex-direction: column; gap: 3px;
	font-size: 11.5px; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-acces-nou input {
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 13px; padding: 7px 10px;
}
#ae-portal .ae-acces-nou .ae-limite { margin: 0; }
#ae-portal .ae-acces-categoria select,
#ae-portal .ae-tabel-acces--cont select {
	border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 12.5px; padding: 6px 8px;
}
#ae-portal .ae-acces-conturi details { margin-bottom: var(--sp-2); }

/* Facturi de așezat: forma de „așez" pe rândul de factură parcată. */
#ae-portal .ae-asez-forma { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#ae-portal .ae-asez-forma select {
	border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 12.5px; padding: 6px 8px; max-width: 12rem;
}

/* Ce deosebește două abonamente ale aceleiași case (ap. 15 / ap. 16). */
#ae-portal .ae-tabel-ce {
	display: inline-block; margin-left: 4px; padding: 0 5px;
	border-radius: var(--r-pill); background: var(--glass-strong);
	font-size: 10px; font-weight: 600; color: var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   41. Plăți — cârma, „Toate", și ce sare în ochi
   ═══════════════════════════════════════════════════════════════════════════

   AICI AU FOST PASTILE, ȘI NU MAI SUNT.

   Argumentul de atunci — „sunt singura navigație a ecranului" — a încetat să
   fie adevărat în clipa în care tabelul „Toate" a căpătat rânduri pe care
   apeși. Din acel moment erau două drumuri către același loc, pe același ecran.
   AE a văzut-o primul: „daca atunci cand apas pe tabelul din Toate ma duce
   inapoi, atunci nu mai vad rostul de insirat pastilele".

   Ce rămâne, și regula pe care o ținem de-acum:
     · PUȚINE ȘI SCURTE se văd — anii, patru semne fiecare, trei la număr.
     · MULTE ȘI LUNGI se strâng — zece nume de proprietăți, sub ▾.
     · Datele care sunt și drum (tabelul „Toate") nu se dublează cu un meniu.

   Iconițele furnizorilor, cerute de AE, n-au dispărut cu pastilele: s-au mutat
   în coloana lor din tabelul „Toate", unde au chiar mai mult loc. */

/* Cârma nu mai stă în capul unei secțiuni, ci singură deasupra tuturor — deci
   are nevoie de chenar întreg și colțuri proprii, nu doar de o linie dedesubt. */
#ae-portal .ae-plati-carma {
	margin-bottom: var(--sp-4);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2);
}
#ae-portal .ae-plati-carma-unelte { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Anii: mici, alături, fără ușă în fața ușii. */
#ae-portal .ae-plati-ani { display: inline-flex; gap: 2px; padding: 2px;
	border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface-2); }
#ae-portal .ae-plati-ani a {
	display: inline-flex; align-items: center; padding: 4px 11px;
	border-radius: var(--r-pill); text-decoration: none;
	font-size: 12.5px; font-weight: 600; color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-plati-ani a:hover { background: var(--glass-strong); color: var(--ink-1); }
#ae-portal .ae-plati-ani a.e-ales { background: var(--ink-1); color: var(--surface-1); }

/* Anul, scris lângă titlul secțiunii — ca să nu te întrebi „ce văd acum?". */
#ae-portal .ae-plati-anul {
	display: inline-block; margin-left: 8px; padding: 1px 8px; vertical-align: middle;
	border-radius: var(--r-pill); background: var(--glass-strong);
	font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}

#ae-portal .ae-pastila-semne { display: inline-flex; align-items: center; gap: 3px; font-style: normal; }
#ae-portal .ae-pastila-semne i { display: inline-flex; opacity: .62; }
#ae-portal .ae-pastila-semne svg { width: 14px; height: 14px; }
#ae-portal .ae-pastila.e-aleasa .ae-pastila-semne i { opacity: .95; }

/* Tabelul „Toate": aici coloana din stânga e numele casei, nu luna. */
#ae-portal .ae-tabel-toate tbody th { min-width: 11rem; }
#ae-portal .ae-tabel-toate tbody th a { color: var(--ink-1); text-decoration: none; font-weight: 650; }
#ae-portal .ae-tabel-toate tbody th a:hover { text-decoration: underline; }
#ae-portal .ae-tabel-toate tbody th em {
	display: block; font-style: normal; font-size: 11px; font-weight: 500;
	color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-tabel-semne { text-align: left; }
#ae-portal .ae-tabel-semne i { display: inline-flex; margin-right: 5px; opacity: .7; vertical-align: middle; }
#ae-portal .ae-tabel-total.e-datorie { color: var(--warn); }

/* ═══ OBSERVAȚIILE, CA BALOANE DE VORBĂ ═══
 *
 * AE: „Mesajele aranjeaza-le mai frumos, ca un balon sau ceva, usor de citit si
 * inteles. Documenteaza-te in sensul asta."
 *
 * Erau chenare dreptunghiulare cu text întins pe toată lățimea ecranului. Trei
 * lucruri le-au făcut mesaje, în ordinea în care contează:
 *
 *   1. LĂȚIMEA. `max-width: 62ch`. Regula tipografică veche (Bringhurst, și
 *      după el toate ghidurile serioase): un rând se citește ușor între 45 și
 *      75 de semne. Peste, ochiul pierde începutul rândului următor. Pe un
 *      monitor de 27 de țoli, un text întins pe toată lățimea avea 160 de
 *      semne pe rând — de două ori peste limită. ASTA e schimbarea care se
 *      simte cel mai tare, deși e cea mai puțin vizibilă.
 *   2. CINE VORBEȘTE. Semnul intră într-un cerc, ca un chip. Un balon fără
 *      cine-l spune e doar o cutie rotunjită.
 *   3. CODIȚA, spre cerc. Ea leagă vorba de cel care o spune — e chiar
 *      motivul pentru care forma se cheamă balon.
 *
 * Colțurile: mari (16px), în afară de cel dinspre codiță (5px). Un balon cu
 * toate colțurile la fel arată ca o pastilă; asimetria îl face să „iasă" din
 * cerc.
 *
 * Culoarea NU e singurul semn al greutății (semnul se schimbă și el): unul din
 * doisprezece bărbați nu deosebește roșul de verde. */
#ae-portal .ae-obs-lista { list-style: none; margin: var(--sp-3) 0 var(--sp-3); padding: 0;
	display: flex; flex-direction: column; gap: 10px; }
#ae-portal .ae-obs { display: flex; gap: 10px; align-items: flex-start; }

/* Chipul care vorbește. */
#ae-portal .ae-obs-semn {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 32px; height: 32px; margin-top: 2px; border-radius: 50%;
	background: var(--surface-3); color: var(--ink-2);
	border: 1px solid var(--hairline);
}

/* Balonul propriu-zis. */
#ae-portal .ae-obs-balon {
	position: relative; max-width: 62ch;
	padding: 10px 14px;
	border: 1px solid var(--hairline); border-radius: 16px 16px 16px 5px;
	background: var(--surface-2);
	font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
/* Codița: două triunghiuri suprapuse — cel de dedesubt e chenarul, cel de
   deasupra e umplutura. Așa are contur, ca tot balonul. */
#ae-portal .ae-obs-balon::before,
#ae-portal .ae-obs-balon::after {
	content: ''; position: absolute; left: -7px; bottom: 8px;
	width: 0; height: 0;
	border-top: 6px solid transparent; border-bottom: 6px solid transparent;
	border-right: 7px solid var(--hairline);
}
#ae-portal .ae-obs-balon::after {
	left: -6px; border-right-color: var(--surface-2);
}

/* Cele grele: mai calde, și cu chipul aprins. */
#ae-portal .ae-obs.e-greu .ae-obs-balon {
	border-color: color-mix(in srgb, var(--warn) 45%, var(--hairline));
	background: color-mix(in srgb, var(--warn) 9%, var(--surface-2));
	color: var(--ink-1);
}
#ae-portal .ae-obs.e-greu .ae-obs-balon::before {
	border-right-color: color-mix(in srgb, var(--warn) 45%, var(--hairline));
}
#ae-portal .ae-obs.e-greu .ae-obs-balon::after {
	border-right-color: color-mix(in srgb, var(--warn) 9%, var(--surface-2));
}
#ae-portal .ae-obs.e-greu .ae-obs-semn {
	color: var(--warn);
	border-color: color-mix(in srgb, var(--warn) 45%, var(--hairline));
	background: color-mix(in srgb, var(--warn) 12%, var(--surface-3));
}
#ae-portal .ae-obs--lipsa.e-greu .ae-obs-balon { border-style: dashed; }

/* Sfatul despre ziua rondului nu e o alarmă, e o propunere: chip verde, ton
   liniștit. Se deosebește de restul chiar și cu ochii pe jumătate închiși. */
#ae-portal .ae-obs--cand .ae-obs-semn {
	color: var(--ae-aur);
	border-color: color-mix(in srgb, var(--br-400) 40%, var(--hairline));
	background: color-mix(in srgb, var(--br-400) 12%, var(--surface-3));
}

/* Facturile pe rând: detaliile cerute de AE — număr, emitere, scadență,
   consum, preț unitar. Stau strânse într-un „details", ca să nu îngroape
   tabelul lună × furnizor, care e reperul. */
#ae-portal .ae-facturi-rand { font-size: 12.5px; }
#ae-portal .ae-facturi-rand td, #ae-portal .ae-facturi-rand th { white-space: nowrap; }
#ae-portal .ae-facturi-rand .ae-mic { color: var(--ink-3, var(--ink-2)); font-size: 11.5px; }

/* SORTAREA STĂ ÎN CAPUL COLOANEI, nu într-un rând de unelte deasupra: numele
   coloanei e deja acolo și deja spune ce sortezi. Săgeata apare doar pe cea
   după care e sortat — restul rămân text până le atingi. */
#ae-portal .ae-facturi-rand thead th a {
	color: inherit; text-decoration: none; display: inline-flex; gap: 2px; align-items: center;
}
#ae-portal .ae-facturi-rand thead th a:hover { color: var(--ink-1); text-decoration: underline; }
#ae-portal .ae-facturi-rand thead th.e-sortat { color: var(--ink-1); }
#ae-portal .ae-facturi-rand thead th.e-sortat a { font-weight: 700; }

/* Filtrele: un rând scund, fără chenar propriu — sunt unelte, nu conținut. */
#ae-portal .ae-facturi-cauta {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
	margin: var(--sp-3) 0; font-size: 12.5px;
}
#ae-portal .ae-facturi-cauta label {
	display: flex; flex-direction: column; gap: 3px;
	font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-facturi-cauta select {
	border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 12.5px; padding: 6px 8px; max-width: 14rem;
}
#ae-portal .ae-facturi-cauta > a { font-size: 12px; color: var(--ink-2); padding-bottom: 7px; }

/* Legătura către PDF: pictogramă + cuvânt. AE n-o găsea, fiindcă nu exista pe
   ecran; acum e o unealtă care arată ca o unealtă, nu un semn de ghicit. */
#ae-portal .ae-plata-pdf {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 8px; border-radius: var(--r-pill);
	border: 1px solid var(--hairline); background: var(--surface-2);
	font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
#ae-portal .ae-plata-pdf:hover { border-color: var(--ink-3, var(--ink-2)); color: var(--ink-1); }
#ae-portal .ae-plata-pdf svg { opacity: .75; }

/* Impozitele: o listă de proprietăți cu o cifră fiecare, nu un tabel lunar.
   Cifra e ce contează, deci e singura îngroșată. */
#ae-portal .ae-tabel-impozite tbody th { min-width: 10rem; }
#ae-portal .ae-tabel-impozite tbody th a { color: var(--ink-1); text-decoration: none; font-weight: 650; }
#ae-portal .ae-tabel-impozite tbody th a:hover { text-decoration: underline; }
#ae-portal .ae-tabel-impozite tbody th em {
	display: block; font-style: normal; font-size: 11px; font-weight: 500;
	color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-tabel-impozite .ae-tabel-total { white-space: nowrap; }
#ae-portal .ae-tabel-impozite .ae-tabel-total a { color: var(--ink-2); text-decoration: none; }
#ae-portal .ae-tabel-impozite .ae-tabel-total.e-scris a { color: var(--ink-1); font-weight: 700; }
#ae-portal .ae-tabel-impozite .ae-tabel-total a:hover { text-decoration: underline; }
#ae-portal .ae-tabel-impozite .ae-plata-pdf { margin-left: 6px; padding: 2px 6px; }
#ae-portal .ae-tabel-impozite [title] { cursor: help; }

/* „pe toate proprietățile" — o lămurire, nu o alarmă. */
#ae-portal .ae-plati-tot-tot {
	display: inline-block; padding: 1px 8px; border-radius: var(--r-pill);
	background: var(--glass-strong); font-size: 11.5px; color: var(--ink-3, var(--ink-2));
}

/* Observațiile care nu încap sus: strânse, dar numărate. */
#ae-portal .ae-obs-restul { margin-top: var(--sp-2); }
#ae-portal .ae-obs-restul .ae-obs-lista { margin-top: var(--sp-2); }

@media (max-width: 640px) {
	#ae-portal .ae-plati-carma { flex-wrap: wrap; }
	#ae-portal .ae-plati-carma-unelte { width: 100%; justify-content: space-between; }
	#ae-portal .ae-plati-ani a { padding: 4px 9px; font-size: 12px; }
	#ae-portal .ae-pastila-semne svg { width: 12px; height: 12px; }
	#ae-portal .ae-facturi-cauta select { max-width: 100%; }
}

/* Factura cu notiță: un punct în colț, nu un rând în plus. Nelămuririle sunt
   la câteva facturi, nu la toate — un rând mereu vizibil ar îngroșa tabelul
   pentru nimic. Textul se vede în „title", la trecerea cu mouse-ul. */
#ae-portal .ae-celula.e-cu-nota { position: relative; }
#ae-portal .ae-celula.e-cu-nota::after {
	content: ''; position: absolute; top: 3px; right: 3px;
	width: 5px; height: 5px; border-radius: 50%; background: var(--accent, var(--ok));
}
/* Notița din formularul de celulă ține un rând întreg: e text de om. */
#ae-portal .ae-plati-forma-lat { flex: 1 1 100%; }

/* Cartonașul de plăți de pe Panou. Aceeași formă cu cel de vreme — două
   lucruri care fac același gest (o privire, apoi un click) trebuie să arate
   la fel, altfel sunt două lucruri de învățat. */
#ae-portal .ae-panou-plati {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
	background: var(--surface-2); border: 1px solid var(--hairline);
	text-decoration: none; color: inherit;
}
#ae-portal .ae-panou-plati:hover { background: var(--glass-strong); }
#ae-portal .ae-panou-plati-semn { flex: 0 0 auto; display: inline-flex; color: var(--warn); }
#ae-portal .ae-panou-plati-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ae-portal .ae-panou-plati-text b { font-size: 15px; color: var(--ink-1); }
#ae-portal .ae-panou-plati-text i {
	font-style: normal; font-size: 12.5px; color: var(--ink-3, var(--ink-2));
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rândul „publicări noi la Finanțe și legi" folosește aceeași formă ca rândul de
   plăți — dinadins: două lucruri care fac exact același lucru (te anunță de pe
   panou și te duc într-un loc) trebuie să arate la fel, altfel sunt două forme
   de învățat în loc de una. Se deosebesc doar prin semn: plățile au culoarea de
   atenție (o scadență te costă dacă o ratezi), asta o are pe cea liniștită (e o
   veste, nu o somație). */
#ae-portal .ae-panou-lege .ae-panou-plati-semn { color: var(--br-600, var(--ink-2)); }

/* ---------- semnul „nou" de pe pastilele de la Știri ----------
   Pastilă plină, cu cifra în ea. NU e o culoare singură: are formă (pastila),
   cifră (cât), și vorba întreagă dedesubt pentru cititorul de ecran. Un semn
   care se bazează doar pe nuanță e invizibil pentru cine n-o distinge — și,
   pe un telefon în soare, cam pentru toată lumea. */
#ae-portal .ae-pastila-nou {
	margin-left: 4px; display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--br-600); color: #fff;
	font-style: normal; font-size: 11px; font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums;
}
/* Pe pastila pe care ești, fundalul e deja închis — semnul s-ar topi în el.
   Se întoarce pe dos: alb cu literă închisă. */
#ae-portal .ae-pastila.e-aleasa .ae-pastila-nou {
	background: var(--pastila-ink, #fff); color: var(--pastila-bg, var(--br-600));
}

/* Rândul nou din listă. O dungă la stânga și o etichetă mică — nu un fundal
   colorat pe tot rândul: patruzeci de rânduri dintre care zece pictate ar face
   lista să pară stricată, nu proaspătă. */
#ae-portal .ae-stire.e-noua { position: relative; }
/* Punctul rândului se face BARĂ, în locul lui, nu pe lângă el. Prima variantă
   îl punea la stânga marginii, unde ieșea din rând și arăta ca un fir de praf.
   Aici crește din punctul care era oricum acolo — deci rândul nou nu capătă
   ceva în plus, ci același semn, aprins. */
#ae-portal .ae-stire.e-noua::before {
	left: 2px; top: 16px; width: 4px; height: 15px;
	border-radius: 2px; background: var(--br-600); opacity: 1;
}
/* Aceeași pastilă plină ca semnul de pe filă — dinadins: un singur fel de
   semn pentru un singur înțeles („asta n-ai văzut-o"). Plină, nu ștearsă:
   varianta transparentă se topea în fundalul de noapte exact acolo unde
   trebuia să sară în ochi. */
#ae-portal .ae-stire-nou {
	display: inline-block; margin-right: 7px; padding: 2px 7px; border-radius: 999px;
	background: var(--br-600); color: #fff;
	font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
	vertical-align: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   42. Plăți — două chenare, acordeoane, și „de plătit" pe locuințe
   ═══════════════════════════════════════════════════════════════════════════

   AE: „Grupeaza in doua chenare: ce sare in ochii (in dreapta) si Toate
   proprietatile […] cu posibilitatea de restrangere si expandare tip acordeon."

   Ordinea din HTML rămâne tabel-apoi-baloane, fiindcia aia e ordinea de citit
   pentru un cititor de ecran și pentru un telefon (unde oricum se așază una
   sub alta). Coloanele sunt o hotărâre de LĂȚIME, nu de importanță — de-aia
   se fac din CSS, abia de la 1100px în sus. */

#ae-portal .ae-plati-doua { display: block; }
@media (min-width: 1100px) {
	#ae-portal .ae-plati-doua {
		display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--sp-4); align-items: start;
	}
	#ae-portal .ae-plati-doua > .ae-sectiune { margin-bottom: 0; }
}

/* Acordeonul. Capacul poartă titlul, deci `h2` intră ÎN summary — altfel ar fi
   două rânduri unde e nevoie de unul, iar săgeata ar sta lângă nimic. */
#ae-portal .ae-plati-acordeon > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 2px 0 6px;
}
#ae-portal .ae-plati-acordeon > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-plati-acordeon > summary h2 { margin: 0; }
#ae-portal .ae-plati-acordeon > summary::before {
	content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px;
	border-right: 2px solid var(--ink-3, var(--ink-2));
	border-bottom: 2px solid var(--ink-3, var(--ink-2));
	transform: rotate(-45deg); transition: transform .15s ease;
}
#ae-portal .ae-plati-acordeon[open] > summary::before { transform: rotate(45deg); }
#ae-portal .ae-plati-acordeon > summary > em {
	font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-2);
	padding: 1px 8px; border-radius: var(--r-pill); background: var(--glass-strong);
	font-variant-numeric: tabular-nums;
}
/* Cifra mare rămâne pe capac chiar și strâns: la impozite, ăsta e tot rostul. */
#ae-portal .ae-plati-capac {
	margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700;
	color: var(--ink-1); font-variant-numeric: tabular-nums;
}

/* „De plătit", pe locuințe. Coloanele se fac singure după cât loc e — două pe
   laptop, trei pe monitor, una pe telefon. `auto-fill` cu un minim de 22rem
   ține grupurile citibile: sub atât, suma și scadența se calcă. */
/* COLOANE DE TEXT, nu grilă. O grilă aliniază rândurile între ele, deci un
   grup cu patru facturi lasă o gaură de trei rânduri lângă unul cu una singură
   — se vedea limpede la prima desenare. Coloanele curg de sus în jos și se
   umplu una după alta, fără găuri, iar `break-inside: avoid` ține un grup
   întreg pe aceeași coloană. */
#ae-portal .ae-plati-coloane {
	columns: 22rem; column-gap: var(--sp-3);
}
#ae-portal .ae-plati-grup {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	margin: 0 0 var(--sp-3);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2); overflow: hidden;
}
#ae-portal .ae-plati-grup.e-restanta { border-color: color-mix(in srgb, var(--crit) 40%, var(--hairline)); }
#ae-portal .ae-plati-grup h3 {
	display: flex; align-items: baseline; gap: 8px; margin: 0;
	padding: 9px var(--sp-3); border-bottom: 1px solid var(--hairline);
	background: var(--surface-3); font-size: 13px; font-weight: 650;
}
#ae-portal .ae-plati-grup h3 a { color: var(--ink-1); text-decoration: none; }
#ae-portal .ae-plati-grup h3 a:hover { text-decoration: underline; }
#ae-portal .ae-plati-grup h3 em {
	margin-left: auto; font-style: normal; font-weight: 700; color: var(--ink-1);
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-plati-coloane .ae-plata { padding: 9px var(--sp-3); gap: 8px; flex-wrap: wrap; }
#ae-portal .ae-plati-coloane .ae-plata-cat { font-size: 14px; }
#ae-portal .ae-plati-coloane .ae-plata-fac { margin-left: auto; }

/* Panoul „cum ai plătit-o". Un singur câmp: „depinde de ce anume am". */
#ae-portal .ae-plati-bifa-forma {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
	margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
	border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--hairline));
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--ok) 7%, var(--surface-2));
}
#ae-portal .ae-plati-bifa-forma > strong { flex: 1 1 100%; font-size: 13.5px; color: var(--ink-1); }
#ae-portal .ae-plati-bifa-forma label {
	display: flex; flex-direction: column; gap: 3px; flex: 1 1 22rem;
	font-size: 11px; font-weight: 600; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-plati-bifa-forma input[type="text"] {
	border: 1px solid var(--hairline); border-radius: var(--r-sm, 6px);
	background: var(--surface-1); color: var(--ink-1);
	font-family: inherit; font-size: 13px; padding: 8px 10px;
}
#ae-portal .ae-plati-bifa-jos { display: flex; align-items: center; gap: 10px; }
#ae-portal .ae-plati-bifa-forma > .ae-limite { flex: 1 1 100%; margin: 0; }

/* Semnul că o factură știe CUM a fost stinsă: o linie punctată sub sumă. Nu
   strigă, dar se vede că e ceva de aflat acolo. */
#ae-portal .ae-tabel-total.e-stinsa {
	text-decoration: underline dotted var(--ink-3, var(--ink-2));
	text-underline-offset: 3px; cursor: help;
}

/* Bara de stare din cârmă: răspunsul la „am ceva de făcut?", înainte de orice.
   O legătură, nu un text — sare direct la listă, care stă la urmă. */
#ae-portal .ae-plati-stare {
	flex: 0 1 auto; margin: 0; font-size: 12.5px; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
#ae-portal .ae-plati-stare a { color: var(--ink-2); text-decoration: none; }
#ae-portal .ae-plati-stare a:hover { color: var(--ink-1); text-decoration: underline; }
#ae-portal .ae-plati-stare strong { color: var(--ink-1); }
#ae-portal .ae-plati-stare .e-rau { color: var(--crit); font-weight: 650; }
#ae-portal .ae-plati-stare .e-bine { color: var(--ok); font-weight: 600; }
#ae-portal .ae-plati-stare i { font-style: normal; color: var(--ink-3, var(--ink-2)); }
@media (max-width: 640px) {
	#ae-portal .ae-plati-stare { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   43. Plăți — cifrele de sus, și liniștea din tabele
   ═══════════════════════════════════════════════════════════════════════════

   Documentarea cerută de AE, redusă la ce am aplicat:
     · cifra critică sus-stânga — acolo cade prima privire;
     · UN număr-erou pe ecran (De plătit), vizibil mai mare decât tot;
     · restul, cartonașe mici: etichetă → valoare → un rând de context;
     · starea nu se spune doar prin culoare (⚠ + „restanțe", ✓ + „la zi") —
       unul din doisprezece bărbați nu deosebește roșul de verde;
     · numerele mari cu cifre proporționale; tabelarele rămân în tabele. */

#ae-portal .ae-plati-cifre {
	display: grid; gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-bottom: var(--sp-4);
}
#ae-portal .ae-cifra {
	display: flex; flex-direction: column; gap: 3px;
	padding: 12px var(--sp-4);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2); text-decoration: none;
}
#ae-portal .ae-cifra-nume {
	font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
	text-transform: uppercase; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-cifra-val {
	font-size: 19px; font-weight: 650; color: var(--ink-1); line-height: 1.15;
}
#ae-portal .ae-cifra-val i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-2); }
#ae-portal .ae-cifra-sub { font-size: 11.5px; color: var(--ink-2); }

/* Eroul: unul singur, și se vede de ce el. */
#ae-portal .ae-cifra.e-hero .ae-cifra-val { font-size: 27px; }
#ae-portal a.ae-cifra:hover { border-color: var(--ink-3, var(--ink-2)); }
#ae-portal a.ae-cifra:hover .ae-cifra-sub { text-decoration: underline; }
#ae-portal .ae-cifra.e-hero.e-restanta {
	border-color: color-mix(in srgb, var(--crit) 45%, var(--hairline));
	background: color-mix(in srgb, var(--crit) 6%, var(--surface-2));
}
#ae-portal .ae-cifra.e-hero.e-restanta .ae-cifra-sub { color: var(--crit); font-weight: 600; }

/* Rândul sub mână: la un tabel lat, ochiul pierde rândul pe drum. O umbră
   discretă sub cursor îl ține — fără zebră, care s-ar bate cu verdele/roșul
   stărilor din căsuțe. */
#ae-portal .ae-tabel-plati tbody tr:hover > td:not(.ae-celula),
#ae-portal .ae-tabel-plati tbody tr:hover > th {
	background: color-mix(in srgb, var(--ink-1) 4%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   44. Jurnal — camera familiei (chat) și avizierul (padlet)
   ═══════════════════════════════════════════════════════════════════════════

   Documentarea, redusă la ce se vede:
     · coada balonului arată cine vorbește — stânga la primite, dreapta la ale
       tale; ale tale au și altă culoare (două semne, nu unul);
     · balonul se taie la 62ch — regula rândului citibil, aceeași ca la Plăți;
     · gruparea: același om, mesaje una după alta → numele o dată;
     · bifele nu strigă: stau în colțul balonului, iar lista „cine a văzut"
       se deschide doar la apăsare. */

#ae-portal .ae-camera { display: flex; flex-direction: column; }
#ae-portal .ae-camera-cap { margin-bottom: var(--sp-3); }
#ae-portal .ae-camera-membri { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
#ae-portal .ae-chip {
	display: inline-grid; place-items: center; flex: 0 0 auto;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--surface-3); border: 1px solid var(--hairline);
	font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em;
}
#ae-portal .ae-chip.e-eu { background: var(--br-600); color: #fff; border-color: transparent; }

#ae-portal .ae-fir { list-style: none; margin: 0; padding: var(--sp-2) 0; }
#ae-portal .ae-fir-zi { display: grid; place-items: center; margin: var(--sp-4) 0 var(--sp-3); }
#ae-portal .ae-fir-zi span {
	padding: 2px 12px; border-radius: var(--r-pill);
	background: var(--glass-strong); font-size: 11.5px; color: var(--ink-2);
}

#ae-portal .ae-vorba { display: flex; gap: 8px; align-items: flex-end; margin: 0 0 8px; }
#ae-portal .ae-vorba.e-lipit { margin-top: -4px; }
#ae-portal .ae-vorba .ae-chip { width: 30px; height: 30px; font-size: 11px; }
#ae-portal .ae-vorba.e-lipit .ae-chip { visibility: hidden; height: 0; }

#ae-portal .ae-balon {
	position: relative; max-width: min(62ch, 82%);
	padding: 8px 12px; border-radius: 14px 14px 14px 5px;
	border: 1px solid var(--hairline); background: var(--surface-2);
	font-size: 13.5px; line-height: 1.5; color: var(--ink-1);
}
#ae-portal .ae-balon-cine { display: block; font-size: 11.5px; color: var(--ae-aur); margin-bottom: 2px; }
#ae-portal .ae-balon-titlu { display: block; margin-bottom: 2px; }
#ae-portal .ae-balon-text { word-wrap: break-word; }
#ae-portal .ae-balon-jos {
	display: flex; gap: 6px; align-items: center; justify-content: flex-end;
	margin-top: 3px; font-size: 10.5px; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-balon-jos i { font-style: normal; }

/* Ale mele: dreapta, cu altă culoare și coada pe dreapta. */
#ae-portal .ae-vorba.e-al-meu { justify-content: flex-end; }
#ae-portal .ae-vorba.e-al-meu .ae-balon {
	border-radius: 14px 14px 5px 14px;
	background: color-mix(in srgb, var(--br-400) 14%, var(--surface-2));
	border-color: color-mix(in srgb, var(--br-400) 30%, var(--hairline));
}

/* Bifele. Verzi-pline abia când a văzut TOATĂ camera — ca la WhatsApp. */
#ae-portal .ae-bife { position: relative; display: inline-block; }
#ae-portal .ae-bife > summary {
	list-style: none; cursor: pointer; letter-spacing: -.12em;
	color: var(--ink-3, var(--ink-2)); font-size: 11px;
}
#ae-portal .ae-bife > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-bife.e-toti > summary { color: var(--ae-aur); font-weight: 700; }
#ae-portal .ae-bife-lista {
	position: absolute; right: 0; bottom: 18px; z-index: 5;
	display: flex; flex-direction: column; gap: 3px; min-width: 14rem;
	padding: 8px 10px; border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--card-bg);
	box-shadow: var(--umbra-2); font-size: 11.5px; color: var(--ink-2);
	white-space: nowrap;
}
#ae-portal .ae-vorba-sterg { color: var(--ink-3, var(--ink-2)); text-decoration: none; }
#ae-portal .ae-vorba-sterg:hover { color: var(--crit); }

/* Caseta de scris, la capăt — unde e proaspătul. */
#ae-portal .ae-camera-scriu { margin-top: var(--sp-3); }
#ae-portal .ae-camera-scriu-rand { display: flex; gap: 8px; align-items: flex-end; }
#ae-portal .ae-camera-scriu textarea {
	flex: 1 1 auto; resize: vertical; min-height: 44px;
	padding: 10px 12px; border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--surface-1);
	color: var(--ink-1); font-family: inherit; font-size: 13.5px;
}

/* Avizierul: perete de cartonașe, pe coloane care curg — ca „De plătit". */
#ae-portal .ae-avizier-scriu {
	display: flex; flex-direction: column; gap: 8px;
	margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2);
}
#ae-portal .ae-avizier-scriu input[type="text"],
#ae-portal .ae-avizier-scriu textarea {
	padding: 9px 11px; border-radius: var(--r-sm, 6px);
	border: 1px solid var(--hairline); background: var(--surface-1);
	color: var(--ink-1); font-family: inherit; font-size: 13.5px;
}
#ae-portal .ae-avizier-cui { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; }
#ae-portal .ae-avizier-ales { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }

#ae-portal .ae-avizier-perete { columns: 19rem; column-gap: var(--sp-3); }
#ae-portal .ae-notita {
	position: relative; break-inside: avoid; -webkit-column-break-inside: avoid;
	margin: 0 0 var(--sp-3); padding: 12px 14px;
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	background: var(--surface-2);
}
/* Privatele au colțul îndoit discret: se vede din avion că-s ale tale. */
#ae-portal .ae-notita.e-privata { border-style: dashed; }
#ae-portal .ae-notita h3 { margin: 0 0 4px; font-size: 13.5px; }
#ae-portal .ae-notita p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }
#ae-portal .ae-notita footer {
	display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
	font-size: 11px; color: var(--ink-3, var(--ink-2));
}
#ae-portal .ae-notita footer i { font-style: normal; }
#ae-portal .ae-notita-muta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
#ae-portal .ae-notita-sterg {
	position: absolute; top: 6px; right: 8px;
	color: var(--ink-3, var(--ink-2)); text-decoration: none;
}
#ae-portal .ae-notita-sterg:hover { color: var(--crit); }

/* ═══ Avizierul ca la Padlet: tabla, coloanele, plusul ═══
   Fundalul e o priveliște din temele noastre, dar una LINIȘTITĂ: documentarea
   (chiar ghidul Padlet) spune că un fundal încărcat fură contrastul cardurilor
   — deci o singură suflare de culoare, la 10%, peste suprafețele temei, nu
   două pete de verde și albastru cum pusesem întâi. Coloanele au fâșia lor
   translucidă, ca la Padlet: secțiunea se citește ca ZONĂ, cardurile ca ce e
   ÎN ea. Capetele nu mai sunt blocuri pline de culoare — o nuanță din temă
   sub scrisul obișnuit ajunge ca să fie cap, fără să strige. */
#ae-portal .ae-avizier-tabla {
	display: flex; gap: var(--sp-3); align-items: flex-start;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	padding: var(--sp-4); border-radius: var(--r-lg);
	background:
		radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--br-400) 10%, transparent), transparent 55%),
		linear-gradient(165deg, var(--surface-2), var(--bg-app));
	border: 1px solid var(--hairline);
	min-height: 20rem;
}
#ae-portal .ae-avizier-coloana {
	flex: 0 0 19rem; max-width: 19rem;
	padding: 8px; border-radius: var(--r-md);
	background: color-mix(in srgb, var(--surface-1) 55%, transparent);
}
#ae-portal .ae-avizier-sectiune {
	display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px;
	padding: 8px 12px; border-radius: var(--r-md);
	background: color-mix(in srgb, var(--br-600) 16%, var(--card-bg));
	color: var(--ink-1); font-size: 13px; font-weight: 650;
}
#ae-portal .ae-avizier-sectiune em {
	margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3);
}
/* Pe telefon coloanele se așază una sub alta — documentarea de board-uri e
   fără echivoc: derulatul orizontal ca SINGUR drum spre conținut e o ușă
   ascunsă. Pe lat rămâne tabla; pe îngust, avizierul curge ca o pagină. */
@media (max-width: 640px) {
	#ae-portal .ae-avizier-tabla { flex-direction: column; overflow-x: visible; }
	#ae-portal .ae-avizier-coloana { flex-basis: auto; max-width: none; width: 100%; }
}
#ae-portal .ae-avizier-plus { margin-bottom: 8px; }
#ae-portal .ae-avizier-plus > summary {
	list-style: none; cursor: pointer; display: grid; place-items: center;
	height: 30px; border-radius: var(--r-md);
	background: color-mix(in srgb, var(--card-bg) 65%, transparent);
	border: 1px dashed var(--hairline);
	font-size: 17px; font-weight: 600; color: var(--ink-2);
}
#ae-portal .ae-avizier-plus > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-avizier-plus[open] > summary { display: none; }
#ae-portal .ae-avizier-tabla .ae-avizier-scriu { margin-bottom: 8px; background: var(--card-bg); }
#ae-portal .ae-avizier-tabla .ae-notita { background: var(--card-bg); box-shadow: var(--umbra-1); }
#ae-portal .ae-avizier-tabla .ae-limite { padding: 0 4px; }
#ae-portal .ae-avizier-noua {
	display: flex; gap: 8px; align-items: center; flex: 0 0 16rem;
	padding: 8px; border-radius: var(--r-md);
	border: 1px dashed var(--hairline);
	background: color-mix(in srgb, var(--card-bg) 45%, transparent);
}
#ae-portal .ae-avizier-noua input {
	flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm, 6px);
	border: 1px solid var(--hairline); background: var(--surface-1);
	color: var(--ink-1); font-family: inherit; font-size: 12.5px;
}
/* (Fosta regulă de telefon — 17rem pe orizontală — a plecat: pe îngust
   coloanele curg acum pe verticală, vezi blocul tablei de mai sus.) */

/* ═══ Fereastra spre avizier, lângă calendar ═══
   Spațiul gol din dreapta calendarului, pe care AE l-a văzut primul. Nu e un
   avizier al doilea — e ACELAȘI avizier, văzut printr-o fereastră îngustă:
   cine poate vedea o notiță acolo o vede și aici, cine nu, nu. Pe îngust
   fereastra coboară sub calendar, că un telefon nu are „dreapta". */
#ae-portal .ae-cal-doua { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
/* PRAGUL E 1300, NU 1100 — și diferența s-a văzut pe laptopul lui AE.
   1100 măsura fereastra, dar din fereastră mănâncă întâi meniul lateral
   (~130px), apoi paginile își iau marginile — iar pe un ecran de ~1100-1300,
   „două coloane" însemna un calendar strâns pe vreo 550px, cu căsuțele lunii
   cât unghia, și avizierul umflat alături. AE: „cand ecranul se micsoreaza
   poti sa treci sectiunea cu avizier sub calendar. Cred ca se vede mai bine
   asa." Are dreptate: socoteala cinstită e calendar lizibil (~700px) +
   fereastra de avizier (24rem = 384px) + meniu + margini ≈ 1300. Sub atât,
   avizierul coboară sub calendar, întreg și lat. */
@media (min-width: 1300px) {
	#ae-portal .ae-cal-doua { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
}
/* Clasa e `ae-avizier-panou`, nu `ae-cal-avizier`: fereastra asta stă acum și
   lângă calendar, și lângă traseu, din aceeași funcție. Un nume care spune
   „a calendarului" ar fi mințit din a doua zi. */
#ae-portal .ae-avizier-panou h3 { margin: 0 0 10px; font-size: 14px; }
/* Cardurile respiră: 12.5px într-o cutie de 336px se citea greu — AE: „Nu se
   vede scrisul". Un semn mai mare, rândurile mai depărtate, marginea mai
   largă. Aceeași măsură în amândouă ferestrele. */
#ae-portal .ae-avizier-panou .ae-notita { padding: 12px 14px; margin: 0 0 10px; }
#ae-portal .ae-avizier-panou .ae-notita h4 { margin: 0 0 4px; font-size: 13.5px; }
#ae-portal .ae-avizier-panou .ae-notita p {
	margin: 0 0 8px; font-size: 13px; line-height: 1.65; white-space: normal;
}
#ae-portal .ae-avizier-panou .ae-notita footer { font-size: 11.5px; }
#ae-portal .ae-avizier-panou .ae-limite { margin: 4px 0 0; }
/* Condeiul „+" și forma de scris, strânse pentru un panou îngust. */
#ae-portal .ae-avizier-panou .ae-avizier-plus { margin-bottom: 10px; }
#ae-portal .ae-avizier-panou .ae-avizier-scriu { background: var(--card-bg); margin-bottom: 10px; }
#ae-portal .ae-avizier-panou .ae-notita-muta { margin-top: 6px; }
#ae-portal .ae-avizier-panou .ae-notita-muta .ae-buton { font-size: 11.5px; padding: 4px 10px; }

/* ═══ Cronologia: povestea familiei, pe fir ═══
   Clase `ae-crono`, nu `ae-cronologie` — aia e a poveștilor (ecrane/povesti)
   și am mai plătit o dată lecția claselor împărțite, la ae-mesaj. Firul și
   punctele sunt aceleași ca acolo, ca ochiul să recunoască limbajul; blocurile
   sunt carduri întregi, ca în macheta lui AE. */
#ae-portal .ae-crono-cifre {
	display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
#ae-portal .ae-crono-cifra { padding: var(--sp-3) var(--sp-4); }
#ae-portal .ae-crono-cifra i {
	display: block; font-style: normal; font-size: 10.5px; letter-spacing: .8px;
	text-transform: uppercase; color: var(--ink-3);
}
#ae-portal .ae-crono-cifra b { display: block; margin-top: 2px; font-size: 21px; font-weight: 650; }

#ae-portal .ae-crono { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
#ae-portal .ae-crono::before {
	content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px;
	width: 2px; background: var(--br-700);
}
#ae-portal .ae-crono-moment { position: relative; padding-bottom: var(--sp-4); }
#ae-portal .ae-crono-moment:last-child { padding-bottom: 0; }
#ae-portal .ae-crono-moment::before {
	content: ''; position: absolute; left: -30px; top: 14px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--ac-400); box-shadow: 0 0 0 3px var(--bg-app);
}
#ae-portal .ae-crono-moment > .ae-card { padding: var(--sp-4) var(--sp-5); }
#ae-portal .ae-crono-cap { display: flex; align-items: center; gap: 10px; }
#ae-portal .ae-crono-cand {
	font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
	background: color-mix(in srgb, var(--br-700) 82%, transparent); color: #fff;
	letter-spacing: .3px; white-space: nowrap;
}
#ae-portal .ae-crono-cap em { font-style: normal; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-crono-sterg { margin-left: auto; color: var(--ink-3); text-decoration: none; }
#ae-portal .ae-crono-sterg:hover { color: var(--crit); }
#ae-portal .ae-crono-moment h3 { margin: 10px 0 4px; font-size: 16px; font-weight: 650; }
#ae-portal .ae-crono-moment > .ae-card > p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
#ae-portal .ae-crono-sub { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

#ae-portal .ae-crono-amintiri { margin-top: 10px; border-top: 1px solid var(--hairline); padding-top: 8px; }
/* „Lasă o amintire" ARATĂ CĂ SE APASĂ. Până acum era un rând de text îngroșat,
   pentru că sub el, fără creion, nu se deschidea nimic — era doar un contor.
   De când amintirea se poate lăsa fără creion, rândul ăsta e ușa pe care intră
   cel mai des cineva în cronologie, mai ales bunicii; un text care nu pare
   apăsabil e o ușă fără clanță. Are deci săgeată, se colorează la atingere și
   are înălțime de deget (≥32px cu tot cu spații) — regula lui AE: „tot ce
   facem să se vadă bine și de pe telefon și tabletă". */
#ae-portal .ae-crono-amintiri > summary {
	cursor: pointer; list-style: none; font-size: 12px; color: var(--ink-2); font-weight: 600;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 10px 7px 8px; margin: -4px 0 0 -8px; border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}
#ae-portal .ae-crono-amintiri > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-crono-amintiri > summary::before {
	content: '▾'; font-size: 10px; line-height: 1; color: var(--ink-3);
	transition: transform .15s ease;
}
#ae-portal .ae-crono-amintiri[open] > summary::before { transform: rotate(180deg); }
#ae-portal .ae-crono-amintiri > summary:hover,
#ae-portal .ae-crono-amintiri > summary:focus-visible {
	background: color-mix(in srgb, var(--surface-3) 80%, transparent); color: var(--ink-1);
}
#ae-portal .ae-crono-amintiri > summary:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
#ae-portal .ae-crono-amintire { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-md);
	background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
#ae-portal .ae-crono-amintire b { font-size: 12px; }
#ae-portal .ae-crono-amintire p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
#ae-portal .ae-crono-amintiri textarea, #ae-portal .ae-crono-forma input, #ae-portal .ae-crono-forma textarea {
	width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm, 6px);
	border: 1px solid var(--hairline); background: var(--surface-1);
	color: var(--ink-1); font-family: inherit; font-size: 13px;
}
#ae-portal .ae-crono-amintiri form p, #ae-portal .ae-crono-forma p { margin: 8px 0 0; }
#ae-portal .ae-crono-indrept { margin-top: 8px; }
#ae-portal .ae-crono-indrept > summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-crono-indrept > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-crono-forma label { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
#ae-portal .ae-crono-forma label i { font-style: normal; opacity: .8; }

/* Blocul de la coadă: punctat, ca în machetă — o invitație, nu un formular
   care stă mereu căscat. */
#ae-portal .ae-crono-nou > .ae-card { border-style: dashed; box-shadow: none;
	background: color-mix(in srgb, var(--card-bg) 55%, transparent); }
#ae-portal .ae-crono-nou summary { cursor: pointer; list-style: none; }
#ae-portal .ae-crono-nou summary::-webkit-details-marker { display: none; }
#ae-portal .ae-crono-nou summary b { display: block; font-size: 14.5px; }
#ae-portal .ae-crono-nou summary span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-crono-nou details[open] summary span { display: none; }

/* Reperele de eră pe fir + subsolul cu chip. Reperul stă PE linie, fără
   punct — nu e un moment, e un indicator de drum. */
#ae-portal .ae-crono-era { position: relative; padding: 2px 0 var(--sp-3); }
#ae-portal .ae-crono-era span {
	position: relative; left: -30px; display: inline-block;
	font-size: 10.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px;
	background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--hairline);
}
#ae-portal .ae-crono-sub { display: flex; align-items: center; gap: 7px; }
#ae-portal .ae-crono-sub .ae-chip { width: 22px; height: 22px; font-size: 9.5px; }

/* Îndreptatul, mutatul și trasul notițelor. */
#ae-portal .ae-notita-indrept { margin-top: 8px; }
#ae-portal .ae-notita-indrept > summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-notita-indrept > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-notita-indrept input, #ae-portal .ae-notita-indrept textarea {
	width: 100%; margin-top: 6px; padding: 7px 9px; border-radius: var(--r-sm, 6px);
	border: 1px solid var(--hairline); background: var(--surface-1);
	color: var(--ink-1); font-family: inherit; font-size: 12.5px;
}
#ae-portal .ae-notita-indrept p { margin: 6px 0 0; }
#ae-portal .ae-notita-mut { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-notita-mut select {
	padding: 4px 6px; border-radius: var(--r-sm, 6px); font-size: 12px;
	border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-1);
}
#ae-portal .ae-notita[draggable] { cursor: grab; }
#ae-portal .ae-notita.e-tras { opacity: .45; cursor: grabbing; }

/* Fereastra avizierului stă LÂNGĂ calendar, nu în marginea ecranului.
   Chenarul calendarului e plafonat la 880px (regula din 2.8.0, „calendarul nu
   se mai lățește pe monitorul mare") — dar grila întindea fereastra până în
   marginea dreaptă, cu un gol de-o palmă între ele. AE l-a văzut: „avizierul
   este destul de departe de calendar". Plafonăm grila la calendar + fereastră,
   și golul dispare. */
#ae-portal .ae-cal-doua { max-width: calc(880px + 24rem + var(--sp-4)); }

/* ═══ Traseu: „pe unde treci" și avizierul, pe același rând ═══
   Am pus întâi harta în coloana a doua. AE s-a uitat și s-a răzgândit pe loc:
   harta să rămână jos, lată, iar lângă formular să vină bilețelele de pe
   avizier — cu drept de scriere.

   Are dreptate, și motivul e de formă: o hartă e lată prin firea ei (un drum
   se citește pe orizontală) și, strânsă în jumătate de rând, pierde tocmai ce
   arată. Un avizier e o coloană de bilețele — forma lui firească e îngustă și
   înaltă, exact cât rămâne lângă formular.

   Coloana formularului e ținută la 26rem, cât cer căsuțele lui; restul e al
   avizierului. Sub 1100px se așază una sub alta — întâi scrii unde mergi, apoi
   vezi ce-ai de luat. Același prag ca la Plăți și la Calendar, ca portalul să
   se rupă peste tot la fel. */
#ae-portal .ae-traseu-doua { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
	/* DE LA 1100px: două coloane. Etapele stau SUB formular, în coloana din
	   stânga; avizierul ține coloana din dreapta pe toată înălțimea. Ordinea de
	   citit rămâne cea cerută — scrii, afli, iei cu tine. */
	#ae-portal .ae-traseu-doua {
		grid-template-columns: minmax(0, 26rem) minmax(0, 24rem);
		justify-content: space-between; align-items: start;
	}
	#ae-portal .ae-traseu-doua > .ae-traseu-unde  { grid-column: 1; grid-row: 1; }
	#ae-portal .ae-traseu-doua > .ae-traseu-etape { grid-column: 1; grid-row: 2; }
	#ae-portal .ae-traseu-doua > .ae-avizier-panou { grid-column: 2; grid-row: 1 / span 2; }
}
/* DE LA 1500px: trei coloane adevărate, cum a cerut AE — „intre sectiunea «pe
   unde treci» si «de luat pe drum»". Pragul e sus dinadins: sub el, coloana din
   mijloc ieșea de 120px, adică nume de orașe rupte pe trei rânduri. Mai bine
   etapele stau întregi sub formular decât înghesuite între două coloane.
   Am măsurat înainte să aleg pragul, nu după. */
@media (min-width: 1500px) {
	#ae-portal .ae-traseu-doua {
		grid-template-columns: minmax(0, 24rem) minmax(0, 1fr) minmax(0, 23rem);
		justify-content: normal;
	}
	#ae-portal .ae-traseu-doua > .ae-traseu-unde   { grid-column: 1; grid-row: 1; }
	#ae-portal .ae-traseu-doua > .ae-traseu-etape  { grid-column: 2; grid-row: 1; }
	#ae-portal .ae-traseu-doua > .ae-avizier-panou { grid-column: 3; grid-row: 1; }
}
#ae-portal .ae-traseu-doua > .ae-traseu-unde { margin: 0; }

/* ═══ Etapele: cât e de la o oprire la alta ═══
   Stă într-un CARD, ca vecinii de pe rând. Prima variantă era text gol între
   două cartonașe și arăta neterminată — AE m-a întrebat, pe bună dreptate,
   dacă m-am uitat și cu ochiul, nu doar cu rigla.

   Trei coloane pe rând: drumul (cât îi trebuie), bara de proporție (ia ce
   rămâne), cifra (la dreapta). Bara umple golul care înainte nu spunea nimic. */
#ae-portal .ae-traseu-etape { padding: var(--sp-4) var(--sp-5); }
#ae-portal .ae-traseu-etape h3 { margin: 0 0 10px; font-size: 14px; }
#ae-portal .ae-traseu-etape ol { list-style: none; margin: 0; padding: 0; }
#ae-portal .ae-traseu-etape li {
	display: grid; align-items: center; gap: var(--sp-3);
	/* Coloana numelor e FIXĂ, nu „cât îi trebuie": altfel fiecare bară pornea
	   din alt loc, după cât de lung e numele orașului, iar două bare care
	   pleacă din puncte diferite nu se mai pot compara din ochi — exact ce
	   trebuia să facă. O bară crește dintr-o singură linie de plecare. */
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) max-content;
	padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
#ae-portal .ae-traseu-etape li:first-child { padding-top: 0; }
#ae-portal .ae-etapa-drum { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
#ae-portal .ae-etapa-drum b { font-weight: 600; }
#ae-portal .ae-etapa-drum i { font-style: normal; color: var(--ink-3); margin: 0 5px; }
/* Bara: o singură culoare (e o mărime, nu categorii), subțire, pistă discretă,
   capăt rotunjit. Nu poartă informație pe care cifra de alături n-o spune. */
#ae-portal .ae-etapa-bara {
	position: relative; height: 6px; border-radius: 999px;
	background: color-mix(in srgb, var(--ink-3) 18%, transparent);
	min-width: 3rem;
}
#ae-portal .ae-etapa-bara > span {
	position: absolute; inset: 0 auto 0 0; display: block;
	border-radius: 999px; background: var(--br-400);
}
#ae-portal .ae-etapa-cat { text-align: right; white-space: nowrap; }
#ae-portal .ae-etapa-cat strong { display: block; font-size: 14px; font-weight: 650; }
#ae-portal .ae-etapa-cat em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
#ae-portal .ae-etapa-tot {
	display: flex; align-items: baseline; gap: var(--sp-3);
	margin: 10px 0 0; padding-top: 10px; border-top: 2px solid var(--hairline);
}
#ae-portal .ae-etapa-tot span { flex: 1 1 auto; font-size: 13px; color: var(--ink-2); }
#ae-portal .ae-etapa-tot strong { font-size: 15px; font-weight: 700; }
#ae-portal .ae-etapa-tot em { font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-left: 8px; }
#ae-portal .ae-traseu-etape .ae-limite { margin: 10px 0 0; }
/* Pe îngust bara iese din rând: numele orașelor și cifra au întâietate. */
@media (max-width: 560px) {
	#ae-portal .ae-traseu-etape li { grid-template-columns: minmax(0, 1fr) max-content; }
	#ae-portal .ae-etapa-bara { display: none; }
	#ae-portal .ae-etapa-drum { white-space: normal; }
}

/* „Arată mai mult" pe bilețelele din ferestre.
   `details`, nu JavaScript: merge și dacă scriptul cade, e găsit de cititoarele
   de ecran ca ce e (un lucru care se desface), și se poate căuta cu Ctrl+F în
   browserele care caută și în conținutul strâns. Când e deschis, rândul scurt
   se retrage și rămâne textul întreg — altfel l-ai citi de două ori. */
#ae-portal .ae-notita-mult > summary {
	cursor: pointer; list-style: none; display: block;
	font-size: 13px; line-height: 1.65; color: var(--ink-2); margin: 0 0 8px;
}
#ae-portal .ae-notita-mult > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-notita-cheie {
	display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 600;
	color: var(--ae-aur); text-decoration: underline; text-underline-offset: 2px;
}
#ae-portal .ae-notita-mult[open] > summary .ae-notita-scurt { display: none; }
#ae-portal .ae-notita-mult[open] > summary { margin: 0 0 4px; }
/* Cheia își schimbă vorba fără JavaScript: două cuvinte, unul ascuns. */
#ae-portal .ae-notita-cheie i { font-style: normal; }
#ae-portal .ae-notita-mult .ae-mai-putin,
#ae-portal .ae-notita-mult[open] .ae-mai { display: none; }
#ae-portal .ae-notita-mult[open] .ae-mai-putin { display: inline; }
#ae-portal .ae-notita-mult[open] > summary .ae-notita-cheie { margin-left: 0; }
#ae-portal .ae-notita-mult > p {
	margin: 0 0 8px; font-size: 13px; line-height: 1.65; color: var(--ink-2); white-space: normal;
}

/* ═══ Știri: două niveluri de file, nu unul singur repetat ═══
   Documentarea de tab-uri (NN/g) spune trei lucruri pe care le încălcam:
   filele să stea pe UN SINGUR RÂND (stivuite, pierd memoria locului), starea
   aleasă să aibă CEL PUȚIN DOUĂ semne (nu doar o nuanță), și filele de nivel
   diferit să NU arate la fel — altfel omul nu știe care schimbă pagina și care
   doar cerne ce e pe ea.

   Deci: rândul de sus sunt FILE (fundal plin + literă îngroșată + linie sub =
   trei semne), rândul de dedesubt sunt CIURURI (contur subțire, mai mici, fără
   fundal). Pe îngust rândul de sus derulează pe orizontală în loc să se rupă
   pe două rânduri, cu marginile estompate ca să se vadă că mai e. */
#ae-portal .ae-file-mari {
	display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	padding-bottom: 2px; margin-bottom: var(--sp-3);
	border-bottom: 1px solid var(--hairline);
	/* marginile se sting, ca semn că lista continuă dincolo de ecran */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
#ae-portal .ae-file-mari::-webkit-scrollbar { display: none; }
#ae-portal .ae-file-mari .ae-pastila {
	flex: 0 0 auto; position: relative; border-radius: var(--r-md) var(--r-md) 0 0;
	font-size: 13.5px;
}
#ae-portal .ae-file-mari .ae-pastila.e-aleasa { font-weight: 700; }
#ae-portal .ae-file-mari .ae-pastila.e-aleasa::after {
	content: ''; position: absolute; left: 10px; right: 10px; bottom: -3px;
	height: 3px; border-radius: 3px 3px 0 0; background: var(--ae-aur);
}
/* Cifra de pe filă e o notă de subsol, nu o a doua etichetă. */
#ae-portal .ae-file-mari .ae-pastila b { font-weight: 600; opacity: .75; font-size: 11px; }

/* Nivelul al doilea: ciururi, nu file. Fără fundal plin, ca să nu se bată cu
   rândul de sus pentru atenție. */
#ae-portal .ae-file-mici { margin-bottom: var(--sp-3); }
#ae-portal .ae-file-mici .ae-pastila {
	background: transparent; border: 1px solid var(--hairline); font-size: 12.5px;
}
#ae-portal .ae-file-mici .ae-pastila.e-aleasa {
	background: color-mix(in srgb, var(--br-600) 14%, transparent);
	border-color: color-mix(in srgb, var(--br-600) 45%, transparent);
	font-weight: 650;
}

/* Adresa unui flux, corectabilă din creion. */
#ae-portal .ae-stiri-adresa {
	display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
	padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
#ae-portal .ae-stiri-adresa label { flex: 1 1 22rem; min-width: 0; }
#ae-portal .ae-stiri-adresa label span {
	display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 3px;
}
#ae-portal .ae-stiri-adresa input {
	width: 100%; padding: 7px 9px; border-radius: var(--r-sm, 6px);
	border: 1px solid var(--hairline); background: var(--surface-1);
	color: var(--ink-1); font-family: inherit; font-size: 12px;
}
#ae-portal .ae-stiri-adresa > a { font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-surse-adresa em { font-style: normal; color: var(--ae-aur); }

/* Rândul de adevăr de sub fiecare sursă: ce a adus ea, de fapt. Ia toată
   lățimea (deci trece pe rândul lui sub câmp) fiindcă e o propoziție, nu o
   etichetă — iar propozițiile înghesuite lângă un buton nu se citesc. */
#ae-portal .ae-stiri-adresa-stare {
	flex: 1 0 100%; font-style: normal; font-size: 11.5px;
	color: var(--ink-3, var(--ink-2)); padding-bottom: 2px;
}
/* Sursa care tace se vede din capul locului. NU doar prin culoare: are semnul
   „⚠" în text și vorba scrisă întreagă — cine n-o distinge, o citește. */
#ae-portal .ae-stiri-adresa.e-tace .ae-stiri-adresa-stare { color: var(--warn, var(--ink-2)); font-weight: 600; }
#ae-portal .ae-stiri-adresa.e-tace label span { font-weight: 650; }

/* ═══ Cronologia: perioada, citatul, pozele, sunetul, reperele ═══ */
#ae-portal .ae-crono-perioada {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 var(--sp-4);
}
#ae-portal .ae-crono-perioada label { font-size: 12.5px; color: var(--ink-2); }
#ae-portal .ae-crono-perioada select {
	padding: 7px 10px; border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--card-bg);
	color: var(--ink-1); font-family: inherit; font-size: 13px; max-width: 20rem;
}
#ae-portal .ae-crono-perioada.e-cu-js button { display: none; }

#ae-portal .ae-crono-citat {
	margin: 10px 0 0; padding: 8px 0 8px 14px;
	border-left: 3px solid color-mix(in srgb, var(--br-400) 60%, transparent);
	font-size: 14px; line-height: 1.6; color: var(--ink-1); font-style: italic;
}
#ae-portal .ae-crono-citat::before { content: '„'; }
#ae-portal .ae-crono-citat::after  { content: '"'; }

/* Pozele: o grilă care se umple singură, ca în macheta lui — trei pătrate sub
   poveste. `aspect-ratio` ține rândul drept chiar dacă pozele sunt de forme
   diferite; ce iese din pătrat se taie, nu deformează omul din poză. */
#ae-portal .ae-crono-poze {
	display: grid; gap: 8px; margin-top: 12px;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
#ae-portal .ae-crono-poze figure { position: relative; margin: 0; }
#ae-portal .ae-crono-poze img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: var(--r-md); border: 1px solid var(--hairline);
}
#ae-portal .ae-crono-scot {
	position: absolute; top: 4px; right: 6px; z-index: 1;
	width: 22px; height: 22px; display: grid; place-items: center;
	border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
	text-decoration: none; font-size: 14px; line-height: 1;
}
#ae-portal .ae-crono-sunete { margin-top: 12px; display: grid; gap: 8px; }
#ae-portal .ae-crono-sunet {
	position: relative; padding: 10px 12px; border-radius: var(--r-md);
	background: color-mix(in srgb, var(--surface-3) 70%, transparent);
}
#ae-portal .ae-crono-sunet span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
#ae-portal .ae-crono-sunet audio { width: 100%; height: 34px; }
#ae-portal .ae-crono-sunet .ae-crono-scot { top: 8px; right: 8px; }

/* Reperele: cartonașe care NUMĂRĂ, deci nu pot minți. */
#ae-portal .ae-crono-repere { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
#ae-portal .ae-crono-repere span {
	font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
	background: color-mix(in srgb, var(--surface-3) 80%, transparent);
	color: var(--ink-2); border: 1px solid var(--hairline);
}
#ae-portal .ae-crono-pun { margin-top: 10px; }
#ae-portal .ae-crono-pun > summary {
	cursor: pointer; list-style: none; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
}
#ae-portal .ae-crono-pun > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-crono-pun input[type="file"] {
	display: block; width: 100%; margin-top: 4px; font-size: 12px; color: var(--ink-2);
}

/* Rândul care spune unde e creionul, pe ecranele care doar se privesc. */
#ae-portal .ae-crono-doar-vad {
	margin: 0 0 var(--sp-4); padding: 10px 14px; border-radius: var(--r-md);
	background: color-mix(in srgb, var(--surface-3) 70%, transparent);
	border: 1px dashed var(--hairline);
}

/* ═══ ARBORELE GENEALOGIC — după macheta aprobată ═════════════════════════
   Grila cu puterile lui doi: rândul de sus câte o coloană de om, fiecare
   generație de dedesubt de două ori mai lată — copilul cade exact sub
   părinți, din grilă, fără nicio socoteală de mână. Lățimea coloanelor vine
   din `--arb-col`, pusă de ecran după adâncimea arborelui. */
#ae-portal .ae-arbore-cap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
#ae-portal .ae-arbore-cap .ae-arbore-curat { margin-left: auto; }
/* ÎNCADRAREA ARBORELUI (v166).

   AE: „Putem face si pentru arborele genealogic sa se vada cat mai bine toti
   descendentii ca la atlas… Oare putem sa incadram pe toti, castigam spatiu?"

   Ce era: coloanele se împărțeau `1fr`, adică se STRÂNGEAU cât era nevoie ca
   toate să intre în lățimea cutiei. Cu patru trepte (șaisprezece locuri pe
   rând) și un ecran de laptop, un om primea 59 de puncte — cât să-i rupă
   numele în bucăți: „Străbunic / 1", „stră- / străbunicul". Încăpea, dar nu
   se mai citea. Adică exact ce a văzut AE: „nu se mai vedea bine".

   Ce e acum, și e chiar ce a ales el dintre variante: nu mai strâng coloanele
   sub o lățime la care numele se citesc (`--arb-min`), ci MICȘOREZ TOT
   ARBOREUL cât să încapă — cu o limită. Sub limită nu mai cobor: rămâne
   derularea pe orizontală, ca până acum. Un arbore pe care nu-l poți citi nu
   e un arbore încadrat, e o pată. Socoteala o face motorul, la fiecare
   schimbare de lățime — vezi `incadreazaArborele()`. */
#ae-portal .ae-arbore-cutie { overflow-x: auto; padding-bottom: 8px; }
/* Rama poartă micșorarea, ca derularea de deasupra să rămână cinstită: fără
   ea, `transform` ar lăsa cutia să creadă că înăuntru e tot lucrul mare. */
#ae-portal .ae-arbore-rama { transform-origin: top left; }
#ae-portal .ae-arbore {
	min-width: calc(var(--arb-col, 8) * max(var(--arb-lat, 54px), var(--arb-min, 0px)));
}
#ae-portal .ae-arbore-rand, #ae-portal .ae-arbore-punte {
	display: grid; grid-template-columns: repeat(var(--arb-col, 8), 1fr);
}
#ae-portal .ae-arbore-gen {
	margin: 0 0 10px 6px; font-size: 10.5px; letter-spacing: 1.4px;
	text-transform: uppercase; color: var(--ink-3);
}
#ae-portal .ae-arbore-loc { display: flex; flex-direction: column; align-items: center; padding: 0 4px; min-width: 0; position: relative; }
#ae-portal .ae-om {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	text-decoration: none; color: inherit; min-width: 0; max-width: 100%;
}
#ae-portal .ae-om-chip {
	width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
	display: grid; place-items: center; font-style: normal;
	font-size: 24px; font-weight: 650; color: #fff;
	background: var(--br-500); border: 3px solid var(--br-400);
	box-shadow: var(--umbra-1); transition: transform .15s ease;
}
#ae-portal a.ae-om:hover .ae-om-chip { transform: scale(1.07); }
#ae-portal .ae-om--mama .ae-om-chip { background: var(--ac-500); border-color: var(--ac-400); }
#ae-portal .ae-om--radacina .ae-om-chip {
	width: 84px; height: 84px; font-size: 30px;
	background: var(--ac-400); border-color: var(--ac-300); color: #2b1d08;
}
#ae-portal .ae-om b { margin-top: 7px; font-size: 13.5px; font-weight: 650; line-height: 1.25; }
#ae-portal .ae-om--radacina b { font-size: 17px; }
#ae-portal .ae-om u { text-decoration: none; margin-top: 1px; font-size: 11px; color: var(--ink-2); }
#ae-portal .ae-om em { font-style: normal; margin-top: 1px; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#ae-portal .ae-om s { text-decoration: none; font-size: 10.5px; color: var(--ink-3); }
/* mărimile scad cu depărtarea: nivelul 4 mai mic, 5 doar cerc și nume */
#ae-portal .n4 .ae-om-chip { width: 46px; height: 46px; font-size: 17px; }
#ae-portal .n4 .ae-om b { font-size: 11px; }
#ae-portal .n4 .ae-om u, #ae-portal .n4 .ae-om s { font-size: 9.5px; }
#ae-portal .n5 .ae-om-chip { width: 30px; height: 30px; font-size: 13px; border-width: 2px; }
#ae-portal .n5 .ae-om b { font-size: 9px; }
#ae-portal .n5 .ae-om u, #ae-portal .n5 .ae-om em, #ae-portal .n5 .ae-om s { font-size: 8.5px; }
/* Rândurile de sus de tot: 64 și 128 de locuri. Acolo nu mai încape o fișă de
   om, și nici n-are ce încăpea — la depărtarea aia se știe un nume, rareori un
   an. Deci chipul se face bob, iar din text rămâne numele. Locurile GOALE își
   pierd și întrebarea („tatăl lui Toader · îl mai știe cineva?"): o sută de
   întrebări una lângă alta nu e o invitație, e un zid. Rămân puncte punctate,
   pe care tot se apasă ca să pui pe cineva — iar cine vrea liniște are
   „Doar cine e știut", care le stinge de tot. */
#ae-portal .n6 .ae-om-chip { width: 22px; height: 22px; font-size: 10px; border-width: 2px; }
#ae-portal .n6 .ae-om b { font-size: 8px; margin-top: 4px; line-height: 1.15; }
#ae-portal .n6 .ae-om u, #ae-portal .n6 .ae-om em, #ae-portal .n6 .ae-om s { display: none; }
#ae-portal .n7 .ae-om-chip { width: 14px; height: 14px; font-size: 7px; border-width: 1.5px; }
/* Pe rândul de sus de tot, numele stau ÎN PICIOARE, ca etichetele de muzeu.
   Culcate n-au unde: locul e de 22 px, iar „Toader" și „Profira" alăturați se
   suprapuneau într-un „ToadeProfira" — l-am văzut în desen și de-aia scrie
   așa. Întoarse, fiecare nume stă în coloana lui și se citește de jos în sus. */
#ae-portal .n7 .ae-om b {
	font-size: 8px; margin-top: 4px; line-height: 1; font-weight: 600;
	writing-mode: vertical-rl; transform: rotate(180deg);
	max-height: 64px; overflow: hidden; white-space: nowrap;
}
#ae-portal .n7 .ae-om u, #ae-portal .n7 .ae-om em, #ae-portal .n7 .ae-om s { display: none; }
#ae-portal .n6 .ae-om--gol b, #ae-portal .n7 .ae-om--gol b { display: none; }
#ae-portal .n6 .ae-arbore-unelte, #ae-portal .n7 .ae-arbore-unelte { display: none; }
#ae-portal .n6 .ae-arbore-loc, #ae-portal .n7 .ae-arbore-loc { padding: 0 1px; }

/* locul gol: invitația cu întrebarea lui */
#ae-portal .ae-om--gol .ae-om-chip {
	background: transparent; border-style: dashed; border-color: var(--ink-3);
	color: var(--ink-3); font-weight: 500;
}
#ae-portal .ae-om--gol b { color: var(--ink-3); font-weight: 550; }
#ae-portal a.ae-om--gol:hover .ae-om-chip { border-color: var(--br-400); color: var(--br-400); }
#ae-portal .ae-om--departe { opacity: .4; }
#ae-portal .ascunde-goluri .ae-om--gol { visibility: hidden; }
#ae-portal .ascunde-goluri .ae-om--departe { display: none; }

/* uneltele creionului, discrete lângă om */
#ae-portal .ae-arbore-unelte { margin-top: 4px; display: inline-flex; gap: 10px; }
#ae-portal .ae-arbore-unelte a { font-size: 12px; color: var(--ink-3); text-decoration: none; }
#ae-portal .ae-arbore-unelte a:hover { color: var(--ink-1); }
#ae-portal .ae-arbore-indrept { width: 100%; max-width: 240px; }

/* punțile ┌─┴─┐: brațele spre părinți, bara căsniciei, piciorul spre copil */
#ae-portal .ae-arbore-punte { height: 30px; margin: 5px 0; }
#ae-portal .ae-arbore-leg { position: relative; }
#ae-portal .ae-arbore-leg i, #ae-portal .ae-arbore-leg em {
	position: absolute; top: -6px; height: 6px; border-left: 2px solid var(--axis, var(--hairline));
}
#ae-portal .ae-arbore-leg i { left: 25%; }
#ae-portal .ae-arbore-leg em { right: calc(25% - 2px); }
#ae-portal .ae-arbore-leg b { position: absolute; top: 0; left: 25%; right: 25%; border-top: 2px solid var(--axis, var(--hairline)); }
#ae-portal .ae-arbore-leg b::after {
	content: ""; position: absolute; top: 0; bottom: -30px; left: 50%;
	border-left: 2px solid var(--axis, var(--hairline)); transform: translateX(-1px);
	height: 28px;
}

/* formularul de adăugat + drumul până la Evelina */
#ae-portal .ae-arbore-forma { padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); max-width: 460px; }
#ae-portal .ae-arbore-forma h3 { margin: 0 0 4px; }
#ae-portal .ae-arbore-drum { padding: var(--sp-4) var(--sp-5); }
#ae-portal .ae-arbore-drum h3 { margin: 0 0 10px; font-size: 15px; }
#ae-portal .ae-arbore-fir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ae-portal .ae-arbore-pas { display: flex; flex-direction: column; align-items: center; width: 70px; text-align: center; }
#ae-portal .ae-arbore-pas .ae-om-chip { width: 44px; height: 44px; font-size: 16px; border-width: 2px; }
#ae-portal .ae-arbore-pas b { margin-top: 4px; font-size: 11px; font-weight: 600; }
#ae-portal .ae-arbore-sageata { color: var(--ink-3); }
#ae-portal .ae-arbore-trage { display: none; }
@media (max-width: 900px) {
	#ae-portal .ae-arbore-trage { display: block; }
	#ae-portal .ae-om-chip { width: 48px; height: 48px; font-size: 18px; }
	#ae-portal .ae-om--radacina .ae-om-chip { width: 68px; height: 68px; }
	#ae-portal .ae-om b { font-size: 11px; }
	#ae-portal .ae-om u, #ae-portal .ae-om em, #ae-portal .ae-om s { font-size: 9px; }
}

/* ═══ Cercetare: articolele lui AE și citările lor ═══
   Un ecran de citit și de descărcat, nu de umblat prin el: cifrele mari sus,
   barele anilor, apoi lista pe ani. Clase `ae-cerc`, ca să nu se calce cu
   `ae-crono` (cronologia) sau `ae-cerere` dacă apare vreodată una. */

#ae-portal .ae-cerc-cap {
	display: flex; flex-wrap: wrap; gap: var(--sp-3);
	align-items: center; justify-content: space-between; margin-bottom: var(--sp-3);
}
#ae-portal .ae-cerc-cifre { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
#ae-portal .ae-cerc-cifra {
	background: var(--card-bg); border: 1px solid var(--hairline);
	border-radius: var(--r-md); padding: 10px 18px; text-align: center; min-width: 92px;
}
#ae-portal .ae-cerc-cifra b { display: block; font-size: 24px; line-height: 1.2; }
#ae-portal .ae-cerc-cifra span { font-size: 12px; color: var(--ink-2); }
#ae-portal .ae-cerc-afara { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Barele citărilor: fiecare an o coloană, cea mai plină urcă toată. Înălțimea
   vine din variabila `--sus`, scrisă de PHP — fără JavaScript, fără librării.
   Butucul e jos, ca într-un grafic adevărat: `align-items: flex-end`. */
#ae-portal .ae-cerc-bare {
	display: flex; align-items: flex-end; gap: 10px;
	padding: var(--sp-2) 0 0; overflow-x: auto;
}
#ae-portal .ae-cerc-bara {
	display: flex; flex-direction: column; align-items: center;
	gap: 4px; min-width: 44px;
}
#ae-portal .ae-cerc-bara b { font-size: 12px; }
/* `--sus` e un număr curat de la 0 la 100, scris de PHP; înălțimea barei =
   8px talpă + până la 90px deasupra. Număr, nu procent: un procent în calc()
   s-ar raporta la înălțimea părintelui, care aici e chiar bara — un cerc. */
#ae-portal .ae-cerc-bara i {
	display: block; width: 26px; height: calc(8px + 0.9px * var(--sus, 0));
	background: linear-gradient(180deg, var(--ac-400), var(--ac-500));
	border-radius: 6px 6px 3px 3px;
}
#ae-portal .ae-cerc-bara span { font-size: 11.5px; color: var(--ink-2); }

#ae-portal .ae-cerc-an {
	margin: var(--sp-4) 0 var(--sp-2); font-size: 15px;
	border-bottom: 1px solid var(--hairline); padding-bottom: 6px;
}
#ae-portal .ae-cerc-lucrare {
	background: var(--card-bg); border: 1px solid var(--hairline);
	border-radius: var(--r-md); padding: 14px 16px; margin-bottom: var(--sp-2);
}
#ae-portal .ae-cerc-lucrare h4 { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; }
#ae-portal .ae-cerc-lucrare h4 a { text-decoration: none; }
#ae-portal .ae-cerc-lucrare h4 a:hover { text-decoration: underline; }
#ae-portal .ae-cerc-autori { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
#ae-portal .ae-cerc-unde { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); }
#ae-portal .ae-cerc-doi { margin-left: 8px; font-variant-numeric: tabular-nums; }
#ae-portal .ae-cerc-citari { margin: 0; font-size: 13px; }
#ae-portal .ae-cerc-citari b { font-size: 15px; }
#ae-portal .ae-cerc-pe-ani { color: var(--ink-2); font-size: 12px; }

/* Un articol ascuns cu creionul rămâne vizibil DOAR purtătorilor de creion,
   stins — ca să se vadă că e ascuns, nu pierdut. Ceilalți nu-l primesc deloc
   (filtrarea e în PHP; aici e doar hainele). */
#ae-portal .ae-cerc-lucrare.e-ascunsa { opacity: 0.45; }
#ae-portal .ae-cerc-ascunde { margin-top: 8px; }
#ae-portal .ae-cerc-ascunde .ae-buton { font-size: 12px; padding: 5px 12px; }

#ae-portal .ae-cerc-jos {
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
	align-items: center; justify-content: space-between; margin-top: var(--sp-4);
}
#ae-portal .ae-cerc-descarca { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
#ae-portal .ae-cerc-descarca span { font-size: 13px; color: var(--ink-2); }
#ae-portal .ae-cerc-stare { margin: 0; font-size: 12px; color: var(--ink-2); }

@media (max-width: 640px) {
	#ae-portal .ae-cerc-cifra { padding: 8px 12px; min-width: 76px; }
	#ae-portal .ae-cerc-cifra b { font-size: 20px; }
	#ae-portal .ae-cerc-bara { min-width: 36px; }
}

/* „Cine te-a citat" — strâns sub un rând, ca să nu lungească pagina; se
   desface fără JavaScript (details), cu numărul la vedere pe rândul închis. */
#ae-portal .ae-cerc-cine { margin: 8px 0 0; }
#ae-portal .ae-cerc-cine > summary {
	cursor: pointer; font-size: 12.5px; color: var(--ink-2);
	list-style: none; display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border: 1px solid var(--hairline); border-radius: 999px;
}
#ae-portal .ae-cerc-cine > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-cerc-cine > summary b { font-size: 12px; }
#ae-portal .ae-cerc-cine[open] > summary { margin-bottom: 6px; }
#ae-portal .ae-cerc-cine ol { margin: 0; padding-left: 22px; }
#ae-portal .ae-cerc-cine li { font-size: 12.5px; line-height: 1.6; margin-bottom: 6px; }
#ae-portal .ae-cerc-cine-cine { display: block; color: var(--ink-2); font-size: 11.5px; }
#ae-portal .ae-cerc-auto { font-style: normal; opacity: 0.8; border-bottom: 1px dotted currentColor; }

/* Semnul purtătorului de creion pe un articol din afara listei Scholar. */
#ae-portal .ae-cerc-nescholar { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }

/* Neprinsele: la vedere, nu în subsol — lipsa e o informație, nu o rușine. */
#ae-portal .ae-cerc-neprinse { margin-top: var(--sp-4); }
#ae-portal .ae-cerc-neprinse h3 { margin: 0 0 6px; font-size: 14px; }
#ae-portal .ae-cerc-neprinse-vorba { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
#ae-portal .ae-cerc-neprinse ul { margin: 0; padding-left: 20px; }
#ae-portal .ae-cerc-neprinse li { font-size: 13px; line-height: 1.6; margin-bottom: 4px; }

/* Caseta cu lista de la Scholar: deschisă singură doar cât timp e goală. */
#ae-portal .ae-cerc-scholar { margin-top: var(--sp-4); }
#ae-portal .ae-cerc-scholar > summary {
	cursor: pointer; font-size: 13.5px; font-weight: 600;
	display: inline-flex; align-items: center; gap: 8px;
}
#ae-portal .ae-cerc-scholar > summary b { font-size: 12.5px; color: var(--ink-2); font-weight: 400; }
#ae-portal .ae-cerc-scholar p { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; margin: 6px 0 8px; }
#ae-portal .ae-cerc-scholar textarea {
	width: 100%; box-sizing: border-box; margin-bottom: 8px;
	background: var(--card-bg); color: var(--ink-1);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.5;
}

/* ═══ Arbore: pozele oamenilor ═══
   Chipul cu poză ia locul inițialei — rotund, tăiat pe mijloc, ca la orice
   agendă de telefon. Foaia de poze e un card ca formularul de adăugat. */
#ae-portal .ae-om-chip--poza {
	background-size: cover; background-position: center 30%;
	color: transparent; text-shadow: none;
}
#ae-portal .ae-arbore-unelte a { text-decoration: none; }
#ae-portal .ae-arbore-poze-profil { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
#ae-portal .ae-arbore-poze-profil img {
	width: 132px; height: 132px; object-fit: cover; border-radius: 50%;
	border: 2px solid var(--hairline); display: block;
}
#ae-portal .ae-arbore-poze-grila { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
#ae-portal .ae-arbore-poza { position: relative; display: inline-block; }
#ae-portal .ae-arbore-poza img {
	width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-md);
	border: 1px solid var(--hairline); display: block;
}
#ae-portal .ae-arbore-poza-x {
	position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--card-bg); border: 1px solid var(--hairline);
	text-decoration: none; font-size: 14px; line-height: 1; z-index: 2;
}
#ae-portal .ae-arbore-poze input[type="file"] { font-size: 13px; }

/* ═══ Panou: cercetarea, în trei rânduri ═══
   Aceeași croială cu cardul de plăți — semn, text, săgeată — dar textul e o
   coloană cu câte un rând de om: nume, apoi cifrele lui. */
#ae-portal .ae-panou-cerc {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
	background: var(--surface-2); border: 1px solid var(--hairline);
	text-decoration: none; color: inherit;
}
#ae-portal .ae-panou-cerc:hover { background: var(--glass-strong); }
#ae-portal .ae-panou-cerc-oameni { flex: 1; min-width: 0; display: grid; gap: 4px; }
#ae-portal .ae-panou-cerc-om { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
#ae-portal .ae-panou-cerc-om b { font-size: 13.5px; }
#ae-portal .ae-panou-cerc-om i { font-style: normal; font-size: 12.5px; color: var(--ink-2); }

/* Alegerea fișierului de la Scholar — deasupra casetei de lipit. */
#ae-portal .ae-cerc-fisier { display: block; font-size: 13px; margin-bottom: 8px; }
#ae-portal .ae-cerc-fisier input { display: block; margin-top: 4px; font-size: 13px; }

/* ═══ Arbore: codul genetic, în depărtare ═══
   AE: „Poți să lași în spate să se anime codul genetic, dar sublim, în
   depărtare?" Două elice duble — una mai aproape, una mai mică, mai
   „departe" — urcă nesfârșit în spatele copacului, abia văzute. Dacă bat la
   ochi, nu sunt sublime: opacitatea stă la câteva sutimi, mersul e lent
   (aproape un minut pe răsucire), iar cine și-a cerut în sistem mai puțină
   mișcare le vede stând. Desenul e în CSS, nu în pagină: zero cereri, zero
   JavaScript. */
#ae-portal .ae-arbore-cutie { position: relative; }
#ae-portal .ae-arbore-cutie > .ae-arbore { position: relative; z-index: 1; }
#ae-portal .ae-arbore-adn {
	position: absolute; inset: 0; overflow: hidden;
	pointer-events: none; z-index: 0; opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236f9c80%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M110%2C0%20C155%2C33%20180%2C63%20180%2C100%20C180%2C137%20155%2C167%20110%2C200%20C65%2C233%2040%2C263%2040%2C300%20C40%2C337%2065%2C367%20110%2C400%22%2F%3E%3Cpath%20d%3D%22M110%2C0%20C65%2C33%2040%2C63%2040%2C100%20C40%2C137%2065%2C167%20110%2C200%20C155%2C233%20180%2C263%20180%2C300%20C180%2C337%20155%2C367%20110%2C400%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%236f9c80%22%20stroke-width%3D%221.4%22%3E%3Cline%20x1%3D%2288%22%20y1%3D%2220%22%20x2%3D%22132%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%2255%22%20x2%3D%22163%22%20y2%3D%2255%22%2F%3E%3Cline%20x1%3D%2240%22%20y1%3D%22100%22%20x2%3D%22180%22%20y2%3D%22100%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22145%22%20x2%3D%22163%22%20y2%3D%22145%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22180%22%20x2%3D%22132%22%20y2%3D%22180%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22220%22%20x2%3D%22132%22%20y2%3D%22220%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22255%22%20x2%3D%22163%22%20y2%3D%22255%22%2F%3E%3Cline%20x1%3D%2240%22%20y1%3D%22300%22%20x2%3D%22180%22%20y2%3D%22300%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22345%22%20x2%3D%22163%22%20y2%3D%22345%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22380%22%20x2%3D%22132%22%20y2%3D%22380%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236f9c80%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M110%2C0%20C155%2C33%20180%2C63%20180%2C100%20C180%2C137%20155%2C167%20110%2C200%20C65%2C233%2040%2C263%2040%2C300%20C40%2C337%2065%2C367%20110%2C400%22%2F%3E%3Cpath%20d%3D%22M110%2C0%20C65%2C33%2040%2C63%2040%2C100%20C40%2C137%2065%2C167%20110%2C200%20C155%2C233%20180%2C263%20180%2C300%20C180%2C337%20155%2C367%20110%2C400%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%236f9c80%22%20stroke-width%3D%221.4%22%3E%3Cline%20x1%3D%2288%22%20y1%3D%2220%22%20x2%3D%22132%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%2255%22%20x2%3D%22163%22%20y2%3D%2255%22%2F%3E%3Cline%20x1%3D%2240%22%20y1%3D%22100%22%20x2%3D%22180%22%20y2%3D%22100%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22145%22%20x2%3D%22163%22%20y2%3D%22145%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22180%22%20x2%3D%22132%22%20y2%3D%22180%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22220%22%20x2%3D%22132%22%20y2%3D%22220%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22255%22%20x2%3D%22163%22%20y2%3D%22255%22%2F%3E%3Cline%20x1%3D%2240%22%20y1%3D%22300%22%20x2%3D%22180%22%20y2%3D%22300%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22345%22%20x2%3D%22163%22%20y2%3D%22345%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22380%22%20x2%3D%22132%22%20y2%3D%22380%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: repeat-y, repeat-y;
	background-size: 220px 400px, 130px 236px;
	background-position: 4% 0px, 94% 90px;
	animation: ae-adn-urca 52s linear infinite;
}
[data-mod="noapte"] #ae-portal .ae-arbore-adn { opacity: 0.1; }
@keyframes ae-adn-urca {
	from { background-position: 4% 0px, 94% 90px; }
	to   { background-position: 4% -400px, 94% -146px; }
}
@media (prefers-reduced-motion: reduce) {
	#ae-portal .ae-arbore-adn { animation: none; }
}

/* Aducerea citatorilor de la Scholar — pitită în lista „cine te-a citat". */
#ae-portal .ae-cerc-aduc { margin: 8px 0 0 22px; }
#ae-portal .ae-cerc-aduc > summary {
	cursor: pointer; font-size: 12px; color: var(--ink-2); list-style: none;
	display: inline-block; border-bottom: 1px dashed var(--hairline);
}
#ae-portal .ae-cerc-aduc > summary::-webkit-details-marker { display: none; }
#ae-portal .ae-cerc-aduc p { font-size: 12px; color: var(--ink-2); line-height: 1.6; margin: 6px 0; }
#ae-portal .ae-cerc-aduc textarea {
	width: 100%; box-sizing: border-box; margin: 6px 0;
	background: var(--card-bg); color: var(--ink-1);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	padding: 8px 10px; font: inherit; font-size: 12.5px;
}
#ae-portal .ae-cerc-aduc .ae-buton { font-size: 12px; padding: 5px 12px; }

/* Insigna de indexare a unei reviste: „SSCI · Scopus" — mică, lângă nume. */
#ae-portal .ae-cerc-idx {
	display: inline-block; margin-left: 6px; padding: 1px 7px;
	font-size: 10.5px; letter-spacing: 0.02em; border-radius: 999px;
	border: 1px solid var(--hairline); color: var(--ink-2); white-space: nowrap;
}
/* Panoul revistelor: un rând pe revistă — numele, apoi uneltele. */
#ae-portal .ae-cerc-jurnale-lista { list-style: none; margin: 0; padding: 0; }
#ae-portal .ae-cerc-jurnale-lista li {
	display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
	justify-content: space-between; padding: 7px 0;
	border-bottom: 1px solid var(--hairline); font-size: 13px;
}
#ae-portal .ae-cerc-jurnal-unelte { display: inline-flex; gap: 10px; align-items: center; }
#ae-portal .ae-cerc-jurnal-unelte form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
#ae-portal .ae-cerc-jurnal-unelte select {
	background: var(--card-bg); color: var(--ink-1);
	border: 1px solid var(--hairline); border-radius: var(--r-md);
	padding: 3px 6px; font-size: 12px;
}
#ae-portal .ae-cerc-jurnal-unelte .ae-buton { font-size: 11.5px; padding: 3px 10px; }
#ae-portal .ae-cerc-jurnal-unelte a { font-size: 12px; }

/* Foaia revistelor (v111): șablonul care pleacă gol și se întoarce cu
   AIS/IF din Clarivate — butonul de descărcat și ușa de încărcat, alături. */
#ae-portal .ae-cerc-reviste-foaie {
	display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end;
	margin: 0 0 14px; padding: 10px 12px;
	border: 1px dashed var(--hairline); border-radius: var(--r-md);
}
#ae-portal .ae-cerc-reviste-foaie form {
	display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 0;
}
#ae-portal .ae-cerc-reviste-foaie .ae-cerc-fisier { margin-bottom: 0; }
/* Cifrele Clarivate lângă revistă: „AIS 2026: 0.334 · IF 2026: 2.4". */
#ae-portal .ae-cerc-aisif {
	display: inline-block; margin-left: 6px;
	font-size: 11px; color: var(--ink-2); white-space: nowrap;
}

/* Conferințele (v113): neprinsele, sub numele lor adevărat — pe nume, fără
   citări, că indexul nu le are. */
#ae-portal .ae-cerc-conferinte-lista {
	margin: 4px 0 6px; padding-left: 22px; font-size: 13px; line-height: 1.55;
}
#ae-portal .ae-cerc-conferinte-lista li { margin: 5px 0; color: var(--ink-1); }

/* Rândul de prospețime al Știrilor, cu butonul „Adu acum" alături (v116). */
#ae-portal .ae-stiri-prospetime {
	display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
	justify-content: space-between;
}
#ae-portal .ae-stiri-prospetime > p { margin: 0; }
#ae-portal .ae-stiri-prospetime form { margin: 0; }

/* Linia care desparte, în cartea NAS-ului, „cât stau" de „golește fluxul":
   două treburi ale aceleiași întrebări, dar una salvează și una șterge. */
#ae-portal .ae-nas-taie {
	border: 0; border-top: 1px solid var(--hairline);
	margin: 22px 0 16px;
}

/* AȘEZAREA CHIPULUI (v126): poza mare de lucru, ținta care se trage, și
   cerculețul care arată exact ce se vede în copac. */
#ae-portal .ae-arbore-incadrare { margin: 14px 0 18px; }
#ae-portal .ae-arbore-incadrare h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 650; }
#ae-portal .ae-inc-lucru {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 10px 0;
}
#ae-portal .ae-inc-poza {
	position: relative; flex: 1 1 240px; max-width: 320px;
	aspect-ratio: 1 / 1; border-radius: var(--r-md);
	background-size: contain; background-position: center; background-repeat: no-repeat;
	background-color: var(--card-bg); border: 1px solid var(--hairline);
	cursor: crosshair; touch-action: none; overflow: hidden;
}
/* Ținta: un inel, nu un punct plin — trebuie să vezi fața pe sub el. */
#ae-portal .ae-inc-tinta {
	position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
	border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.45);
	pointer-events: none;
}
#ae-portal .ae-inc-vedere {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	font-size: 11.5px; color: var(--ink-2); text-align: center;
}
#ae-portal .ae-inc-chip { width: 84px; height: 84px; }
#ae-portal .ae-inc-apropiere { display: block; font-size: 13px; margin: 6px 0 10px; }
#ae-portal .ae-inc-apropiere > span { display: block; margin-bottom: 4px; }
#ae-portal .ae-inc-scris { font-style: normal; color: var(--ink-2); font-size: 12px; }
#ae-portal .ae-inc-apropiere input[type="range"] { width: 100%; max-width: 320px; }
#ae-portal .ae-inc-butoane { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* ==========================================================================
   26. Ferestrele: biletul de după faptă, întrebarea, butonul ocupat
   ==========================================================================
   Perechea lui ae-ferestre.js. Trei piese, aceleași pe toate ecranele:
   biletul (toast) care arată vorba ușii, fereastra de întrebare (<dialog>)
   care ia locul lui confirm(), și butonul care spune „Se salvează…" cât
   ține drumul. Verdele pleacă singur; roșul stă până îl închizi — o eroare
   care se ascunde singură e o eroare necitită. */

#ae-portal .ae-toast {
	position: fixed; left: 50%; transform: translateX(-50%);
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 90; display: flex; align-items: center; gap: 10px;
	max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
	padding: 12px 14px; border-radius: var(--r-md);
	background: var(--card-bg); border: 1px solid var(--hairline);
	box-shadow: var(--umbra-2); color: var(--ink-1);
	font-size: 13.5px; line-height: 1.5;
	backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
	animation: ae-toast-vine .28s ease;
}
@keyframes ae-toast-vine { from { opacity: 0; transform: translate(-50%, 12px); } }
#ae-portal .ae-toast--pleaca { opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s ease, transform .3s ease; }
#ae-portal .ae-toast-semn {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
	background: var(--br-500);
}
/* Semnul spune felul și prin FORMĂ (✓ / !), nu doar prin culoare — pentru
   ochiul care nu desparte verdele de roșu. */
#ae-portal .ae-toast--eroare { border-color: color-mix(in srgb, var(--crit) 55%, transparent); }
#ae-portal .ae-toast--eroare .ae-toast-semn { background: var(--crit); }
#ae-portal .ae-toast-x {
	flex: 0 0 auto; margin: -10px -10px -10px -4px; padding: 10px 12px;
	border: 0; background: none; color: var(--ink-3); font-size: 17px;
	line-height: 1; cursor: pointer; border-radius: var(--r-sm);
}
#ae-portal .ae-toast-x:hover { color: var(--ink-1); }

/* Fereastra de întrebare. Pe ecran mare stă la mijloc; pe telefon vine de
   jos, ca o foaie (bottom sheet) — acolo unde stă degetul mare, cum o fac
   și aplicațiile pe care familia le știe deja de pe telefon. */
#ae-portal dialog.ae-dialog {
	border: 1px solid var(--hairline); border-radius: var(--r-lg);
	background: var(--surface-1, var(--card-bg)); color: var(--ink-1);
	padding: var(--sp-5); max-width: min(440px, calc(100vw - 32px));
	box-shadow: var(--umbra-2); margin: auto;
}
#ae-portal dialog.ae-dialog::backdrop { background: rgba(10, 16, 12, .45); backdrop-filter: blur(2px); }
#ae-portal dialog.ae-dialog[open] { animation: ae-dialog-vine .18s ease; }
@keyframes ae-dialog-vine { from { opacity: 0; transform: translateY(8px); } }
#ae-portal .ae-dialog h3 { margin: 0 0 var(--sp-4); font-size: 15.5px; line-height: 1.5; font-weight: 600; }
#ae-portal .ae-dialog-butoane { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Fapta care șterge e roșie — să se vadă CARE buton e cel primejdios. */
#ae-portal .ae-dialog-da {
	background: linear-gradient(135deg, color-mix(in srgb, var(--crit) 82%, #000), var(--crit));
	border-color: color-mix(in srgb, var(--crit) 60%, transparent);
}
@media (max-width: 640px) {
	#ae-portal dialog.ae-dialog {
		margin: auto 0 0; max-width: none; width: 100vw; box-sizing: border-box;
		border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
		padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
	}
	@keyframes ae-dialog-vine { from { opacity: 0; transform: translateY(24px); } }
	/* Pe telefon, butoanele unul sub altul, late cât foaia — și cel care
	   RENUNȚĂ deasupra, mai aproape de deget decât cel care șterge. */
	#ae-portal .ae-dialog-butoane { flex-direction: column-reverse; }
	#ae-portal .ae-dialog-butoane .ae-buton { width: 100%; }
}

/* Butonul ocupat: vorba s-a schimbat deja („Se salvează…"), aici doar
   roata. Se învârte DOAR cui nu i-a cerut sistemul liniște. */
#ae-portal .ae-buton.ae-ocupat { cursor: default; filter: saturate(.7); }
#ae-portal .ae-buton.ae-ocupat::before {
	content: ''; width: 14px; height: 14px; flex: 0 0 auto;
	border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
	animation: ae-roata .7s linear infinite;
}
@keyframes ae-roata { to { transform: rotate(360deg) } }

/* Uneltele mărunte (✎, ×, 📷) rămân discrete la vedere, dar sub deget
   prind loc de apăsat de 44 pe 44 — cât cere ghidul Apple și WCAG-ul —
   prin aer nevăzut, fără să se miște nimic în așezare. */
@media (pointer: coarse) {
	#ae-portal .ae-arbore-unelte a,
	#ae-portal .ae-crono-unelte a,
	#ae-portal .ae-toast-x { position: relative; }
	#ae-portal .ae-arbore-unelte a::after,
	#ae-portal .ae-crono-unelte a::after,
	#ae-portal .ae-toast-x::after { content: ''; position: absolute; inset: -12px; }
}

@media (prefers-reduced-motion: reduce) {
	#ae-portal .ae-toast, #ae-portal dialog.ae-dialog[open] { animation: none; }
	#ae-portal .ae-toast--pleaca { transition: none; }
	/* Roata nu se învârte: butonul tot își spune vorba, iar trei puncte
	   liniștite arată că se lucrează. */
	#ae-portal .ae-buton.ae-ocupat::before { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* Treptele arborelui: câte rânduri se văd. Butoanele stau lângă vorbă, nu
   plutesc; pe telefon cad unul sub altul, cu tot cu ea. */
#ae-portal .ae-arbore-trepte {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 var(--sp-4); font-size: 13px; color: var(--ink-2);
}
#ae-portal .ae-arbore-trepte b { color: var(--ink-1); }
#ae-portal .ae-arbore-trepte .ae-buton { min-height: 38px; padding: 6px 14px; font-size: 12px; }

/* ==========================================================================
   27. Alesul pozelor din album, treptele calendarului
   ========================================================================== */

/* Grila de BIFAT: aceeași grilă, alt rost. Bifa e toată poza — țintă mare,
   și pentru deget — iar ✓-ul din colț se aprinde doar pe ce e ales. */
#ae-portal .ae-poza--aleg { position: relative; cursor: pointer; display: block; }
#ae-portal .ae-poza--aleg input { position: absolute; opacity: 0; pointer-events: none; }
#ae-portal .ae-poza--aleg .ae-poza-bifa {
	position: absolute; top: 6px; left: 6px; z-index: 2;
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-size: 14px; font-weight: 700;
	background: color-mix(in srgb, var(--surface-1, #fff) 82%, transparent);
	border: 2px solid var(--ink-3); color: transparent;
}
#ae-portal .ae-poza--aleg img { display: block; width: 100%; height: 100%; object-fit: cover; }
#ae-portal .ae-poza--aleg:has(input:checked) { outline: 3px solid var(--br-400); outline-offset: -3px; }
#ae-portal .ae-poza--aleg:has(input:checked) .ae-poza-bifa {
	background: var(--br-500); border-color: var(--br-400); color: #fff;
}
#ae-portal .ae-poza--aleg:has(input:focus-visible) { outline: 3px solid var(--ac-400); outline-offset: -3px; }

/* Bara faptelor: lipită jos cât derulezi printre poze, ca acțiunea să fie
   mereu la un deget distanță — nu la capătul a trei sute de poze. */
#ae-portal .ae-poze-bara {
	position: sticky; bottom: 8px; z-index: 5;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-top: var(--sp-4); padding: 10px 14px;
	background: var(--card-bg); border: 1px solid var(--hairline);
	border-radius: var(--r-md); box-shadow: var(--umbra-2);
	backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
	font-size: 13px;
}
#ae-portal .ae-poze-fapta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ae-portal .ae-poze-bara select {
	min-height: 40px; font-family: inherit; font-size: 13px;
	padding: 0 10px; border-radius: var(--r-sm);
	border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-1);
}
#ae-portal .ae-buton--rosu {
	background: linear-gradient(135deg, color-mix(in srgb, var(--crit) 82%, #000), var(--crit));
	border-color: color-mix(in srgb, var(--crit) 60%, transparent);
}

/* Bifa „orfan" din foaia de îndreptare. */
#ae-portal .ae-arbore-orfan { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
#ae-portal .ae-arbore-orfan input { margin-top: 2px; }

/* CALENDARUL ÎȘI IA LOCUL. AE: „observ ca este destul spatiu in dreapta
   […] Poti sa faci calendarul impreuna cu avizierul autoadaptive?" Plafonul
   de 880 rămâne DOAR unde chenarul stă singur; în așezarea pe două coloane,
   calendarul umple coloana lui, avizierul crește și el cu ecranul
   (24rem → 34rem), iar pe lat chenarul are voie mai sus de 660. */
@media (min-width: 1300px) {
	#ae-portal .ae-cal-doua { grid-template-columns: minmax(0, 1fr) clamp(24rem, 26vw, 34rem); }
	/* Plafonul vechi al PERECHII (880 + 24rem, pus când chenarul era țintuit)
	   se ridică și el — fără rândul ăsta, cele două de mai sus împart tot
	   restul dintr-o cutie tot atât de strâmtă ca înainte, și „mai lat" nu se
	   întâmplă nicăieri. Găsit cu rigla pe desen, nu ghicit. */
	#ae-portal .ae-cal-doua { max-width: none; }
	#ae-portal .ae-cal-doua .ae-cal-cuprins { max-width: none; }
	#ae-portal .ae-cal-doua .ae-cal-chenar { max-height: min(76vh, 820px); }
}

/* ==========================================================================
   28. Vederea în jos — urmașii, cu liniile trase din CSS
   ==========================================================================
   Listă îmbricată, nu grilă: în jos rândurile nu-s puteri ale lui doi, un om
   are câți copii are. Liniile ┌┴┐ se desenează singure din ::before/::after,
   oricâte ramuri ar fi. */
#ae-portal .ae-jos { overflow-x: auto; padding: 8px 0 16px; }
#ae-portal .ae-jos ul {
	display: flex; justify-content: center; align-items: flex-start;
	margin: 0; padding: 34px 0 0; list-style: none; position: relative;
}
/* Rândul de sus se strânge cât ține arborele, deci stătea lipit de marginea
   din stânga a ramei, cu tot golul în dreapta. `auto` îl pune la mijloc când
   încape și nu face nimic când nu încape (atunci rama se derulează). */
#ae-portal .ae-jos ul.ae-jos-radacina { padding-top: 0; margin-inline: auto; }
#ae-portal .ae-jos li { position: relative; padding: 0 14px; display: flex; flex-direction: column; align-items: center; }
/* brațele: fiecare copil primește o jumătate de arc din stânga și una din
   dreapta; capetele rândului își pierd jumătatea dinafară — rămâne ┌───┐ */
/* ÎNĂLȚIMEA BAREI (v170). Între talpa unui cuplu și creștetul copiilor lui
   sunt 34 de puncte: 17 pentru piciorul care coboară din părinte, 17 pentru
   picioarele care coboară spre copii, iar bara stă la mijloc, la hotarul
   dintre ele. Aici scria `-34px`, adică bara era lipită de talpa părintelui
   — iar picioarele copiilor începeau cu 17 puncte mai jos, în aer. Nu erau
   linii strâmbe, erau linii RUPTE, și așa au stat de la bun început. Le-am
   văzut abia când m-am uitat la pixelii desenați, nu la socoteala mea. */
#ae-portal .ae-jos ul ul li::before,
#ae-portal .ae-jos ul ul li::after {
	content: ''; position: absolute; top: -17px; height: 17px; width: 50%;
}
/* FIECARE OM, DEASUPRA MIJLOCULUI COPIILOR LUI (v170).

   AE, cu captura arborelui lui: „nu e deloc centrata."

   Rândul copiilor e așezat la mijloc — dar ce se centrează sunt CUTIILE lor,
   nu chipurile din ele. O ramură lată (cu tot neamul sub ea) lângă un „încă
   un copil" îngust: mijlocul cutiilor cade cu totul în altă parte decât
   mijlocul dintre primul și ultimul copil. De-aia piciorul părintelui ajungea
   la capătul barei în loc de mijlocul ei, și cu atât mai rău cu cât urcai
   spre bătrâni, unde ramurile sunt cele mai late.

   Nu se poate scrie în CSS, fiindcă nu e o fracțiune din nimic: e o măsură.
   Motorul o ia (`asezLiniile`) și o lasă scrisă în trei locuri, fiindcă cele
   patru linii au TREI CADRE diferite — brațele se măsoară de la ramură
   (`--mij`), piciorul care coboară pe om de la cutia lui (`--mij-cuplu`),
   trunchiul care coboară spre copii de la rândul copiilor (`--mij-ul`).
   Socotisem toate trei de la ramură, și una cădea cu 14 puncte alături:
   exact cât e umărul ramurii.

   `--mut` mută cutia omului deasupra ancorei lui. `50%` și `0px` rămân scrise
   drept plasă, pentru clipa dinaintea primei măsurători și pentru cazul în
   care scriptul n-ar porni: atunci arborele arată ca înainte, nu se rupe. */
#ae-portal .ae-jos li > .ae-jos-cuplu,
#ae-portal .ae-jos li.ae-jos-loc-nou > .ae-om { position: relative; left: var(--mut, 0px); }
#ae-portal .ae-jos ul ul li::before {
	left: 0; right: auto; width: var(--mij, 50%);
	border-top: 2px solid var(--hairline);
}
#ae-portal .ae-jos ul ul li::after {
	left: var(--mij, 50%); right: 0; width: auto;
	border-top: 2px solid var(--hairline);
}
#ae-portal .ae-jos ul ul li:first-child::before { border-top: 0; }
#ae-portal .ae-jos ul ul li:last-child::after { border-top: 0; }
/* piciorul care coboară din arc spre fiecare copil */
#ae-portal .ae-jos ul ul li > .ae-jos-cuplu::before,
#ae-portal .ae-jos ul ul li.ae-jos-loc-nou > .ae-om::before {
	content: ''; position: absolute; top: -17px; left: var(--mij-cuplu, 50%); height: 17px;
	border-left: 2px solid var(--hairline);
}
/* CUPLUL, O GRILĂ DE TREI COLOANE (v169).

   AE: „Liniile care ajung sau pornesc de la iconite nu sunt centrate cum
   trebuie."

   Măsurat: piciorul care coboară din cuplu stă la jumătatea CUTIEI, iar
   cutia era un rând flexibil a cărui lățime o dădeau NUMELE. Două nume de
   lungimi diferite („Anastasia IVAN" lângă „perechea Anastasiei IVAN — o
   scriem?") mută jumătatea cutiei departe de jumătatea dintre chipuri: pe
   arborele de probă ieșea până la 12 puncte, iar la AE, cu nume lungi, mult
   mai mult. Linia pleca de lângă om, nu din el.

   Leacul e structural, nu o corecție: trei coloane, iar cele două ale
   oamenilor sunt EGALE (`1fr` fiecare). Chipul stă centrat în coloana lui,
   deci jumătatea grilei cade fix la jumătatea dintre chipuri — oricât de
   lungi ar fi numele. O socoteală care nu depinde de text nu se strâmbă
   când textul se schimbă. */
#ae-portal .ae-jos .ae-jos-cuplu {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 12px; align-items: start; justify-items: center;
}
/* trunchiul care coboară din cuplu spre rândul copiilor. Se măsoară de la
   RÂNDUL copiilor, nu de la ramură: e desenat în el. */
#ae-portal .ae-jos li > ul::before {
	content: ''; position: absolute; top: 0; left: var(--mij-ul, 50%); height: 17px;
	border-left: 2px solid var(--hairline);
}
/* ══ AURA URMAȘILOR (v168) ═══════════════════════════════════════════════
   AE: „Ar fi super sa lumineze frumos spre un galben auriu ca o aura liniile
   care duc la urmasi cand apesi un stramos. Putem face ceva frumos in sensul
   asta?"

   Putem, și e chiar lucrul potrivit pentru ecranul ăsta: un arbore desenat cu
   linii cenușii spune „iată o schemă"; unul în care, la o apăsare, se aprinde
   drumul de la un om în jos până la ultimul strănepot spune „iată ce a ieșit
   din omul ăsta". Asta e altceva, și merită făcut frumos.

   CUM E FĂCUT, fiindcă amănuntele fac diferența dintre „se colorează" și
   „luminează":

   · CULOAREA e un AURIU al ei, scris o dată aici — nu culoarea temei.
     Prima variantă lua `--br-300`, „culoarea casei", și pe tema Pădure
     ieșea VERDE: AE ceruse anume „un galben auriu", iar o aură verde e alt
     lucru. Aurul e ales să se vadă pe amândouă fundalurile: pe hârtia
     deschisă a portalului dă 3,0 la 1, pe cerul închis 5,7 — nu e text, deci
     nu-i cer pragul de citit, dar trebuie să se VADĂ, și în lumină și în
     întuneric. Cu tot cu aura din jur, se vede.
   · AURA e o umbră de aceeași culoare, moale și lată (6px), pusă pe linie.
     O linie de 2 puncte cu o umbră de 6 arată ca un fir cald; una fără umbră
     arată doar galbenă.
   · SE APRINDE PE RÂND, de sus în jos. Fiecare treaptă mai jos pornește cu o
     zecime de secundă întârziere (`--pas`), pusă de motor pe fiecare nivel,
     ca lumina să CURGĂ prin arbore, nu să se aprindă toată deodată ca un bec.
     Ăsta e tot secretul: ochiul citește curgerea ca pe o descendență.
   · OAMENII de pe drum primesc și ei un inel cald, ca lumina să nu treacă pe
     lângă ei — nu doar liniile duc undeva, oamenii sunt acel undeva.
   · CINE A CERUT MAI PUȚINĂ MIȘCARE nu primește curgerea, ci lumina dintr-o
     dată (`prefers-reduced-motion`). Frumusețea nu se impune peste sănătatea
     nimănui — regula casei de la ADN-ul din fundal.
   ═══════════════════════════════════════════════════════════════════════ */
#ae-portal .ae-jos li.e-aura > .ae-jos-cuplu::before,
#ae-portal .ae-jos li.e-aura > ul::before,
#ae-portal .ae-jos li.e-aura::before,
#ae-portal .ae-jos li.e-aura::after,
#ae-portal .ae-jos li.e-aura.ae-jos-loc-nou > .ae-om::before {
	border-color: var(--ae-aur);
	box-shadow: 0 0 6px var(--ae-aur);
	animation: ae-aura-vine .45s ease both;
	animation-delay: var(--pas, 0s);
}
/* AURA URMEAZĂ LINIA, NU CUTIA (dresul v169).

   Brațele orizontale sunt cutii de 17 puncte înălțime din care se vede doar
   marginea de sus; restul e spațiu. `box-shadow` însă nu știe asta — el
   luminează CUTIA, așa că din fiecare braț ieșea un dreptunghi auriu, nu un
   fir. Se vedea în captură ca niște chenare, și arăta a greșeală, fiindcă
   era.

   Cutiile fiind așezate absolut, înălțimea lor nu ține nimic pe loc: o duc
   la zero cât timp ard, și atunci umbra se strânge pe linie. Piciorul care
   coboară are oricum lățime zero, deci el era în regulă de la început. */
#ae-portal .ae-jos li.e-aura::before,
#ae-portal .ae-jos li.e-aura::after { height: 0; }
@keyframes ae-aura-vine {
	from { border-color: var(--hairline); box-shadow: 0 0 0 transparent; }
	to   { border-color: var(--ae-aur);   box-shadow: 0 0 6px var(--ae-aur); }
}
/* omul de pe drum: un inel cald, în același ritm */
#ae-portal .ae-jos li.e-aura > .ae-jos-cuplu .ae-om-chip {
	box-shadow: 0 0 0 2px var(--ae-aur), 0 0 14px -2px var(--ae-aur);
	animation: ae-aura-om .45s ease both;
	animation-delay: var(--pas, 0s);
}
@keyframes ae-aura-om {
	from { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
	to   { box-shadow: 0 0 0 2px var(--ae-aur), 0 0 14px -2px var(--ae-aur); }
}
/* omul de la care pornește lumina: puțin mai tare, ca să se vadă de unde vine */
#ae-portal .ae-jos li.e-aura-cap > .ae-jos-cuplu .ae-om-chip {
	box-shadow: 0 0 0 3px var(--ae-aur), 0 0 22px -2px var(--ae-aur);
}
/* CÂT ARDE AURA, RESTUL SE TRAGE ÎNAPOI (v169).

   AE: „nu se observa drumul catre urmasi prea bine." — a doua jumătate a
   hibei. Un drum auriu printre douăzeci de linii la fel de vii trebuie
   CĂUTAT; același drum, cu restul stins pe jumătate, se vede din prima.
   Nu ascund pe nimeni (0,42 e încă citibil, nu e o perdea) — doar dau
   întâietate. */
/* pastila care aprinde: aurie, ca lucrul pe care îl face */
#ae-portal .ae-pastila--lumina {
	border-color: var(--ae-aur); color: var(--ae-aur);
	background: color-mix(in srgb, var(--ae-aur) 12%, transparent);
	font: inherit; cursor: pointer;
}
#ae-portal .ae-pastila--lumina:hover {
	background: color-mix(in srgb, var(--ae-aur) 22%, transparent);
}
#ae-portal .ae-jos.e-aura-pe li:not(.e-aura) > .ae-jos-cuplu { opacity: .42; }
#ae-portal .ae-jos.e-aura-pe li:not(.e-aura).ae-jos-loc-nou { opacity: .32; }
#ae-portal .ae-jos.e-aura-pe li > .ae-jos-cuplu { transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
	#ae-portal .ae-jos li.e-aura > .ae-jos-cuplu::before,
	#ae-portal .ae-jos li.e-aura > ul::before,
	#ae-portal .ae-jos li.e-aura::before,
	#ae-portal .ae-jos li.e-aura::after,
	#ae-portal .ae-jos li.e-aura.ae-jos-loc-nou > .ae-om::before,
	#ae-portal .ae-jos li.e-aura > .ae-jos-cuplu .ae-om-chip { animation: none; }
}

#ae-portal .ae-jos-inima { align-self: flex-start; margin-top: 20px; color: var(--ink-3); font-size: 13px; }
#ae-portal .ae-jos-om { display: flex; flex-direction: column; align-items: center; }
#ae-portal .ae-jos .ae-om b { max-width: 110px; }
#ae-portal .ae-jos-loc-nou .ae-om-chip { width: 34px; height: 34px; font-size: 15px; }
#ae-portal .ae-jos-loc-nou b { font-size: 10.5px; }
#ae-portal .ae-jos .ae-om--gol .ae-om-chip {
	background: transparent; border-style: dashed; border-color: var(--ink-3); color: var(--ink-3);
}

/* Cei stinși: pozele lor în alb-negru — în copac, pe foaia lor, pe momentele
   din cronologie. Semnul e pe chip/poză, nu pe om: aceeași poză se arată la
   fel oriunde ar fi pusă. */
#ae-portal .ae-om-chip--stins { filter: grayscale(1); }
#ae-portal .ae-poze--stinse img { filter: grayscale(1); }
#ae-portal .ae-poza--stinsa img { filter: grayscale(1); }

/* ==========================================================================
   29. Glasurile din cronologie — două istorisiri, umăr la umăr
   ==========================================================================
   Un singur glas = paragraful de azi, neatins. Balonașele apar abia când al
   doilea povestește — AE: „ar arata urata sectiunea nepovestita a celuilalt",
   deci locuri goale NU există aici. */
#ae-portal .ae-crono-glasuri { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 4px; }
@media (max-width: 700px) { #ae-portal .ae-crono-glasuri { grid-template-columns: 1fr; } }
#ae-portal .ae-crono-glas {
	position: relative; padding: 12px 14px 14px; border-radius: 14px;
	border: 1px solid var(--hairline); background: var(--surface-2);
	font-size: 13.5px; line-height: 1.65;
}
#ae-portal .ae-crono-glas--intai { border-color: color-mix(in srgb, var(--br-400) 45%, transparent);
	background: color-mix(in srgb, var(--br-700) 14%, var(--surface-2)); border-bottom-left-radius: 4px; }
#ae-portal .ae-crono-glas--doi { border-color: color-mix(in srgb, var(--ac-400) 45%, transparent);
	background: color-mix(in srgb, var(--ac-500) 10%, var(--surface-2)); border-bottom-right-radius: 4px; }
#ae-portal .ae-crono-glas-cine { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#ae-portal .ae-crono-glas-cine b { font-size: 12.5px; }
#ae-portal .ae-crono-glas-cine u { text-decoration: none; font-size: 10.5px; color: var(--ink-3); margin-left: auto; }
#ae-portal .ae-crono-glas p { margin: 0; }
/* v137: pe momentele Madei, scrise doar cu titlu, glasul lui AE e SINGURA
   istorisire — un balonaș pe jumătate de rând ar arăta ca o masă pusă pentru
   doi la care n-a venit nimeni. Singur, stă pe lat. */
#ae-portal .ae-crono-glas:only-child { grid-column: 1 / -1; }
#ae-portal .ae-crono-glas-vorba { margin: 8px 0 0; }
#ae-portal .ae-crono-glas-vorba a { font-size: 12px; color: var(--ink-3); text-decoration: none; }
#ae-portal .ae-crono-glas-vorba a:hover { color: var(--ink-1); }
#ae-portal .ae-crono-glas-forma { margin-top: 10px; max-width: 560px; }
#ae-portal .ae-crono-glas-forma textarea { width: 100%; font-family: inherit; font-size: 14px;
	padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--hairline);
	background: var(--surface-2); color: var(--ink-1); }

/* Numărătorile sărbătorilor, pe Panou. Selectorii poartă `p.`/`span.`
   dinadins: pastila categoriei (`#ae-portal .ae-salut p span`) e mai grea
   decât o clasă simplă și ne vopsea galbenul în turcoazul temei — s-a văzut
   pe desen, nu în cap. La putere egală câștigă cine e mai jos în foaie,
   adică noi. */
/* Numărătorile sărbătorilor, pe Panou: liniște tot anul, galben în luna
   sărbătorii, roșu în săptămâna ei. Starea nu vine doar din culoare — cifra
   îngroșată crește și ea o idee la roșu, pentru ochiul care nu desparte
   nuanțele. */
#ae-portal p.ae-numaratori { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
#ae-portal p.ae-numaratori span.ae-numaratoare {
	text-transform: none; letter-spacing: 0;
	font-size: 12px; color: var(--ink-3);
	border: 1px solid var(--hairline); border-radius: 999px;
	padding: 5px 13px; background: var(--surface-2);
}
#ae-portal p.ae-numaratori span.ae-numaratoare b { font-weight: 650; color: var(--ink-2); }
/* GALBENUL E GALBEN ÎN ORICE TEMĂ — de-aia --warn, nu accentul temei:
   în chihlimbar accentul e turcoaz, și prima scriere a ieșit turcoaz pe
   desen, nu galbenă cum a cerut AE. Culorile de stare (--warn, --crit) sunt
   aceleași peste tot, exact pentru astfel de vești. */
#ae-portal p.ae-numaratori span.ae-numaratoare--aproape {
	color: color-mix(in srgb, var(--warn) 75%, var(--ink-1));
	border-color: color-mix(in srgb, var(--warn) 55%, transparent);
	background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
}
#ae-portal p.ae-numaratori span.ae-numaratoare--aproape b { color: inherit; }
#ae-portal p.ae-numaratori span.ae-numaratoare--acum {
	color: color-mix(in srgb, var(--crit) 85%, var(--ink-1));
	border-color: color-mix(in srgb, var(--crit) 55%, transparent);
	background: color-mix(in srgb, var(--crit) 10%, var(--surface-2));
	font-weight: 600;
}
#ae-portal p.ae-numaratori span.ae-numaratoare--acum b { color: inherit; font-size: 13px; }

/* ═══ 30. FOAIA OMULUI ȘI FELUL (v138) ═════════════════════════════════════
   AE: „permite la apasarea pe fiecare persoana un soi de aminitire despre..
   Nu forta si nici nu afisa in structura de arbore." Foaia e un <dialog> —
   moștenește tot ce știe .ae-dialog (focus prins, Escape, folia din spate,
   varianta de telefon) — doar capul cu chip mare și pastilele-drumuri sunt
   ale ei. */
#ae-portal dialog.ae-foaia { max-width: 420px; }
#ae-portal .ae-foaia-cap { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
#ae-portal .ae-foaia-cap h3 { margin: 0; font-size: 16px; }
/* Chipul din foaie e cel din copac, doar mai mare — aceleași reguli, aceeași
   poză, ca omul să fie de nerecunoscut… ba nu: de recunoscut din prima. */
#ae-portal .ae-foaia-chip .ae-om-chip { width: 56px; height: 56px; font-size: 22px; }
#ae-portal .ae-foaia-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
#ae-portal .ae-foaia-despre { margin: 0 0 10px; font-size: 14px; line-height: 1.65; white-space: pre-line; }
#ae-portal .ae-foaia-gol { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
#ae-portal .ae-foaia-drumuri { margin: 0 0 12px; }
#ae-portal .ae-foaia [hidden] { display: none; }

/* Rotițele felului, în foaia de îndreptare — o pereche mică, pe un rând. */
#ae-portal .ae-arbore-fel { display: flex; gap: 16px; font-size: 12.5px; }
#ae-portal .ae-arbore-fel label { display: flex; gap: 6px; align-items: center; }

/* ═══ 31. TOT ECRANUL — MENIURILE SE STING (v140) ══════════════════════════
   AE: „da-mi un buton sa dispara toate meniurile din portal si prin apasare
   sa apara la loc." Starea e un atribut pe <html>, pus de scriptul din
   șablon; aici doar se vede. Regulile bat și varianta de birou a barelor
   (media query cu padding-left: 264px) — selectorul cu html[…] înaintea
   id-ului e mai greu decât #ae-portal singur, iar foaia asta vine ultima. */
html[data-fara-meniuri] #ae-portal .ae-sus,
html[data-fara-meniuri] #ae-portal .ae-nav { display: none; }
html[data-fara-meniuri] #ae-portal { padding-left: 0; padding-bottom: 0; }
/* TOT ECRANUL SĂ FIE CHIAR TOT ECRANUL (v167).

   AE: „La arborele genealogic, optiunea de tot ecranul nu este chiar tot
   ecranul sunt, cred 50px stanga dreapta ca sunt fixi si nu permit sa se vada
   nimic."

   A numărat bine: barele plecau, dar conținutul rămânea cu marginile lui de
   pagină (var(--sp-6), plus plafonul de 1520px care îl ținea centrat). Pe o
   pagină de citit alea sunt bune — un rând de text lipit de marginea
   ecranului nu se citește. Dar când ai apăsat ANUME „tot ecranul", ceri
   lățime, nu tipografie. Așa că marginile se subțiază la 12 puncte și
   plafonul se ridică: rămâne doar cât să nu se lipească desenul de sticlă. */
html[data-fara-meniuri] #ae-portal .ae-continut {
	max-width: none; padding-left: 12px; padding-right: 12px;
}

/* Pastila de întoarcere: sub toast (90), peste cerul atlasului (max 85). */
#ae-portal .ae-cer-inapoi {
	position: fixed; top: calc(10px + var(--bara-admin, 0px)); right: 12px; z-index: 88;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 13px; border-radius: 999px; cursor: pointer;
	background: var(--surface-2); color: var(--ink-1);
	border: 1px solid var(--hairline); box-shadow: var(--umbra-1);
	font: inherit; font-size: 12.5px;
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#ae-portal .ae-cer-inapoi:hover { background: var(--glass-strong); }
#ae-portal .ae-cer-inapoi[hidden] { display: none; }
@media (max-width: 700px) { #ae-portal .ae-cer-inapoi span { display: none; } }

/* Globul de pe momentul-călătorie: o vorbă mică în capul cardului. */
#ae-portal .ae-crono-glob { font-size: 14px; text-decoration: none; line-height: 1; }

/* Bifa „E o călătorie" din formularele cronologiei (v141). Câmpul locului
   se arată abia când bifa e aprinsă — :has() e în toate browserele casei;
   unde n-ar fi, câmpurile rămân la vedere: o ușă arătată, nu una încuiată. */
/* selectorul poartă și .ae-crono-forma label — altfel regula generală a
   etichetelor din formular (bloc, cu câmpul dedesubt) bate flex-ul și
   căsuța urcă deasupra vorbelor, cum s-a văzut pe desen */
#ae-portal .ae-crono-forma label.ae-crono-bifa-glob { display: flex; flex-direction: row; gap: 8px; align-items: center; font-size: 12.5px; }
#ae-portal .ae-crono-forma label.ae-crono-bifa-glob input { width: auto; margin: 0; }
#ae-portal .ae-crono-glob-campuri { display: none; gap: 8px; flex-wrap: wrap; }
#ae-portal .ae-crono-glob-campuri input { flex: 1 1 180px; }
#ae-portal .ae-crono-forma:has(.ae-crono-bifa-glob input:checked) .ae-crono-glob-campuri { display: flex; }
@supports not (selector(:has(*))) { #ae-portal .ae-crono-glob-campuri { display: flex; } }

/* Globul de pe cartoșanul poveștii-călătorie (v142) + rândul cu două câmpuri
   din editorul de povești. */
#ae-portal .ae-poveste-glob { margin-left: 8px; font-size: 11.5px; text-decoration: none; color: var(--ink-2); }
#ae-portal .ae-camp--doi { display: flex; gap: 8px; flex-wrap: wrap; }
#ae-portal .ae-camp--doi input { flex: 1 1 180px; }

/* ═══ 32. ȘABLONUL „CĂLĂTORIE" ȘI PĂSTRAREA (v143) ════════════════════════
   Șablonul, croit pe macheta atlasului aleasă de AE: rând de gazetă deasupra,
   titlu cu serife, litera mare la primul paragraf, faptele alături — pe
   telefon faptele coboară sub poveste. */
#ae-portal .ae-poveste--calatorie .ae-hero-text h2 {
	font-family: Georgia, 'Times New Roman', serif; font-weight: 600;
	font-size: clamp(34px, 6vw, 56px); letter-spacing: -.5px;
}
#ae-portal .ae-cal-kicker {
	margin: var(--sp-4) 0 0; font-size: 11px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--ink-3);
}
#ae-portal .ae-cal-kicker a { margin-left: 10px; text-decoration: none; letter-spacing: normal; text-transform: none; }
#ae-portal .ae-cal-articol { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { #ae-portal .ae-cal-articol { grid-template-columns: 1fr; } }
#ae-portal .ae-cal-proza { font-size: var(--proza-marime); line-height: var(--proza-rand); max-width: var(--proza-masura); }
#ae-portal .ae-cal-proza > p:first-child::first-letter {
	font-family: Georgia, serif; font-size: 3.1em; line-height: .85;
	float: left; padding: 4px 10px 0 0; color: var(--ac-400);
}
#ae-portal .ae-cal-fapte {
	background: var(--card-bg); border: 1px solid var(--hairline); border-radius: var(--r-lg);
	padding: var(--sp-4); position: sticky; top: calc(var(--sus-h, 70px) + 12px);
}
#ae-portal .ae-cal-fapte h4 { margin: 0 0 var(--sp-3); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); }
#ae-portal .ae-cal-fapte div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 12.5px; }
#ae-portal .ae-cal-fapte div span { color: var(--ink-3); }

/* Păstrarea: două cărți cu răsuflare între ele. */
#ae-portal .ae-pastrare h3 { margin-top: 0; }
#ae-portal .ae-pastrare form { margin-top: var(--sp-3); }

/* Călătoriile fără poveste, în lista Poveștilor (v146). AE: „Pana la urma
   sunt povesti, doar ca apar si pe glob." Cartoșanul lor arată ca al
   poveștilor — doar semnul 🌍 în locul pozei lipsă și îndemnul de a o
   scrie. Semnul „🌍 pe glob" de pe rând e un <span>, nu legătură — titlul
   duce deja la pagina locului, două drumuri identice ar fi zgomot. */
#ae-portal .ae-album-gol--glob { font-size: 34px; }
#ae-portal .ae-poveste-card--cal .ae-poveste-glob { text-decoration: none; white-space: nowrap; }
#ae-portal .ae-poveste-scrie { margin-left: 8px; font-size: 12px; text-decoration: none; color: var(--ac-500); white-space: nowrap; position: relative; z-index: 1; }
#ae-portal .ae-poveste-scrie:hover { text-decoration: underline; }

/* Poveștile pe fir (v149). AE: „Ele trebuie sa fie una si aceeasi doar ca
   vazute diferit" — cartea poveștii stă pe fir ca un moment, dar se cunoaște
   dintr-o privire că e o fereastră spre altă odaie: dunga de accent pe
   stânga și semnul 📖. Iar pe cardul momentului-călătorie, 📖 duce la
   povestea legată — aceleași semne, în amândouă direcțiile. */
#ae-portal .ae-crono-poveste .ae-card { border-left: 3px solid var(--ac-400); }
#ae-portal .ae-crono-poveste h3 { margin: 6px 0 2px; }
#ae-portal .ae-crono-poveste h3 a { text-decoration: none; color: inherit; }
#ae-portal .ae-crono-poveste h3 a:hover { text-decoration: underline; }
#ae-portal .ae-crono-pov-sub { color: var(--ink-2); margin: 2px 0 8px; font-size: 13.5px; }
#ae-portal .ae-crono-citeste { font-size: 13px; text-decoration: none; color: var(--ac-500); }
#ae-portal .ae-crono-citeste:hover { text-decoration: underline; }
#ae-portal .ae-crono-carte { text-decoration: none; font-size: 15px; margin-left: 2px; }

/* ==========================================================================
   POP-UP-UL POZELOR + alesul ușor (v159)
   ========================================================================== */
.ae-poze-dialog{border:1px solid rgba(148,163,184,.25);border-radius:16px;background:#0d1420;color:#e2e8f0;
  padding:0;width:min(920px,94vw);max-height:86vh}
.ae-poze-dialog::backdrop{background:rgba(4,8,16,.72)}
.ae-poze-dialog-cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:2;
  background:#0d1420;border-bottom:1px solid rgba(148,163,184,.18);padding:14px 18px}
.ae-poze-dialog-cap #aePozeNumar{color:#fbbf77;font-weight:600}
.ae-poze-dialog-butoane{margin-left:auto;display:flex;gap:10px}
.ae-poze-dialog-corp{overflow:auto;max-height:calc(86vh - 64px);padding:12px 18px 18px}
.ae-poze-album summary{cursor:pointer;padding:10px 4px;font-weight:600}
.ae-poze-album summary em{color:#94a3b8;font-style:normal;font-weight:400}
.ae-poze-grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:4px 0 12px}
.ae-alege-poza{position:relative;border:0;padding:0;background:none;cursor:pointer;border-radius:10px;overflow:hidden;
  aspect-ratio:4/3}
.ae-alege-poza img{width:100%;height:100%;object-fit:cover;display:block}
.ae-alege-poza .ae-poza-bifa{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(10,14,22,.55);border:2px solid rgba(255,255,255,.75);color:transparent;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.ae-alege-poza.pe{outline:3px solid #fbbf77;outline-offset:-3px}
.ae-alege-poza.pe .ae-poza-bifa{background:#fbbf77;border-color:#fbbf77;color:#1b1206}
.ae-poze-strip{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ae-poza-mini{position:relative;width:64px;height:48px;border-radius:8px;overflow:hidden}
.ae-poza-mini img{width:100%;height:100%;object-fit:cover;display:block}
.ae-poza-scoate{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,14,22,.78);color:#fca5a5;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}

/* Albume: bara faptelor stă la vedere, nu la fundul paginii */
.ae-poze-bara{position:sticky;bottom:10px;z-index:5;background:#0d1420;border:1px solid rgba(148,163,184,.25);
  border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:12px 14px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap}
.ae-poze-bara .ae-poze-numar{color:#fbbf77;font-weight:700;min-width:72px}

/* Predarea drumului spre telefon (v164) */
.ae-traseu-preda{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px}

/* ==========================================================================
   CATEDRA — notele stagiarilor CECCAR (v200)

   Fișa de pe ecran e foaia de hârtie a lui AE: aceleași rânduri, aceeași
   ordine, celulele de completat în același galben pal ca în Excelul lui —
   ca ochiul să le găsească unde le știe. Galbenul e amestecat din tema
   portalului, nu bătut în cuie, ca să se vadă și pe fundal închis.
   ========================================================================== */
/* BANDA cu numărul lor (v204) — AE: „ajuta sa stiu cati au fost". Cifre
   mari, fiecare și ușa spre lista ei; butonul cumulatului la capăt. */
#ae-portal .ae-ceccar-banda { display: flex; gap: var(--sp-3) var(--sp-4); align-items: center;
	justify-content: space-between; flex-wrap: wrap; }
#ae-portal .ae-ceccar-cifre { display: flex; gap: 6px; flex-wrap: wrap; }
#ae-portal .ae-ceccar-cifra {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 72px; padding: 4px 12px; border-radius: var(--r-md);
	border: 1px solid var(--hairline); background: var(--surface-2);
	color: var(--ink-1); text-decoration: none; line-height: 1.15;
}
#ae-portal .ae-ceccar-cifra b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
#ae-portal .ae-ceccar-cifra span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
#ae-portal a.ae-ceccar-cifra:hover { border-color: color-mix(in srgb, var(--ae-aur) 55%, var(--hairline)); }
#ae-portal .ae-ceccar-cifra.e-ales { border-color: var(--ae-aur);
	background: color-mix(in srgb, var(--ae-aur) 14%, var(--surface-2)); }
#ae-portal .ae-ceccar-cifra--total { background: transparent; border-style: dashed; }
#ae-portal .ae-ceccar-titlu { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-3); row-gap: 2px; }
#ae-portal .ae-ceccar-titlu h3 { margin: 0; }

#ae-portal .ae-ceccar-fisa { display: grid; gap: var(--sp-3); }
/* Lacăt pe `hidden` în fișă (v205). AE, pe site: „Ce inseamna bara rosie?"
   Era butonul ascuns și oprit care ține Enter-ul pe loc (v204): tema părinte
   (Hello Elementor) dă oricărui <button> `display: inline-block` și o ramă
   #c36, iar o regulă a temei bate ascunderea pe care browserul o pune pe
   `[hidden]`. În desenul meu tema părinte lipsea, deci bara nu se vedea. */
#ae-portal .ae-ceccar-fisa [hidden] { display: none !important; }
#ae-portal .ae-ceccar-cine { display: grid; gap: var(--sp-3); grid-template-columns: 2fr 1fr; align-items: start; }
/* Regula casei „.ae-camp + .ae-camp" pune un spațiu deasupra câmpului al
   doilea — bun într-o coloană, dar aici stau unul LÂNGĂ altul, și coborâa
   Filiala cu 12 pixeli sub Nume. */
#ae-portal .ae-ceccar-cine .ae-camp { margin: 0; }
@media (max-width: 640px) {
	#ae-portal .ae-ceccar-cine { grid-template-columns: 1fr; }
}

#ae-portal .ae-ceccar-barem,
#ae-portal .ae-ceccar-lista { border-collapse: collapse; width: 100%; font-size: 13px; }
#ae-portal .ae-ceccar-barem th,
#ae-portal .ae-ceccar-barem td,
#ae-portal .ae-ceccar-lista th,
#ae-portal .ae-ceccar-lista td {
	border: 1px solid var(--hairline); padding: 6px 10px; text-align: left; vertical-align: middle;
	color: var(--ink-2); font-weight: 400;
}
#ae-portal .ae-ceccar-barem thead th,
#ae-portal .ae-ceccar-lista thead th {
	background: var(--surface-3); color: var(--ink-1); font-size: 12px; font-weight: 650;
}
#ae-portal .ae-ceccar-lista thead th i,
#ae-portal .ae-ceccar-lista tbody th i,
#ae-portal .ae-ceccar-lista td i {
	display: block; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--ink-3);
}
#ae-portal .ae-ceccar-num { text-align: center !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ae-portal .ae-ceccar-barem tbody th:first-child { width: 3.2em; text-align: center; }
#ae-portal .ae-ceccar-capitol th,
#ae-portal .ae-ceccar-capitol td { color: var(--ink-1); font-weight: 650; }
#ae-portal .ae-ceccar-obs td { font-size: 11.5px; font-style: italic; color: var(--ink-3); }
#ae-portal .ae-ceccar-total th,
#ae-portal .ae-ceccar-total td { background: var(--surface-3); color: var(--ink-1); font-weight: 700; }

/* Celula de completat: galbenul foii lui AE (#FFF2CC), topit în temă. */
#ae-portal .ae-ceccar-barem input[type="text"] {
	width: 5.2em; min-height: 40px; font-size: 16px; text-align: center; font-family: inherit;
	border-radius: var(--r-sm); border: 1px solid var(--hairline);
	background: color-mix(in srgb, #FFF2CC 26%, var(--surface-2)); color: var(--ink-1);
}
#ae-portal .ae-ceccar-barem input[type="text"]:focus {
	outline: 2px solid var(--ae-aur); outline-offset: 1px;
}
/* Roșu NUMAI cu semn alături: verdictul de sub tabel spune și în cuvinte ce
   e greșit, deci culoarea nu e singurul semn. */
#ae-portal .ae-ceccar-barem input.e-rau,
#ae-portal .ae-ceccar-barem input:user-invalid {
	border-color: var(--crit); box-shadow: inset 0 0 0 1px var(--crit);
	background: color-mix(in srgb, var(--crit) 14%, var(--surface-2));
}
#ae-portal .ae-ceccar-dana { border: 0; margin: 0; padding: 0; display: inline-flex; gap: var(--sp-3); }

#ae-portal .ae-ceccar-dana label { display: inline-flex; gap: 5px; align-items: center;
	min-height: 40px; cursor: pointer; color: var(--ink-1); }
#ae-portal .ae-ceccar-dana input { width: 18px; height: 18px; accent-color: var(--ae-aur); }
/* Regulile de bază ale lui DA/NU stau DEASUPRA blocului compact: la v201
   stăteau dedesubt și, cu aceeași greutate, câștigau — rândurile DA/NU
   rămăseseră de 45 de pixeli, în timp ce comentariul zicea 30. */

/* „si mai compact" (AE, v201) și „fă tabelul mai adunat să încapă pe o
   singură pagină" (AE, v202): pe ecran lat, fișa ÎNTREAGĂ — de la nume până
   la „Salvează" — încape pe ecranul laptopului lui, fără derulare. Măsurat,
   nu ghicit: proba-ceccar o desenează la 1125×876 (cât rămâne din ecranul
   lui după meniu și antet) și numără pixelii. Rândurile au 27 de pixeli,
   numele și filiala stau pe un rând cu eticheta alături, verdictul lângă
   buton. Pe telefon rămân de 40: acolo e pragul degetului, iar compactul
   s-ar plăti cu apăsări greșite. */
@media (min-width: 641px) {
	#ae-portal .ae-ceccar-banda { padding: var(--sp-3) var(--sp-5); }
	#ae-portal .ae-ceccar-banda .ae-buton { min-height: 36px; padding: 6px 16px; }
	#ae-portal .ae-ceccar-fisa { gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
	#ae-portal .ae-ceccar-fisa .ae-tabel-invelis { margin: 0; }
	#ae-portal .ae-ceccar-cine .ae-camp { display: flex; align-items: center; gap: var(--sp-2); }
	#ae-portal .ae-ceccar-cine .ae-camp span { margin: 0; white-space: nowrap; }
	#ae-portal .ae-ceccar-cine .ae-camp input { min-height: 34px; height: 34px; font-size: 15px; padding: 0 var(--sp-3); }
	#ae-portal .ae-ceccar-barem th,
	#ae-portal .ae-ceccar-barem td { padding: 1px 8px; line-height: 1.35; }
	#ae-portal .ae-ceccar-barem thead th,
	#ae-portal .ae-ceccar-total th,
	#ae-portal .ae-ceccar-total td { padding-top: 3px; padding-bottom: 3px; }
	#ae-portal .ae-ceccar-obs td { padding-top: 0; padding-bottom: 0; font-size: 11px; }
	#ae-portal .ae-ceccar-barem input[type="text"] { min-height: 24px; height: 24px; font-size: 14px; }
	#ae-portal .ae-ceccar-dana label { min-height: 24px; }
	#ae-portal .ae-ceccar-dana input { width: 16px; height: 16px; margin: 0; }
	#ae-portal .ae-ceccar-butoane .ae-buton { min-height: 36px; padding: 6px 18px; }
}

#ae-portal .ae-ceccar-butoane { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* Rezultatul: întotdeauna CUVÂNT plus culoare, niciodată culoare singură. */
#ae-portal .ae-ceccar-rez {
	display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
	font-size: 11.5px; font-weight: 700; letter-spacing: .3px; line-height: 1.5;
	border: 1px solid var(--hairline); color: var(--ink-1); white-space: nowrap;
}
#ae-portal .ae-ceccar-rez--promovat   { background: color-mix(in srgb, var(--ok) 20%, transparent);
	border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
#ae-portal .ae-ceccar-rez--nepromovat { background: color-mix(in srgb, var(--crit) 20%, transparent);
	border-color: color-mix(in srgb, var(--crit) 55%, transparent); }
#ae-portal .ae-ceccar-rez--incomplet  { background: color-mix(in srgb, var(--warn) 18%, transparent);
	border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
#ae-portal .ae-ceccar-verdict { margin: 0; justify-self: start; font-size: 12.5px; border-radius: var(--r-md); white-space: normal; }

/* „/ 8" de lângă celulă: pe ecran lat maximul are coloana lui, deci tace. */
#ae-portal .ae-ceccar-din { display: none; }

/* PE TELEFON: patru coloane nu încap în 390 de pixeli — celula de completat
   ieșea pe jumătate din ecran. Coloana „Maxim" pleacă, iar maximul se mută
   lângă celulă („/ 8"). În listă rămân doar numele, totalul, rezultatul și
   Excelul; capitolele sunt în Excel, oricum. */
@media (max-width: 640px) {
	#ae-portal .ae-ceccar-barem .ae-ceccar-max,
	#ae-portal .ae-ceccar-lista .ae-ceccar-capcol { display: none; }
	#ae-portal .ae-ceccar-din { display: inline; margin-left: 5px; font-size: 12px; color: var(--ink-3); }
	#ae-portal .ae-ceccar-barem th,
	#ae-portal .ae-ceccar-barem td { padding: 6px 7px; }
	#ae-portal .ae-ceccar-barem tbody th:first-child { width: 2.4em; }
	#ae-portal .ae-ceccar-barem input[type="text"] { width: 3.8em; }
	#ae-portal .ae-ceccar-dana { gap: var(--sp-2); }
	/* În listă, numele stă pe loc când tabelul se derulează spre „Excel":
	   altfel ai vedea un buton fără să știi al cui e. */
	#ae-portal .ae-ceccar-lista th,
	#ae-portal .ae-ceccar-lista td { padding: 6px 8px; }
	#ae-portal .ae-ceccar-lista tbody th,
	#ae-portal .ae-ceccar-lista thead th:nth-child(2) {
		position: sticky; left: 0; z-index: 1; min-width: 7.5em; max-width: 9.5em; white-space: normal;
	}
	#ae-portal .ae-ceccar-lista tbody th { background: var(--surface-2); }
}

#ae-portal .ae-ceccar-lista tbody th { color: var(--ink-1); font-weight: 600; min-width: 12em; }
#ae-portal .ae-ceccar-lista tr.e-ales > * { background: color-mix(in srgb, var(--ae-aur) 12%, transparent); }
#ae-portal .ae-ceccar-fapte { white-space: nowrap; }
#ae-portal .ae-ceccar-fapte > * { display: inline-block; vertical-align: middle; margin-right: var(--sp-3); }
#ae-portal .ae-ceccar-fapte a { color: var(--ink-1); font-weight: 600; }
#ae-portal .ae-ceccar-fapte form { margin: 0; }
#ae-portal .ae-ceccar-sterg {
	font: inherit; font-weight: 600; color: var(--crit); background: none; border: 0;
	padding: 0; cursor: pointer; text-decoration: underline;
}

/* ==========================================================================
   ÎNTREGIMEA PACHETULUI, pe ecranul Versiuni (v202) — vezi ae_pachet_vorba()
   ========================================================================== */
#ae-portal .ae-pachet { margin-top: var(--sp-3); }
#ae-portal .ae-pachet p { margin: 0; }
#ae-portal .ae-pachet ul { margin: 6px 0; padding-left: 1.2em; }
#ae-portal .ae-pachet code { font-size: 12px; overflow-wrap: anywhere; }

/* ==========================================================================
   CATEDRA, partea a doua (v204): zilele, arhiva, „Șterse", numele încuiat
   ========================================================================== */

/* Numele încuiat: se vede că e încuiat (lacătul din dreapta), nu doar se
   simte la apăsare. Lacătul e desenat în CSS, nu adus de undeva. */
#ae-portal .ae-ceccar-cine input.e-incuiat {
	cursor: pointer; padding-right: 32px;
	background-color: color-mix(in srgb, var(--surface-3) 60%, var(--surface-2));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}

#ae-portal .ae-ceccar-lista-cap { display: flex; gap: var(--sp-2) var(--sp-4); align-items: center;
	justify-content: space-between; flex-wrap: wrap; margin-bottom: 4px; }
#ae-portal .ae-ceccar-lista-cap h3 { margin: 0; }
#ae-portal .ae-ceccar-filtru { margin: 0; display: flex; gap: var(--sp-2); align-items: center; }
#ae-portal .ae-ceccar-filtru label { display: flex; gap: var(--sp-2); align-items: center; font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-ceccar-filtru select {
	min-height: 36px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--ink-1);
	border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-2); max-width: 100%;
}
#ae-portal .ae-ceccar-gol { margin: var(--sp-3) 0 0; font-size: 12.5px; color: var(--ink-2); }

/* O zi = un cap (data, câți, ce poți face) și tabelul ei. */
#ae-portal .ae-ceccar-ziua { margin-top: var(--sp-4); }
#ae-portal .ae-ceccar-ziua-cap { display: flex; gap: 4px var(--sp-3); align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
#ae-portal .ae-ceccar-ziua-cap h4 { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink-1); }
#ae-portal .ae-ceccar-ziua-nr { font-size: 12px; color: var(--ink-3); }
#ae-portal .ae-ceccar-ziua-fapte { margin-left: auto; display: inline-flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; }
#ae-portal .ae-ceccar-ziua-fapte a { font-size: 12.5px; font-weight: 600; color: var(--ink-1); }
#ae-portal .ae-ceccar-ziua-fapte form { margin: 0; display: inline; }
#ae-portal .ae-ceccar-ziua .ae-tabel-invelis { margin: 0; }

/* Butoanele care arată ca legături (Arhivează ziua, Adu înapoi). */
#ae-portal .ae-ceccar-legatura {
	font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-1); background: none; border: 0;
	padding: 0; cursor: pointer; text-decoration: underline;
}

/* Nr. — câți au fost în ziua aceea se citește și pe ultimul rând. */
#ae-portal .ae-ceccar-lista .ae-ceccar-nr { width: 2.8em; color: var(--ink-3); }
#ae-portal .ae-ceccar-rezumat { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* Tabelele zilelor stau una sub alta: aceleași coloane, la aceeași lățime,
   ca ochiul să coboare drept pe „Total" de la o zi la alta. */
@media (min-width: 641px) {
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista { table-layout: fixed; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista thead .ae-ceccar-nr { width: 44px; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista thead .ae-ceccar-capcol { width: 76px; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista thead th:nth-last-child(4) { width: 72px; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista thead .ae-ceccar-notacol { width: 62px; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista thead th:nth-last-child(2) { width: 170px; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista thead th:last-child { width: 200px; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-lista tbody th { min-width: 0; overflow-wrap: anywhere; }
	/* Coloana faptelor se rupe pe două rânduri când are trei („Adu înapoi",
	   „Șterge definitiv"), în loc să iasă din tabel. */
	#ae-portal .ae-ceccar-ziua .ae-ceccar-fapte { white-space: normal; }
	#ae-portal .ae-ceccar-ziua .ae-ceccar-fapte > * { margin: 2px var(--sp-3) 2px 0; }
}

@media (max-width: 640px) {
	/* Pe telefon numele stă lipit în stânga la derulare; Nr. ar sta sub el. */
	#ae-portal .ae-ceccar-lista .ae-ceccar-nr { display: none; }
	#ae-portal .ae-ceccar-ziua-fapte { margin-left: 0; }
	#ae-portal .ae-ceccar-cifra { min-width: 60px; padding: 4px 8px; }
}

/* CATALOGUL (v206): două descărcări în bandă, nota pe 10 în listă. */
#ae-portal .ae-ceccar-descarcari { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
#ae-portal .ae-ceccar-nota {
	display: inline-block; min-width: 2em; padding: 1px 6px; border-radius: var(--r-sm);
	font-size: 14px; font-weight: 700; color: var(--ink-1);
	background: color-mix(in srgb, var(--ok) 16%, transparent);
}
/* Sub 5, nota nu poartă verdele trecerii: un 4 pe verde ar spune „trecut". */
#ae-portal .ae-ceccar-nota--jos { background: color-mix(in srgb, var(--crit) 16%, transparent); }
#ae-portal .ae-ceccar-fara { color: var(--ink-3); }