/* Foaia de stil a ușii (app/index.html), scoasă din pagină într-un fișier.

   Stătea într-un bloc <style> din pagină. Politica de conținut (app/_headers,
   tools/csp.js) ajunge la „style-src 'self'” numai fără blocuri și fără
   atribute style="…": de asta și culorile legendei planului, bara de sosiri
   și titlurile fișelor fără număr de masă au aici clasele lor (mai jos, la
   locul lor), în loc de style="…" în pagină și în HTML-ul făcut de usa.js.
   Service worker-ul o ține în telefon odată cu pagina (PAGINA, usa-sw.js). */
:root{
  /* Culorile ușii, cu temele și color-scheme, sunt în paleta site-ului
     (app/paleta.css), legată de pagină înaintea foii ăsteia; aici, numai
     rotunjimea cutiilor. */
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Nu se vede, dar se citește: eticheta câmpului de căutare și rândul în care
   se spun rezultatele și bifele, pentru cine lucrează cu cititorul de ecran.
   Tăietura e anume, de aceea puncte-puncte: galeria caută text tăiat din
   greșeală, iar ăsta nu e. */
.doar-cititor{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;clip-path:inset(50%);
}
html,body{margin:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:"Karla","Segoe UI",system-ui,sans-serif;-webkit-text-size-adjust:100%;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.app{max-width:640px;margin:0 auto;padding-bottom:86px}

/* ---------- antet ---------- */
header.bar{
  position:sticky;top:0;z-index:30;background:var(--ground);
  border-bottom:1px solid var(--line);padding:12px 16px 10px;
}
.brandrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.brand{font-family:"Bodoni Moda",Georgia,serif;font-size:19px}
.brand small{
  display:block;font-family:"Karla",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;
}
.counter{text-align:right;font-variant-numeric:tabular-nums;line-height:1.15}
.counter b{font-family:"Bodoni Moda",Georgia,serif;font-size:22px;color:var(--gold)}
.counter span{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.syncrow{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.syncdot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.syncrow[data-s="ok"] .syncdot{background:var(--ok)}
.syncrow[data-s="busy"] .syncdot{background:var(--gold);animation:pulse 1s ease-in-out infinite}
.syncrow[data-s="off"] .syncdot{background:var(--garnet)}
.syncrow[data-s="off"]{color:var(--garnet)}
@keyframes pulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.syncrow[data-s="busy"] .syncdot{animation:none}}
.progress{height:4px;border-radius:99px;background:var(--surface-2);margin-top:10px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .3s ease}
/* pornește goală; lățimea o pune usa.js (randeazaContoare), prin style.width */
#bar{width:0%}

/* ---------- căutare ---------- */
.searchwrap{position:relative;margin:14px 16px 0}
#q{
  width:100%;padding:15px 48px 15px 16px;font-size:17px;font-weight:600;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r);
}
#q::placeholder{font-weight:400;color:var(--ink-3)}
/* Un input type="search" își aduce propriul × de golire, desenat de browser.
   Pe telefoanele pe care am probat nu se vede, așa că a trecut neobservat —
   dar pe desktop și pe tabletă apar două × unul lângă altul, iar al nostru,
   care e mai la dreapta, arată ca și cum ar fi de prisos. Îl ținem pe al
   nostru: știe să golească și căutarea, nu doar câmpul, și e destul de mare
   cât să fie apăsat cu degetul. */
#q::-webkit-search-cancel-button,
#q::-webkit-search-decoration,
#q::-webkit-search-results-button,
#q::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}
/* „Destul de mare” era 34 de pixeli: se nimerea stând pe loc, nu cu
   telefonul într-o mână și cu invitatul în față. Patruzeci și patru e
   măsura unui deget mare; semnul rămâne cât era. */
.clearbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;font-size:20px;color:var(--ink-3)}
.chips{display:flex;gap:8px;padding:12px 16px 4px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:7px 13px;border-radius:99px;border:1px solid var(--line-strong);
  font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);white-space:nowrap;
}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* ---------- listă ---------- */
.list{padding:8px 16px 24px}
.letter{font-family:"Bodoni Moda",Georgia,serif;font-size:13px;color:var(--gold);padding:16px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:6px;letter-spacing:.08em}
.row{display:flex;align-items:center;gap:6px;width:100%;border-radius:var(--r);border:1px solid transparent}
.row+.row{margin-top:2px}
/* Rândurile care nu sunt pe ecran nu se așază și nu se pictează până nu
   ajung acolo. La o mie de rânduri, lista întreagă pusă din nou (alt filtru,
   căutarea ștearsă) costa de trei ori mai mult fără asta. Înălțimea de
   rezervă e a unui rând cu numele pe un singur rând; „auto” o ține pe cea
   adevărată după ce rândul a fost văzut o dată. Rândul își taie ce iese din
   el, deci conturul focusului stă înăuntru. */
