/* Calendarul — stilul LOCAL al aplicației, lipit DUPĂ `stil.css` (ca în V2, unde `LOCAL` din
 * `apps/calendar/src/stil.ts` venea după stilul carcasei și îl suprascria).
 *
 * Adus din V2 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/calendar/calendar.test.ts`
 *     cade la o culoare scrisă de mână aici. V2 își ținea patru variabile proprii (`--negru`, `--mov`,
 *     `--rosu-palid`, `--rosu-linie`), toate ale filtrelor pe trepte; primele trei au intrat în
 *     `@xc/ui` tokens (P3a), iar `--rosu-linie` nu-l folosea nicio regulă V2, deci n-a venit.
 *     Umbra ferestrei, a meniului filtrelor și fundalul de sub fereastră (V2: negru semitransparent,
 *     scris de mână) se fac din `--tipar-cerneala` (negrul tokenilor) cu `color-mix`: aceeași valoare,
 *     fără o culoare nouă. La trecerea de design, un token „umbră" le-ar lua locul.
 *  2. FILTRELE PE TREPTE (P3a): meniul (`.filtre`, `.filtre-meniu`, `.f-rand`), lista „toate lunile"
 *     (`.toate-lunile`, `.rand-filtru`, `.fel-filtru`), privegherile și movul evlaviei, `.fara-rosu`,
 *     `.cr`. Pagina publică nu le scrie (acolo crucea e mereu stinsă), dar le scriu listele filtrate
 *     din app-core (P3b), care poartă o copie a acestui fișier, și meniul adus peste pagina publică
 *     de `calendar.js`. CE NU S-A ADUS: fereastra de abonare (`.modal`, `.camp`, `.bifa`, `.btn-plin`
 *     — abonarea e în app-core) și setările.
 *  3. DIN STIL_COMUN (carcasa V2) vin două reguli pe care `stil.css` nu le are: derularea lină pe
 *     rădăcină și butonul stins (`.btn.gol`) — plus listele din sinaxar.
 *  4. CĂUTAREA: `stil.css` are `form.cauta input|button` (căutarea site-ului), mai tari decât
 *     `.cauta-camp` / `.cauta-du` din V2. Regulile barei au urcat cu un nivel (`.bara-cautare …`),
 *     ca să iasă ce ieșea în V2 („buton în buton" era chiar reclamația userului).
 *  5. CHEILE PASTILEI (lunile, lupa) sunt legături spre bara lor; fără JS bara se deschide din
 *     `:target` (mai jos, după barele însele). Cu JS se poartă ca în V2.
 *  6. FEREASTRA ZILEI oprește derularea paginii din spate prin regula ferestrelor a CARCASEI publice
 *     (`stil.css`, `html:has(dialog[open])`), nu printr-o regulă a Calendarului — ca în V2, unde o
 *     ținea carcasa (`JS_CAP`), nu aplicația.
 */

/* ——— 1. din STIL_COMUN (V2) ———————————————————————————————————————————————————————————————— */

html { scroll-behavior:smooth }
ul, ol { padding-left:22px }
li { margin:3px 0 }
/* butonul fără drept: se vede că există, dar nu se apasă (crucea stinsă a filtrelor) */
.btn.gol { opacity:.4; pointer-events:none }

/* ——— 2. LOCAL (apps/calendar/src/stil.ts, V2) ————————————————————————————————————————————— */

.c-rosu { color:var(--rosu) }
.c-albastru { color:var(--albastru) }

/* Ancorele #azi / #zi trebuie sa cada sub antetul lipicios, care la calendar e mai scund decat
   masura carcasei: 130px in loc de 170px. */
html { scroll-padding-top:130px }
/* ⚠️ Carcasa are scroll-behavior:smooth pe html. La INTRAREA in pagina, saltul liniar al browserului
   la ancora #azi se bate cap in cap cu centrarea noastra si o inghite — ziua ramanea lipita de antet
   pana la a doua apasare (user, 15.09.2026, si pe telefon, si pe desktop). Clasa asta stinge linul
   cat tinem noi carma; calendar.js o pune si o scoate intr-un cadru. Vezi asazaAzi(). */
