/* Radar Evondia — prezentare preluata din exportul Claude Design ("Evondia Edition").
   Limbaj de obiect tiparit: hartie fildes, cerneala indigo, auriu discret,
   Instrument Serif pentru voce, IBM Plex Mono pentru aparat, IBM Plex Sans pentru corp. */

:root {
  --hartie: #F7F3EA;
  --hartie-alt: #FBFAF6;
  --hartie-scurt: #F2EDE1;
  --cerneala: #23233A;
  --cerneala-moale: #4A4858;
  --mut: #55524A;
  --mut-mono: #6B665C;
  --linie: #DCD5C6;
  --linie-tare: #D3CBB9;
  --auriu: #A8814A;
  --auriu-inchis: #7E5D22;
  --auriu-cifra: #8A6828;
  --schelet: #E7E1D1;
  --schelet-slab: #EDE7D9;

  /* paleta inversata, definita in design pentru alerte */
  --noapte: #23233A;
  --noapte-alt: #2A2A45;
  --noapte-linie: #4A4A64;
  --noapte-mut: #A6A4B8;
  --noapte-text: #D9D6D0;
  --auriu-noapte: #C8A85C;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: 32px;

  /* Variantele translucide ale suprafetelor de citit: lasa lumina de fundal sa
     treaca. Procentele sunt cele din documentul de design: ivory alternant 30%,
     placile tonate 40%, panourile indigo 50%. Tentele de capitol (55%) se
     calculeaza in app.js din harta CAT, ca sa nu existe a doua sursa de adevar
     pentru paleta. */
  /* Alternanta: un card ramane pe fondul paginii, urmatorul urca aproape spre
     alb, cu o tenta de crem. La 30% diferenta masurata intre carduri vecine era
     de 0,3-0,8 L*, adica invizibila la derulare; la 80% urca la ~3,3. */
  --t-ivory:  rgba(255,254,251,0.80);
  --t-tint:   rgba(242,237,225,0.40);   /* #F2EDE1 */
  /* Indigo alternant: acelasi indigo, cu 12,5% mai inchis pe cardul urmator. */
  --noapte-jos: #1F1F33;
}

/* Modul intunecat foloseste tokenii inversati pe care designul ii defineste deja
   pentru ecranul de alerta, ca sa nu inventeze o a doua identitate. */
@media (prefers-color-scheme: dark) {
  :root {
    --hartie: #1E1E30;
    --hartie-alt: #23233A;
    --hartie-scurt: #2A2A45;
    --cerneala: #EFEBE2;
    --cerneala-moale: #C3C0CE;
    --mut: #A6A4B8;
    --mut-mono: #9997AC;
    --linie: #3C3C56;
    --linie-tare: #4A4A64;
    --auriu: #C8A85C;
    --auriu-inchis: #D6B96F;
    --auriu-cifra: #C8A85C;
    --schelet: #33334C;
    --schelet-slab: #2C2C42;
    --noapte: #14141F;
    --noapte-alt: #1B1B2B;

    /* aceeasi alternanta, pe dos: cardul urmator coboara sub fondul paginii */
    --t-ivory:  rgba(24,24,38,0.80);
    --t-tint:   rgba(42,42,69,0.40);
    --noapte-jos: #12121B;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hartie);
  color: var(--cerneala);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; }

a { color: var(--auriu-inchis); text-decoration: none; }
a:hover { color: var(--cerneala); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--auriu); outline-offset: 2px; }

.ed { max-width: 560px; margin: 0 auto; }

/* ---------- aparat (mono) ---------- */

.mono-eticheta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--auriu-inchis); }

/* rombul, semnul casei; poarta si starea ultimei rulari */
.romb {
  width: 9px; height: 9px; display: inline-block; flex-shrink: 0;
  transform: rotate(45deg);
  border: 1px solid var(--auriu);
}
.romb-plin { background: var(--auriu); }
.romb.err { background: #B4553F; border-color: #B4553F; }

.marca { display: flex; align-items: center; gap: 9px; }
.marca-text { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.34em; color: var(--cerneala); }

/* ---------- bara de sus a fiecarui ecran ---------- */

.cap-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 22px var(--pad) 0;
}
.cap-nav { display: flex; gap: 18px; align-items: center; }
.nav-btn, .nav-inapoi {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--mut); min-height: 36px;
  display: inline-flex; align-items: center;
}
.nav-btn:hover, .nav-btn.on { color: var(--auriu-inchis); }

/* ---------- pagina de titlu ---------- */

