/* Tipicul — stilul LOCAL al aplicației, lipit DUPĂ `stil.css` (ca la Calendar, ca în V2, unde
 * `LOCAL` din `apps/tipic/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 s-a schimbat, și de ce:
 *
 *  1. CULORILE — numai variabilele din `stil.css` (= `@xc/ui` tokens), ca la Calendar.
 *  2. CE NU S-A ADUS: fereastra de abonare (`.modal`, `.camp`, `.bifa`, `.btn-plin` — abonarea e un
 *     link spre `/cont/abonamente`, nu o fereastră aici) și setările (`@xc/setari`, în app-core).
 *  3. CHEIA CALENDARULUI (`.cal-cheie`) e un LINK spre `#bara-cal` (V2: `<button>` mutat cu JS),
 *     deci fără JS bara se deschide din `:target` (mai jos) — ca `luni-cheie` al Calendarului.
 *  4. SĂGEȚILE GRILEI (`.cal-sageata`) sunt LINKURI (`?luna=…`), nu butoane cu `data-luna`: pagina
 *     merge fără JavaScript (decizia 12); `tipic.js` le îmbunătățește cu `fetch` + `DOMParser`.
 */

/* ——— Capitolele părților (Tipiconal, Rânduiala, Mineiul) ——————————————————————————————————— */
h3 { font-size:20px; font-weight:600; color:var(--soft);
     margin:38px 0 16px; padding:10px 14px;
     border:1px solid var(--rule); border-radius:8px; background:none }

/* Fiecare parte se închide de tot din capul ei, ca pericopele — dar săgeata stă în DREAPTA barei. */
.parte { border:none; border-radius:0; padding:0; margin:0 }
.parte > summary { list-style:none; cursor:pointer; margin:0; color:inherit }
.parte > summary::-webkit-details-marker { display:none }
.parte[open] > summary { margin-bottom:0 }
.parte > summary h3 { display:flex; align-items:center; justify-content:space-between; gap:12px }
.parte > summary h3 .cap { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:3px }
.parte > summary h3 .sursa { font:400 13px/1.4 ui-sans-serif,system-ui; color:var(--faint) }
.parte > summary h3 .sursa .et { color:var(--soft) }
.parte > summary h3::after { content:""; flex:none; width:9px; height:9px; margin-right:4px;
                             border-right:2px solid currentColor; border-bottom:2px solid currentColor;
                             opacity:.8; transform:rotate(-45deg); transition:transform .15s ease }
.parte[open] > summary h3::after { transform:rotate(45deg) }
.parte > summary:hover h3, .parte > summary:focus-visible h3 { border-color:var(--soft) }

/* rânduiala ROEA: slujbele pe rânduri strânse, cu eticheta îngroșată roșie */
.tipic p { margin:6px 0 }
.tipic b { font-weight:600; color:var(--rosu) }
.indemn { color:var(--faint) }

/* rânduiala din Anuar: capul de alineat îngroșat, cursivul pentru ce se cântă/citește */
.anuar p { margin:10px 0 }
.anuar i { font-style:italic }

/* Mineiul — textul slujbei, cu cele patru feluri de rând ale cărții */
.minei p { margin:9px 0 }
.minei .slujba { margin:26px 0 10px; font:600 13px/1.4 ui-sans-serif,system-ui;
                 letter-spacing:.09em; color:var(--rosu) }
.minei .slujba:first-child { margin-top:4px }
.minei .tipiconal { margin:8px 0; font-size:14px; font-style:italic; color:var(--rosu) }
.minei .sinaxar { font-size:15px; color:var(--soft) }
.minei .centrat { text-align:center; text-wrap:balance }

/* titlul zilei — culorile după rangul sărbătorii, ca la Calendar */
.praznic { margin:2px 0 18px; font-size:19px; line-height:1.4 }
.c-rosu { color:var(--rosu) }
.c-albastru { color:var(--albastru) }
.titlu-zi { margin:2px 0 0; font-size:19px; line-height:1.4; color:var(--rosu) }
.sfinti { margin:5px 0 0; font-size:16px; line-height:1.45 }
.titlu-zi .cr, .sfinti .cr { font-size:15px }
.pericope { margin:7px 0 18px; font:13px/1.5 ui-sans-serif,system-ui; color:var(--faint) }
.pericope .glas { font-weight:600; color:var(--soft) }

