/* Programul — stilul LOCAL al aplicației, lipit DUPĂ `stil.css` (ca în V2, unde `STIL` din
 * `apps/program/src/pagini.ts` venea după stilul carcasei și îl suprascria).
 *
 * Adus din V2 (`apps/program/src/pagini.ts`, constanta `STIL`, liniile 190-656) regulă cu regulă,
 * cu comentariile care spun DE CE (decizia 14: UI-ul vizibil se copiază 1:1). Ce s-a schimbat, și
 * de ce:
 *
 *  1. CULORILE — numai variabilele din `stil.css` (= `@xc/ui` tokens); `src/program/statice.test.ts`
 *     cade la o culoare scrisă de mână aici. V2 ținea verdele „programat" într-o variabilă locală
 *     (`--verde`, scrisă de mână, cu o regulă de temă separată); acum e tokenul `--programat`
 *     (`packages/ui/src/tokens.ts`, #0A6B41 zi / #5FBF8D noapte), care își schimbă singur valoarea
 *     în cascada din `stil.css` — cele două reguli de temă ale lui V2 nu mai sunt nevoie. Umbra
 *     meniului descărcării (V2: negru semitransparent, scris de mână) se face din `--tipar-cerneala`
 *     cu `color-mix`, ca la Calendar; la fel și culorile foii de tipar (`#000`/`#fff` → `--tipar-*`).
 *  2. FEREASTRA DE ABONARE (`.modal`, `.camp`, `.bifa`, `.btn-plin`) N-A VENIT — ca la Calendar
 *     (`calendar.css`): fereastra e a `@xc/abonare` / app-core, nu a pistei statice; P0a n-are voie
 *     să adauge dependențe noi. BUTONUL de abonare (`.abon`), în schimb, a venit — la fel ca la
 *     Calendar, e scris de server (`@xc/ui`, `butonAbonare`), iar masura lui fixă (regula de mai
 *     jos, `.btns .abon`) e cea din `calendar.css`, ca să arate la fel în amândouă aplicațiile.
 *  3. `STIL_SETARI`, concatenat la V2 după `STIL`, n-a venit din același motiv — ecranul de setări
 *     nu e al acestei pagini.
 *  4. `.btn.gol` (butonul fără drept) a urcat în `stil.css`, comun — era local doar la Calendar.
 */

.marunt { font-size:14px; color:var(--faint) }


/* capul saptamanii: titlul + starea (navigarea si hartiile au urcat in meniul din antet, 8 sept. 2026) */
/* Eticheta („propunere") se aseaza pe MIJLOCUL titlului, nu pe linia lui de baza: pastila are chenar
   si spatiu inauntru, asa ca aliniata pe baza atarna cu vreo sase pixeli mai jos decat scrisul mare
   de langa ea (semnalat de user, 10.09.2026). */
.sapt-cap { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:26px 0 14px }
.sapt-cap h2 { margin:0 }
/* ⚠️ PROBA (11.09.2026) — MOMENTUL scris in pagina: deasupra datelor saptamanii sta, marunt, „săptămâna
   trecută / aceasta / următoare". Aici se vede cel mai bine ca e acelasi lucru in alt moment, iar
   butoanele din antet pot ramane scurte (doar datele, cum s-a cerut pe 11.09). Pe saptamanile din
   arhiva nu se scrie nimic — acolo nu e niciunul din cele trei momente. */
.sapt-cap .moment { display:block; font:600 10.5px/1 ui-sans-serif,system-ui; letter-spacing:.12em;
                    text-transform:uppercase; color:var(--faint); margin:0 0 7px }
.sapt-cap .moment.acum { color:var(--rosu) }
/* „Înapoi la arhivă" (user, 11.09.2026), deasupra titlului, numai pe saptamanile deschise din arhiva.
   Sta ca un buton mic si stins, de aceeasi masura cu cele din randul de unelte — e un drum inapoi,
   nu o unealta a saptamanii, deci n-are ce cauta printre ele. */
.rand-inapoi { margin:22px 0 0 }
.inapoi { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 ui-sans-serif,system-ui;
          letter-spacing:.06em; color:var(--soft); text-decoration:none; background:var(--tinta);
          border:1px solid var(--rule); border-radius:10px; padding:9px 13px }
.inapoi:hover { color:var(--rosu); border-color:var(--rosu) }
.inapoi svg { vertical-align:0 }
/* cu butonul deasupra, titlul n-are nevoie de tot spatiul lui de sus */
.rand-inapoi + .sapt-cap { margin-top:14px }
.stare { font:600 10.5px/1 ui-sans-serif,system-ui; letter-spacing:.12em; text-transform:uppercase;
         padding:5px 9px; border-radius:999px; border:1px solid var(--rule); color:var(--soft); white-space:nowrap }