.coperta {
  min-height: calc(100svh - 64px);
  padding: 18px var(--pad) 34px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
}
.coperta-numar { display: flex; align-items: flex-end; gap: 16px; }
.coperta-numar .vertical {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--mut-mono);
  writing-mode: vertical-rl; transform: rotate(180deg); padding-bottom: 8px;
}
.coperta-cifra { font-family: var(--serif); font-size: 148px; line-height: 0.74; letter-spacing: -0.04em; }
.coperta-rand { height: 1px; background: var(--cerneala); margin: 26px 0 16px; }
.coperta-data { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.coperta-data .zi { font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -0.01em; margin: 0; }
.coperta-data .durata { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mut-mono); }

.salut { font-family: var(--serif); font-size: 25px; line-height: 1.32; text-wrap: pretty; margin: 0; }
.salut-cont { font-size: 15.5px; line-height: 1.68; color: var(--cerneala-moale); margin: 16px 0 0; text-wrap: pretty; }

.ornament { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ornament .linie { height: 1px; flex: 1; background: var(--linie); display: block; }
.ornament .romb { width: 5px; height: 5px; }

.numere {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mut-mono);
}
.legenda {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie);
}
.legenda .el {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--mut);
}
.patrat { width: 10px; height: 10px; display: block; flex-shrink: 0; }

/* ---------- pe scurt ---------- */

.pescurt { padding: 38px var(--pad) 44px; background: var(--t-tint); }
.pescurt h2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--auriu-inchis);
  font-weight: 400; margin: 0 0 26px;
}
.pescurt ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.pescurt li { display: flex; gap: 14px; align-items: baseline; }
.pescurt li .nr { font-family: var(--mono); font-size: 10px; color: var(--mut-mono); flex-shrink: 0; }
.pescurt li .txt { font-size: 16px; line-height: 1.56; }

/* punct care trimite la un articol din editie */
.pescurt-legat {
  display: block; width: 100%; text-align: left; padding: 0; min-height: 34px;
  color: inherit; cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--auriu);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .18s ease;
}
.pescurt-legat:hover { color: var(--auriu-inchis); }
.pescurt-legat .final { white-space: nowrap; }
.pescurt-legat .sageata {
  font-family: var(--mono); font-size: 12px; color: var(--auriu-inchis);
  margin-left: 6px; text-decoration: none; display: inline-block;
}

/* evidentiere scurta la sosire: cerneala pe hartie, nu bliț colorat */
@keyframes evSosire {
  from { background-color: var(--sosire); }
  to   { background-color: transparent; }
}
:root { --sosire: rgba(168, 129, 74, 0.16); --sosire-noapte: #3A3A5C; }
@media (prefers-color-scheme: dark) { :root { --sosire: rgba(200, 168, 92, 0.20); --sosire-noapte: #33334F; } }
.sosit { animation: evSosire 1.6s ease-out; }
/* pe panoul inversat un voal cald de 16% nu se vede: acolo trebuie mai mult */
.alerta.sosit { animation-name: evSosireNoapte; }
@keyframes evSosireNoapte {
  from { background-color: var(--sosire-noapte); }
  to   { background-color: var(--noapte); }
}
.ed-alerta .alerta.sosit { animation-name: evSosireNoapte; }

/* ---------- alerta (panou inversat) ---------- */

/* Panourile indigo NU sunt suprafete translucide peste lumina calda a paginii:
   albul haloului trece prin ele si le spala intr-un gri-lila plat. Fiecare
   devine propria suprafata animata intunecata, cu fond indigo opac si lumini
   reci (vezi marcarea din reconstruieLumina). */
.alerta { padding: 34px var(--pad) 36px; background: transparent; color: #F7F3EA;
          position: relative; isolation: isolate; }

/* Placa de citire: peste lumini, sub text. Fara ea, centrul unei pete duce
   fundalul la (96,96,139) si textul cade sub AA. La 50% (valoarea din
   document) petele se vad in continuare, dar temperate. */
.alerta > .ambient::after,
.colofon-alerta > .ambient::after {
  content: ""; position: absolute; inset: 0; background: rgba(42,42,69,0.5);
}

/* Chiar si cu placa, punctul cel mai luminos urca la (68,69,104). Titlul si
   rezumatul trec (8,26 si 6,30), dar cele doua cerneli mici raman sub 4,5:
   mono 3,75 si auriul 4,01. Le ridicam DOAR pe suprafetele cu lumina, aceeasi
   nuanta si saturatie, doar mai luminoase. Indigoul fara lumina (arhiva)
   pastreaza cernelile initiale, unde erau deja la 5,19 si 5,54. */
.alerta[data-ambient],
.colofon-alerta[data-ambient] {
  --noapte-mut: #B7B5C5;      /* era #A6A4B8 -> 4,54 */
  --auriu-noapte: #D1B676;    /* era #C8A85C -> 4,64 */
}
.alerta + .alerta { border-top: 1px solid var(--noapte-linie); }
.alerta-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.alerta-cap .romb { background: var(--auriu-noapte); border-color: var(--auriu-noapte); width: 7px; height: 7px; }
.alerta-cap .et { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--auriu-noapte); }
.alerta h3 { font-family: var(--serif); font-weight: 400; font-size: 33px; line-height: 1.1; margin: 0; text-wrap: pretty; }
.alerta .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--noapte-mut);
  margin: 16px 0 22px; display: block;
}
.alerta .meta a { color: var(--auriu-noapte); }
.alerta .rezumat { font-size: 16px; line-height: 1.62; color: var(--noapte-text); margin: 0; text-wrap: pretty; }
.alerta .miza { margin-top: 26px; border-left-color: var(--auriu-noapte); }
.alerta .miza .et { color: var(--auriu-noapte); }
.alerta .miza .txt { color: #F7F3EA; }
.alerta-index { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; }
.alerta-index .st { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--auriu-noapte); }
.alerta-index .dr { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--noapte-mut); }

