/* Newsletterul — stilul LOCAL, lipit DUPĂ `stil.css` (ca la Tipic/Calendar, ca în V2, unde `LOCAL`
 * din `apps/newsletter/src/stil.ts` venea după stilul carcasei și îl suprascria).
 *
 * Adus din V2 regulă cu regulă (decizia 14: UI-ul vizibil se copiază 1:1). Ce NU s-a adus, și de ce:
 *  1. FEREASTRA DE ABONARE (`.modal`, `.camp`, `.bifa`, `.btn-plin`) — abonarea e un link spre
 *     `/cont/abonamente`, ca la Tipic, nu o fereastră aici (public-web n-are formulare de mutație).
 *  2. SĂGEATA „buletin nou" (`.viit`) — segmentul de admin a ieșit din pastilă (manifest §6).
 *  3. SABLONUL DIN SETĂRI (`.sab-*`) — `/setari` e a zonei cu cont, nu a arhivei publice.
 *  Rest neschimbat: culorile sunt numai variabilele din `stil.css` (= `@xc/ui` tokens), ca peste tot.
 *
 * CHEILE „Arhiva" și lupa sunt LINKURI (`#bara-ani`, `#bara-cautare`), nu butoane fără `href` (V2 le
 * muta din JS): fără JavaScript barele se deschid din `:target`, mai jos (decizia 12, ca la Tipic).
 */

/* ARHIVA — un rând pe număr: data măruntă la stânga, subiectul după ea.
   Nu tabel: pe telefon subiectele sunt lungi și un tabel le-ar rupe urât. */
.luna { margin:30px 0 6px }
.numere { list-style:none; padding:0; margin:0 }
.numere li { padding:9px 0; border-bottom:1px solid var(--rule) }
.numere li:last-child { border-bottom:0 }

/* Listele, ca în V2 (`ul, ol { padding-left:22px } li { margin:3px 0 }` din `@xc/ui`) — numerele din arhivă
   și lista numerelor; `.numere` își ia singură `padding:0`. */
main ul, main ol { padding-left:22px }
main li { margin:3px 0 }
.numere .cand { display:inline-block; min-width:58px; color:var(--faint);
                font:13px/1.5 ui-sans-serif,system-ui }
.numere a { color:var(--ink); text-decoration:none }
.numere a:hover { color:var(--rosu); text-decoration:underline }
/* la căutare rândurile vin din ani diferiți, deci data poartă și anul — îi trebuie loc */
.numere.cu-an .cand { min-width:88px }
.cate { color:var(--faint); font-size:14px; margin:2px 0 0 }

/* TITLUL NUMĂRULUI. Scris mai mic decât un titlu obișnuit, ca să intre pe UN RÂND și pe telefon:
   întâi cade luna pe forma scurtă („15 sept. 2026"), apoi scade scrisul. */
.titlu-numar { font-size:22px; line-height:1.25; margin:22px 0 4px }
.titlu-numar .scurt { display:none }
@media (max-width:600px) {
  .titlu-numar { font-size:17px }
  .titlu-numar .lung { display:none }
  .titlu-numar .scurt { display:inline }
}
@media (max-width:400px) { .titlu-numar { font-size:15.5px } }

/* NEWSLETTERUL. Ce se vede aici e emailul așa cum a plecat — tabele și culori proprii, scrise
   acum ani. De-aia are nevoie de două lucruri:
   1. să scape de stilul global de tabel (chenare, padding, majuscule la <th>),
   2. să rămână pe fundal alb și text negru și la tema întunecată — un email n-are temă, iar
      culorile lui sunt scrise în el cu stil inline. */
.email { background:#fff; color:#111; border:1px solid var(--rule); border-radius:12px;
         overflow:hidden; margin:18px 0 0 }
.email table { border-collapse:collapse; width:auto; font-size:inherit }
.email table[width="100%"] { width:100% }
.email td, .email th { padding:0; border:0;
                       font:inherit; letter-spacing:normal; text-transform:none; color:inherit }
.email img { max-width:100%; height:auto }
.email td[align="center"] img { margin-left:auto; margin-right:auto }
.email .mailpoet_image img[width="660"] { width:100% }
.email .mailpoet_content-wrapper { width:100% !important; max-width:100% !important }
.email td:has(> div > table img[src*="buletin-nr"]) > div,
.email td:has(> div > table img[src*="buletin-nr"]) > div > table {
  max-width:100% !important; width:100% !important }
