/* Stilul părții publice.
 *
 * Stă într-un FIȘIER, nu într-un `<style>` inline, și nu e o preferință: CSP-ul public e
 * `style-src 'self'`, fără `unsafe-inline` și fără nonce pe stil (ARHITECTURA §11; `src/carcasa.ts`
 * spune de ce partea publică ține stilul în afara paginii).
 *
 * Fișierul ăsta e SURSA. Ce se servește e copia cu amprentă în nume (`/static/stil.<hash>.css`,
 * din `src/manifest-static.ts`, generat de `scripts/genereaza-manifest.ts`), cu
 * `max-age=31536000, immutable`: numele se schimbă când se schimbă conținutul, deci un cache
 * lung nu poate servi niciodată ceva vechi.
 *
 * ASPECTUL E CEL DIN V2 (cerere proprietar, 23.09.2026), adus aici regulă cu regulă din
 * `packages/ui/src/index.ts` al V2 (`STIL_COMUN`), din `apps/home/src/index.ts` (`.apps`) și din
 * `apps/home/src/chinonic.ts` (`.ch-*`). Ce NU s-a adus: antetul care se strânge la derulare
 * (`.sus.mic`) — antetul e doar sticky. Butonul de temă din subsol și tema după soare au venit pe
 * 24.09.2026 (proprietarul): scriptul e `JS_TEMA` din `@xc/ui`, într-un `<script nonce>`
 * (`src/carcasa.ts`), iar aici sunt regulile lui — blocul `:root[data-tema="dark"]` și `.buton-tema`.
 *
 * ⚠️ CULORILE. Singurul loc din platformă unde se scrie o culoare e `packages/ui/src/tokens.ts`,
 * dar de acolo valorile ajung în pagină printr-un `<style nonce>`, pe care partea publică nu-l
 * poate folosi. Până când fișierul ăsta se va genera dintr-un pas de build, blocul `:root` de mai
 * jos e o COPIE a lui `TOKENS` — marcată „= @xc/ui tokens" la fiecare grup —, iar
 * `src/tokens-stil.test.ts` cade dacă cele două se despart. Nu adăuga aici o culoare care nu e în
 * `tokens.ts`: n-ar avea cine s-o prindă la trecerea de design.
 */

:root {
  color-scheme: light dark;

  /* = @xc/ui tokens (TOKENS.baza) */
  --font-text: 17px/1.55 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-ui: ui-sans-serif, system-ui;
  --text-h1: 36px;
  --text-h2: 25px;
  --text-h3: 17px;
  --coloana: 680px;
  --raza: 10px;
  --raza-mica: 8px;
  --raza-mini: 5px;
  --spatiu-1: 4px;
  --spatiu-2: 8px;
  --pad-lateral: 20px;
  --pad-jos: 80px;
  --tipar-fund: #fff;
  --tipar-cerneala: #000;

  /* = @xc/ui tokens (TOKENS.light) */
  --ink: #14181F;
  --paper: #FCFCFB;
  --soft: #4A5261;
  --faint: #808A9B;
  --rule: #DCDFE6;
  --rosu: #C62234;
  --tinta: #F4F5F7;
  /* = @xc/ui tokens (TOKENS.light) — albastrul sfinților români și verdele zilei de azi (Calendarul) */
  --albastru: #1C58BB;
  --azi: #12D96A;
  --azi-fund: rgba(18, 217, 106, .10);
  /* = @xc/ui tokens (TOKENS.light) — umbra meniului de cont */
  --umbra: rgba(0, 0, 0, .10);
  /* = @xc/ui tokens (TOKENS.light) — filtrele Calendarului: crucea neagră, movul evlaviei, filtrul aprins */
  --negru: #2B2F38;
  --mov: #6B4FA8;
  --rosu-palid: rgba(198, 34, 52, .06);
  /* = @xc/ui tokens (TOKENS.light) — alerta bună și cea de atenție (`.alerta`, comune) */
  --bun: #2E8A4A;
  --atentie: #B8860B;
  --atentie-text: #8A5A00;
  /* = @xc/ui tokens (TOKENS.light) — verdele săptămânii „programate" (Programul) */
  --programat: #0A6B41;
}