/* blocurile lungi, tăiate la 12 rânduri, cu „mai mult" (`tipic.js`) */
[data-lung] { display:flow-root }
.taiat { max-height:19.2em; overflow:hidden;
         -webkit-mask-image:linear-gradient(#000 calc(100% - 4em),transparent);
         mask-image:linear-gradient(#000 calc(100% - 4em),transparent) }
.mai-mult { position:relative; text-align:center; margin:14px 0 4px }
.mai-mult::before { content:""; position:absolute; left:0; right:0; top:50%;
                    border-top:1px solid var(--rule) }
.btn-mai { position:relative; background:var(--paper); color:var(--soft);
           border:1px solid var(--rule); border-radius:999px; padding:5px 16px;
           font:600 13px ui-sans-serif,system-ui; cursor:pointer }
.btn-mai:hover { color:var(--rosu); border-color:var(--rosu) }
.sfarsit { position:relative; text-align:center; margin:20px 0 4px }
.sfarsit::before { content:""; position:absolute; left:0; right:0; top:50%;
                   border-top:1px solid var(--rule) }
.sfarsit span { position:relative; background:var(--paper); padding:0 14px;
                font:600 12px/1 ui-sans-serif,system-ui; letter-spacing:.18em;
                color:var(--soft) }

/* trimiterea la cartea scanată (PDF) — se poartă ca butoanele din antet */
.la-carte { margin:16px 0 4px; text-align:right }
.carte { display:inline-flex; align-items:center; gap:12px; text-align:left;
         padding:10px 14px; border:1px solid var(--rule); border-radius:10px;
         background:var(--tinta); color:var(--ink);
         font:15px ui-sans-serif,system-ui; text-decoration:none; cursor:pointer }
.carte:hover { border-color:var(--rosu); color:var(--rosu) }
.carte:hover .pag { color:var(--rosu) }
.insigna { display:grid; place-items:center; width:44px; height:44px; flex:none }
.carte .ce { display:flex; flex-direction:column; line-height:1.3 }
.carte .ce b { font-weight:600; font-size:15px }
.carte .pag { font:13px ui-sans-serif,system-ui; color:var(--faint); margin-top:2px }

/* versetele pericopelor: numărul mărunt, în fața rândului */
.vers b { color:var(--faint); font:600 12px ui-sans-serif,system-ui; margin-right:4px }

/* ——— Rândul de unelte din antet, ca la Calendar ————————————————————————————————————————————— */
.btns { flex-wrap:nowrap }
.btns .btn { min-width:0 }
.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 }

/* PASTILA LOCULUI: bulina zilei de azi · data · „Mâine" · cheia calendarului */
.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) }
.pastila .azi-buton, .pastila .cal-cheie { flex:0 0 46px; width:46px; padding-left:0; padding-right:0 }
.pastila > :first-child { border-radius:9px 0 0 9px }
.pastila > :last-child { border-radius:0 9px 9px 0 }
.pastila .azi-buton { display:flex; align-items:center; justify-content:center;
                      color:var(--soft); background:transparent; border:0; cursor:pointer;
                      text-decoration:none }
.pastila .azi-buton::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor }
.pastila .azi-buton:hover { color:var(--rosu); background:var(--paper) }
.pastila .azi-buton.activ { color:var(--rosu) }
.pastila .azi-buton[aria-disabled="true"] { cursor:default }
.pastila .azi-buton:active, .pastila .azi-buton:focus-visible {
                      outline:none; background:color-mix(in srgb, var(--rosu) 14%, transparent) }
.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 }
.pastila .maine-buton { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
                      padding:0 14px; border:0; border-radius:0; background:transparent;
                      color:var(--soft); cursor:pointer; text-decoration:none; white-space:nowrap;
                      font:600 13px/1 ui-sans-serif,system-ui }