.email img[src*="buletin-nr"] { width:100% }
.email a { text-decoration:underline }
.email hr { margin:0 }
.email .mailpoet_template, .email .mailpoet-wrapper { background:transparent !important }
@media screen and (max-width: 480px) {
  .email .mailpoet_button { width:100% !important }
}
@media screen and (max-width: 599px) {
  .email .mailpoet_header { padding:10px 20px }
  .email .mailpoet_button { width:100% !important; padding:5px 0 !important;
                            box-sizing:border-box !important }
  .email div, .email .mailpoet_cols-two, .email .mailpoet_cols-three { max-width:100% !important }
}

/* RÂNDUL DE UNELTE din antet — o PASTILĂ cât tot rândul (bulina · zona de scris · Arhiva · lupa) și,
   singură afară la dreapta, ABONAREA. */
.btns { flex-wrap:nowrap }
.btns .gol { opacity:.35; pointer-events:none }
.btns .btn { min-width:0 }
.btns .btn[aria-disabled="true"] { cursor:default }
.btns .btn[aria-disabled="true"]:focus { outline:none;
                 background:color-mix(in srgb, var(--rosu) 18%, transparent) }

.btns .pastila { display:flex; flex:1 1 0; min-width:0; align-items:stretch;
                 border:1px solid var(--rule); border-radius:10px; background:var(--tinta) }
.btns .pastila .btn { flex:0 0 auto; border:0; border-radius:0; background:transparent; text-decoration:none }
.btns .pastila > :first-child { border-radius:9px 0 0 9px }
.btns .pastila > :last-child { border-radius:0 9px 9px 0 }
.btns .pastila .btn + .btn { border-left:1px solid var(--rule) }
.btns .pastila a.btn:hover { color:var(--rosu); background:var(--paper) }
.btns .pastila .btn.activ { color:var(--rosu); font-weight:600;
                 background:color-mix(in srgb, var(--rosu) 11%, transparent) }
.btns .pastila .punct, .btns .pastila .arh, .btns .pastila .cheie {
                 flex:0 0 46px; width:46px; padding-left:0; padding-right:0;
                 display:flex; align-items:center; justify-content:center }
.btns .pastila .arh svg, .btns .pastila .cheie svg { vertical-align:0 }
.btns .punct::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor }
.btns .punct:hover { color:var(--rosu) }
.btns .pastila .cheie:hover, .btns .pastila .arh:not([aria-disabled="true"]):hover { color:var(--rosu); background:var(--paper) }
.btns .pastila .cheie[aria-expanded="true"], .btns .pastila .arh[aria-expanded="true"] {
                 color:var(--rosu); background:color-mix(in srgb, var(--rosu) 11%, transparent) }
.btns .pastila .acum { display:flex; align-items:center; justify-content:center;
                 flex:1 1 auto; min-width:0; padding:11px 13px;
                 white-space:nowrap; overflow:hidden;
                 border-left:1px solid var(--rule); border-right:1px solid var(--rule);
                 background:var(--paper);
                 font:600 14px/1 ui-sans-serif,system-ui; color:var(--rosu) }
.btns .pastila .acum .scurt { display:none }
.btns .pastila .acum b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.btns .abon { margin-left:auto }
.btns .mic { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px;
             padding-left:14px; padding-right:14px; font:600 12.5px/1 ui-sans-serif,system-ui;
             letter-spacing:.06em }
.btns .mic svg { vertical-align:0 }

/* BARA ANILOR — sub rândul de unelte, ascunsă până se apasă cheia Arhivei — DAR pe pagina Arhivei
   coborâtă din capul locului, fiindcă acolo a luat locul pătrățelelor cu ani din corpul paginii. */
.bara-ani { display:flex; align-items:stretch; margin:0 0 6px;
            border:1px solid var(--rule); border-radius:10px; background:var(--tinta);
            overflow:hidden }
.bara-ani[hidden] { display:none }
/* FĂRĂ JAVASCRIPT: bara se deschide din adresă (cheia pastilei e un link spre `#bara-ani`). Stă
   DUPĂ regula `[hidden]`: aceeași specificitate, deci câștigă cea de jos. */
.bara-ani:target { display:flex }
.bara-ani .fasie { flex:1 1 auto; min-width:0; position:relative;
                   overflow-x:auto; overscroll-behavior-x:contain;
                   -webkit-overflow-scrolling:touch; scrollbar-width:none }
.bara-ani .fasie::-webkit-scrollbar { display:none }
.bara-ani .ani { display:flex; align-items:stretch; gap:0; width:max-content; padding:0 }
.an-buton { flex:none; display:flex; align-items:center; justify-content:center;
            color:var(--soft); text-decoration:none; background:transparent;
            border:0; border-radius:0; padding:11px 13px;
            font:600 12.5px/1 ui-sans-serif,system-ui; letter-spacing:.03em; white-space:nowrap }