/* ---------- capitole ---------- */

.capitol {
  margin-top: 42px;
  /* Titlul sta pe rigla, subliniat. Banda din spate urca spre alb, deci partea
     de sus a capitolului se pierde in pagina si numai talpa lui e colorata.
     ATENTIE: padding-ul de jos NU e distanta vizibila pana la rigla. La
     line-height stramt cerneala iese sub cutia titlului, asa ca padding 9px
     dadea doar 1,5px liberi. Cutia e acum destul de inalta cat sa cuprinda
     coada lui t, iar padding-ul controleaza direct spatiul. */
  padding: 20px var(--pad) 0;
  border-bottom: 1px solid var(--cerneala);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
/* Culoarea titlului si a liniei vin din CAT.ink, inline, ca sa nu existe a doua
   sursa de adevar pentru paleta. Cursiv la grosimea normala: Instrument Serif
   are o singura grosime, deci aldinul era sintetizat de browser. Cursivul e
   real, fontul e incarcat cu ital@0;1. */
.capitol h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 38px; letter-spacing: -0.015em; margin: 0; line-height: 1.3;
  color: inherit;
}
.capitol .nr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--mut); padding-bottom: 5px; }

/* ---------- articole ---------- */

.art { padding: 30px var(--pad) 32px; background: transparent; }
.art.impar { background: var(--t-ivory); }
.art-lead { padding: 26px var(--pad) 34px; background: var(--t-ivory); }
.art-compact { padding: 26px var(--pad); }
.art-compact.impar { background: var(--t-ivory); }

.art h3, .art-lead h3, .art-compact h3 {
  font-family: var(--serif); font-weight: 400; margin: 0;
  letter-spacing: -0.012em; text-wrap: pretty;
}
.art-lead h3 { font-size: 34px; line-height: 1.08; }
.art h3 { font-size: 26px; line-height: 1.14; }
.art-compact h3 { font-size: 21px; line-height: 1.18; }

.art .meta, .art-lead .meta, .art-compact .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--mut-mono);
  margin: 14px 0 18px; display: block;
}
.art-compact .meta { margin: 10px 0 16px; }
/* Linkul SURSA din linia meta are 13px inaltime, sub minimul de 34px pe care il
   cere principiul 3. Marim suprafata de atins cu padding si o compensam cu
   marja negativa: degetul primeste 35px, textul ramane exact unde era. */
.meta a {
  color: var(--auriu-inchis);
  display: inline-block;
  padding: 11px 8px;
  margin: -11px -8px;
}

.rezumat { font-size: 16px; line-height: 1.64; color: var(--cerneala-moale); margin: 0; text-wrap: pretty; }
.art-compact .rezumat { font-size: 15px; line-height: 1.6; }

.miza { margin-top: 26px; padding-left: 20px; border-left: 1px solid var(--auriu); }
.art .miza, .art-compact .miza { margin-top: 24px; }
.miza .et {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--auriu-inchis); margin-bottom: 10px;
}
.miza .txt {
  display: block; font-family: var(--serif); font-style: italic; line-height: 1.36;
  font-size: 22.5px; text-wrap: pretty;
}
.art .miza .txt, .art-compact .miza .txt { font-size: 21px; }