.stare.validat { border-color:var(--azi); color:var(--ink); background:var(--azi-fund) }
.stare.propus { border-color:var(--albastru); color:var(--albastru) }
/* ── SAPTAMANA PROGRAMATA (20.09.2026): validata inainte de vreme, isi asteapta duminica. Scrisa
   DOAR pentru adminul programului — pentru restul lumii saptamana e „propus", cum si este.
   ⚠️ Verdele sobru al platformei (acelasi #0A6B41 / #5FBF8D ca la buletin, unde eticheta s-a nascut
   cu o ora mai devreme): nu e o alarma, nimic nu s-a stricat. Rosul ramane al lucrului nefacut.
   ⚠️ Fara majuscule si cu spatiere normala, spre deosebire de surorile ei: celelalte etichete poarta
   un cuvant, asta poarta o propozitie intreaga, cu ziua si ora aparitiei in ea, iar cu
   text-transform:uppercase s-ar fi citit ca un titlu strigat.
   ⚠️ Si sa nu se scrie aici, in clar, chiar vorbele etichetei: comentariul ajunge in CSS-ul FIECAREI
   pagini, deci proba „enoriasul nu vede vorbele acelea" le-ar fi gasit pe ele, aici, si ar fi cazut
   pe o pagina in care eticheta nu se scrie deloc. Patit la scrierea probei.
   ⚠️ Comentariul asta sta INTR-UN TEMPLATE LITERAL (const STIL): niciun accent grav inauntru, si
   niciun dolar urmat de acolada — amandoua inchid sirul, iar eroarea iese la zeci de randuri de aici.
   V3: verdele e tokenul --programat (packages/ui/src/tokens.ts, #0A6B41 zi / #5FBF8D noapte), care
   isi schimba singur valoarea intre zi si noapte prin cascada din stil.css — nu mai trebuie cele
   doua reguli de tema pe care le avea V2 pentru variabila lui locala. */
.stare.programat { border-color:color-mix(in srgb, var(--programat) 35%, transparent);
                   background:color-mix(in srgb, var(--programat) 8%, transparent); color:var(--programat);
                   text-transform:none; letter-spacing:.01em; font-size:12px }

/* ANTETUL, refacut la 15.09.2026 (cererea in sase puncte a userului), asezat ca la Calendar:
   PASTILA cat tot randul — bulina · zona de scris · sageata-dreapta · Arhiva · intrerupatorul —, iar
   lipite de marginea din dreapta descarcarea (un buton, cu meniu) si abonarea, ultima.
   Bara verticala dintre grupuri a cazut: pastila se vede ca un corp, deci granita se citeste oricum. */
/* V2: carcasa comuna lasa .btns sa se rupa (flex-wrap:wrap); in V1 randul nu se rupea pe desktop —
   butoanele se string, nu sar pe randul urmator. Pe telefon se rupe (mai jos). */
.btns { flex-wrap:nowrap }
.btns .gol { opacity:.35; pointer-events:none }
/* BUTONUL DE ABONARE ARE MASURA FIXA, ACEEASI IN TOATE APLICATIILE (user, 15.09.2026) — 118 px e cat
   cere plicul + spatiul + „Abonare" + laturile; regula identica cu `calendar.css`. */
.btns .abon { flex:0 0 auto; width:118px; justify-content:center }
/* Pe telefon cade CUVANTUL, nu butonul: ramane plicul. Numele intreg sta in title. */
@media (max-width:600px) {
  .btns .abon { width:44px; padding-left:0; padding-right:0 }
  .btns .abon .cuv { display:none }
}
/* treapta pe care CHIAR esti (aria-disabled): nu duce nicaieri, dar se apasa — atunci ia focusul si
   ramane ea marcata, ca sa se vada unde ne aflam (cerere user, 10.09.2026). Marginea rosie o are din
   clasa .activ; la apasare se adauga si fundalul, ca apasarea sa se simta. */
.btns .btn[aria-disabled="true"] { cursor:default }
.btns .btn[aria-disabled="true"]:focus { outline:none; background:var(--azi-fund) }
/* INTRERUPATORUL „Calendar" (user, 10.09.2026: „informații utile să fie «Calendar» și să fie un
   întrerupător on-off"). E un buton adevarat, cu bec care aluneca: aprins = calendarul se vede in
   coloana din dreapta. Cere JS; fara el ramane stins, iar programul se citeste ca si pana acum.
   ⚠️ A fost scos la 10:01 si repus la 10:47 — userul lamurise ca „fără buton în meniu" se referea la
   bulina, nu la el. Nu-l mai scoate fara o cerere care sa-i spuna pe nume. */
.btns .com-cal { cursor:pointer; gap:8px }
.btns .com-cal .bec { flex:none; position:relative; width:30px; height:16px; border-radius:999px;
                      border:1px solid var(--rule); background:var(--tinta) }
.btns .com-cal .bec::after { content:""; position:absolute; top:1px; left:1px; width:12px; height:12px;
                             border-radius:50%; background:var(--soft) }