html.fara-lin { scroll-behavior:auto }

.cap { padding:10px 0 4px }
.cap .eyebrow { margin:0 0 14px }
.an-calculat { margin:16px 0 0; padding:10px 14px; border:1px dashed; border-radius:10px;
               opacity:.75; font-size:.86em; line-height:1.5 }

.cod { color:var(--rosu) }
.sursa { color:var(--soft); font-size:14.5px; margin:0 0 16px; max-width:58ch }

/* RANDUL DE UNELTE din antet. ⚠️ TINE INTOTDEAUNA TOATA LATIMEA (user, 15.09.2026: „bara de sus din
   antet, meniul să fie 100% mereu"), si are DOUA bucati, atat: PASTILA, care ia tot ce ramane, si
   ABONAREA, cu masura ei fixa (118 px), lipita de marginea din dreapta. */
.btns { width:100% }
.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 }
.btns .desparte { flex:0 0 1px; align-self:stretch; background:var(--rule); margin:0 3px }

/* BUTONUL DE ABONARE ARE MASURA FIXA, ACEEASI IN TOATE APLICATIILE (user, 15.09.2026) — din
   @xc/abonare (STIL_ABONARE). 118 px e cat cere plicul + spatiul + „Abonare" + laturile. */
.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 }
}

/* CRUCEA FILTRELOR. Pe partea publica e STINSA, fara meniu (asa o desena V2 neautentificatului): un
   <span>, nu un <details>, deci nu reactioneaza la apasare nici fara JS. Cui are filtre ii e un
   <details> cu meniu (listele din app-core; pe pagina publica, meniul adus de calendar.js).
   ⚠️ Pana la 15.09.2026 erau TREI butoane in rand, deosebite doar prin culoarea crucii; userul le-a
   strans intr-unul ca sa incapa DATA din pastila. Culorile s-au mutat pe randurile meniului. */
.btns .sarb { text-decoration:none }
.btns .sarb-rosie svg { color:var(--rosu) }
.btns .sarb-neagra svg { color:var(--negru) }
/* „Sfinți cu evlavie" (user, 12.09.2026, 13:31: „Culoare diferită"). Movul nu se ciocneste cu
   niciunul din semnele de pana acum: rosul e al sarbatorii, albastrul al sfintilor romani, verdele al
   zilei de azi. */
.btns .sarb-evlavie svg { color:var(--mov) }
.c-evlavie { color:var(--mov) }
.btns .sarb:hover { border-color:var(--rosu); color:var(--rosu) }
.btns .sarb.activ { border-color:var(--rosu); color:var(--rosu); font-weight:700;
                    background:var(--rosu-palid) }

/* ⚠️ E un <details>, nu un panou deschis din JS: meniul merge si fara JavaScript. De aceea sagetica
   lui trebuie stinsa de mana, si in Firefox (list-style), si in WebKit (::-webkit-details-marker).
   ⚠️ Carcasa V2 imbraca orice <details> intr-o cutie (chenar, 14 px de margine) — „butonul cu crucea
   este într-un alt buton" (user, 15.09.2026). Se scoate TOATA aici, ca la meniul contului. */
.btns .filtre { border:0; border-radius:0; padding:0; margin:0; background:none;
                position:relative; flex:0 0 46px; display:flex; align-items:stretch }
.btns .filtre > summary { cursor:pointer; list-style:none; margin:0; color:inherit }

/* ⚠️ CRUCEA E UN SEGMENT AL PASTILEI, NU UN BUTON DE SINE STATATOR (user, 15.09.2026: „mută butonul
   cu cruce după calendar"). Marcajul ii lasa clasele .btn .mic, ca sa ramana aceleasi masuri de
   scris si de iconita — dar chenarul, fundalul si rotunjirea LOR se sting aici: pastila le are pe
   ale ei. Ce ramane e linia din stanga, ca intre celelalte segmente. */