.desparte { height: 1px; background: var(--linie); margin: 0 var(--pad); }

/* ---------- imagini: raport fix, fara salturi de macheta ---------- */

.img-banda, .img-mediu, .img-mic, .img-lectura {
  background: repeating-linear-gradient(135deg, var(--schelet) 0 9px, var(--schelet-slab) 9px 18px);
  overflow: hidden;
}
.img-banda img, .img-mediu img, .img-mic img, .img-lectura img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.img-banda { aspect-ratio: 16 / 9; width: 100%; margin-top: 26px; }
.img-lectura { aspect-ratio: 16 / 9; width: 100%; margin: 26px 0 0; }
.img-mediu { width: 88px; aspect-ratio: 1 / 1; flex-shrink: 0; }
.img-mic { width: 64px; aspect-ratio: 1 / 1; flex-shrink: 0; }

.corp-sus { display: flex; gap: 16px; align-items: flex-start; }
.corp-titlu { flex: 1; min-width: 0; }
.art-compact .corp-sus { gap: 14px; }

/* ---------- vizualizarea de lectura ---------- */

.lectura { padding: 26px var(--pad) 10px; }
.lectura-cap .salvat-eticheta { margin-bottom: 16px; }
.lectura h1 {
  font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.08;
  letter-spacing: -0.012em; margin: 0; text-wrap: pretty;
}
.lectura .meta {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--mut-mono);
}
.lectura .miza { margin-top: 26px; }
/* Repovestirea are 400-600 de cuvinte, deci se citeste ca un articol, nu ca un
   rezumat: masura mai ingusta, interlinie mai mare, spatiu intre paragrafe. */
.lectura-text { margin-top: 28px; }
.lectura-text p {
  font-size: 17px; line-height: 1.75; color: var(--cerneala-moale);
  margin: 0 0 20px; text-wrap: pretty; max-width: 54ch;
}
.lectura-text p:last-child { margin-bottom: 0; }
.lectura-text .fara-text { color: var(--mut); font-style: italic; }

/* subtitlurile din repovestire: treapta clara, dar sub titlul articolului */
.lectura-text .sub-rep {
  font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--cerneala);
  margin: 34px 0 14px; max-width: 54ch; text-wrap: pretty;
}
.lectura-text .sub-rep:first-child { margin-top: 0; }

.lectura-provenienta {
  margin: 26px 0 0; font-size: 13px; line-height: 1.6; color: var(--mut);
  font-style: italic; max-width: 54ch;
}
.lectura-provenienta a { font-style: normal; }
.lectura-sursa { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); }
.lectura-sursa a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  display: inline-flex; align-items: center; min-height: 38px;
}

/* ---------- articole legate ---------- */

.legate { padding: 10px var(--pad) 20px; }
.legate h2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--auriu-inchis);
  font-weight: 400; margin: 0 0 16px; padding-top: 20px; border-top: 1px solid var(--linie);
}
.legat {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 0; min-height: 56px; border-bottom: 1px solid var(--linie);
}
.legat:last-of-type { border-bottom: none; }
.legat-cat { display: flex; align-items: center; gap: 7px; flex-shrink: 0; width: 104px; }
.legat-cat .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mut); }
.legat-titlu {
  flex: 1; min-width: 0; font-family: var(--serif); font-size: 19px; line-height: 1.2;
  text-wrap: pretty;
}
.legat-sageata { font-family: var(--mono); font-size: 12px; color: var(--mut-mono); flex-shrink: 0; }
.legat:hover .legat-titlu { color: var(--auriu-inchis); }

/* ---------- butoane de actiune ---------- */

/* Actiunile nu mai sunt casete: un sir de verbe aurii, despartite doar de o
   linie subtire. gap 0, pentru ca separatorul e chiar bordura din stanga. */
.act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 26px; }
.act-rand { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
.act-btn, .act-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  border: 0; background: none; padding: 8px 13px; min-height: 34px;
  color: var(--auriu-inchis);
}
.act-rand > * + * { border-left: 1px solid var(--linie); }
.act-rand > *:first-child, .act > .act-src { padding-left: 0; }
.act-btn:hover, .act-src:hover { color: var(--auriu); }
/* pictograma sta pe linia de baza a majusculelor, nu pe mijlocul cutiei */
.act-btn .ic, .act-src .ic { flex: none; margin-top: -1px; }
.ic-stea { fill: none; }
.act-btn.on .ic-stea { fill: currentColor; }