/* ⚠️ Aprins, becul NU mai e rosu (user, 11.09.2026: „să nu mai fie roșu; întrerupătorul să fie alb").
   Rosul e culoarea locului in care te afli — pastila navigarii, masca din meniu — si se irosea pe o
   stare care acum e cea obisnuita. Aprins, becul se umple cu cerneala si bila se face alba, ca hartia
   (in tema de noapte se intorc amandoua, fiindca cerneala si hartia isi schimba locul); stins,
   pista ramane palida si bila cenusie. Ce s-a schimbat spune tot bila care a alunecat in dreapta. */
.btns .com-cal[aria-pressed="true"] .bec { border-color:var(--soft); background:var(--soft) }
.btns .com-cal[aria-pressed="true"] .bec::after { left:auto; right:1px; background:var(--paper) }
.btns .btn { min-width:0 }
/* ⚠️ GRUPUL DIN DREAPTA A DISPARUT LA 15.09.2026, 18:08: in afara pastilei a ramas NUMAI abonarea
   („butonul de abonare să fie singurul la dreapta, în exterior"), iar ea isi stie masura din
   @xc/abonare. Pastila ia tot prisosul, deci abonarea ajunge oricum lipita de marginea din dreapta. */
/* bulina (user, 8 sept. 2026: „doar o bulină pe centru"): un punct, fara text, la fel de inalt ca
   segmentele de langa el; duce la saptamana de azi. Din 15.09.2026 e PRIMA din pastila („butonul cu
   bulina să fie primul"), ca la Calendar. */
.btns .punct { display:flex; align-items:center; justify-content:center }
.btns .punct::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor }
.btns .punct:hover { color:var(--rosu); border-color:var(--rosu) }
/* PASTILA navigarii (aleasa de user, 11.09.2026): segmentele lipite intr-un singur corp, ca sa se
   citeasca drept UN obiect cu o pozitie, nu destinatii deosebite. Chenarul si rotunjirea stau pe
   pastila, nu pe butoane; intre segmente ramane o linie de 1 px, iar segmentul pe care esti e PLIN.
   ⚠️ DIN 15.09.2026 tine SASE segmente, in ordinea ceruta de user: bulina · zona de scris · sageata
   („săptămâna viitoare") · Arhiva (numai la admini) · intrerupatorul „Calendar" · descarcarea.
   Ca la Calendar, BUTOANELE AU MASURA FIXA si numai ZONA DE SCRIS creste: altfel scrisul — lucrul
   dupa care se uita omul intai — ar fi fost primul strans.
   ⚠️ FARA overflow:hidden, de cand meniul descarcarii atarna de ultimul segment (18:08): l-ar TAIA si
   meniul n-ar mai aparea deloc. Exact capcana platita la Calendar cu o zi inainte. De aceea rotunjirea
   colturilor n-o mai face pastila din taiere, ci o duc segmentele de la capete, fiecare al lui. */
.btns .pastila { display:flex; flex:1 1 auto; 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 }
.btns .pastila > :first-child { border-radius:9px 0 0 9px }
.btns .pastila > :last-child, .btns .pastila > .desc:last-child > summary { border-radius:0 9px 9px 0 }
/* cele trei butoane-iconita ale pastilei: aceeasi masura, ca pastila sa arate la fel pe orice pagina */
.btns .pastila .punct, .btns .pastila .viit, .btns .pastila .arh { flex:0 0 46px; width:46px;
                 padding-left:0; padding-right: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 .btn[aria-disabled="true"]:focus { background:color-mix(in srgb, var(--rosu) 18%, transparent) }
/* ZONA DE SCRIS — pe ce saptamana esti (user, 15.09.2026: „o zonă de scris (ca la Calendar)").
   ⚠️ NU E UN BUTON, E O ZONA DE SEMNALIZARE, ca la Calendar: fundalul ei e hartia paginii (--paper),
   nu umplutura butoanelor (--tinta), deci se vede ca o fereastra taiata in pastila. Nu-i pune :hover
   si nu-i da cursor:pointer — nu se apasa. Scrisul e rosu: rosul spune „aici esti".
   Liniile ei din stanga si din dreapta tin loc de despartitura intre segmente. */
.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 }
/* ⚠️ Plasa: daca zona ajunge totusi mai stramta decat scrisul (ecran si mai ingust, scris marit din
   setarile telefonului), scrisul se taie CU TREI PUNCTE, nu la mijlocul literelor. Fara ea, un scris
   centrat intr-o cutie cu overflow:hidden se ciunteste la amandoua capetele si nu se mai citeste. */
.btns .pastila .acum b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Abonarea, singura afara: cand randul se rupe pe telefoanele inguste, ramane lipita la dreapta */
.btns .abon { margin-left:auto }
/* segmentele-iconita: sageata, cutia Arhivei */
.btns .pastila .viit, .btns .pastila .arh { display:flex; align-items:center; justify-content:center }
.btns .pastila .viit svg, .btns .pastila .arh svg { vertical-align:0 }
/* INTRERUPATORUL, intrat in pastila la 15.09.2026: isi pastreaza becul si masura lui (scrisul lipseste,
   dar becul cere latimea), doar chenarul si rotunjirea si le lasa pastilei — ca la crucea Calendarului. */