/* Tema de noapte, în cele trei blocuri din V2 (și din `cssTokens()` al lui `@xc/ui`): preferința
 * sistemului — numai dacă omul n-a cerut anume lumina —, apoi alegerea (`data-tema` pe `<html>`,
 * pusă de `JS_TEMA` după soare sau după butonul din subsol). Blocul alegerii are ACELEAȘI valori
 * ca al sistemului; `src/tokens-stil.test.ts` le verifică pe amândouă față de `TOKENS.dark`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='light']) {
    /* = @xc/ui tokens (TOKENS.dark) */
    --ink: #E7EAEF;
    --paper: #0E1116;
    --soft: #A7B0BE;
    --faint: #75808F;
    --rule: #262D37;
    --rosu: #F0616F;
    --tinta: #161B22;
    --albastru: #7FA6F0;
    --azi: #3BFF9E;
    --azi-fund: rgba(59, 255, 158, .09);
    --umbra: rgba(0, 0, 0, .10);
    --negru: #C3C9D3;
    --mov: #B9A0E8;
    --rosu-palid: rgba(240, 97, 111, .09);
    --bun: #2E8A4A;
    --atentie: #B8860B;
    --atentie-text: #8A5A00;
    --programat: #5FBF8D;
  }
}

:root[data-tema='dark'] {
  color-scheme: dark;

  /* = @xc/ui tokens (TOKENS.dark) */
  --ink: #E7EAEF;
  --paper: #0E1116;
  --soft: #A7B0BE;
  --faint: #75808F;
  --rule: #262D37;
  --rosu: #F0616F;
  --tinta: #161B22;
  --albastru: #7FA6F0;
  --azi: #3BFF9E;
  --azi-fund: rgba(59, 255, 158, .09);
  --umbra: rgba(0, 0, 0, .10);
  --negru: #C3C9D3;
  --mov: #B9A0E8;
  --rosu-palid: rgba(240, 97, 111, .09);
  --bun: #2E8A4A;
  --atentie: #B8860B;
  --atentie-text: #8A5A00;
  --programat: #5FBF8D;
}