.alerta .act { margin-top: 28px; }
/* trei butoane pe latimea unui telefon inseamna text rupt in doua randuri:
   mai bine se aseaza pe doua randuri intregi */
.alerta .act-btn, .alerta .act-src { color: var(--auriu-noapte); letter-spacing: 0.16em; }
.alerta .act-rand > * + * { border-left-color: var(--noapte-linie); }
.alerta .act-btn:hover, .alerta .act-src:hover { color: #F7F3EA; }

/* ---------- colofon ---------- */

.colofon { padding: 10px var(--pad) 46px; }
.colofon .in {
  border-top: 1px solid var(--linie); padding-top: 22px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.colofon .txt {
  font-family: var(--mono); font-size: 10px; line-height: 1.9; letter-spacing: 0.16em;
  color: var(--mut-mono); text-align: center;
}
.colofon .cap-nav { gap: 22px; }
.colofon-alerta { background: transparent; color: #F7F3EA; padding: 34px var(--pad) 44px;
                  position: relative; isolation: isolate; }
.colofon-alerta .in { border-top: 1px solid var(--noapte-linie); }
.colofon-alerta .txt { color: var(--noapte-mut); }
.colofon-alerta .romb { background: var(--auriu-noapte); border-color: var(--auriu-noapte); width: 6px; height: 6px; }
.colofon-alerta .nav-btn { color: var(--noapte-mut); }
.colofon-alerta .nav-btn:hover { color: var(--auriu-noapte); }

/* ---------- editia de alerta ---------- */

.ed-alerta { background: transparent; color: #F7F3EA; min-height: 100svh; }
.ed-alerta .marca-text { color: #F7F3EA; }
.ed-alerta .cap-bar .romb { background: var(--auriu-noapte); border-color: var(--auriu-noapte); }
.ed-alerta .cap-bar .nav-btn { color: var(--auriu-noapte); }
.coperta-alerta { padding: 40px var(--pad) 38px; }
.coperta-alerta .et {
  display: block; margin: 46px 0 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--auriu-noapte);
}
.coperta-alerta .ora { font-family: var(--serif); font-size: 96px; line-height: 0.8; letter-spacing: -0.035em; }
.coperta-alerta .linie-rand { height: 1px; background: var(--noapte-linie); margin: 26px 0 16px; }
.coperta-alerta .data { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.coperta-alerta .data .zi { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; }
.coperta-alerta .data .cand { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--noapte-mut); }
.coperta-alerta .salut {
  font-family: var(--serif); font-size: 24px; line-height: 1.34; font-style: italic;
  color: #F7F3EA; margin-top: 30px;
}
.coperta-alerta .numere {
  gap: 18px; justify-content: flex-start; color: var(--noapte-mut); letter-spacing: 0.12em;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--noapte-linie);
}
.ed-alerta .alerta { background: transparent; border-top: 1px solid var(--noapte-linie); }
/* alternanta se muta pe stratul de lumina al fiecarui panou, ca fondul lui e
   acum opac; altfel toate panourile ar iesi identice */
.alerta.impar[data-ambient] > .ambient { background: var(--noapte-jos) !important; }

/* ---------- ecrane secundare (salvate, arhiva) ---------- */

.ecran-cap { padding: 30px var(--pad) 26px; }
.ecran-cap h1 {
  font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 0.9;
  letter-spacing: -0.025em; margin: 34px 0 0;
}
.ecran-cap .titlu-rand { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.ecran-cap .total { font-family: var(--serif); font-size: 44px; line-height: 0.9; color: var(--auriu-cifra); letter-spacing: -0.02em; }
.ecran-cap .sub {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--cerneala);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mut);
}

.cauta {
  margin: 0 var(--pad); display: flex; align-items: center;
  border: 1px solid var(--linie-tare); background: var(--t-ivory);
}
.cauta input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 14px; min-height: 42px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--cerneala);
}
.cauta input:focus { outline: 2px solid var(--auriu); outline-offset: -2px; }
.cauta .lupa { font-family: var(--mono); font-size: 13px; color: var(--mut-mono); padding: 0 14px; }

.filtre { padding: 18px var(--pad); display: flex; flex-wrap: wrap; gap: 7px; }
.filtru {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  padding: 9px 10px; min-height: 34px; color: var(--cerneala);
  border: 1px solid var(--linie-tare);
}
.filtru.on { background: var(--cerneala); color: var(--hartie); border-color: var(--cerneala); }