.pastila .sarb-cheie { border:0; border-left:1px solid var(--rule); border-radius:0;
                       background:transparent; display:flex; align-items:center;
                       justify-content:center }
/* ⚠️ LINIA DINTRE SEGMENTE RAMANE NEUTRA, ORICE AR FACE BUTONUL (user, 15.09.2026: „pare o linie
   roșie border left pe cruce"). Se atinge NUMAI culoarea chenarului. */
.pastila .sarb-cheie:hover,
.pastila .sarb-cheie.activ,
.pastila .sarb-cheie:focus-visible { border-color:var(--rule) }
.pastila .sarb-cheie:hover { background:var(--paper) }
.pastila .sarb-cheie.activ { background:var(--rosu-palid) }
/* crucea stinsa: se vede ca exista, dar nu se apasa (.btn.gol da opacitatea si pointer-events) */
.pastila .sarb-cheie.gol:hover { background:transparent }
.btns .filtre[open] > summary { margin-bottom:0 }
.btns .filtre > summary::-webkit-details-marker { display:none }
.btns .filtre > summary::marker { content:"" }
/* 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 (.filtre). */
.filtre-meniu { position:absolute; top:calc(100% + 7px); right:0; z-index:40;
                min-width:244px; 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) }
.filtre-meniu .f-rand { display:flex; align-items:flex-start; gap:10px; padding:9px 10px;
                        border-radius:9px; color:var(--ink); text-decoration:none; font-style:normal;
                        font:400 14.5px/1.3 ui-sans-serif,system-ui }
.filtre-meniu .f-rand svg { flex:0 0 auto; margin-top:1px }
.filtre-meniu .f-rand b { display:block; font-weight:400 }
.filtre-meniu .f-rand small { display:block; margin-top:2px; color:var(--faint);
                              font-size:11.5px; line-height:1.35 }
.filtre-meniu a.f-rand:hover { background:var(--tinta) }
.filtre-meniu .f-rand.activ { color:var(--rosu); background:var(--rosu-palid) }
.filtre-meniu .f-rand.activ small { color:var(--rosu); opacity:.8 }
/* randul fara drept: se vede ca exista, dar nu duce nicaieri — pricina sta scrisa sub nume */
.filtre-meniu .f-rand.gol { color:var(--faint); cursor:default }
.filtre-meniu .f-rand.gol svg { opacity:.45 }
/* culoarea crucii, sfant cu sfant, ca in calendarul tiparit */
.filtre-meniu .f-rosie svg { color:var(--rosu) }
.filtre-meniu .f-neagra svg { color:var(--negru) }
.filtre-meniu .f-evlavie svg { color:var(--mov) }
.filtre-meniu .f-rand.gol.f-rosie svg, .filtre-meniu .f-rand.gol.f-neagra svg { color:var(--faint) }

.inainte-de-titlu { margin:0 0 14px }
.btn.inapoi { display:inline-flex; align-items:center; flex:none; padding:9px 16px }
.titlu-lista { font-size:30px; font-weight:400; letter-spacing:-.02em; line-height:1.2;
               margin:0 0 6px }
.cate { font:12px/1 ui-sans-serif,system-ui; letter-spacing:.08em; text-transform:uppercase;
        color:var(--faint); margin:0 0 10px }
.sarbatori .sursa { margin:0 }

/* „TOATE LUNILE" — singurul buton ramas din grila de douasprezece luni a paginii de sarbatori (user,
   12.09.2026: lunile se aleg din pastila de sus, aici a mai ramas doar deselectarea lunii). Se scrie
   numai cand un filtru e pus. Apasat (esti pe tot anul), e rosu si nu mai duce nicaieri. */
.rand-filtru { margin:18px 0 2px }
.toate-lunile { display:inline-block; flex:none; padding:9px 16px; border-radius:999px;
                border:1px solid var(--rule); background:var(--paper); color:var(--soft);
                text-decoration:none; font:600 12px/1 ui-sans-serif,system-ui;
                letter-spacing:.1em; text-transform:uppercase }