.btns .pastila .com-cal { flex:0 0 auto }
/* ⚠️ DESCARCAREA, ultimul segment al pastilei (user, 15.09.2026, 18:08). Ca si crucea Calendarului,
   isi lasa chenarul, fundalul si rotunjirea: pastila le are pe ale ei, iar doua chenaruri unul in
   altul se citesc ca „buton in buton". Ce ramane e linia despartitoare din stanga.
   ⚠️ Linia aceea ramane NEUTRA orice ar face butonul: rosul pus pe toate laturile (de la :hover ori
   de la meniul deschis) ar desena o dunga rosie in mijlocul pastilei — reclamatia de la Calendar, de
   acum o zi. Rosul ramane unde spune ceva: pe iconita si pe fundalul palid. */
.btns .pastila .desc-cheie, .btns .pastila .desc-stins {
                 border:0; border-left:1px solid var(--rule); border-radius:0; background:transparent;
                 display:flex; align-items:center; justify-content:center }
.btns .pastila .desc-cheie:hover,
.btns .pastila .desc[open] > .desc-cheie,
.btns .pastila .desc-cheie:focus-visible { border-color:var(--rule) }
.btns .pastila .desc-cheie:hover { background:var(--paper) }
.btns .pastila .desc[open] > .desc-cheie { background:color-mix(in srgb, var(--rosu) 11%, transparent) }
/* butoanele mici: nu cresc, stau cat le tine continutul — intrerupatorul, descarcarea, abonarea */
.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 }

/* MENIUL DESCARCARII (user, 15.09.2026: un buton care aduna cele trei hartii).
   ⚠️ E un <details>, nu un panou deschis din JS: meniul merge si fara JavaScript. De aceea sagetica
   lui se stinge de mana, si in Firefox (list-style), si in WebKit (::-webkit-details-marker).
   ⚠️⚠️ CARCASA IMBRACA ORICE <details> INTR-O CUTIE (chenar + padding + margin:14px 0, pe eticheta
   goala, in @xc/ui) — facuta pentru cutiile pliante din corpul paginii, ea prinde si meniul asta:
   buton in buton si banda inaltata cu 28 px. Se scoate TOATA aici, cum face carcasa pentru meniul
   contului. Daca mai intra vreun <details> in randul de unelte, are nevoie de aceleasi sase linii. */
.btns .desc { border:0; border-radius:0; padding:0; margin:0; background:none;
              position:relative; flex:0 0 auto; display:flex; align-items:stretch }
.btns .desc > summary { cursor:pointer; list-style:none; margin:0; color:inherit }
.btns .desc[open] > summary { margin-bottom:0; color:var(--rosu) }
.btns .desc > summary::-webkit-details-marker { display:none }
.btns .desc > summary::marker { content:"" }
.btns .desc-cheie:hover { color:var(--rosu) }
/* meniul atarna SUB buton si e agatat de dreapta lui: la capatul randului, aliniat la stanga ar iesi
   din ecran pe telefon. position:absolute cere stramosul asezat de mai sus (.desc). */
.desc-meniu { position:absolute; top:calc(100% + 7px); right:0; z-index:40;
              min-width:266px; padding:5px; text-align:left;
              background:var(--paper); border:1px solid var(--rule); border-radius:12px;
              box-shadow:0 16px 38px color-mix(in srgb, var(--tipar-cerneala) 17%, transparent) }
.desc-meniu .d-rand { display:flex; align-items:flex-start; gap:10px; padding:9px 10px;
                      border-radius:9px; color:var(--ink); text-decoration:none;
                      font:400 14.5px/1.3 ui-sans-serif,system-ui; letter-spacing:0 }
.desc-meniu .d-rand svg { flex:0 0 auto; margin-top:1px }
.desc-meniu .d-rand b { display:block; font-weight:400 }
.desc-meniu .d-rand small { display:block; margin-top:2px; color:var(--faint);
                            font-size:11.5px; line-height:1.35 }
.desc-meniu a.d-rand:hover { background:var(--tinta) }
/* Randul care nu se poate lua: se vede ca exista, dar nu duce nicaieri — pricina sta scrisa sub nume.
   ⚠️ opacity:1 anuleaza anume opacitatea .35 a lui .btns .gol de mai sus: aceea e facuta pentru
   butoanele din rand, unde pricina sta in title; aici pricina e SCRISA in meniu si trebuie citita. */
.desc-meniu .d-rand.gol { opacity:1; pointer-events:none; color:var(--faint); cursor:default }
.desc-meniu .d-rand.gol svg { opacity:.45 }
/* „PROGRAMUL AFIȘAT" are DOUA randuri scrise amandoua in pagina, iar CSS-ul il arata pe cel potrivit
   dupa cu-calendar (user, 11.09.2026: „să descarce varianta care se vede"). Asa iconita si tinta se
   schimba in aceeasi clipa cu coloana, fara ca JS-ul sa umble la adresa. */