.grup-luna {
  padding: 14px var(--pad) 12px; background: var(--t-tint);
  border-top: 1px solid var(--linie-tare); border-bottom: 1px solid var(--cerneala);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.grup-luna .luna { font-family: var(--serif); font-size: 24px; }
.grup-luna .nr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mut); }

.salvat-eticheta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--mut);
}
.salvat { padding: 24px var(--pad) 30px; }
.salvat.impar { background: var(--t-ivory); }
.salvat h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.12; margin: 0; text-wrap: pretty; }
.salvat .meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--mut-mono); margin: 12px 0 0; display: block; }
.salvat .rezumat { margin-top: 16px; }
.salvat .miza { margin-top: 18px; }
.salvat .act { margin-top: 20px; }

/* rand compact, la volum mare */
.rand { padding: 20px var(--pad); }
.rand.impar { background: var(--t-ivory); }
.rand h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.16; margin: 0; text-wrap: pretty; }
.rand .sursa { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rand .sursa .patrat { width: 8px; height: 8px; }
.rand .sursa .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mut-mono); }
.rand .miza-scurt {
  font-family: var(--serif); font-size: 18px; line-height: 1.34; font-style: italic;
  color: var(--cerneala-moale); margin-top: 12px; padding-left: 16px;
  border-left: 1px solid var(--auriu); text-wrap: pretty;
}
.rand .act { margin-top: 14px; }

/* gol */
.gol { min-height: 66svh; display: flex; flex-direction: column; justify-content: center; padding: 40px var(--pad) 60px; }
.gol > .romb { width: 12px; height: 12px; margin-bottom: 34px; }
.gol h2 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.0; letter-spacing: -0.02em; margin: 0; }
.gol p { font-size: 16px; line-height: 1.66; color: var(--cerneala-moale); margin: 22px 0 0; text-wrap: pretty; }
.gol .exemplu { margin-top: 30px; padding: 20px; background: var(--t-tint); }
.gol .exemplu .et {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--mut);
}
.gol .exemplu .act { margin-top: 0; }

.subsol-nav { padding: 0 var(--pad) 44px; }
.subsol-nav .in { border-top: 1px solid var(--linie); padding-top: 20px; text-align: center; }

/* ---------- arhiva ---------- */

.raft-rand { padding: 20px var(--pad); display: flex; gap: 18px; align-items: baseline; width: 100%; text-align: left; }
.raft-rand.impar { background: var(--t-ivory); }
.raft-rand .cifra {
  font-family: var(--serif); font-size: 36px; line-height: 0.9; letter-spacing: -0.02em;
  color: var(--auriu-cifra); width: 62px; flex-shrink: 0;
}
.raft-rand .cifra { display: block; }
.raft-rand .corp { display: block; flex: 1; min-width: 0; }
.raft-rand .sus { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.raft-rand .zi { font-family: var(--serif); font-size: 20px; }
.raft-rand .patrate { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.raft-rand .patrate .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mut-mono); margin-left: 6px; }
.raft-rand .patrate .patrat { width: 8px; height: 8px; }
/* Randurile din arhiva sunt prea mici pentru lumini distincte (o pata are
   440-720px). Raman indigo opac: pastreaza adancimea, fara pacla. */
.raft-rand.acum { background: var(--noapte); color: #F7F3EA; padding: 22px var(--pad); }
.raft-rand.acum .cifra { font-size: 40px; color: var(--auriu-noapte); }
.raft-rand.acum .marcaj { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--auriu-noapte); }
.raft-rand.acum .patrate .t { color: var(--noapte-mut); }
.raft-rand.raft-alerta { background: var(--noapte-alt); color: #F7F3EA; padding: 16px var(--pad); align-items: center; }
.raft-rand.raft-alerta .cifra {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--auriu-noapte); line-height: 1.4;
}
.raft-rand.raft-alerta .zi { font-size: 19px; }
.raft-rand.raft-alerta .marcaj { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--noapte-mut); }

.raft-mai { padding: 18px var(--pad) 20px; }
.raft-mai .in { border-top: 1px solid var(--linie); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.raft-mai .et { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--mut-mono); }
.buton-mai { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; border: 1px solid var(--linie-tare); padding: 11px 12px; min-height: 38px; }
.buton-mai:hover { border-color: var(--auriu); }

.stare-rand {
  padding: 0 var(--pad) 44px;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.7; letter-spacing: 0.12em;
  color: var(--mut-mono); display: flex; align-items: flex-start; gap: 9px;
}
.stare-rand .romb { margin-top: 3px; }