/* Lumina cerută anume: și controalele browserului (bara de derulare, câmpurile) o urmează. */
:root[data-tema='light'] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* Bara de derulare ține locul și când pagina e scurtă: altfel trecerea de la o pagină lungă la
 * una scurtă mută tot conținutul în lateral. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* REGULA FERESTRELOR (V2, 13.09.2026: „să fie o regulă generală când faci un pop-up"): cât ține
 * deschisă o fereastră PESTE pagină (`<dialog>` deschis cu `showModal`), pagina din spate nu se
 * derulează. În V2 o scria carcasa din JavaScript (`JS_CAP` punea `cu-fereastra` pe `<html>`); aici,
 * fără niciun octet de script în carcasă, o face CSS-ul, pentru orice fereastră a oricărei pagini
 * publice — nicio aplicație nu și-o scrie singură. Pe `<html>`, nu pe `body`: rădăcina are
 * `overflow-y: scroll`, deci derularea e a ei; `scrollbar-gutter: stable` ține locul barei. */
html:has(dialog[open]),
html:has(dialog[open]) body {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  padding: 0 var(--pad-lateral) var(--pad-jos);
  background: var(--paper);
  color: var(--ink);
  font: var(--font-text);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.w {
  max-width: var(--coloana);
  margin: 0 auto;
}

a {
  color: var(--rosu);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

h1 a {
  color: inherit;
  text-decoration: none;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 34px 0 10px;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin: 26px 0 8px;
}

p {
  margin: 10px 0;
}

/* ——— antetul ——————————————————————————————————————————————————————————————————————————— */

/* Sticky, cu marginile negative care anulează padding-ul lateral al corpului, ca în V2. Fără
 * varianta strânsă (`.sus.mic`): aceea se pune și se scoate din JavaScript. */
.sus {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--paper);
  margin: 0 calc(-1 * var(--pad-lateral));
  padding: 8px var(--pad-lateral) 10px;
  border-bottom: 1px solid var(--rule);
}

.titlu {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.titlu h1 {
  letter-spacing: 0.06em;
  margin: 12px 0 0;
}

/* Titlul fix „SFÂNTUL ILIE" (proprietarul, 23.09.2026): mai mic pe mobil și pe UN singur rând —
 * text cunoscut dinainte, nu unul care poate veni de oriunde, deci nowrap nu riscă să taie nimic. */
@media (max-width: 600px) {
  .titlu h1 {
    font-size: 22px;
    white-space: nowrap;
  }
}

/* Fără zoom automat pe iOS (cerere proprietar 30.09.2026, ca în V2): Safari mărește pagina când un
 * câmp cu font sub 16px primește focus. `!important` fiindcă regulile pe clasă (`.cont-admin select`,
 * 13px) bat `input, select, textarea` la specificitate. */
@media (max-width: 820px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

.eyebrow {
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: -1.5px 0 13.5px;
}

.eyebrow a {
  color: var(--faint);
  text-decoration: none;
}

/* „Cont" — iconiță + cuvânt, mereu același pentru toată lumea: public-web n-are sesiune. */
.cont {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
  text-decoration: none;
  font: 13px/1 var(--font-ui);
  white-space: nowrap;
  max-width: 45%;
}

.cont span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cont svg {
  flex: none;
}

.cont:hover {
  color: var(--rosu);
}

/* MENIUL CONTULUI (cerința proprietarului, 24.09.2026: meniul merge pe toate paginile). Marcajul îl
 * desenează `meniuCont` din `@xc/ui` și îl aduce, după încărcare, scriptul carcasei din
 * `/cont/meniu`. Regulile sunt cele din `STIL_COMUN` (`packages/ui/src/stil.ts`, blocul
 * `.cont-meniu` … `.cont-admin`), regulă cu regulă — aceeași înfățișare ca în paginile
 * autentificate. Schimbă-le în AMÂNDOUĂ locurile. */
.cont-meniu {
  position: relative;
  max-width: 45%;
  display: flex;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.cont-meniu .cont {
  max-width: 100%;
}

.cont-meniu summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.cont-meniu summary::-webkit-details-marker {
  display: none;
}

.cont-meniu[open] summary,
.cont-meniu summary.mascat,
.cont-meniu summary.mascat svg {
  color: var(--rosu);
}

.cont-lista {
  position: absolute;
  right: 0;
  top: calc(100% + var(--spatiu-2));
  min-width: 240px;
  max-width: calc(100vw - 40px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--raza);
  padding: 6px 0;
  box-shadow: 0 8px 24px var(--umbra);
  z-index: 60;
}

.cont-lista a {
  display: block;
  padding: 9px 16px;
  color: var(--ink);
  text-decoration: none;
  font: 14px/1.2 var(--font-ui);
}

.cont-lista a:hover {
  background: var(--tinta);
  color: var(--rosu);
}

.cont-desparte {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 6px 0;
}

.cont-lista .cont-acum {
  color: var(--rosu);
  font-weight: 600;
}

/* Rândurile „vezi ca" cu token: formulare POST cu un singur buton, care arată ca rândurile-link. */
.cont-lista form.cont-ca {
  display: block;
  margin: 0;
  padding: 0;
}

.cont-lista form.cont-ca button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font: 14px/1.2 var(--font-ui);
}

.cont-lista form.cont-ca button:hover {
  background: var(--tinta);
  color: var(--rosu);
}

.cont-lista form.cont-ca button.cont-acum {
  color: var(--rosu);
  font-weight: 600;
}

.cont-lista form.cont-admin {
  display: flex;
  align-items: center;
  gap: var(--spatiu-2);
  flex-wrap: nowrap;
  margin: 0;
  padding: 9px 16px;
}

.cont-admin label {
  display: inline;
  margin: 0;
  letter-spacing: normal;
  color: inherit;
  font: 14px/1.2 var(--font-ui);
}

.cont-admin select {
  font: 13px var(--font-ui);
  padding: var(--spatiu-1) 6px;
  border: 1px solid var(--rule);
  border-radius: var(--raza-mini);
  background: var(--paper);
  color: var(--ink);
}

.cont-admin button {
  font: 13px var(--font-ui);
  padding: var(--spatiu-1) var(--spatiu-2);
  border: 1px solid var(--rule);
  border-radius: var(--raza-mini);
  background: var(--tinta);
  color: var(--ink);
  cursor: pointer;
}

.cont-admin button[hidden] {
  display: none;
}

/* Rândul de unelte al unei aplicații (slotul `unelte` din carcasă, `nav.btns`) — V2, `STIL_COMUN`,
 * regulă cu regulă. Decizia 14: rândul de unelte din antet se copiază 1:1. A intrat cu Biblia
 * (NT / VT / lupa); următoarele aplicații portate îl folosesc la fel. */
.btns {
  display: flex;
  gap: 10px;
  margin: 0 0 4px;
  flex-wrap: wrap;
}

.btn {
  flex: 1;
  text-align: center;
  padding: 9px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--raza);
  background: var(--tinta);
  color: var(--ink);
  font: 15px var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}

.btn[aria-expanded='true'],
.btn.activ {
  border-color: var(--rosu);
  color: var(--rosu);
}

.btn svg {
  vertical-align: -4px;
}

/* butonul fără drept: se vede că există, dar nu se apasă (V2 `STIL_COMUN`; urcat aici din
 * `calendar.css`, unde stătea local — comun oricărei pagini care are butoane fără drept). */
.btn.gol {
  opacity: .4;
  pointer-events: none;
}

/* ——— conținutul ———————————————————————————————————————————————————————————————————————— */

/* Titlul paginii stă jos față de antet, ca în V2 (`h1:first-child { margin-top:48px }`). */
main > h1:first-child {
  margin-top: 48px;
}

/* Grila ușii: butoanele secțiunilor (V2, `apps/home` — `.apps`) — singurul meniu al secțiunilor,
 * de când taburile au ieșit de pe paginile publice (proprietarul, 24.09.2026). */
nav.apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 22px 0 8px;
}

nav.apps a {
  display: block;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--raza);
  color: var(--ink);
  text-decoration: none;
  font: 15px/1.2 var(--font-ui);
}

nav.apps a:hover {
  border-color: var(--rosu);
  color: var(--rosu);
}

nav.apps b {
  display: block;
  font-weight: 400;
}

nav.apps .adr {
  display: block;
  margin-top: 4px;
  font: 11.5px/1.2 var(--font-ui);
  color: var(--faint);
  letter-spacing: 0.01em;
}

nav.apps a:hover .adr {
  color: var(--rosu);
}

nav.apps a.transmisie {
  border-color: var(--atentie);
}

nav.apps a.transmisie:hover {
  border-color: var(--atentie);
  color: var(--atentie);
}

nav.apps a.transmisie:hover .adr {
  color: var(--atentie);
}

/* Categoriile de sub grilă (V2, `apps/home/src/chinonic.ts` — `.ch-*`).
 * De la T6.3/P3.1 sunt TREI: Anunțuri + cele două grămezi ale chinonicului — pe ecran larg, două
 * coloane (a treia coboară pe rândul următor); pe telefon, una sub alta (V2: „DOUĂ una lângă alta
 * peste 860px"). */
.ch-usa {
  display: grid;
  gap: 26px;
  margin: 34px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 860px) {
  .ch-usa {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ch-categorie > h2 {
  margin: 0 0 2px;
  font-size: 21px;
  font-weight: 400;
}

.ch-spune {
  margin: 0 0 12px;
  color: var(--faint);
  font-size: 14px;
}

.ch-compacta {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ch-rand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.ch-rand:last-child {
  border-bottom: 0;
}

.ch-t {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  flex: 1 1 260px;
}

.ch-t:hover {
  color: var(--rosu);
  text-decoration: underline;
}

.ch-cand {
  color: var(--faint);
  font: 12.5px/1.4 var(--font-ui);
  white-space: nowrap;
}

.ch-toate {
  margin: 16px 0 0;
}

.ch-toate a {
  color: var(--rosu);
  text-decoration: none;
  font: 600 13.5px/1 var(--font-ui);
}

.ch-toate a:hover {
  text-decoration: underline;
}

/* Listele lungi (`/anunturi`, `/cauta`). */
ul.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.lista li {
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}

ul.lista li:last-child {
  border-bottom: 0;
}

ul.lista a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15.5px;
}

ul.lista a:hover {
  color: var(--rosu);
  text-decoration: underline;
}

ul.lista p {
  margin: 4px 0 0;
  color: var(--soft);
  font-size: 15px;
}

time {
  color: var(--faint);
  font: 12.5px/1.4 var(--font-ui);
}

.gol {
  color: var(--faint);
  font-style: italic;
}

/* Alerta comună (V2 `@xc/ui`, `alerta()`), adăugată aici o singură dată pentru toate paginile
 * statice care o folosesc — nu se duplică local. `.info` n-are regulă a ei: rămâne pe chenarul și
 * scrisul de bază (`--rule` / `--ink`, moștenit). */
.alerta {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--raza);
  font: 15px/1.45 var(--font-ui);
  margin: 14px 0;
}

.alerta.rea {
  border-color: var(--rosu);
  color: var(--rosu);
}

.alerta.buna {
  border-color: var(--bun);
  color: var(--bun);
}

.alerta.atentie {
  border-color: var(--atentie);
  color: var(--atentie-text);
}

/* ——— căutarea ——————————————————————————————————————————————————————————————————————————— */

form.cauta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}

form.cauta input,
form.cauta button {
  font: 16px var(--font-ui);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--raza-mica);
  background: var(--tinta);
  color: var(--ink);
}