#results .row{content-visibility:auto;contain-intrinsic-size:auto 76px}
#results .row :focus-visible{outline-offset:-2px}
.row.done{background:var(--ok-soft);border-color:var(--ok-line)}
/* Numele deschide fișa; bifa e alături, cu spațiul ei, ca să nu se atingă una
   în locul celeilalte cu degetul mare, în picioare, pe întuneric. */
.row .deschide{flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  text-align:left;padding:11px 4px 11px 12px;border-radius:var(--r)}
.row .deschide:active{background:var(--surface-2)}
.row .bifa{flex:0 0 auto;width:46px;height:46px;margin-right:8px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  display:grid;place-items:center;font-size:19px;line-height:1}
.row .bifa:active{transform:scale(.93)}
.row.done .bifa{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.row.part .bifa{border-color:var(--garnet);color:var(--garnet)}
.row .nm{flex:1;min-width:0}
.row .nm b{display:block;font-weight:700;font-size:15px;line-height:1.3;word-break:break-word}
.row .nm span{font-size:12.5px;color:var(--ink-2)}
.row.done .nm b{text-decoration:line-through;text-decoration-color:var(--ok);text-decoration-thickness:1.5px}
mark{background:var(--potrivire);color:inherit;border-radius:3px;padding:0 1px}
.tbadge{flex:0 0 auto;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.tbadge em{font-style:normal;font-family:"Bodoni Moda",Georgia,serif;font-size:21px;line-height:1;font-variant-numeric:tabular-nums}
.tbadge small{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.row.done .tbadge{background:var(--ok);border-color:var(--ok)}
.row.done .tbadge em,.row.done .tbadge small{color:var(--on-ok)}
.row.part .tbadge{background:var(--garnet-soft);border-color:var(--garnet)}
/* Formularul de adăugat la ușă: câmpuri mari, fiindcă se scrie în picioare,
   cu o mână, cu coada în spate. */
/* Fișa are peste tot douăzeci de pixeli pe margini: .hint, .warn, .actions,
   .sect. Formularul de adăugat nu-i avea, și ieșea lipit de marginile
   telefonului, singurul lucru din toată fișa care se purta altfel. */
.adauga{display:grid;gap:12px;margin-top:14px;padding:0 20px}
.sheet > .note{padding:0 20px}
.adauga label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:5px;font-weight:600}
.adauga input,.adauga textarea{
  width:100%;padding:13px 14px;border-radius:12px;font-size:16px;
  border:1px solid var(--line-strong);background:var(--surface);
}
.adauga textarea{font:inherit;font-size:16px;color:inherit;resize:vertical;min-height:84px}
.adauga .doua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btnadauga{
  width:100%;padding:13px;border-radius:12px;margin-top:10px;
  border:1px dashed var(--line-strong);color:var(--ink-2);font-weight:600;font-size:14px;
}
.btnadauga:active{background:var(--surface-2)}
/* Microfonul: numele se spune, nu se scrie. La ușă, cu o mână ocupată de
   telefon și cealaltă de listă, e mai iute decât tastatura — iar ce înțelege
   greșit prinde oricum căutarea care iartă greșelile. */
.micbtn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:18px;line-height:1;background:var(--surface-2);border:1px solid var(--line);
}
.micbtn[data-asculta="1"]{background:var(--garnet);border-color:var(--garnet);animation:pulsa 1.1s infinite}
@keyframes pulsa{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.micbtn[data-asculta="1"]{animation:none}}
/* Când e și microfon, și ×, se așază unul lângă altul. Clasa se pune din
   JavaScript, nu cu :has(): dacă browserul nu știe :has(), cele două butoane
   s-ar sui unul peste altul, iar asta se vede. */
.searchwrap.cu-mic #clr{right:50px}
.searchwrap.cu-mic #q{padding-right:96px}
/* Cei care au spus „Nu” (052): la capătul listei, într-o secțiune strânsă, și
   în căutare, cu eticheta pe rând. Numele e mai stins decât al celor așteptați,
   dar se citește; bifa e aceeași: dacă a venit totuși, se bifează ca oricare. */
.row.nu .nm b{color:var(--ink-2)}
.spusnu{display:inline-block;margin-right:6px;font-style:normal;padding:0 7px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--ink-2);font-size:11.5px;font-weight:700;white-space:nowrap}
.nuvin{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:18px 0 6px;padding:10px 14px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  font-size:13.5px;font-weight:700;color:var(--ink-2);text-align:left;
}
.nuvin span{flex:1}
.nuvin i{font-style:normal;transition:transform .15s ease}
.nuvin[aria-expanded="true"] i{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.nuvin i{transition:none}}
.empty{padding:48px 20px;text-align:center;color:var(--ink-2)}
.empty b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:18px;color:var(--ink);margin-bottom:6px}
.loose{margin:10px 0 2px;padding:8px 12px;border-radius:10px;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- file ---------- */
nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--surface);border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
/* Banda de jos rămâne lipită de marginile ecranului, ca degetul să nimerească
   în colț și pe telefon. Butoanele din ea, în schimb, se strâng la lățimea
   coloanei: pe un laptop, unde aplicația se deschide înainte de eveniment ca
   să se uite gazda peste listă, trei butoane întinse pe o mie trei sute de
   pixeli, sub o coloană de șase sute patruzeci, arată a pagină ruptă. */