.desc-meniu .poza-2 { display:none }
body.cu-calendar .desc-meniu .poza-1 { display:none }
body.cu-calendar .desc-meniu .poza-2 { display:flex }
/* CHEIA ARHIVEI (15.09.2026, 18:28): cat timp fasia anilor e coborata, segmentul sta aprins — ca omul
   sa stie de unde a iesit sirul. E aceeasi purtare ca la cheia lunilor din Calendar.
   ⚠️ Aprinderea de la fasie (aria-expanded) si marcajul locului (.activ, pe pagina Arhivei si pe
   saptamanile deschise din ea) sunt DOUA lucruri: al doilea ramane si cu fasia stransa.
   ⚠️ PE PAGINA ARHIVEI cheia e inerta (aria-disabled): fasia e coborata de-a binelea, deci n-are ce
   inchide — atunci nici degetul, nici trecerea mouse-ului n-au voie s-o dea drept apasabila. */
.btns .pastila button.arh:not([aria-disabled="true"]) { cursor:pointer }
.btns .pastila button.arh:not([aria-disabled="true"]):hover { color:var(--rosu); background:var(--paper) }
.btns .pastila .arh[aria-expanded="true"] { color:var(--rosu);
                 background:color-mix(in srgb, var(--rosu) 11%, transparent) }

/* BARA A DOUA — ANII ARHIVEI, sub randul de unelte, ascunsa pana se apasa cheia (user, 15.09.2026,
   18:28: „iconița de arhivă să afișeze anii cum sunt lunile în Calendar") — DAR pe pagina Arhivei
   coborata din capul locului si nevoie sa ramana asa (user, 18:56). Chenarul si rotunjirea sunt
   ale pastilei de deasupra, ca sirul sa se citeasca drept o prelungire a ei, nu un obiect strain.
   ⚠️ Aici overflow:hidden E BUN (spre deosebire de pastila, unde ar taia meniul descarcarii): din bara
   nu atarna nimic, iar taierea e tocmai ce tine colturile rotunde peste fasia derulata. */
.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 }
/* ⚠️ position:relative NU e de podoaba: JS-ul aduce anul deschis la mijloc cu offsetLeft, iar acela se
   masoara fata de cel mai apropiat stramos asezat. Fara el, offsetParent ajunge pagina si fasia se
   deschide derulata la capat (capcana platita la Calendar). */
.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 }
/* ANII: text simplu in capsula — fara chenar, fara fundal, fara rotunjire a lor; despartitura e o
   linie de 1 px, ca intre segmentele pastilei. Cifrele nu se stramteaza cat lunile (patru semne, nu
   trei prescurtate), dar nici nu sunt treisprezece: arhiva tine de obicei sub zece ani. */
.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) }
/* anul deschis: rosu si plin, ca segmentul pe care esti din pastila */
.an-buton.activ { color:var(--rosu); font-weight:700;
                  background:color-mix(in srgb, var(--rosu) 11%, transparent) }
/* Sagetile — segmentele de la capetele barei, pentru cine n-are deget. JS-ul le ascunde cu totul cand
   anii incap (pe desktop incap), ca sa nu stea doua segmente moarte in bara. */
.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 }

/* ⚠️ PE TELEFON, TOT RANDUL STA PE O SINGURA LINIE, SI LA ADMIN (user, 15.09.2026, 18:20: „nu trebuie
   să fie pe mai multe rânduri meniul mai ales la admini"). Ce cade e scrisul BUTOANELOR, niciodata
   zona de scris (regula Calendarului: „pe mobil, neapărat să se vadă scrisul"): abonarea ramane numai
   plic, iar zona trece pe cuvantul singur („Curentă"); numele intregi stau in title si aria-label.
   ⚠️ CE A FACUT LOC: BECUL INTRERUPATORULUI, care cerea 35 px (pista de 30 + spatiul dintre el si
   iconita). Fara el, la un super-admin (randul cel mai plin) socoteala la un telefon de 390, cu 335
   de folosit, iese asa: pastila 42×3 = 126 (bulina, sageata, Arhiva) + intrerupatorul 42 +
   descarcarea 35 + zona de scris ~75 = 278, plus spatiul de 5 si abonarea de 44 = 327. Incape, cu 8
   px de prisos. La 360 (305 de folosit) butoanele scad la 38 si iese 300.
   ⚠️ DACA MAI ADAUGI CEVA IN RAND, SOCOTEALA ASTA SE REFACE — nu mai e loc de imprumut. */