.pastila .maine-buton svg { vertical-align:0 }
.pastila .maine-buton .sgt { display:none }
.pastila a.maine-buton:hover { color:var(--rosu); background:var(--paper) }
.pastila .maine-buton.activ { color:var(--rosu);
                      background:color-mix(in srgb, var(--rosu) 11%, transparent) }
.pastila .maine-buton[aria-disabled="true"] { cursor:default }
.pastila .maine-buton:focus-visible { outline:none;
                      background:color-mix(in srgb, var(--rosu) 18%, transparent) }
.pastila .cal-cheie { 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; text-decoration:none }
.pastila .cal-cheie:hover { color:var(--rosu); background:var(--paper) }
.pastila .cal-cheie[aria-expanded="true"] { color:var(--rosu);
                      background:color-mix(in srgb, var(--rosu) 11%, transparent) }

@media (max-width:600px) {
  .btns { gap:7px }
  .btns .mic { padding:9px }
  .pastila .azi-buton, .pastila .cal-cheie, .pastila .maine-buton { flex:0 0 42px; width:42px }
  .pastila .maine-buton { padding-left:0; padding-right:0 }
  .pastila .maine-buton .cuv { display:none }
  .pastila .maine-buton .sgt { display:flex }
}
@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) {
  .btns { gap:6px }
  .btns .mic { padding-left:9px; padding-right:9px }
  .pastila .azi-buton, .pastila .cal-cheie, .pastila .maine-buton { flex:0 0 36px; width:36px }
  .pastila .acum { padding:11px 6px; font-size:12px }
}

/* BARA CALENDARULUI — sub rândul de unelte, ascunsă până se apasă cheia din pastilă. */
.bara-cal { display:block; margin:0 0 6px;
            border:1px solid var(--rule); border-radius:10px; background:var(--tinta);
            overflow:hidden; padding:8px 6px 6px }
.bara-cal[hidden] { display:none }
.bara-cal[aria-busy="true"] { opacity:.5 }
/* FĂRĂ JAVASCRIPT: bara se deschide din adresă (`#bara-cal` — cheia pastilei e un link spre ea).
   Sta DUPĂ regula `[hidden]`: aceeași specificitate, deci câștigă cea de jos. */
.bara-cal:target { display:block }

.cal-nav { display:flex; justify-content:space-between; align-items:center; margin:0 0 4px }
.cal-titlu { font:600 12.5px/1 ui-sans-serif,system-ui; letter-spacing:.06em;
             text-transform:uppercase; color:var(--soft) }
.cal-sageata { display:inline-block; border:0; border-radius:8px; background:transparent; color:var(--faint);
               font:300 19px/1 ui-sans-serif,system-ui; padding:4px 12px; cursor:pointer;
               text-decoration:none }
.cal-sageata:hover { color:var(--rosu); background:var(--paper) }

/* GRILA LUNII — numărul zilei negru, duminicile și sărbătorile roșii; zilele fără rânduială
   proprie rămân în aceleași culori, doar palite. */
.cal { width:100%; border-collapse:collapse; margin:0 }
.cal th { padding:2px 0 6px; text-align:center;
          font:600 10.5px/1 ui-sans-serif,system-ui; letter-spacing:.06em;
          text-transform:uppercase; color:var(--faint) }
.cal td { padding:1px 0; text-align:center; border-bottom:0 }
.cal .zi { position:relative; display:inline-block; min-width:30px; padding:5px 0 7px;
           border-radius:8px; text-decoration:none; color:var(--ink) }
.cal .zi b { font:600 14px/1 ui-sans-serif,system-ui; color:inherit }
.cal .zi.c-rosu { color:var(--rosu) }
.cal a.zi:hover { background:var(--paper) }
.cal .gol { opacity:.55; cursor:default }
.cal .zi.acum { background:var(--azi-fund); outline:1px solid var(--azi) }
.cal .zi.e-azi::after { content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
                        width:4px; height:4px; border-radius:50%; background:currentColor }

/* indexul (`/tipic/_index`) și mesajele — liste simple, ca peste tot pe platformă */
.lista { list-style:none; margin:0; padding:0 }
.lista li { margin:4px 0 }