/* cate surse mai raspund; discret, in acelasi aparat mono ca starea de rulare */
.surse-blocul { padding: 0 var(--pad) 44px; margin-top: -28px; }
.surse-rand {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 10px 0; min-height: 44px;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.7; letter-spacing: 0.12em;
  color: var(--mut-mono);
}
.surse-rand:disabled { cursor: default; }
.surse-rand .romb { margin-top: 4px; }
.surse-text { flex: 1; }
.surse-cand { color: var(--mut-mono); }
.surse-sageata {
  font-family: var(--mono); font-size: 13px; color: var(--auriu-inchis);
  padding-left: 8px; align-self: center;
}
.surse-rand:hover:not(:disabled) .surse-text { color: var(--cerneala); }

.surse-lista {
  list-style: none; margin: 4px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 10px;
}
.surse-lista li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.surse-lista .nume { font-family: var(--serif); font-size: 17px; line-height: 1.25; }
.surse-lista .cauza {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--mut);
  text-align: right; flex-shrink: 0; max-width: 46%;
}
.surse-lista .surse-nota {
  display: block; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linie);
  font-family: var(--sans); font-size: 13px; line-height: 1.6; letter-spacing: 0;
  color: var(--mut); text-wrap: pretty;
}

/* ---------- se incarca ---------- */

.incarca { min-height: 100svh; display: flex; flex-direction: column; }
.incarca-cap { padding: 22px var(--pad) 0; }
.incarca-cap .romb { animation: evPulse 1.6s ease-in-out infinite; }
.incarca-corp { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px var(--pad) 90px; gap: 12px; }
.incarca-corp .mono-eticheta { margin: 0; display: block; }
.rand-linie { height: 1px; background: var(--cerneala); margin: 6px 0 8px; }
.schelet { height: 11px; background: var(--schelet-slab); }
.schelet.s2 { width: 92%; }
.schelet.s3 { width: 74%; }
.schelet-mare { height: 14px; background: var(--schelet); width: 62%; }
.schelet-mare.s2 { width: 84%; }
@keyframes evPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

.eroare { padding: 60px var(--pad); text-align: center; color: var(--mut); font-size: 15px; line-height: 1.6; }

/* ---------- panoul de trimitere (fallback fara Web Share API) ---------- */

.sheet-fundal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(35, 35, 58, 0.32);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sheet {
  width: 100%; max-width: 440px; max-height: 92svh; overflow-y: auto;
  background: var(--hartie); border: 1px solid var(--cerneala);
  box-shadow: 0 30px 70px -20px rgba(27, 27, 31, 0.5);
}
.sheet-cap {
  padding: 24px 28px 20px; border-bottom: 1px solid var(--linie);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.sheet-cap h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -0.01em; margin: 0; }