.toate-lunile:hover { color:var(--rosu); border-color:var(--rosu) }
.toate-lunile.activ { color:var(--paper); background:var(--rosu); border-color:var(--rosu);
                      font-weight:700 }
/* Felul crucii, scris langa numele lunii, in CULOAREA LUI (user, 12.09.2026, 13:28). Negrul e
   cerneala paginii, deci se intoarce singur in alb pe intuneric („pe tema dark să fie scris cu alb"). */
h2.luna .fel-filtru.f-rosie { color:var(--rosu) }
h2.luna .fel-filtru.f-neagra { color:var(--ink) }
h2.luna .fel-filtru.f-evlavie { color:var(--mov) }

/* PE TELEFON, DATA NU CADE NICIODATA (user, 15.09.2026: „pe mobil, neapărat să se vadă scrisul de
   după azi, scrisul cu data, cu ziua curentă sau cu luna selectată").
   ⚠️ Ce cade sunt CUVINTELE BUTOANELOR, nu data: „Abonare" ramane numai plic.
   ⚠️ Daca vreodata mai intra un buton in rand, masoara INAINTE: data e prima care s-ar strange. */
@media (max-width:600px) {
  .btns { gap:7px }
  .btns .mic { padding-left:11px; padding-right:11px }
  .pastila .acum { padding:11px 10px; font-size:13px }
  /* meniul nu e mai lat decat ecranul, oricat de ingust ar fi telefonul */
  .filtre-meniu { min-width:0; width:max-content; max-width:calc(100vw - 32px) }
}

/* PASTILA NAVIGARII (user, 12.09.2026: „să fie o pastilă ca la Program"). Un singur corp: chenarul
   si rotunjirea stau pe PASTILA, nu pe segmente.
   ⚠️ PASTILA IA TOT CE RAMANE DIN RAND, iar inauntru cele PATRU butoane au masura FIXA si numai DATA
   creste (user, 15.09.2026). Cinci segmente, in ordinea ceruta: bulina · DATA · calendarul · LUPA ·
   crucea.
   ⚠️ MASURA DE PORNIRE E 0 (flex:1 1 0), NU auto: randul are flex-wrap, iar ruperea lui se hotaraste
   dupa marimea IPOTETICA a copiilor. Cu „auto", pe ecranele de 400–460 px abonarea cobora pe al
   doilea rand. */
.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) }
/* cele PATRU butoane: aceeasi masura fixa, ca pastila sa arate la fel pe orice pagina */
.pastila .azi-buton, .pastila .luni-cheie, .pastila .cauta-cheie, .pastila .sarb-cheie {
                 flex:0 0 46px; width:46px; padding-left:0; padding-right:0 }
/* SEGMENTELE PASTILEI PE TELEFON — cele 4 px luate fiecaruia se duc toti in data.
   ⚠️ STA AICI, sub regula de 46 px: scrisa mai sus, cu aceeasi specificitate, ar pierde. */
@media (max-width:600px) {
  .pastila .azi-buton, .pastila .luni-cheie, .pastila .cauta-cheie, .pastila .sarb-cheie {
                 flex:0 0 42px; width:42px }
  /* ⚠️ Crucea cu meniu are DOUA masuri de strans: latimea o tine invelisul <details>, nu butonul
     dinauntru (masurat 15.09.2026). */
  .btns .filtre { flex:0 0 42px }
}
/* SUB 400 PX — telefoanele mici (360 Galaxy, 375 iPhone): cheile 36 px, spatiile 6, marginile
   plicului 9, scrisul datei 12. Asa data incape intreaga de la 360 px in sus. */