@media (max-width:600px) {
  .btns { gap:5px; flex-wrap:wrap }
  .btns .btn { flex:0 0 auto; white-space:nowrap }
  .btns .pastila { flex:1 1 auto }
  /* ⚠️ BUTOANELE-ICONITA SUNT PATRATE (user, 11.09.2026, 16:02: „să fie atâta spațiu sus cât este
     stânga dreapta"). Padingul de sus e cel al carcasei (9px, din .btn), deci se scrie 9px si in
     laturi: iconita de 17–18 px iese intr-o tinta de ~36×36, mai usor de nimerit cu degetul decat
     dreptunghiul ingust de pana acum. Se aplica la TOATE cele din rand — si la cele din pastila. */
  .btns .mic { padding:9px }
  .btns .pastila .punct, .btns .pastila .viit, .btns .pastila .arh { flex:0 0 42px; width:42px }
  /* ⚠️ INTRERUPATORUL ISI LASA BECUL PE TELEFON si ramane un patrat ca celelalte. Starea o spune
     atunci SEGMENTUL: aprins, se umple cu cerneala si iconita se face hartie — exact ce facea becul
     (user, 11.09.2026: „să nu mai fie roșu; întrerupătorul să fie alb"), doar ca acum e pe toata
     casuta, nu pe o pista de 30 px. Stins, ramane ca oricare alt segment. Pe desktop becul e neatins. */
  .btns .pastila .com-cal { flex:0 0 42px; width:42px; padding:0; gap:0 }
  .btns .pastila .com-cal .bec { display:none }
  .btns .pastila .com-cal[aria-pressed="true"] { background:var(--soft); color:var(--paper) }
  /* descarcarea, tot patrata */
  .btns .pastila .desc-cheie, .btns .pastila .desc-stins { flex:0 0 35px; width:35px; padding:0 }
  /* zona de scris: strange padingul si scrisul, dar nu se ascunde niciodata */
  .btns .pastila .acum { padding:11px 10px; font-size:13px }
  .btns .pastila .acum .lung { display:none }
  .btns .pastila .acum .scurt { display:inline }
  /* meniul descarcarii nu e mai lat decat ecranul, oricat de ingust ar fi telefonul */
  .desc-meniu { min-width:0; width:max-content; max-width:calc(100vw - 32px) }
}
/* Telefoanele inguste (Android de 360 px si mai jos): butoanele mai lasa cativa pixeli si zona de
   scris se strange si ea — nu mai sunt patrate la milimetru, dar randul ramane pe o linie. */
@media (max-width:380px) {
  .btns { gap:4px }
  .btns .mic { padding-left:7px; padding-right:7px }
  .btns .pastila .punct, .btns .pastila .viit, .btns .pastila .arh,
  .btns .pastila .com-cal { flex:0 0 36px; width:36px }
  .btns .pastila .desc-cheie, .btns .pastila .desc-stins { flex:0 0 29px; width:29px }
  /* ⚠️ Masurat la 360 px (305 de folosit): cu 38/31 si padding de 8 randul cerea ~312 si se rupea —
     doar cu vreo zece pixeli. De aceea si padingul zonei scade la 6: prisosul e de un deget. */
  .btns .pastila .acum { padding:11px 6px; font-size:12.5px }
}

/* o zi din program */
.zi { margin:0 0 22px; padding:0 0 14px; border-bottom:1px solid var(--rule) }
.zi:last-child { border-bottom:0 }
.zi h3 { margin:16px 0 4px; font-size:17px }
/* capul zilei: numele la stanga, iar duminica butonul foii cu sfintii zilei la dreapta
   (cerere user, 9 sept. 2026 — foaia se tipareste si se citeste la sfarsitul Liturghiei) */