nav.tabs{justify-content:center}
nav.tabs button{flex:1;max-width:214px;padding:8px 4px;border-radius:10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
nav.tabs button[aria-pressed="true"]{color:var(--ink);background:var(--surface-2)}
nav.tabs button i{display:block;font-style:normal;font-size:17px;margin-bottom:3px;font-family:"Bodoni Moda",serif}

/* ---------- plan ---------- */
.planwrap{padding:16px}
/* Planul încape tot, de la bun început. Avea min-width:600px, deci pe un
   telefon se derula în amândouă părțile, iar omul căuta masa 23 plimbând
   degetul — exact când n-are timp de plimbat degetul.
   touch-action:none, fiindcă ciupitul e al nostru, nu al browserului. */
.planscroll{
  position:relative;overflow:hidden;touch-action:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;
}
/* Lădița are înălțimea ei, nu cât desenul. Altfel planul se strânge cât ține
   lățimea telefonului și lasă sub el patru sute de pixeli goi — iar întoarcerea
   pe o parte n-ar avea în ce să crească. */
.planscroll{height:56vh;max-height:520px}
.sheet .planscroll{height:40vh;max-height:380px}
.planscroll svg{display:block;width:100%;height:100%}
/* Mărunte și șterse: planul e ce trebuie privit, nu butoanele lui. Acopereau
   un colț întreg din sală. */
/* Semnele rămân mărunte, dar locul de apăsat nu: la 26 de pixeli, „+” și „−”
   se nimereau unul în locul celuilalt cu degetul mare. Cutia crește cât
   degetul, fără fond pe butoane, deci planul se vede tot pe lângă semne. */
.lupa{
  position:absolute;right:6px;bottom:6px;display:flex;gap:0;align-items:center;
  background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:0;
  opacity:.82;
}
.lupa button{
  width:44px;height:44px;border-radius:11px;border:0;
  background:none;color:var(--ink-2);font-weight:700;font-size:15px;line-height:1;
  display:grid;place-items:center;
}
.lupa button.lat{width:auto;min-width:44px;padding:0 8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.lupa button:active{background:var(--surface-2);color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 2px 0;font-size:12px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:12px;height:12px;border-radius:4px;border:1px solid var(--line-strong)}
/* legenda planului: aceleași culori ca mesele (.t-*) */
.dot.d-neveniti{background:var(--surface-2)}
.dot.d-partiala{background:var(--garnet-soft);border-color:var(--garnet)}
.dot.d-completa{background:var(--ok);border-color:var(--ok)}
.dot.d-libera{border-style:dashed}
.planwrap .note{padding-left:2px}
.t-niciunul{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5}
.t-partiala{fill:var(--garnet-soft);stroke:var(--garnet);stroke-width:2}
.t-completa{fill:var(--ok);stroke:var(--ok)}
.t-libera{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 4}
/* Numerele meselor se citesc pe un telefon, la tot planul: acolo o masă are
   vreo cincisprezece pixeli, iar cifra din ea vreo cinci. Prata e frumoasă, dar
   la mărimea aia se face pată. Karla groasă, mai mare, cu un contur de culoarea
   mesei dedesubt — paint-order pune conturul sub literă, nu peste ea. */
.t-num{
  fill:var(--ink);font-family:"Karla",system-ui,sans-serif;font-weight:700;
  font-size:20px;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;
}
text.pe-completa{fill:var(--on-ok);stroke:var(--ok)}
.t-num{stroke:var(--surface-2)}
.tbl:has(.t-partiala) .t-num{stroke:var(--garnet-soft)}
.t-libera-num{fill:var(--ink-3);font-size:15px;stroke-width:2px}
.fixture{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1}
/* Zece unități pe un plan de o mie o sută înseamnă trei pixeli pe telefon:
   nu mic, invizibil. Și ele au nevoie de contur, ca numerele meselor. */
.flabel{
  fill:var(--ink);font-size:17px;font-weight:700;letter-spacing:.04em;
  text-anchor:middle;font-family:"Karla",sans-serif;
  paint-order:stroke;stroke:var(--surface-2);stroke-width:3px;stroke-linejoin:round;
}
.hl{fill:none;stroke:var(--garnet);stroke-width:3.5}

/* ---------- fișa ---------- */
.scrim{position:fixed;inset:0;background:var(--val-usa);z-index:50}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:92vh;overflow-y:auto;
  background:var(--ground);border-radius:22px 22px 0 0;box-shadow:0 -8px 40px var(--umbra-fisa);
  padding:0 0 calc(24px + env(safe-area-inset-bottom));animation:rise .22s cubic-bezier(.2,.8,.3,1);
}
@media (min-width:641px){.sheet{max-width:640px;margin:0 auto}}
/* Fișa primește focusul când se deschide, ca cititorul de ecran s-o anunțe;
   un contur în jurul întregii fișe n-ar spune nimic ochiului. */
.sheet:focus{outline:none}
@keyframes rise{from{transform:translateY(28px);opacity:.4}}
/* Urcă numai când se deschide. Redesenată după o bifă, un plus sau un minus,
   urca iar de la 28 de pixeli mai jos: sărea sub deget la fiecare atingere,
   tocmai când degetul mai avea una de dat. */
.sheet.pe-loc{animation:none}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
/* Mânerul e mic cât să nu supere, dar zona de prins e mare cât degetul: se
   trage de ea ca să se ducă fișa jos, fără drumul până la butonul de închis.
   touch-action:none, altfel browserul derulează fișa în loc s-o miște. */
/* Zona de prins ține tot capul fișei, nu doar mânerul: pe telefon nimeni nu
   nimerește o dungă de patru pixeli, iar tragerea trebuie să înceapă de unde
   pui degetul. */
/* Mânerul face loc butonului de închis, ca acesta să încapă întreg sub colțul
   rotunjit al fișei. Stătea pe muchie și se tăia de sus. */
/* Capul fișei rămâne lipit sus cât derulezi: butonul de închis pleca odată cu
   el, iar la o masă cu zece invitați se ducea departe, dincolo de marginea de
   sus a ecranului. Acum e mereu la îndemână, oriunde ai ajuns cu derulatul. */
.grabzone{
  position:sticky;top:0;z-index:3;
  padding:14px 0 6px;touch-action:none;cursor:grab;min-height:46px;
  background:var(--ground);
  border-radius:22px 22px 0 0;
}
.inchidex{
  position:absolute;right:14px;top:10px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:21px;line-height:1;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);z-index:2;
}
.inchidex:active{background:var(--line)}
.grabzone:active{cursor:grabbing}
.grab{width:38px;height:4px;border-radius:99px;background:var(--line-strong);margin:2px auto 0}
.sheet.trage{animation:none;transition:none}
.sheet.pleaca{transition:transform .18s ease-in;transform:translateY(100%)}
.sheet .top{padding:16px 20px 20px;text-align:center;touch-action:none}
.sheet .masa{font-family:"Bodoni Moda",Georgia,serif;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.sheet .num{font-family:"Bodoni Moda",Georgia,serif;font-size:104px;line-height:.92;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.sheet .who{font-family:"Bodoni Moda",Georgia,serif;font-size:22px;line-height:1.25;text-wrap:balance}
/* fișele fără număr de masă (invitatul nou, ajutorul, listele): titlul stă
   direct sub eticheta mică, cu puțin loc între ele */
.sheet .who.fara-numar{margin-top:6px}
.sheet .meta{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
/* Ce au scris mirii despre rând, pentru cine îi primește: câți copii
   (scaunul înalt, meniul de copil) și observațiile din șablon („bunica vine
   în scaun cu rotile”). Stă sub nume, înaintea drumului spre masă: omul
   trebuie să știe înainte să pornească. Un cuvânt lung se rupe oriunde, ca
   pe 390 de pixeli să nu împingă fișa în lături. */
.despre{margin:0 20px 12px;padding:10px 14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.despre b{color:var(--gold);font-weight:700}
.despre b + span::before{content:" · ";color:var(--ink-3)}
.hint{margin:0 20px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.5}
.warn{margin:12px 20px 0;padding:10px 14px;background:var(--garnet-soft);border:1px solid var(--garnet);border-radius:10px;font-size:13px;color:var(--garnet);font-weight:600}
.actions{display:flex;gap:10px;padding:16px 20px 4px}
.big{flex:1;padding:16px;border-radius:var(--r);background:var(--ok);color:var(--on-ok);font-size:16px;font-weight:700}
/* După bifă, locul butonului mare îl ia o stare, nu un buton. „Anulează
   sosirea” apărea exact acolo, la aceeași mărime: o atingere dublă dată în
   grabă, pe un telefon care răspunde greu, bifa și apoi anula pe loc.
   Anularea e acum mică, mai jos și la stânga, sub starea pe care o anulează;
   iar o jumătate de secundă după bifă nici nu ascultă (vezi mai jos, la
   atingerile din fișă). La dreapta stătea fix sub „+”, la șapte pixeli: o
   sosire pe bucăți se completează apăsând „+” de câteva ori, iar ultima
   apăsare scotea anularea chiar sub degetul care mai avea una de dat. */
.sosit{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:16px;border-radius:var(--r);font-size:16px;font-weight:700;
  background:var(--ok-soft);border:1.5px solid var(--ok-line);color:var(--ok);
}
/* 14, nu 20: scrisul butonului, nu marginea lui, stă pe linia fișei */
.anuleaza{display:flex;justify-content:flex-start;padding:2px 14px 0}
.anuleaza button{
  min-height:44px;padding:0 6px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;
}
/* Plusul și minusul se folosesc la sosirile pe bucăți — „au venit doi din
   patru” —, iar zona lor de apăsat era de 27 de pixeli într-o cutie de 51:
   butoanele stăteau centrate, cât textul lor. Acum țin toată înălțimea. */
.stepper{display:flex;align-items:stretch;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.stepper button{width:48px;min-height:48px;font-size:22px;font-weight:700;color:var(--gold)}
.stepper span{align-self:center;min-width:52px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}
.sect{padding:22px 20px 0}
.sect h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:700}
.mini{display:grid;gap:2px}
.mini button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-align:left;width:100%}
.mini button:active{background:var(--surface-2)}
.mini .tick{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:12px;color:transparent}
.mini button.on .tick{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.mini button.on span.t{color:var(--ink-2);text-decoration:line-through}
.mini span.t{flex:1;font-size:14px;font-weight:600}
.mini span.p{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.closebtn{display:block;width:calc(100% - 40px);margin:20px auto 0;padding:14px;border-radius:var(--r);background:var(--surface-2);font-weight:700;font-size:15px;color:var(--ink-2)}

/* ---------- situație ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;text-align:center}
.tile b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:26px;font-variant-numeric:tabular-nums}
.tile span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;font-weight:700}
.note{padding:0 18px 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
/* banda „pune pe ecranul principal”: o dată, sub antet, cât să se vadă și
   să se închidă cu o atingere */
.ecran{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:10px 16px 0;padding:10px 14px;border-radius:var(--r);
  background:var(--ok-soft);border:1px solid var(--ok-line);
  font-size:12.5px;line-height:1.5;color:var(--ink)
}
.ecran-butoane{display:flex;gap:8px;margin-left:auto}
.ecran button{
  padding:7px 12px;border-radius:99px;border:1.5px solid var(--ok);
  background:var(--surface);color:var(--ok);font-weight:700;font-size:12.5px
}
.ecran button#ecranAdauga{background:var(--ok);color:var(--on-ok)}
.note b{color:var(--ink)}
.note .tehnic{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
/* Banda „lista nu e de azi” (P8): în antet, sub rândul de stare, cu auriul
   care aici înseamnă „uită-te”, nu „s-a stricat”. */
.altazi{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:9px 12px;
  border-radius:10px;background:var(--surface);border:1px solid var(--gold);border-left-width:4px;
  font-size:13px;font-weight:600;line-height:1.45;color:var(--ink);
}
.altazi span{flex:1 1 200px}
.altazi button{
  margin-left:auto;min-height:40px;padding:6px 14px;border-radius:99px;
  border:1.5px solid var(--gold);background:var(--surface);color:var(--ink);font-weight:700;font-size:12.5px;
}
/* Alegerea listei: câte un buton mare pe listă, cea de pe ecran însemnată. */
.listele{display:grid;gap:8px;padding:0 20px}
.listele button{
  padding:13px 14px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--surface);
  text-align:left;font-weight:700;font-size:15px;
}
.listele button small{display:block;font-weight:600;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.listele button[aria-current="true"]{border-color:var(--ok);background:var(--ok-soft)}
/* Pentru seara asta: contactul localului și butonul de ajutor. Butoanele de
   sunat au măsura degetului mare, ca tot ce se apasă la ușă. */
.seara{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.contact{padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-size:13.5px;line-height:1.5}
.contact h3{margin:0 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.contact .cine{font-size:15.5px;font-weight:700;overflow-wrap:anywhere}
.contact.gol{color:var(--ink-2)}
.suna{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.suna a{
  flex:1 1 130px;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 12px;
  border-radius:12px;border:1.5px solid var(--ok);background:var(--surface);color:var(--ok);
  font-weight:700;font-size:14.5px;text-decoration:none;
}
.suna a.tel{background:var(--ok);color:var(--on-ok)}
.sheet .suna{padding:0 20px;margin-top:14px}
.tool.ajutor{border-color:var(--garnet);color:var(--garnet)}
.tool.ajutor small{color:var(--ink-2)}
.sheet .hint + .suna, .sheet .warn + .suna{margin-top:12px}
.tools{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px}
.tool{padding:14px 16px;border-radius:var(--r);border:1.5px solid var(--line-strong);background:var(--surface);font-weight:700;font-size:14.5px;text-align:left}
.tool small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.blocat{padding:60px 24px;text-align:center}
/* Banda de anulat: stă deasupra barei de jos, cât să apuci s-o vezi și s-o
   atingi, și pleacă singură. O atingere greșită bifează altă familie ca
   sosită, iar până acum reparatul cerea s-o cauți din nou. */
/* Cât e deschisă o fișă, banda așteaptă: nu stă nici sub fișă, nici peste
   ea. Sub fișă (40 față de 60) nu se vedea deloc. Urcată deasupra, în fâșia
   de sus, acoperea tocmai locul unde atingi ca să închizi fișa, iar pe un
   telefon mic și ×-ul ei: atingerea dată ca să treci la următorul invitat
   anula bifa abia dată. Jos, peste fișă, ar fi stat peste „Au sosit” al unei
   fișe scurte și peste lupa planului, aceeași capcană în alt loc.
   Bifa dată din fișă se vede în fișă: starea „✓ A sosit”, cu „Anulează
   sosirea” sub ea. Banda apare când fișa se închide, dacă n-au trecut cele
   șapte secunde; cititorul de ecran o spune de la bifă, și cât stă ascunsă.
   Rangul rămâne peste fișă, ca banda să nu mai ajungă niciodată sub ea. */
.toast{
  position:fixed;left:12px;right:12px;bottom:82px;z-index:70;
  display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 16px;border-radius:var(--r);
  background:var(--ink);color:var(--ground);
  box-shadow:0 10px 30px var(--umbra-adanca);
  font-size:14px;line-height:1.35;
  animation:suie .18s ease-out;
}
@keyframes suie{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
body.cu-fisa .toast{display:none}
/* Banda răsare fix sub degetul care tocmai a bifat, iar pe touch clicul vine cu
   întârziere: ateriza pe „Anulează” și anula bifa pe loc. Omul bifa 1 din 2,
   vedea banda, și rândul rămânea 1 din 2 — bifarea „nu funcționa”.
   O jumătate de secundă în care banda nu primește atingeri rezolvă tot. */
.toast{pointer-events:none}
.toast.viu{pointer-events:auto}
.toast span{flex:1;min-width:0}
.toast button{
  flex:0 0 auto;padding:9px 14px;border-radius:10px;font-weight:700;
  background:var(--ground);color:var(--ink);
}
.blocat img{width:72px;height:72px;border-radius:18px;margin-bottom:22px}
.blocat b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:22px;margin-bottom:10px}
.blocat p{color:var(--ink-2);font-size:14.5px;line-height:1.6;max-width:44ch;margin:0 auto}