@media (max-width:400px) {
  .btns { gap:6px }
  .btns .mic { padding-left:9px; padding-right:9px }
  .pastila .azi-buton, .pastila .luni-cheie, .pastila .cauta-cheie, .pastila .sarb-cheie {
                 flex:0 0 36px; width:36px }
  .btns .filtre { flex:0 0 36px }
}
.pastila > :first-child { border-radius:9px 0 0 9px }
.pastila > :last-child, .pastila > .filtre:last-child > summary { border-radius:0 9px 9px 0 }
/* ⚠️ SCRISUL E ROSU INTOTDEAUNA (user, 15.09.2026): rosul de aici spune „aici esti", nu „esti pe
   luna de azi" — aia o spune bulina de langa el.
   ⚠️ NU E UN BUTON, E O ZONA DE SEMNALIZARE: fundalul ei e --paper, nu --tinta. Nu-i pune :hover. */
.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) }
.pastila .acum .scurt { display:none }
/* DATA PE ECRANE MICI — „15 septembrie 2026" trece pe „15 sep. 2026". SCURTATA, NU ASCUNSA.
   ⚠️ Blocul sta SUB regula de baza de mai sus: are aceeasi specificitate. Pragul e 460, nu 400. */
@media (max-width:460px) {
  .pastila .acum { padding:11px 8px; font-size:12.5px }
  .pastila .acum .lung { display:none }
  .pastila .acum .scurt { display:inline }
}
@media (max-width:400px) {
  .pastila .acum { padding:11px 6px; font-size:12px }
}
/* Cheile care coboara barele de sub rand — lunile si lupa cautarii. Cat timp bara lor e coborata,
   stau aprinse. Aceleasi masuri pentru amandoua. */
.pastila .luni-cheie, .pastila .cauta-cheie {
                       flex:none; display:flex; align-items:center; justify-content:center;
                       padding:11px 12px; border:0; border-left:1px solid var(--rule);
                       border-radius:0; background:transparent; color:var(--soft); cursor:pointer }
.pastila .luni-cheie:hover, .pastila .cauta-cheie:hover { color:var(--rosu); background:var(--paper) }
.pastila .luni-cheie[aria-expanded="true"], .pastila .cauta-cheie[aria-expanded="true"] {
                       color:var(--rosu);
                       background:color-mix(in srgb, var(--rosu) 11%, transparent) }

/* BARA A DOUA — sirul lunilor, sub randul de unelte, ascunsa pana se apasa cheia.
   ⚠️ Se inchide singura la alegerea unei luni, fiindca alegerea e o NAVIGARE. */
.bara-luni { display:flex; align-items:stretch; margin:0 0 6px;
             border:1px solid var(--rule); border-radius:10px; background:var(--tinta);
             overflow:hidden }
.bara-luni[hidden] { display:none }
/* ⚠️ position:relative NU e de podoaba: JS-ul aduce luna deschisa la mijloc cu offsetLeft, masurat
   fata de cel mai apropiat stramos asezat. */
.bara-luni .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-luni .fasie::-webkit-scrollbar { display:none }
.bara-luni .luni { display:flex; align-items:stretch; gap:0; width:max-content; padding:0 }

/* BARA CAUTARII — sora barei lunilor, cu acelasi chenar si aceeasi rotunjire.
   ⚠️ appearance:none e pentru iOS, care altfel deseneaza campul de cautare cu chenarul lui,
   inauntrul chenarului nostru — „buton in buton".
   ⚠️ V3: .bara-cautare in fata selectorilor campului si butonului — stil.css are form.cauta input
   si form.cauta button, mai tari decat o clasa singura. Latimea campului (flex:1, min-width:200px)
   ramane a acelora, ca in V2, unde o dadea form input[type=search] din carcasa. */
.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 .cauta { display:flex; align-items:stretch; flex:1 1 auto; min-width:0; margin:0 }
.bara-cautare .cauta-camp { 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 }
/* butonul de trimis: un segment la capat. Lupa lui e aceeasi cu a cheii de sus. */
.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) }

/* FARA JAVASCRIPT, barele se deschid din adresa (#bara-luni, #bara-cautare — cheile pastilei sunt
   legaturi spre ele). ⚠️ Sta DUPA regulile [hidden]: aceeasi specificitate, deci castiga cea de jos. */