.sheet-inchide { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mut); min-height: 36px; }
.sheet-obiect { padding: 22px 28px; background: var(--hartie-scurt); border-bottom: 1px solid var(--linie); }
.sheet-obiect .et { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--auriu-inchis); }
.sheet-obiect .titlu { font-family: var(--serif); font-size: 21px; line-height: 1.2; text-wrap: pretty; }
.sheet-obiect .sursa { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--mut); margin-top: 12px; }
.sheet-obiect .url { font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: var(--mut); margin-top: 6px; word-break: break-all; }
.sheet-optiuni { padding: 18px 28px 10px; display: flex; flex-direction: column; gap: 8px; }
.sheet-btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; min-height: 48px;
  border: 1px solid var(--linie-tare); color: var(--cerneala);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-align: left;
}
.sheet-btn.principal { border-color: var(--cerneala); }
.sheet-btn:hover { border-color: var(--auriu); }
.sheet-btn .eticheta { flex: 1; }
.sheet-btn .sageata { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.sheet-btn .romb { width: 10px; height: 10px; }
.sheet-nota { padding: 14px 28px 22px; }
.sheet-nota .in { border-top: 1px solid var(--linie); padding-top: 14px; font-size: 13px; line-height: 1.6; color: var(--mut); text-wrap: pretty; }

/* ---------- notificare scurta ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  z-index: 80; opacity: 0; transition: opacity .22s ease, transform .22s ease;
  background: var(--noapte); color: #F7F3EA;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  padding: 12px 18px; max-width: 86vw;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desktop: doua coloane, "de ce conteaza" in margine ---------- */

@media (min-width: 1080px) {
  :root { --pad: 56px; }

  .ed { max-width: 1180px; }

  .coperta {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px 40px;
    min-height: 0; padding: 40px var(--pad) 0;
  }
  .coperta-sus { grid-column: 1; grid-row: 1; align-self: end; display: flex; align-items: flex-end; gap: 20px; }
  .coperta .salut { grid-column: 2; grid-row: 1; align-self: end; font-size: 19px; line-height: 1.4; font-style: italic; color: #3A3850; }
  .coperta .salut-cont { grid-column: 1 / -1; grid-row: 2; font-size: 15px; max-width: 76ch; margin: 12px 0 0; }
  .coperta-numar { gap: 20px; }
  .coperta-cifra { font-size: 92px; }
  .coperta-rand { display: none; }
  .coperta-data { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 8px; }
  .coperta-data .zi { font-size: 26px; }
  .coperta-jos { grid-column: 1 / -1; grid-row: 3; padding: 28px 0 0; margin-top: 16px; border-top: 2px solid var(--cerneala); }

  .capitol { padding: 22px var(--pad) 14px; }
  .capitol h2 { font-size: 34px; }

  .art, .art-lead, .art-compact {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px;
    padding: 34px var(--pad) 40px; align-items: start;
  }
  .art-lead h3 { font-size: 40px; line-height: 1.06; }
  .art h3 { font-size: 30px; line-height: 1.1; }
  .art-compact h3 { font-size: 24px; }
  .rezumat { font-size: 17px; line-height: 1.66; max-width: 62ch; }
  /* nota din margine tine ambele randuri, ca butoanele sa urce sub text */
  .art > .corp, .art-lead > .corp, .art-compact > .corp { grid-column: 1; grid-row: 1; }
  .art > .miza, .art-lead > .miza, .art-compact > .miza { grid-column: 2; grid-row: 1 / span 2; }
  .art > .act, .art-lead > .act, .art-compact > .act { grid-column: 1; grid-row: 2; align-self: start; margin-top: 24px; }
  .art .miza, .art-lead .miza, .art-compact .miza { margin-top: 0; padding-left: 22px; }
  .miza .txt { font-size: 23px; line-height: 1.38; }
  .art .miza .txt, .art-compact .miza .txt { font-size: 21px; }

  .pescurt ol { columns: 2; column-gap: 44px; display: block; }
  .pescurt li { break-inside: avoid; margin-bottom: 20px; }

  .alerta { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
  .alerta .alerta-cap, .alerta .alerta-index { grid-column: 1 / -1; margin-bottom: 0; }
  .alerta .miza { margin-top: 0; padding-left: 22px; }
  .alerta .act { grid-column: 1 / -1; }
  .alerta .act-btn { flex: 0 0 auto; min-width: 180px; }

  .salvat, .rand { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
  .salvat .miza, .rand .miza-scurt { margin-top: 0; }
  .salvat .act, .rand .act { grid-column: 1; }
  .salvat .salvat-eticheta { grid-column: 1 / -1; }

  /* banda de imagine a articolului-lead se aliniaza cu coloana de text,
     nu cu toata latimea paginii */
  .img-banda {
    max-width: calc(100% - 300px - 44px - 2 * var(--pad));
    margin-left: var(--pad); margin-right: var(--pad);
  }
  .img-mediu { width: 120px; }
  .img-mic { width: 88px; }

  .lectura { max-width: 860px; padding: 34px var(--pad) 10px; }
  .lectura h1 { font-size: 44px; line-height: 1.04; }
  .img-lectura { max-width: 760px; }
  .legate { max-width: 860px; }
  .legat-titlu { font-size: 21px; }

  /* pe desktop randurile de stare nu se intind pe toata latimea: butonul de
     desfacere ar ajunge la un metru de eticheta lui, iar numele sursei si cauza
     s-ar despartii prea tare ca sa se mai citeasca in pereche */
  .stare-rand, .surse-blocul { max-width: 620px; }

  .gol { align-items: flex-start; min-height: 60svh; }
  .gol h2 { font-size: 52px; }
  .gol p, .gol .exemplu { max-width: 520px; }
}

/* Placile de categorie raman deschise si in modul intunecat (sunt "hartie colorata"),
   deci textul de pe ele trebuie sa ramana cerneala inchisa. */
@media (prefers-color-scheme: dark) {
  /* culoarea titlului si a liniei vine inline din CAT.ink si e calculata pentru
     placa pastel, care ramane deschisa si aici; doar numerotarea are nevoie de
     o cerneala proprie. */
  .capitol .nr { color: #55524A; }
  .filtru:not(.on) { color: #23233A; }
  .alerta { box-shadow: inset 0 1px 0 var(--auriu-noapte), inset 0 -1px 0 var(--auriu-noapte); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}