.zi-cap { display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.zi-cap h3 { flex:1 1 auto; min-width:0 }
.zi-cap .sfintii { flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:7px;
                   padding:7px 12px; white-space:nowrap;
                   font:600 11.5px/1 ui-sans-serif,system-ui; letter-spacing:.04em;
                   text-decoration:none; border-radius:8px }
/* iconita spune ce fel de fisier e; langa ea doar numele (cerere user, 9 sept. 2026) */
.zi-cap .sfintii svg { flex:none; vertical-align:0; color:var(--soft) }
.zi-cap .sfintii:hover svg { color:inherit }
.zi-cap .sfintii:hover { border-color:var(--rosu); color:var(--rosu) }
/* CALENDARUL zilei de la A1, in COLOANA LUI (user, 10.09.2026: „Programul nu mai vreau să fie
   întrepătruns cu Sfinții — Calendarul"; „Programul să fie într-o coloană pe stânga și Calendarul
   apare paralel și cu linii în plus pe dreapta"). Sta in pagina si se aprinde din intrerupatorul
   „Calendar" din antet (clasa cu-calendar pe body, tinuta minte in localStorage). PORNESTE APRINS
   (user, 11.09.2026: „starea implicită este On"; dimineata ceruse invers) si se scrie doar pe
   saptamana de azi si pe cea viitoare. Aprins, ziua se face doua coloane: la stanga programul
   (.prog), la dreapta ziua liturgica.
   Coloanele se aliniaza SUS, nu rand cu rand — calendarul are de obicei mai multe randuri decat
   programul, iar zilele fara slujbe ies si ele la iveala, ca linii numai pe dreapta. */
.cal { display:none }
body.cu-calendar .zi { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                       column-gap:26px; align-items:start }
body.cu-calendar .zi .prog { min-width:0 }
body.cu-calendar .cal { display:block; min-width:0; padding:0 0 0 18px; border-left:1px solid var(--rule) }
/* ⚠️ Zilele rosii CU slujbe — duminicile si sarbatorile cu cruce rosie — raman pe O SINGURA coloana,
   cat e pagina de lata (user, 11.09.2026): programul lor spune deja sarbatoarea si sfintii, pe
   randurile „→" ale slujbei de dimineata. Coloana din dreapta nici nu se mai scrie (vezi ziuaHtml);
   aici doar se desface grila, ca programul sa nu ramana ingramadit in jumatatea stanga. */
body.cu-calendar .zi.fara-cal { display:block }
/* capul coloanei: numele zilei, cu aceleasi masuri ca titlul din stanga, ca cele doua sa stea pe
   aceeasi linie (cerere user, 10.09.2026 — titlu deasupra fiecarei liste, chiar daca se repeta) */
/* 10px sub titlu, ca in stanga: acolo h3 sta intr-un flex (.zi-cap), deci marginea lui de jos (4px) nu
   se colapseaza si se aduna cu cea de sus a primei slujbe (6px). Aici marginile se colapseaza, asa ca
   distanta se scrie o data, intreaga — altfel lista de sfinti incepe mai sus decat programul. */
.cal-zi { margin:16px 0 10px; font-size:17px; font-weight:600; line-height:1.3 }
.zi.rosie .cal-zi { color:var(--rosu) }
/* pe telefon nu incap doua coloane: calendarul se aseaza sub programul zilei, ca pana acum. Acolo
   numele zilei nu se mai repeta — dar in zilele FARA slujbe stanga e goala, deci lista de sfinti ar
   ramane fara niciun titlu (semnalat de user, 10.09.2026): in ele, titlul din dreapta se aprinde. */
@media (max-width:600px) {
  body.cu-calendar .zi { display:block }
  body.cu-calendar .cal { margin:4px 0 10px; padding:8px 12px; background:var(--tinta);
                          border-left:3px solid var(--rule); border-radius:0 8px 8px 0 }
  .cal-zi { display:none }
  .zi.goala .cal-zi { display:block; margin:0 0 6px }
  /* (Zilele rosii CU slujbe n-au nevoie aici de nicio regula: de la 11.09.2026 coloana lor nu se mai
     scrie nicaieri — vezi ziuaHtml. Pana atunci se ascundea doar pe telefon.) */
}
/* In coloana calendarului, SFINTII stau unul sub altul, cu sageata in fata — ca randurile „→" ale
   slujbelor (cerere user, 10.09.2026: „cel mai mult mă interesează sfinții… pune-le cu săgeată, așa
   cum sunt ele afișate duminica"). Aceleasi masuri ca la .slujba .det, ca cele doua coloane sa se
   citeasca la fel. Rosul si albastrul sunt ale rangului, sfant cu sfant, ca in calendarul A1. */
.cal .det { margin:1px 0 0; font-size:14.5px; color:var(--soft); line-height:1.45 }
.cal .det::before { content:"→ "; color:var(--faint) }
.cal .det.rosu { font-weight:600; color:var(--rosu) }
.cal .det.c-rosu { color:var(--rosu) }
.cal .det.c-albastru { color:var(--albastru) }
.cal-rand { margin:6px 0 0; font:13px/1.5 ui-sans-serif,system-ui; color:var(--soft) }
/* zilele in care nu se slujeste stau in pagina doar ca sa-si arate calendarul (cerere user, 9 sept.
   2026): se vad numai cand calendarul e aprins. Cat sunt ascunse, programul se incheie cu ultima zi
   CU slujbe — ea ramane fara linie dedesubt, fiindca .zi:last-child ar cadea pe o zi ascunsa. */
body:not(.cu-calendar) .zi.goala { display:none }
body:not(.cu-calendar) .zi.ultima { border-bottom:0 }
/* titlul zilei rosu duminica si la praznice / sfinti cu cruce rosie („Joi, 6 august"; user, 8 sept. 2026) */
.zi.rosie h3 { color:var(--rosu) }
.zi.azi h3::after { content:"azi"; font:600 9.5px/1 ui-sans-serif,system-ui; letter-spacing:.14em; text-transform:uppercase;
                    color:var(--ink); background:var(--azi-fund); border:1px solid var(--azi); border-radius:999px; padding:3px 7px; margin-left:10px; vertical-align:2px }
/* align-items:baseline — ora (sans 15px) si numele slujbei (serif 17px) au inaltimi de rand diferite,
   deci asezate la varf ora iesea cu vreo doi pixeli mai sus (user, 10.09.2026). Pe linia de baza stau
   drept, oricat de diferite ar fi fonturile. Randurile „→" de dedesubt n-au pereche, deci nu se schimba. */
.slujba { display:grid; grid-template-columns:56px 1fr; column-gap:12px; margin:6px 0; align-items:baseline }
.slujba .ora { font:600 15px/1.55 ui-sans-serif,system-ui; color:var(--soft); letter-spacing:.02em }
.slujba .nume { font-weight:600 }
.slujba .nume.dimineata { color:var(--rosu) }
.slujba .det { grid-column:2; margin:1px 0 0; font-size:14.5px; color:var(--soft); line-height:1.45 }
.slujba .det::before { content:"→ "; color:var(--faint) }
/* randurile „→" cu numele duminicii si cu sarbatorile cu rosu (praznice, sfinti cu cruce rosie, dupa A1):
   bold + rosu, ca in foaia A4 — si duminica (user, 8 sept. 2026) */
.slujba .det.rosu { font-weight:600; color:var(--rosu) }
.gol { color:var(--faint); font-style:italic }

/* arhiva */
/* ⚠️ RANDUL DE ANI DIN PAGINA (patratelele .capitole ale carcasei) A FOST SCOS la 15.09.2026, 18:56
   („scoate din pagină anii atunci când ne aflăm în arhivă"): anii se aleg acum numai din fasia de sub
   antet, care pe Arhiva sta coborata permanent. Odata cu el a plecat si potriveala lui de aici
   (.capitole a.acum, din 8 sept. 2026); .capitole ramane in carcasa, pentru alte aplicatii. */
.an h3 { margin:26px 0 6px }
/* capul de luna, deasupra batonului ei */
.an h4 { margin:18px 0 6px; font:600 11px/1 ui-sans-serif,system-ui;
         letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
/* saptamanile lunii: un BATON segmentat EGAL (user, 8 sept. 2026) — zone de latime egala, lipite,
   despartite de linii de 1px. Liniile sunt umbre pe zona (dreapta + jos), nu gap prin care se vede
   fundalul batonului: pe telefon randul se rupe (auto-fit face 2 coloane sub ~450 px) si ultima zona
   poate lasa un loc gol — cu fundal colorat ar iesi acolo un dreptunghi gri. Ce iese in afara
   (umbra ultimei coloane, a ultimului rand) taie overflow:hidden.
   In zona: perioada sus, numarul de slujbe dedesubt; starea doar cand NU e „validat". */
.baton { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
         background:var(--paper); border:1px solid var(--rule); border-radius:10px; overflow:hidden }
.baton a { padding:9px 8px 10px; text-align:center; text-decoration:none; color:var(--ink);
           box-shadow:1px 0 0 var(--rule), 0 1px 0 var(--rule) }
.baton a:hover { background:var(--tinta); color:var(--rosu) }
/* ⚠️ SAPTAMANA PE CARE TOCMAI AI APASAT se vede incercuita cand te intorci cu pasul inapoi (user,
   11.09.2026, 16:38: „vreau doar ca, atunci când dau înapoi, să se vadă unde am apăsat… doar pe
   moment, atunci"). Semnul il pune JS-ul (vezi SCRIPT), pe zona apasata — NU din :visited, care
   tine minte din istoricul browserului zile intregi si ar innegri arhiva cu tot ce s-a deschis
   vreodata. Conturul e rosu: e acelasi rost ca rosul din pastila — „aici esti/aici ai fost acum". */
.baton a.vazuta { outline:2px solid var(--rosu); outline-offset:-2px; background:var(--tinta) }
.baton a.vazuta b { color:var(--rosu) }
.baton b { display:block; font-size:15.5px; font-weight:600; white-space:nowrap }
.baton span { display:block; margin-top:2px; font:12.5px ui-sans-serif,system-ui; color:var(--faint) }
.baton i { display:block; margin-top:4px; font:600 9px/1 ui-sans-serif,system-ui; font-style:normal;
           letter-spacing:.12em; text-transform:uppercase; color:var(--albastru) }
/* propunerea */
.nelamuriri { border-left:3px solid var(--rosu); padding:2px 0 2px 16px; margin:22px 0; color:var(--soft) }

/* foaia A4 de pe usa: doar programul, fara antet, subsol si navigare */
@media print {
  header.sus, .subsol-linie, .versiune, footer.subsol, .btns, .zi-cap .sfintii,
  .zi.goala, .cine, .marunt, .nelamuriri, .cal { display:none !important }
  body { padding:0; font-size:14pt; color:var(--tipar-cerneala); background:var(--tipar-fund) }
  main { padding-top:0 !important }
  /* pe hartie merge doar programul, intr-o coloana — calendarul ramane pe ecran */
  body.cu-calendar .zi { display:block }
  .w { max-width:none }
  .zi { break-inside:avoid; border-bottom:0; margin-bottom:10pt; padding-bottom:0 }
  .slujba .nume.dimineata, .slujba .det.rosu, .zi.rosie h3 { color:var(--tipar-cerneala) }
  .stare { display:none }
}