.bara-luni:target, .bara-cautare:target { display:flex }

/* LUNILE: text simplu in capsula — fara chenar, fara fundal, fara rotunjire a lor. Despartitura e o
   linie de 1 px. ⚠️ SEGMENTELE SUNT STRANSE CAT SE POATE. Masoara cu scrollWidth vs clientWidth pe
   .fasie, nu cu ochiul. */
.luna-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 8px;
              font:600 12.5px/1 ui-sans-serif,system-ui; letter-spacing:.03em;
              text-transform:uppercase; white-space:nowrap }
.luna-buton + .luna-buton { border-left:1px solid var(--rule) }
.luna-buton:hover { color:var(--rosu); background:var(--paper) }
/* luna deschisa: rosie si plina, ca segmentul pe care esti din pastila Programului */
.luna-buton.activa { color:var(--rosu); font-weight:700;
                     background:color-mix(in srgb, var(--rosu) 11%, transparent) }

/* „AZI" E O BULINA (user, 12.09.2026: „AZI să fie o bulină ca la Program"): butonul n-are text, are
   un punct desenat din CSS.
   ⚠️ ROSUL E AL LOCULUI, NU AL BUTONULUI (user, 12.09.2026, 13:56): bulina se face rosie numai pe
   luna de azi.
   ⚠️ FUNDALUL E EFEMER: se aprinde doar cat tine apasarea si focusul de la tastatura. */
.azi-buton { flex:none; display:flex; align-items:center; justify-content:center;
             color:var(--soft); background:transparent;
             border:0; border-radius:0; padding:11px 16px; text-decoration:none }
.azi-buton::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor }
.azi-buton:hover { color:var(--rosu); background:var(--paper) }
.azi-buton.activ { color:var(--rosu) }
.azi-buton:active, .azi-buton:focus-visible { background:color-mix(in srgb, var(--rosu) 14%, transparent) }

/* Sagetile — segmentele de la capetele sirului lunilor, pentru cine n-are deget. JS-ul le scrie si
   le ascunde cu totul cand lunile incap. */
.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 }
.azi-buton + .sageata, .sageata + .fasie, .fasie + .sageata { border-left:1px solid var(--rule) }
.sageata:hover:not([disabled]) { color:var(--rosu); background:var(--paper) }
.sageata[disabled] { opacity:.25; cursor:default }
.sageata[hidden] { display:none }

h2.luna { font:400 13px/1 ui-sans-serif,system-ui; letter-spacing:.2em; text-transform:uppercase;
          color:var(--faint); margin:26px 0 6px; padding-bottom:8px;
          border-bottom:1px solid var(--rule) }

.zi { display:grid; grid-template-columns:46px 1fr; gap:0 12px;
      padding:11px 8px 11px 6px; border-bottom:1px solid var(--rule);
      margin:0 -8px 0 -6px; border-radius:3px }
.zile .zi:last-child { border-bottom:0 }
.zi > .ce::after { content:""; display:block; clear:both }
.zi.duminica { background:var(--tinta) }
.zi.azi { box-shadow:inset 4px 0 0 var(--azi); background:var(--azi-fund) }
.zi.azi .cand .nr { color:var(--azi); font-weight:600 }

.cand { text-align:right; padding-top:1px; line-height:1.2; text-decoration:none; display:block }
.nr { display:block; font-size:20px; color:var(--ink) }
/* ⚠️ Si ziua cu CRUCE ROSIE isi scrie data cu rosu, nu doar duminica (user, 12.09.2026, 13:04).
   Fundalul palid ramane insa numai al duminicii. */
.zi.duminica .nr, .zi.cruce-rosie .nr { color:var(--rosu) }
.zs { display:block; font:11px/1.4 ui-sans-serif,system-ui; color:var(--faint);
      text-transform:uppercase; letter-spacing:.05em }
.cand:hover .nr { color:var(--rosu) }