.an-buton + .an-buton { border-left:1px solid var(--rule) }
.an-buton:hover { color:var(--rosu); background:var(--paper) }
.an-buton.activ { color:var(--rosu); font-weight:700;
                  background:color-mix(in srgb, var(--rosu) 11%, transparent) }
.bara-ani > .an-buton.altele { flex:none; border-left:1px solid var(--rule); letter-spacing:.04em }

.anul { margin:26px 0 2px; font-size:19px; color:var(--soft) }
.anul + .luna { margin-top:8px }
.bara-ani .sageata { flex:none; border:0; background:transparent; color:var(--faint); cursor:pointer;
                     font:300 19px/1 ui-sans-serif,system-ui; padding:0 6px; border-radius:0 }
.bara-ani .sageata + .fasie, .bara-ani .fasie + .sageata { border-left:1px solid var(--rule) }
.bara-ani .sageata:hover:not([disabled]) { color:var(--rosu); background:var(--paper) }
.bara-ani .sageata[disabled] { opacity:.25; cursor:default }
.bara-ani .sageata[hidden] { display:none }

/* BARA CĂUTĂRII — sub rândul de unelte, ascunsă până se apasă lupa din pastilă. */
.bara-cautare { display:flex; align-items:stretch; margin:0 0 6px;
                border:1px solid var(--rule); border-radius:10px; background:var(--tinta);
                overflow:hidden }
.bara-cautare[hidden] { display:none }
.bara-cautare:target { display:flex }
.bara-cautare .cauta { display:flex; align-items:stretch; flex:1 1 auto; min-width:0; margin:0 }
/* ⚠️ Prefixate cu `.bara-cautare`: `form.cauta input/button` din `stil.css` (0,1,1) ar bate altfel
   `.cauta-camp`/`.cauta-du` (0,1,0) și bara n-ar mai fi o singură casetă rotunjită, cu despărțitor. */
.bara-cautare .cauta-camp { flex:1 1 auto; min-width:0; appearance:none; -webkit-appearance:none;
              border:0; border-radius:0; background:transparent; color:var(--ink);
              padding:11px 14px; outline:none; font:400 14px/1.2 ui-sans-serif,system-ui }
.cauta-camp::placeholder { color:var(--faint) }
.cauta-camp::-webkit-search-cancel-button { -webkit-appearance:none }
.bara-cautare .cauta-du { flex:0 0 46px; display:flex; align-items:center; justify-content:center;
            border:0; border-left:1px solid var(--rule); border-radius:0;
            background:transparent; color:var(--soft); cursor:pointer }
.bara-cautare .cauta-du:hover { color:var(--rosu); background:var(--paper) }
/* ⚠️ `stil.css` pune pe telefon `input,select,textarea{font-size:16px!important}` (împotriva zoom-ului
   iOS); V2 păstra 14px în bara de căutare. `!important` + specificitate mai mare (0,2,0) o bate, numai aici. */
@media (max-width:820px) {
  .bara-cautare .cauta-camp { font-size:14px!important }
}

/* Pe telefon tot rândul stă pe o singură linie (regula Programului): ce cade e cuvântul ABONĂRII,
   al cărui plic se citește singur; zona de scris nu se ascunde niciodată. */
@media (max-width:600px) {
  .btns { gap:5px; flex-wrap:wrap }
  .btns .btn { flex:0 0 auto; white-space:nowrap }
  .btns .pastila { flex:1 1 0 }
  .btns .mic { padding:9px }
  .btns .pastila .punct, .btns .pastila .arh, .btns .pastila .cheie { flex:0 0 42px; width:42px }
  .btns .cuv { display:none }
  .btns .pastila .acum { padding:11px 10px; font-size:13px }
  .btns .pastila .acum .lung { display:none }
  .btns .pastila .acum .scurt { display:inline }
}
@media (max-width:411px) {
  .btns .pastila .punct, .btns .pastila .arh, .btns .pastila .cheie { flex:0 0 36px; width:36px }
  .btns .pastila .acum { padding:11px 6px }
}
@media (max-width:380px) {
  .btns { gap:4px }
  .btns .mic { padding-left:7px; padding-right:7px }
  .btns .pastila .punct, .btns .pastila .arh, .btns .pastila .cheie { flex:0 0 34px; width:34px }
  .btns .pastila .acum { padding:11px 5px; font-size:12.5px }
}

.gol { color:var(--soft) }