form.cauta input {
  flex: 1;
  min-width: 200px;
}

form.cauta button {
  cursor: pointer;
}

/* ——— subsolul ——————————————————————————————————————————————————————————————————————————— */

/* ⚠️ Fără anul curent lângă copyright, spre deosebire de V2: anul vine din ceas, iar `ETag`-ul
 * paginii se calculează din corp — la miezul nopții de Anul Nou s-ar schimba toate paginile. */
.subsol-linie {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0 0;
}

.versiune {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 11px/1 var(--font-ui);
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* Butonul de temă (V2, `STIL_COMUN`): ascuns în marcaj, îl arată `JS_TEMA` — fără JS nu rămâne
 * un buton mort. */
.buton-tema {
  font: 20px/1 var(--font-ui);
  color: var(--faint);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.buton-tema:hover {
  color: var(--ink);
  border-color: var(--soft);
}

.buton-tema[hidden] {
  display: none;
}

.subsol {
  margin-top: 12px;
  font: 13px/1.55 var(--font-ui);
  color: var(--faint);
}

.subsol p {
  margin: 0 0 8px;
}

.copyright {
  text-align: center;
}

@media print {
  .sus,
  .subsol-linie,
  .versiune,
  .subsol {
    display: none !important;
  }

  body {
    padding: 0;
    background: var(--tipar-fund);
    color: var(--tipar-cerneala);
  }
}

/* MARCAJUL DE STAGING (`@xc/ui/marcaj-staging`): copia regulii `CSS_MARCAJ_STAGING`; clasa o pune serverul doar pe gazda staging. */
html.mediu-staging::before{content:"";position:fixed;top:0;left:0;width:100%;height:3px;background:red;z-index:2147483647;pointer-events:none}