.ce > p { margin:0 }
.titlu-zi { font-size:16.5px; line-height:1.45 }
.titlu-zi a { color:inherit; text-decoration:none }
.titlu-zi a:hover { text-decoration:underline; text-decoration-color:var(--rule) }
.zi.azi .titlu-zi { font-weight:600 }
.cr { margin-right:5px; font-size:15px }
.cruce-rosie .cr { color:var(--rosu) }
.cruce-albastra .cr { color:var(--albastru) }
.cruce-neagra .cr { color:var(--negru) }

.ce > .titlu-zi ~ p { margin-top:2px }
.sfinti { font-size:15px; color:var(--soft); margin-top:2px }
.sfinti a { color:inherit; text-decoration:none }
.sfinti a:hover { text-decoration:underline; text-decoration-color:var(--rule) }
.subtitlu { font-size:14px; color:var(--soft); margin-top:2px; font-style:italic }
/* anii privegherilor, sub numele zilei, numai in lista sfintilor cu evlavie (user, 12.09.2026, 14:20).
   Cuvantul „Privegheri:" poarta movul filtrului, anii raman in cerneala obisnuita — ei sunt faptul. */
.privegheri { font:13.5px/1.5 ui-sans-serif,system-ui; color:var(--soft); margin-top:3px }
.privegheri b { color:var(--mov); font-weight:600 }
.pericope { font:12.5px/1.5 ui-sans-serif,system-ui; color:var(--faint); margin-top:4px }
.pericope a { color:inherit; text-decoration:none;
              border-bottom:1px dotted var(--rule); padding-bottom:1px }
.pericope a:hover { color:var(--rosu); border-bottom-color:var(--rosu) }
.glas { font-weight:600; color:var(--soft) }
.zi.duminica .titlu-zi { font-size:17.5px }
.zi.duminica .titlu-zi, .pagina-zi.duminica .titlu-mare { color:var(--rosu) }
/* ⚠️ In lista crucilor NEGRE, duminica nu se mai scrie rosu: acolo capul zilei sunt sfintii cu cruce
   neagra, iar rosul ar spune „sarbatoare cu ținere" — taman ce lista aceasta nu cuprinde. */
.zi.fara-rosu.duminica .titlu-zi { color:var(--ink) }
.zi.fara-rosu .nr { color:var(--ink) }

.semne { margin-top:5px; display:flex; flex-wrap:wrap; gap:5px }
.semn { font:11px/1 ui-sans-serif,system-ui; letter-spacing:.03em; padding:4px 8px;
        border-radius:3px; border:1px solid var(--rule); color:var(--soft); white-space:nowrap }

.randuiala-mesei { float:right; width:118px; margin:2px 0 6px 14px;
                   display:flex; flex-direction:column; align-items:stretch;
                   gap:4px; padding-left:12px; border-left:1px solid var(--rule) }
.randuiala-mesei .semn { white-space:normal; text-align:center; line-height:1.3; padding:5px 6px }
.semn[class*="post-"] { border-style:dashed }
.semn.perioada { color:var(--faint) }
.semn.morti { border-color:var(--albastru); color:var(--albastru) }
.semn.slujba { border-color:var(--soft); color:var(--ink) }
.semn.aliturgica { border-style:dashed; color:var(--faint) }
.semn.libera { border-color:var(--rosu); color:var(--rosu) }

.data-mare { font-size:44px; font-weight:400; letter-spacing:-.02em; margin:0 0 2px }
.titlu-mare { font-size:23px; line-height:1.35; margin:0 0 6px }
.pagina-zi .sfinti { font-size:16px; margin:0 0 6px }
.pagina-zi .pericope { margin:14px 0 0 }
.pagina-zi .subtitlu { font-size:15px; margin:0 0 10px }
.pagina-zi .semne { margin:12px 0 0 }
.randuiala { font:12px ui-sans-serif,system-ui; color:var(--faint); margin:12px 0 0 }
.zs-mare { color:var(--soft); margin:0 0 10px }

.text { margin:38px 0 }
.text h1, .text h2 { font-size:20px; font-weight:400; margin:0 0 10px; line-height:1.3 }
.text h3 { font:600 11px/1 ui-sans-serif,system-ui; letter-spacing:.16em; text-transform:uppercase;
           color:var(--rosu); margin:0 0 14px }
.text p { margin:0 0 14px; text-align:justify; hyphens:auto }
.text blockquote { margin:20px 0; padding-left:18px; border-left:3px solid var(--rule);
                   color:var(--soft); font-style:italic }
.text img { max-width:100%; height:auto; border-radius:3px; margin:8px 0 }
.text .ref { font:12.5px/1.5 ui-sans-serif,system-ui; color:var(--faint); margin:-4px 0 10px }
.text .ref a { color:inherit }
.gol { color:var(--faint) }

.vecini { display:flex; justify-content:space-between; gap:12px; margin-top:44px;
          padding-top:18px; border-top:1px solid var(--rule);
          font:13px ui-sans-serif,system-ui }
.vecini a { text-decoration:none }

/* ————— fereastra cu textele zilei ————— */
dialog.fereastra { display:flex; flex-direction:column; inset:0; margin:auto;
                   width:min(700px,94vw); max-width:none; max-height:88vh; max-height:88dvh;
                   padding:0; border:none; border-radius:10px;
                   background:var(--paper); color:var(--ink);
                   box-shadow:0 24px 70px color-mix(in srgb, var(--tipar-cerneala) 40%, transparent) }
dialog.fereastra:not([open]) { display:none }
dialog.fereastra::backdrop { background:color-mix(in srgb, var(--tipar-cerneala) 55%, transparent) }
.bara-fereastra { flex:none; display:flex; justify-content:flex-end; padding:6px 8px 0 }
.cuprins-fereastra { flex:1 1 auto; overflow-y:auto; padding:10px 34px 40px;
                     overscroll-behavior:contain }
.cuprins-fereastra .text { margin:0 0 30px }
.cuprins-fereastra .text:first-of-type { margin-top:0 }
.cuprins-fereastra .text h1:first-child,
.cuprins-fereastra .text h2:first-child { margin-top:0 }
.fel-fereastra { font:400 30px/1.15 "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
                 color:var(--rosu); margin:0 0 10px }
.cand-fereastra { font:600 11px/1 ui-sans-serif,system-ui; letter-spacing:.16em;
                  text-transform:uppercase; color:var(--faint); margin:0 0 22px;
                  padding-bottom:16px; border-bottom:1px solid var(--rule) }
.titlu-fereastra { font-size:20px; font-weight:400; line-height:1.35; margin:0 0 8px }
.titlu-fereastra a { color:inherit; text-decoration:none;
                     border-bottom:1px dotted var(--rule); padding-bottom:1px }
.titlu-fereastra a:hover { color:var(--rosu); border-bottom-color:var(--rosu) }
.inchide { border:none; background:none; color:var(--faint); cursor:pointer;
           font:300 28px/1 ui-sans-serif,system-ui; padding:8px 14px; border-radius:999px }
.inchide:hover { color:var(--rosu) }

@media (max-width:520px) {
  /* pastila se strange; derularea o face degetul, deci sagetile ies cu totul (user, 12.09.2026) */
  .azi-buton { padding:11px 15px }
  .luna-buton { padding:11px 11px; font-size:12.5px }
  .sageata { display:none }
  h1 { font-size:42px }
  .data-mare { font-size:34px }
  .titlu-lista { font-size:25px }
  .titlu-mare { font-size:20px }
  .zi { grid-template-columns:30px 1fr; gap:0 8px; padding:11px 5px; margin:0 -5px }
  .randuiala-mesei { width:80px; margin-left:10px; padding-left:8px }
  .randuiala-mesei .semn { font-size:10px; padding:4px 5px }
  .titlu-zi { font-size:16px }
  .text p { text-align:left }
  .cuprins-fereastra { padding:8px 22px 34px }
  dialog.fereastra { width:96vw; max-height:90vh; max-height:90dvh }
}