/* Layout-ul intreg. Culorile si fonturile vin din theme.css, care se rezolva
   per brand: r_static cauta intai in static/<brand>/, apoi in static/.
   Zero ramificari "daca brandul e X" in cod — o clinica noua e un director nou. */
:root {
  /* Razele vin tot din tema: `--raza` pe cutii, `--raza-mica` pe campuri si
     butoane, `--raza-frunza` pe ce e rotund. Numele vechi ramane, ca `base.css`
     sa nu se rescrie. */
  --radius: var(--raza);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  font: 16px/1.55 var(--font, system-ui, -apple-system, "Segoe UI", sans-serif);
  padding: 24px;
}
.card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: 0 1px 3px rgba(34, 56, 44, .08);
}
.card.wide { max-width: 720px; }
/* Titlurile pe Fraunces, textul pe Karla: asa e in macheta. */
h1 { font-family: var(--font-titlu); font-size: 1.5rem; margin: 0 0 6px;
     font-weight: 600; text-wrap: balance; }
p  { margin: 0 0 16px; color: var(--muted); }
label { display: block; font-size: .875rem; margin: 14px 0 6px; color: var(--fg); }
input {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--raza-mica);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button {
  width: 100%; margin-top: 18px; padding: 12px; font: inherit; font-weight: 600;
  color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: var(--raza-mica); cursor: pointer;
}
button[disabled] { opacity: .55; cursor: default; }
.msg { margin-top: 16px; padding: 11px 13px; border-radius: var(--raza-mica); font-size: .9rem; }
.msg.ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.msg.err  { background: var(--err-bg);  color: var(--err-fg); }
.msg.info { background: var(--info-bg); color: var(--info-fg); }
.hidden { display: none !important; }   /* card #34: `.qbara{display:flex}` beat it */
.brand { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
         color: var(--muted); margin-bottom: 18px; }
/* Fiecare sectiune isi are tonul ei, acelasi ca in cabinet: albastru hartiile,
   verde discutia, galben meniul, prunier analizele, caramiziu chestionarele.
   Dunga e subtire dinadins — spune „aici incepe altceva", nu striga. */
.section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.section[data-ton] { border-top-width: 3px; border-top-color: var(--ton, var(--line)); }
.section[data-ton="leaf"]   { --ton: var(--ton-leaf); }
.section[data-ton="pollen"] { --ton: var(--ton-pollen); }
.section[data-ton="blue"]   { --ton: var(--ton-blue); }
.section[data-ton="plum"]   { --ton: var(--ton-plum); }
.section[data-ton="rose"]   { --ton: var(--ton-rose); }
/* The title in the tone where the tone is readable as text (anca); on
   minunea the tones are for the stripe only and the title stays Deep Green. */
.section[data-ton] > h2 { color: var(--ton-text, var(--ton)); }
.section h2 { font-family: var(--font-titlu); font-size: 1.1rem; margin: 0 0 8px;
              font-weight: 600; }
.empty { color: var(--muted); font-size: .9rem; }
.linkbtn { background: none; color: var(--muted); font-weight: 400;
           text-decoration: underline; width: auto; padding: 0; margin-top: 22px;
           min-height: 44px; display: inline-flex; align-items: center; }
/* Card #108: the person picks their own account when the browser remembers
   several. One full-width row per name, the PIN comes after. */
.alege-cont { display: grid; gap: 10px; margin-top: 14px; }
.alege-cont .cont-ales { margin-top: 0; text-align: left; color: var(--fg);
                         background: var(--surface); border: 1px solid var(--line); }
.alege-cont .cont-ales:hover { border-color: var(--accent); }

textarea {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--raza-mica);
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Firul: cine a vorbit se vede inainte de ce a spus. Semnul e din machete —
   cerc cu un colt ascutit, ca o frunza — si poarta poza farmacistului daca exista
   una, altfel initialele lui. Replica pacientului sta pe albastru moale, a
   cabinetului pe verde: doua voci, doua culori, mereu aceleasi. */
.msgline { display: grid; grid-template-columns: 30px 1fr; gap: 3px 10px;
           padding: 10px 0; border-bottom: 0; }
.msgline:last-child { border-bottom: 0; }
.msgline .semn { grid-row: span 2; width: 30px; height: 30px;
                 display: inline-flex; align-items: center; justify-content: center;
                 border-radius: var(--raza-frunza); overflow: hidden;
                 font-family: var(--font-titlu); font-weight: 700; font-size: .78rem;
                 background: var(--leaf-soft); border: 2px solid var(--leaf);
                 color: var(--fir); }
.msgline .semn[data-ton="blue"] { background: var(--blue-soft);
                                  border-color: var(--blue); }
.msgline .semn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msgline .cap { align-self: center; }
.msgline .spus { white-space: pre-wrap; padding: 9px 12px;
                 border-radius: var(--raza-mica); }
.msgline.eu .spus { background: var(--blue-soft); }
.msgline.cabinet .spus { background: var(--leaf-soft); font-style: italic; }
/* Ultima replica, scoasa putin in fata: aia cauta omul cand deschide pagina. */
.msgline.ultimul .spus { box-shadow: 0 0 0 1px var(--line); }
.msgline div { white-space: pre-wrap; }

/* Analizele. Butonul de adaugare e un <label> peste un input ascuns: inputul de
   fisier nu se poate stiliza consistent intre browsere, dar labelul da. */
.filebtn {
  display: inline-block; margin-top: 14px; padding: 10px 16px;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--accent); background: none;
  border: 1px solid var(--accent); border-radius: var(--raza-mica);
}
/* The drop zone around the button (card #38). On a touch screen there is
   nothing to drag, so only the button shows, without the frame. */
.trage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 14px; padding: 14px 16px;
  border: 2px dashed var(--line); border-radius: var(--raza);
  transition: background .12s, border-color .12s;
}
.trage .filebtn { margin-top: 0; }
.trage-text { color: var(--muted); font-size: .92rem; }
.trage.peste { border-color: var(--accent); background: var(--blue-soft); }
@media (pointer: coarse) {
  .trage { border: 0; padding: 0; }
  .trage-text { display: none; }
}
.filerow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.filerow:last-child { border-bottom: 0; }
.filerow .fmeta { flex: 1; min-width: 0; font-size: .92rem; }
.filerow .fmeta a { color: var(--fg); }
/* Numele fisierului poate fi lung si nu trebuie sa impinga butonul afara. */
.filerow .fmeta > a, .filerow .fmeta > b {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.filerow .linkbtn { margin-top: 0; flex: 0 0 auto; font-size: .85rem; padding: 0 6px; }
.filerow.up .fmeta > b { color: var(--muted); }
.bar { height: 4px; margin-top: 7px; border-radius: 2px; background: var(--line); }
.bar i { display: block; height: 100%; width: 0; border-radius: 2px;
         background: var(--accent); transition: width .15s linear; }
/* Notele portalului: un rand mic, sters, fara semn si fara caseta. */
.msgline.sys { display: block; padding: 3px 0 3px 10px; margin: 3px 0;
               border-left: 2px solid var(--line); border-bottom: 0; }

/* Meniul alimentar. Continutul vine in campuri — ora, titlu, text — deci pagina
   il aseaza intr-o structura pe care o stie ea. Textul mesei intra prin escapare,
   apoi numai formatul mic al editorului (card #50, `.txt-om` mai jos). */
.meniu-cap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meniu-cap .ver { font-size: .85rem; color: var(--muted); }
.meniu-zi { margin-top: 16px; }
.meniu-zi h3 { font-size: .8rem; font-weight: 600; margin: 0 0 4px;
               text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.masa { display: grid; grid-template-columns: 54px 1fr; gap: 12px;
        padding: 8px 0; border-top: 1px solid var(--line); }
.masa .ora { font-variant-numeric: tabular-nums; color: var(--accent); font-size: .9rem; }
.masa b { display: block; font-size: .93rem; }
.masa .txt { color: var(--muted); font-size: .92rem; margin-top: 2px; white-space: pre-wrap; }
.meniu-obs { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
             font-size: .92rem; white-space: pre-wrap; }
.meniu-obs b { display: block; font-size: .8rem; font-weight: 600; color: var(--muted);
               text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
/* Un meniu expirat nu dispare si nu se ascunde: pacientul mananca dupa el. Se
   spune ca a expirat, si atat. */
.meniu-expirat { margin: 10px 0 0; }
.meniu-veche { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.meniu-veche > .meniu-cap .ver { color: var(--muted); }
.pdfbtn { display: inline-block; margin-top: 16px; padding: 9px 15px;
          font-size: .9rem; font-weight: 600; cursor: pointer; width: auto;
          color: var(--accent); background: none;
          border: 1px solid var(--accent); border-radius: var(--raza-mica); }
.pdfbtn.slab { color: var(--muted); border-color: var(--line); font-weight: 400; }
.actiuni-rand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                margin-top: 16px; }
.actiuni-rand .pdfbtn { margin-top: 0; }
.printcap { display: none; }

/* Tiparirea se face in browserul pacientului: butonul cheama print(), iar
   regulile de mai jos lasa pe hartie doar meniul. Nu se genereaza niciun PDF pe
   server — ar fi o cale noua prin care textul unui document medical iese din
   volumul criptat, prin fisiere temporare si cache de fonturi. */
@media print {
  @page { margin: 16mm; }
  body { display: block; padding: 0; background: #fff; color: #000; }
  .card, .card.wide { max-width: none; border: 0; box-shadow: none; padding: 0;
                      background: #fff; }
  /* Butonul „Salvati ca PDF" pune `doar-asta` pe sectiunea lui, si atunci se
     tipareste doar ea. Fara el — cineva care apasa Ctrl+P — se tipareste toata
     pagina, mai putin `.noprint`. Prima varianta ascundea tot ce nu era
     `doar-asta`, deci un Ctrl+P direct scotea o foaie alba. */
  main:has(.doar-asta) > *:not(.doar-asta) { display: none !important; }
  #meniusec { border-top: 0; margin: 0; padding: 0; }
  .noprint { display: none !important; }
  .printcap { display: block; margin-bottom: 14px; }
  .printcap h2 { font-size: 1.1rem; margin: 0 0 2px; }
  .printcap p { margin: 0; font-size: .85rem; color: #444; }
  /* O zi nu se rupe peste doua pagini: jumatate de zi pe o foaie e jumatate de
     meniu pe frigider. */
  .meniu-zi, .masa, .meniu-obs { break-inside: avoid; page-break-inside: avoid; }
  .masa .ora, .meniu-obs b, .meniu-zi h3 { color: #000; }
  .masa .txt { color: #222; }
}

/* Chestionarele date de farmacist. Textul intrebarilor si al optiunilor vine din
   definitia importata si intra in pagina tot prin escapare, ca la meniu: nimic
   din ce scrie in baza nu devine structura de pagina. */
.qrow { display: flex; align-items: center; gap: 10px;
        padding: 9px 0; border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: 0; }
.qrow .qmeta { flex: 1; min-width: 0; font-size: .92rem; }
.qrow .qmeta .empty { display: block; font-size: .85rem; margin-top: 2px; }
.qrow .qbtn { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 14px;
              font-size: .88rem; min-height: 44px; }
.qrow .linkbtn { margin-top: 0; flex: 0 0 auto; font-size: .85rem; }
.qsect { margin-top: 20px; }
.qsect h3 { font-size: .8rem; font-weight: 600; margin: 0 0 4px;
            text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qgrup { font-size: .85rem; color: var(--muted); margin: 14px 0 2px; }
.qitem { padding: 12px 0; border-top: 1px solid var(--line); }
.qitem > p { margin: 0 0 8px; font-size: .95rem; }
.qitem .qhelp { font-size: .87rem; color: var(--muted); margin: -4px 0 8px; }
/* Optiunea intreaga e tinta de atins cu degetul, nu doar bulina. Card #45:
   carduri ca pe chestionarele de pe minuneanaturii.ro — bulina desenata,
   fundal moale la alegere si bifa din colt, care se scrie ca din pix. Inputul
   ramane in pagina (tastatura, cititorul de ecran), doar nu se mai vede. */
.qopt { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
        padding: 12px 14px; background: var(--surface); border: 2px solid var(--line);
        border-radius: var(--raza-mica); font-size: .95rem; line-height: 1.4; cursor: pointer;
        color: var(--fg); transition: border-color .12s, background .12s; }
.qopt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.qopt:hover { border-color: var(--accent); }
.qopt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.qopt:has(input:disabled) { cursor: default; }
.qopt.ales { border-color: var(--accent);
             background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.qbula { flex: 0 0 auto; position: relative; width: 20px; height: 20px; border-radius: 50%;
         border: 2px solid var(--line); background: var(--surface); transition: border-color .12s; }
.qopt input[type=checkbox] ~ .qbula { border-radius: 5px; }
.qopt.ales .qbula { border-color: var(--accent); }
.qopt.ales .qbula::after { content: ""; position: absolute; inset: 3px; border-radius: 50%;
                           background: var(--accent); }
.qopt.ales input[type=checkbox] ~ .qbula::after { border-radius: 2px; }
.qopt-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qopt-d { display: block; font-size: .85rem; color: var(--muted); margin-top: 2px; }
.qbifa { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px;
         border-radius: 50%; background: var(--accent); color: var(--on-accent);
         display: none; align-items: center; justify-content: center;
         box-shadow: 0 2px 8px color-mix(in srgb, var(--fg) 25%, transparent); }
.qbifa svg { width: 15px; height: 15px; display: block; overflow: visible; }
.qbifa path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Doar in pasi: in formularul trimis, zeci de bife ar fi zgomot. */
.qpasi .qopt.ales .qbifa { display: flex; animation: qpop .22s cubic-bezier(.34, 1.56, .64, 1); }
.qpasi .qopt.ales .qbifa path { animation: qscrie .45s .15s cubic-bezier(.5, 0, .35, 1) forwards; }
@keyframes qpop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes qscrie { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* Bifa trebuie sa apara si fara miscare: fara asta ar ramane nedesenata. */
  .qpasi .qopt.ales .qbifa path { stroke-dashoffset: 0; }
}
.qform .qcap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qform .qcap .empty { font-size: .85rem; }
.qstare { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.qfix { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qfix button { width: auto; margin-top: 16px; }
.qfix .linkbtn { margin-top: 16px; }
/* Tipurile chestionarului de inceput (schema 2). Scala 0–10 sta pe un singur
   rand si pe telefon: la 375 px „10" trecea singur pe randul doi (card #34),
   iar o scala rupta nu se mai citeste ca scala. */
.qscala { display: flex; gap: 3px; }
.qnota { flex: 1 1 0; min-width: 0; text-align: center; padding: 11px 0; cursor: pointer;
         border: 1px solid var(--line); border-radius: var(--raza-mica); font-size: .9rem; }
.qnota input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qnota.ales { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.qscalaet { display: flex; justify-content: space-between; gap: 10px;
            font-size: .8rem; color: var(--muted); margin-top: 4px; }
.qcamprand { margin: 0 0 10px; }
.qeticheta { font-size: .87rem; margin: 0 0 4px; }
.qnr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.qnr input { max-width: 9em; }
.qrand { padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line);
         border-radius: var(--raza-mica); }
.qrand .linkbtn, .qadauga { margin-top: 0; }
/* Card #61: a ticked area (Q8) opens its own fields right under the tick, the
   direction as small chips on one or two rows; and the box „Altul" opens
   (Q4) sits under the options of its question. */
.qsubrand { margin: -2px 0 12px 16px; padding: 4px 0 2px 14px; border-left: 2px solid var(--accent); }
.qsubrand .qopt { display: inline-flex; margin: 0 6px 6px 0; padding: 8px 12px; }
.qsubrand .qopt-t { flex: 0 1 auto; }
.qinauntru { margin-top: 4px; }
.qitem.qlipsa, .qitem.qgresit { border-left: 3px solid var(--de-facut); padding-left: 10px; }
.qlipsa-et { display: none; }
.qitem.qlipsa .qlipsa-et { display: inline-block; margin: 0 0 8px; padding: 2px 8px;
                           font-size: .8rem; font-weight: 700; border-radius: 4px;
                           background: var(--err-bg); color: var(--err-fg); }
.qform .msg.err.sus { margin: 12px 0 0; }
.qitem.qde > p:first-child { font-weight: 600; }
.qalerta { margin-top: 8px; }
.qbara { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Card #74: the steps a day as a slider (1.000 to 20.000), the value large
   above it, a button on each side for one step at a time, „Nu știu" under it.
   Big enough for a thumb: the track is a 44 px target. Before a choice the
   value says „Alege" and the knob is faded. */
.qglisor { padding: 4px 0 0; }
.qglisor-val { display: flex; align-items: baseline; justify-content: center; gap: 8px;
               min-height: 2.6rem; }
.qglisor-val b { font-size: 2rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
                 color: var(--accent); font-variant-numeric: tabular-nums; }
.qglisor.gol .qglisor-val b { color: var(--muted); font-weight: 600; font-size: 1.3rem; }
.qglisor-rand { display: flex; align-items: center; gap: 10px; }
.qglisor-in { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent);
              cursor: pointer; background: none; border: 0; padding: 0; }
.qglisor.gol .qglisor-in { opacity: .45; }
.qglisor-pas { flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0;
               border-radius: 50%; font-size: 1.4rem; line-height: 1; font-weight: 700;
               color: var(--accent); background: var(--surface); border: 1.5px solid var(--line); }
.qglisor-pas:disabled { opacity: .4; }
.qglisor-capete { display: flex; justify-content: space-between; margin: 0 54px 10px;
                  font-size: .8rem; color: var(--muted); }
.qglisor .qglisor-afara { display: inline-flex; margin: 0; }
.qpasi .qglisor-val b { color: var(--nou-brand-tare); }
.qpasi .qglisor.gol .qglisor-val b { color: var(--nou-gri); }
.qpasi .qglisor-in { accent-color: var(--nou-brand); }
.qpasi .qglisor-pas { color: var(--nou-brand-tare); background: var(--nou-card);
                      border-color: var(--nou-linie); }
.qpasi .qglisor-capete { color: var(--nou-gri); }

/* Card #74: correcting a submitted answer. The button under the title shows a
   „Schimbă" by every question; the open one is framed, with its own save. */
.qcor-bara { margin: 12px 0 0; }
.qcor-bara .qbtn { width: auto; margin: 0; padding: 8px 14px; min-height: 44px; font-size: .9rem; }
.qcor-bara .empty { margin: 8px 0 0; font-size: .87rem; }
.qitem { position: relative; }
.qcorbtn { float: right; margin: 0 0 6px 10px; min-height: 36px; font-size: .87rem; }
.qitem.qcorect { margin: 8px -10px; padding: 12px 10px; border: 2px solid var(--accent);
                 border-radius: var(--raza-mica);
                 background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.qitem.qcorect + .qitem { border-top: 0; }
.qcorectat { margin: 6px 0 0 !important; font-size: .82rem !important; color: var(--muted);
             font-style: italic; }
.qcor-salv { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.qcor-salv .msg { flex: 1 0 100%; margin: 0; }
.qcor-salv .qbtn { width: auto; margin: 0; min-height: 44px; padding: 8px 16px; }
.qcor-salv .linkbtn { margin: 0; }

/* ------------------------------------------- chestionarul pe pasi (#45) */
/* O intrebare pe ecran. Toate raman in pagina (salvarea si conditiile le
   vad); `.qacum` e singura afisata. `.hidden` ramane ce era: ascunsa de
   conditii, nu de pas.

   Aspectul vine din directia de grafica din 05.10.2026 (exemplul lui
   Adrian): fond menta, carduri albe cu colturi mari si umbre fine, Inter,
   verdele de brand, pasteluri pe placute. Culorile sunt variabilele `--nou-*`
   din tema-sanatate.css; aici nu se scrie nicio culoare. */
.qpasi .qitem:not(.qacum), .qpasi .qsect:not(.qacum), .qpasi .qsect > h3, .qpasi .qgrup,
.qpasi.qpe-final .qitem, .qpasi .qfinal { display: none; }
.qform.qpasi { font-family: var(--nou-font); color: var(--nou-cerneala);
               background: var(--nou-fond); border-radius: var(--nou-raza);
               padding: 22px 20px 18px; margin-top: 4px; }
.qpasi p { color: inherit; }
/* Card #46: the way out, small, in the form's top right corner. The title
   keeps clear of it. */
.qform { position: relative; }
.qform .qcap { padding-right: 48px; }
.qiesi { position: absolute; top: 0; right: 0; width: 40px; height: 40px; margin: 0; padding: 0;
         display: flex; align-items: center; justify-content: center;
         color: var(--muted); background: var(--surface);
         border: 1px solid var(--line); border-radius: 50%; }
.qiesi svg { width: 16px; height: 16px; }
.qpasi .qiesi { top: 14px; right: 14px; color: var(--nou-gri); background: var(--nou-card);
                border-color: var(--nou-linie); }
/* Titlul mare si cald, subtitlul gri, mult loc alb. */
.qpasi .qcap { display: block; }
.qpasi .qcap b { display: block; font-size: 1.55rem; line-height: 1.2; font-weight: 800;
                 letter-spacing: -.03em; color: var(--nou-cerneala); text-wrap: balance; }
.qpasi .qcap .empty { display: block; margin-top: 4px; font-size: .9rem; color: var(--nou-gri); }
.qpasi .qdescr { margin: 8px 0 0; font-size: .95rem; line-height: 1.5; color: var(--nou-gri); }
.qpasi .qsect { margin: 0; }

/* Alegerea scurt/complet a jurnalului: doar la inceput. */
.qpasi .qvariante { display: none; }
.qpasi.qla-inceput .qvariante { display: flex; margin: 16px 0 0; }
.qpasi .qvar { background: var(--nou-card); border: 1.5px solid var(--nou-linie);
               border-radius: var(--nou-raza-mica); box-shadow: var(--nou-umbra-mica); }
.qpasi .qvar.ales { border-color: var(--nou-brand); box-shadow: inset 0 0 0 1px var(--nou-brand);
                    background: var(--nou-brand-moale); }

/* Cardul alb de progres (exemplul lui Adrian), fara texte (card #49): sus
   „Intrebarea N din M" si X-ul; dedesubt cercurile sectiunilor (sau bara
   groasa) si procentul mare, pe acelasi rand, ca sa nu impinga intrebarea.
   Lipit sus cand intrebarea e lunga (card #47), pe o fasie cu fondul opac al
   formularului, intinsa pana la marginile lui: textul de dedesubt nu se vede
   nici prin card, nici pe langa colturile lui rotunjite. */
.qprogres { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
            margin: 12px -20px 0; padding: 6px 20px; background: var(--nou-fond); }
.qprogres-card { padding: 12px 16px 14px; background: var(--nou-card);
                 border: 1px solid var(--nou-linie); border-radius: var(--nou-raza);
                 box-shadow: var(--nou-umbra); }
.qprogres-sus { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qpasi .qprogres .qiesi { position: static; flex: 0 0 auto; width: 34px; height: 34px; }
.qpasi .qcap { padding-right: 0; }
#qpasnr { min-width: 0; font-size: .9rem; font-weight: 600; color: var(--nou-gri); }
.qprogres-linie { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
#qprocent { flex: 0 0 auto; margin-left: auto; font-size: 2.1rem; line-height: 1; font-weight: 800;
            letter-spacing: -.04em; color: var(--nou-brand); font-variant-numeric: tabular-nums; }
/* Pasii sectiunilor, cu bife: cercul si linia spre urmatorul. Fara nume. */
.qpasii { flex: 1 1 auto; min-width: 0; list-style: none; display: flex; margin: 0; padding: 0; }
.qpasii li { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.qpasii li:last-child { flex: 0 0 auto; }
.qpasii li:not(:last-child)::before { content: ""; position: absolute; top: 50%; left: 32px;
             right: 4px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--nou-pista); }
.qpasii li.gata:not(:last-child)::before { background: var(--nou-brand); }
.qcerc { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
         display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
         font-size: .8rem; font-weight: 700; color: var(--nou-gri);
         background: var(--nou-card); border: 1.5px solid var(--nou-linie); }
.qcerc svg { width: 15px; height: 15px; }
.qpasii li.gata .qcerc { background: var(--nou-brand); border-color: var(--nou-brand); color: var(--nou-card); }
.qpasii li.acum .qcerc { background: var(--nou-brand); border-color: var(--nou-brand); color: var(--nou-card);
                         box-shadow: 0 0 0 4px var(--nou-brand-moale); }
/* Bara groasa, cand sectiunile nu fac pasi (sub 2 sau peste 8). */
.qbara-subtire { flex: 1 1 auto; height: 12px; border-radius: var(--raza-pila); overflow: hidden;
                 background: var(--nou-pista); }
.qbara-subtire i { display: block; height: 100%; border-radius: inherit; background: var(--nou-bara);
                   transition: width .35s ease; }

/* Cardul intrebarii. */
.qpasi .qitem.qacum { margin-top: 14px; padding: 22px 20px 20px; border: 1px solid var(--nou-linie);
                      background: var(--nou-card); border-radius: var(--nou-raza);
                      box-shadow: var(--nou-umbra); outline: none; }
.qcateg { display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
          font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
          color: var(--nou-gri); }
.qplaca { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 1rem; font-weight: 800; letter-spacing: 0; color: var(--nou-brand-tare); }
.qplaca.p1 { background: var(--nou-menta); }
.qplaca.p2 { background: var(--nou-albastru); }
.qplaca.p3 { background: var(--nou-piersica); }
.qplaca.p4 { background: var(--nou-mov); }
.qplaca.p5 { background: var(--nou-galben); }
.qpasi .qitem.qacum > .qtext { font-size: 1.4rem; line-height: 1.3; font-weight: 700;
                               letter-spacing: -.02em; color: var(--nou-cerneala);
                               margin: 0 0 18px; text-wrap: pretty; }
.qpasi .qitem.qacum > .qtext .empty { font-size: .9rem; font-weight: 500; letter-spacing: 0;
                                      color: var(--nou-gri); }
/* The template drops the space before „(opțional)" / „(dacă știi)". */
.qitem > .qtext .empty, .qeticheta .empty { margin-left: .3em; }
.qpasi .qitem.qacum .qhelp { margin: -10px 0 16px; font-size: .9rem; color: var(--nou-gri); }
.qpasi .qitem.qlipsa, .qpasi .qitem.qgresit { border-left: 1px solid var(--nou-linie); padding-left: 20px; }
.qintra { animation: qintra .28s ease-out; }
@keyframes qintra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Optiunile, in stilul nou. */
.qpasi .qopt { border: 1.5px solid var(--nou-linie); border-radius: var(--nou-raza-mica);
               padding: 14px 16px; margin: 0 0 10px; font-size: 1rem; background: var(--nou-card);
               color: var(--nou-cerneala); }
.qpasi .qopt:hover { border-color: var(--nou-brand); }
.qpasi .qopt:has(input:focus-visible) { outline-color: var(--nou-brand); }
.qpasi .qopt.ales { border-color: var(--nou-brand); background: var(--nou-brand-moale); }
.qpasi .qopt-d { color: var(--nou-gri); }
.qpasi .qbula { border-color: var(--nou-linie); }
.qpasi .qopt.ales .qbula { border-color: var(--nou-brand); }
.qpasi .qopt.ales .qbula::after { background: var(--nou-brand); }
.qpasi .qbifa { background: var(--nou-brand); color: var(--nou-card); box-shadow: var(--nou-umbra-mica); }
.qpasi .qscala { gap: 6px; }
.qpasi .qnota { padding: 13px 0; border: 1.5px solid var(--nou-linie); border-radius: 12px;
                font-weight: 700; background: var(--nou-card); color: var(--nou-cerneala); }
.qpasi .qnota.ales { background: var(--nou-brand); border-color: var(--nou-brand); color: var(--nou-card); }
.qpasi .qscalaet { color: var(--nou-gri); }
.qpasi .qcamp, .qpasi .qdata select { font-family: inherit; font-size: 1rem; color: var(--nou-cerneala);
                                      background: var(--nou-fond); border: 1.5px solid var(--nou-linie);
                                      border-radius: 12px; }
.qpasi .qeticheta { font-weight: 600; color: var(--nou-cerneala); }
.qpasi .qrand { border-color: var(--nou-linie); border-radius: var(--nou-raza-mica); }
.qpasi .qsubrand { border-left-color: var(--nou-brand); }

/* Butoanele de sub intrebare. */
.qnavig { display: flex; justify-content: space-between; align-items: center; gap: 10px;
          margin-top: 16px; min-height: 48px; }
.qnavig button { width: auto; margin: 0; min-height: 48px; padding: 11px 20px;
                 border-radius: var(--nou-raza-mica); font-family: inherit; font-weight: 700; }
.qinapoi-pas { background: var(--nou-card); color: var(--nou-gri); border: 1.5px solid var(--nou-linie); }
.qmaideparte { margin-left: auto !important; background: var(--nou-brand); color: var(--nou-card); }
.qmaideparte:hover { background: var(--nou-brand-tare); }
/* „Sari peste" nu e pasul asteptat: cu contur, nu plin. */
.qmaideparte.sari { background: var(--nou-card); color: var(--nou-brand-tare);
                    border: 1.5px solid var(--nou-brand); }
.qpasi .qstare { color: var(--nou-gri); }

/* Finalul: cercul care se umple pana la cat s-a raspuns. Nu se numara si nu
   se pastreaza nimic; e doar desenat. `--p` e inregistrat, ca sa se poata
   anima (fara @property ar sari direct la capat). */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.qpasi.qpe-final .qfinal { display: block; margin-top: 14px; padding: 26px 20px 20px; text-align: center;
                           background: var(--nou-card); border: 1px solid var(--nou-linie);
                           border-radius: var(--nou-raza); box-shadow: var(--nou-umbra); }
.qinel { --p: 0; width: 112px; height: 112px; margin: 0 auto; border-radius: 50%;
         display: grid; place-items: center;
         background: conic-gradient(var(--nou-bara) calc(var(--p) * 1%), var(--nou-pista) 0);
         transition: --p 1.1s cubic-bezier(.3, .7, .3, 1); }
.qinel span { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
              background: var(--nou-card); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em;
              color: var(--nou-brand); }
.qinel.plin { box-shadow: 0 0 0 8px var(--nou-brand-moale); animation: qsarbatoare .6s 1s both; }
@keyframes qsarbatoare { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.qfinal h3 { margin: 16px 0 6px; font-family: var(--nou-font); font-size: 1.45rem; font-weight: 800;
             letter-spacing: -.03em; color: var(--nou-cerneala); }
.qfinal p { margin: 0 0 12px; color: var(--nou-gri); }
.qfinal .qstiute { margin: 14px 0 0; font-size: .9rem; }
.qfinal .qstiute .linkbtn { min-height: 0; padding: 0; margin: 0; }
.qfinallipsa { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; }
.qfinallipsa .linkbtn { display: block; width: 100%; margin: 0; padding: 12px 14px; min-height: 0;
                        text-align: left; color: var(--nou-cerneala); text-decoration: none;
                        background: var(--nou-fond); border: 1px solid var(--nou-linie);
                        border-radius: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Butonul de trimitere sta numai pe ecranul de final, mare si plin. */
.qpasi:not(.qpe-final) #qtrimite { display: none; }
.qpasi.qpe-final .qfix { flex-direction: column; align-items: stretch; }
.qpasi.qpe-final #qtrimite { width: 100%; min-height: 54px; font-family: inherit; font-size: 1.05rem;
                             font-weight: 700; border-radius: var(--nou-raza-mica);
                             background: var(--nou-brand); color: var(--nou-card); }
.qpasi .qfix .linkbtn { align-self: center; }

/* Data pe trei liste: zi, luna (cu nume), an. */
.qdata { display: flex; flex-wrap: wrap; gap: 8px; }
.qdata select { flex: 1 1 0; min-width: 0; padding: 12px 8px; font: inherit; color: var(--fg);
                background: var(--bg); border: 1px solid var(--line);
                border-radius: var(--raza-mica); }
.qdata select[data-p="l"] { flex-grow: 1.7; }
.qdata-err { flex-basis: 100%; font-size: .85rem; color: var(--err-fg); }
.qdata-err:empty { display: none; }

/* Pe telefon: cardurile ies pana aproape de margine. */
@media (max-width: 520px) {
  .qform.qpasi { margin: 4px -10px 0; padding: 18px 12px 14px; }
  .qprogres { margin: 8px -12px 0; padding: 6px 12px; }
  .qprogres-card { padding: 10px 14px 12px; }
  .qprogres-linie { gap: 10px; }
  #qprocent { font-size: 1.9rem; }
  /* Peste cinci pasi, cercurile se micsoreaza, ca sa ramana pe un rand. */
  .qpasii.multe .qcerc { width: 22px; height: 22px; font-size: .7rem; }
  .qpasii.multe .qcerc svg { width: 12px; height: 12px; }
  .qpasii.multe li:not(:last-child)::before { left: 25px; right: 3px; }
  .qpasii.multe li.acum .qcerc { box-shadow: 0 0 0 3px var(--nou-brand-moale); }
  .qpasi .qitem.qacum, .qpasi.qpe-final .qfinal { padding: 18px 14px 16px; }
  .qpasi .qitem.qacum > .qtext { font-size: 1.25rem; }
  .qpasi .qcap b { font-size: 1.35rem; }
}
.qbara .linkbtn { margin: 0; color: inherit; text-decoration: underline; }

/* Analizele recomandate. Ca la meniu, continutul vine in campuri — nume, detaliu,
   laborator — si intra in pagina prin escapare; explicatia si nota, cu formatul
   mic al editorului (card #50). */
.an-nota { font-size: .92rem; white-space: pre-wrap; margin: 0 0 14px;
           padding: 11px 13px; border-radius: var(--raza-mica);
           background: var(--info-bg); color: var(--info-fg); }
.an-rand { display: grid; grid-template-columns: 22px 1fr; gap: 10px;
           padding: 9px 0; border-top: 1px solid var(--line); }
.an-rand:first-of-type { border-top: 0; }
.an-rand .bulina { width: 13px; height: 13px; margin-top: 5px; border-radius: 50%;
                   border: 2px solid var(--line); }
.an-rand.urgent .bulina { border-color: var(--err-fg); background: var(--err-bg); }
.an-rand.veche .bulina { border-color: var(--err-fg); }
.an-rand b { display: block; font-size: .95rem; }
.an-rand .det { color: var(--muted); font-size: .9rem; margin-top: 2px; white-space: pre-wrap; }
.an-rand .unde { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.an-rand .cat { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.an-rand.veche .cat { color: var(--err-fg); font-weight: 600; }
.an-rand .eticheta { display: inline-block; white-space: nowrap; font-size: .72rem; font-weight: 700;
                     letter-spacing: .04em; text-transform: uppercase;
                     color: var(--err-fg); background: var(--err-bg);
                     border-radius: 4px; padding: 1px 6px; margin-left: 6px;
                     vertical-align: 1px; }
.an-gata { font-size: .9rem; color: var(--muted); margin-top: 12px; }
/* Farmacistul recomanda; nu trimite si nu prescrie. Randul asta e fix sub lista
   si nu e o precautie pusa de forma — e diferenta dintre ce face aplicatia si ce
   ar parea ca face. */
.an-disclaimer { font-size: .85rem; color: var(--muted); margin-top: 14px;
                 padding-top: 12px; border-top: 1px solid var(--line); }
/* Bifele care apar dupa o incarcare reusita: pentru ce analize e documentul. */
.an-leg { margin-top: 12px; padding: 12px 13px; border-radius: var(--raza-mica);
          background: var(--info-bg); color: var(--info-fg); }
.an-leg b { display: block; font-size: .92rem; margin-bottom: 8px; }
.an-leg label { display: flex; gap: 10px; align-items: center; margin: 0;
                min-height: 44px; font-size: .92rem; color: var(--fg); cursor: pointer; }
.an-leg input { width: 20px; height: 20px; margin: 0; flex: none;
                accent-color: var(--accent); }
.an-leg .actiuni { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.an-leg button { width: auto; margin: 0; padding: 7px 14px; font-size: .88rem;
                 min-height: 44px; }
.an-leg .linkbtn { padding: 0 6px; }
/* 21: after linking, the box says what it was linked to before it goes. */
.an-legat { margin-top: 12px; padding: 12px 13px; border-radius: var(--raza-mica);
            background: var(--ok-bg); color: var(--ok-fg); font-size: .92rem; }
.an-legat.eroare { background: var(--err-bg); color: var(--err-fg); }
/* 19: what has a result, by name, under the open list. */
.an-facute { margin-top: 6px; }
.an-fac { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 6px 0;
          font-size: .92rem; }
.an-fac .bulina { width: 13px; height: 13px; margin-top: 5px; border-radius: 50%;
                  border: 2px solid var(--leaf); background: var(--leaf); }
.an-fac b { font-weight: 600; }
.an-facute .fis { color: var(--muted); font-size: .85rem; margin-top: 2px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media print {
  /* Lista de analize se ia la laborator, deci se tipareste la fel ca meniul:
     din browser, cu o foaie de stil. Serverul nu genereaza niciun PDF. */
  #ansec { border-top: 0; margin: 0; padding: 0; }
  .an-rand, .an-nota { break-inside: avoid; page-break-inside: avoid; }
  .an-rand .bulina { border-color: #000; }
  .an-rand .det, .an-rand .unde, .an-rand .cat, .an-disclaimer { color: #222; }
  .an-nota { background: none; color: #000; padding: 0 0 8px; }
}

/* ------------------------------------------------------------- abonament */
/* Cota de interactiuni, deasupra casetei de scris. Nu e o eroare cat timp mai
   are intrebari, deci nu imprumuta culoarea de eroare decat cand s-au terminat. */
.cota { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--raza-mica);
        font-size: .88rem; color: var(--muted); background: var(--bg);
        border: 1px solid var(--line); }
.cota.gol { color: var(--err-fg); background: var(--err-bg); border-color: transparent; }
/* Catalogul de chestionare pe care pacientul si le porneste singur. */
.qcat { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.qcat h3 { font-size: .8rem; font-weight: 600; margin: 0 0 4px;
           text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qbtn.alt { color: var(--accent); background: none; border: 1px solid var(--accent); }
/* Jurnalul cu doua variante (03.10.2026): in lista, doua butoane care se rup
   sub titlu pe telefon; in formular, alegerea zilei, ca doua carduri. */
.qrow.qzi { flex-wrap: wrap; }
.qrow .qdoua { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; }
.qvariante { display: flex; gap: 8px; margin: 12px 0 4px; }
.qvar { flex: 1 1 0; width: auto; margin: 0; padding: 10px 12px; text-align: left;
        background: none; color: inherit; border: 1px solid var(--line);
        border-radius: var(--raza-mica); font-size: .9rem; cursor: pointer; }
.qvar b { display: block; }
.qvar span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px;
             font-weight: normal; }
.qvar.ales { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Inscrierea. Bifele de acord sunt randuri intregi, apasabile pe text, nu
   casute mici: pe telefon degetul nimereste textul, nu patratelul. `input`
   de mai sus le-ar intinde pe toata latimea, deci se strang inapoi aici. */
.acord { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0;
         font-size: .9rem; line-height: 1.45; cursor: pointer; }
.acord input { width: auto; flex: none; margin: 3px 0 0; padding: 0;
               accent-color: var(--accent); }
.promisiune { background: var(--leaf-soft); color: var(--fg); padding: 11px 13px;
              border-radius: var(--raza-mica); font-size: .92rem; }
/* Campul-capcana: in afara ecranului, nu `display:none` — unii boti sar peste
   campurile ascunse cu stil, dar nu si peste cele mutate. */
.capcana { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px;
           overflow: hidden; }
.rand2 { display: grid; grid-template-columns: 1fr 88px; gap: 0 12px; align-items: end; }

/* Busola (card #24): the two sections of a proposal — free through the family
   doctor first, paid after — and the short plan. */
.an-sectiune { font-size: 1rem; margin: 18px 0 4px; }
.an-sectiune:first-of-type { margin-top: 4px; }
.an-sub { font-size: .88rem; color: var(--muted); margin: 0 0 10px; }
.plan-text { white-space: pre-wrap; font-size: .97rem; line-height: 1.55; }
/* 25: who sent it stands apart from the text, not as grey small print glued to it. */
.plan-semn { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
             font-size: .92rem; color: var(--fg); }
.plan-semn b { font-weight: 600; }
.plan-semn span { display: block; color: var(--muted); font-size: .88rem; margin-top: 2px; }

/* Card #25: deleting one's own account. The link sits next to the exit, in
   the footer (card #34: one row, not two lines under every tab; on a phone
   the longer #35 labels wrap to a second row); the
   confirming button is the only brick-coloured one in the portal. */
.cont .subsol { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: center;
                margin-top: 28px; padding-top: 6px; border-top: 1px solid var(--line); }
.cont .subsol .linkbtn { margin: 0; font-size: .9rem; }
button.pericol { background: var(--rose-soft); color: var(--fir);
                 border: 2px solid var(--rose); }
ul.lista { margin: 0 0 8px; padding-left: 20px; color: var(--muted); }
ul.lista li { margin-bottom: 6px; }

/* ------------------------------------------------- card #21: taburi */
/* „E mult prea mult scroll" (Gabriel, 03.10.2026): measured 11 phone screens
   for a full account. Now: what is waiting today on top, then the sections
   as tabs, one on screen at a time. Nothing here decides what a section does;
   it only decides which one shows. */
.card.wide.cont { max-width: 820px; min-width: 0; }
/* Card #34: at 375 px the box was 590 px tall and pushed the tabs off the
   first screen. Now one line per thing to do, the button on the same line, and
   what is merely new (a reply, a menu) in one row of small buttons. */
.azi { margin: 16px 0 0; padding: 10px 14px 4px; border-radius: var(--radius);
       background: var(--leaf-soft); }
.azi h2 { font-family: var(--font-titlu); font-size: 1rem; margin: 0;
          font-weight: 600; }
.azi-rand { display: flex; align-items: center; gap: 4px 10px;
            padding: 6px 0; border-top: 1px solid var(--line); }
.azi h2 + div > .azi-rand:first-child { border-top: 0; }
.azi-rand > div:first-child { flex: 1 1 auto; min-width: 0; font-size: .92rem;
                              line-height: 1.3; }
.azi-rand > div:first-child b { display: block; overflow: hidden;
                                text-overflow: ellipsis; white-space: nowrap; }
.azi-rand .empty { display: block; font-size: .8rem; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.azi .qbtn { width: auto; margin: 0; padding: 6px 12px; font-size: .86rem;
             min-height: 40px; flex: 0 0 auto; }
.azi .qbtn.alt { background: var(--card); }
.azi .qdoua { display: flex; gap: 6px; flex: 0 0 auto; }
.azi-noi { display: flex; flex-wrap: wrap; gap: 6px; }
.azi-noi .qbtn { padding: 6px 10px; }

/* The bar sticks to the top of the screen while the section scrolls under it,
   and on a phone it slides sideways instead of wrapping. Card #34: a shadow at
   the edge says there are more tabs that way (the scrolling-shadow technique:
   the plain layers scroll with the content and cover the shadows once the
   end is reached), and the page scrolls the chosen tab into view. */
.taburi { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
          position: sticky; top: 0; z-index: 5;
          margin: 18px -28px 0; padding: 8px 28px;
          border-bottom: 1px solid var(--line);
          --umbra: color-mix(in srgb, var(--fir) 22%, transparent);
          background:
            linear-gradient(to right, var(--surface) 40%, transparent) left / 34px 100% no-repeat local,
            linear-gradient(to left, var(--surface) 40%, transparent) right / 34px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, var(--umbra), transparent) left / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, var(--umbra), transparent) right / 14px 100% no-repeat scroll,
            var(--surface); }
.taburi::-webkit-scrollbar { display: none; }
.taburi .tab { flex: 0 0 auto; width: auto; margin: 0; padding: 7px 13px; min-height: 44px;
               position: relative; font-size: .9rem; font-weight: 600;
               color: var(--muted); background: none;
               border: 1px solid var(--line); border-radius: var(--raza-pila); }
.taburi .tab.activ { color: var(--on-accent); background: var(--accent);
                     border-color: var(--accent); }
/* Something new behind a tab: a dot, in the theme's yellow („atenție").
   Questionnaires carry a number instead (card #34): it counts what is still
   to do, which is not the same as „new", so it should not look the same. */
.taburi .tab[data-nr]::after { content: attr(data-nr); position: absolute; top: -3px;
                               right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
                               border-radius: 9px; font-size: .7rem; line-height: 18px;
                               text-align: center; background: var(--pollen); color: var(--fir);
                               border: 0; }
.taburi .tab.nou::after { content: ""; position: absolute; top: 2px; right: 2px;
                          width: 9px; height: 9px; border-radius: 50%;
                          background: var(--pollen); border: 2px solid var(--surface); }
main [data-panou].inactiv { display: none; }
/* The tab already says where you are: the panel loses its top rule. */
.cont .section[data-panou] { border-top: 0; margin-top: 0; padding-top: 20px; }
/* Card #34: what is scrolled to sits under the sticky bar, not behind it.
   The bar's height is measured by the page (`--taburi-h`). */
main [data-panou], #chest, .qitem, #expeditie section, .exp-magazin .cereri, .exp-magazin .cereri li, .exp-harta { scroll-margin-top: calc(var(--taburi-h, 62px) + 8px); }
/* 19.10.2026: the card a mail points to, lit up for a moment on arrival. */
.exp-focus { outline: 3px solid var(--leaf); outline-offset: 4px; border-radius: 12px;
  animation: expfocus 1.2s ease-in-out 2; }
@keyframes expfocus { 50% { outline-color: color-mix(in srgb, var(--leaf) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .exp-focus { animation: none; } }

/* Card #60: Analize and Documente on one page. The page gets its own title;
   the documents keep their section, set off from the tests by the coloured
   rule every section had before the tabs. */
.pagina-cap { font-family: var(--font-titlu); font-size: 1.3rem; margin: 22px 0 0; }
.cont #docsec { border-top: 3px solid var(--ton); margin-top: 24px; }
#docsec #files { margin-top: 8px; }

/* Card #46: a questionnaire open = only the questionnaire. The page puts
   `qsingur` on <body> while the form is mounted; brand, greeting, the bar of
   skipped answers, „De făcut azi", tabs, the section title and the footer go,
   so the question is on the first screen. Tied to the questionnaires tab: if
   the form stays mounted under another tab (Back to #meniu), that tab shows
   normally. */
body.qsingur { place-items: start center; }
body.qsingur main[data-tab="chest"] > :not([data-panou="chest"]),
body.qsingur main[data-tab="chest"] > [data-panou="chest"] > h2 { display: none; }
body.qsingur main[data-tab="chest"] > [data-panou="chest"] { padding-top: 0; }
body.qsingur main[data-tab="chest"] .qform { margin-top: 0; }
body.qsingur main[data-tab="chest"] :is(#chest, .qitem) { scroll-margin-top: 8px; }

/* The menu, one day on screen; the buttons choose which. */
/* Card #34: wrapped, not scrolled — „Ziua 7" was cut on desktop, „Ziua 3" on
   a phone, with nothing saying there was more. */
.zile-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.zibtn { flex: 0 0 auto; width: auto; margin: 0; padding: 6px 12px; min-height: 40px;
         font-size: .85rem; font-weight: 600; color: var(--fg); background: none;
         border: 1px solid var(--line); border-radius: var(--raza-pila); }
.zibtn.ales { background: var(--ton-pollen-moale); border-color: var(--ton-pollen); }
.pe-zile .meniu-zi:not(.aleasa) { display: none; }
/* On screen the button already names the day; on paper the heading returns. */
.pe-zile .meniu-zi > h3 { display: none; }
.pe-zile .meniu-zi .masa:first-of-type { border-top: 0; }

/* The catalogue of self-started questionnaires, folded. */
details.qcat > summary { cursor: pointer; padding: 4px 0; }
details.qcat > summary h3 { display: inline; margin: 0 6px 0 0; }
details.qcat > summary .empty { font-size: .85rem; }
.qcat .qmeta .empty { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
                      -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 520px) {
  body { padding: 10px 8px; }
  .card { padding: 22px 16px; }
  .taburi { margin: 16px -16px 0; padding: 8px 16px; }
  .taburi .tab { padding: 7px 11px; font-size: .88rem; }
}
@media print {
  /* On paper everything, as before the tabs: Ctrl+P prints the whole account,
     the PDF buttons print their own section, and a menu has all its days. */
  main [data-panou].inactiv { display: block; }
  main:has(.doar-asta) > *:not(.doar-asta) { display: none !important; }
  .pe-zile .meniu-zi, .pe-zile .meniu-zi > h3 { display: block !important; }
  .azi, .taburi { display: none !important; }
  /* Card #100: on screen one part of the plan at a time; on paper all. */
  #plansec .plan-parte, #plansec .plan-corp { display: block !important; }
  .plan-cap::after { display: none !important; }
}

/* Card #41: the sections of the dossier the pharmacist approved, in „Planul
   meu", each under its title. Card #100: one at a time, so no rule above. */
.plan-sectiune { margin-top: 6px; }
.plan-parte:not(.deschisa) { display: none; }
.plan-parte h3 { margin: 0 0 8px; font-size: 1.05rem; }
/* The title is a button, so a phone can open and close the part (below); on
   a wide screen it looks and behaves as the plain title. */
.plan-cap { all: unset; font: inherit; color: inherit; }
.plan-cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-parte .nou { font-size: .72rem; font-weight: 700; padding: 2px 8px; margin-left: 6px;
  border-radius: 20px; background: var(--leaf-soft); color: var(--fir); vertical-align: middle; }
/* For screen readers only: in the page's outline, not on the screen. */
.doar-cititor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Card #100: the parts of the plan, as a smaller copy of the tab bar — not
   sticky, sliding sideways on a phone, a dot on what was not read yet. */
.sub-taburi { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
              margin: 4px 0 18px; padding: 2px 0 4px; }
.sub-taburi::-webkit-scrollbar { display: none; }
.sub-taburi .sub-tab { flex: 0 0 auto; width: auto; margin: 0; padding: 6px 12px;
  min-height: 40px; position: relative; font-size: .86rem; font-weight: 600;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raza-pila); }
.sub-taburi .sub-tab.activ { color: var(--fir); background: var(--leaf-soft);
  border-color: var(--accent); }
.sub-taburi .sub-tab.nou::after { content: ""; position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--pollen);
  border: 2px solid var(--surface); }
/* On a phone (Adrian, 13.10.2026): no row of buttons. The parts stand one
   under another, each a box whose title opens and closes it. */
@media (max-width: 520px) {
  #plansub { display: none; }
  .plan-parte, .plan-parte:not(.deschisa) { display: block; margin: 0 0 10px;
    border: 1px solid var(--line); border-radius: var(--raza-mica); background: var(--surface); }
  .plan-parte h3 { margin: 0; }
  .plan-cap { display: flex; align-items: center; gap: 8px; box-sizing: border-box;
    width: 100%; min-height: 48px; padding: 12px 14px; cursor: pointer; }
  .plan-cap-text { flex: 1; }
  .plan-cap::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); margin: -4px 4px 0; transition: transform .15s; }
  .plan-parte.deschisa .plan-cap::after { transform: rotate(-135deg); margin-top: 4px; }
  .plan-parte:not(.deschisa) .plan-corp { display: none; }
  .plan-corp { padding: 0 14px 12px; }
}


/* Card #50: a text from the cabinet's editor — paragraphs, bullets, bold,
   italic, underline. The boxes above say `pre-wrap` for the plain texts of
   before; here the line breaks are <br> and <p>, so it is normal again. */
.txt-om, .msgline .txt-om, .masa .txt-om, .an-rand .txt-om { white-space: normal; }
.txt-om p { margin: 0 0 .55em; }
.txt-om ul, .txt-om ol { margin: 0 0 .55em; padding-left: 1.3em; }
.txt-om li { margin: .15em 0; }
.txt-om > :last-child { margin-bottom: 0; }
/* Headings in a text from the cabinet (card #53): `#` h2, `##` h3, `###` h4. */
.txt-om :is(h2, h3, h4) { margin: .9em 0 .35em; line-height: 1.3; }
.txt-om > :is(h2, h3, h4):first-child { margin-top: 0; }
.txt-om h2 { font-size: 1.2rem; }
.txt-om h3 { font-size: 1.06rem; }
.txt-om h4 { font-size: .97rem; }
/* Tables in a text from the cabinet (card #65). A wide one scrolls sideways
   inside its box; the page itself never gets wider (390 px). The box is a
   block with `max-width: 100%`, and `min-width: 0` lets a flex or grid
   parent shrink it instead of growing around the table. */
.txt-om .tabel-md { max-width: 100%; min-width: 0; overflow-x: auto; margin: 0 0 .7em;
  -webkit-overflow-scrolling: touch; }
.txt-om table { border-collapse: collapse; font-size: .92rem; line-height: 1.35; }
.txt-om :is(th, td) { border: 1px solid var(--line); padding: 6px 9px; text-align: left;
  vertical-align: top; min-width: 4.5em; }
.txt-om th { font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
@media print { .txt-om .tabel-md { overflow: visible; } }
/* The cabinet's reply is in italics already: what it stresses stands upright. */
.msgline.cabinet .spus em { font-style: normal; }

/* Card #62 (Adrian, 07.10.2026). After the starting questionnaire: done, and
   the lab results are next. */
.qgata-analize { margin: 0 0 16px; padding: 16px 18px; border-radius: var(--raza);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.qgata-analize b { display: block; font-size: 1.02rem; color: var(--fg); }
.qgata-analize p { margin: 4px 0 12px; color: var(--fg); }
.qgata-analize .qbtn { width: auto; margin: 0; padding: 10px 18px; }
/* „Documentele mele": the words above the box, and the button under it. */
.docs-indemn { margin: 0 0 4px; color: var(--fg); font-size: .95rem; }
.fara-analize { margin-top: 12px; }
/* Card #66 (Adrian, 08.10.2026): a real button, like „Adaugă un document”.
   On a phone the long text wraps inside it, left-aligned. Once pressed it
   goes muted, with the answer under it. */
.fara-analize .pdfbtn { margin-top: 0; padding: 10px 16px; line-height: 1.4;
  text-align: left; white-space: normal; text-wrap: pretty; }
.filebtn:hover, .fara-analize .pdfbtn:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fara-analize .pdfbtn.apasat { opacity: 1; color: var(--muted);
  border-color: var(--line); font-weight: 400; }
.fara-analize .msg { margin-top: 8px; }
/* „Am terminat de încărcat", under the list: the end of the uploads. */
.inc-gata { margin-top: 16px; }
.inc-gata .msg { margin-top: 0; }
/* The menu preferences (point 11): choices as small pills, then the texts. */
.mpref { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.mpref h3 { margin: 0 0 6px; font-size: 1.05rem; }
.mpref-camp { margin-top: 14px; }
.mpref-et { display: block; font-size: .875rem; margin: 0 0 6px; color: var(--fg); }
.mpref-opt { display: flex; flex-wrap: wrap; gap: 6px; }
.mpbtn { flex: 0 0 auto; width: auto; margin: 0; padding: 6px 12px; min-height: 40px;
         font-size: .85rem; font-weight: 600; color: var(--fg); background: none;
         border: 1px solid var(--line); border-radius: var(--raza-pila); }
.mpbtn.ales { background: var(--ton-pollen-moale); border-color: var(--ton-pollen); }
.mpref input { margin-top: 0; }
.mpref .actiuni-rand { margin-top: 14px; }

/* The legal pages (16.10.2026): public at /legal/<pagina> and the same text
   in „Contul tău" → „Legal și confidențialitate". Plain reading text. */
body.legal-corp { place-items: start center; gap: 18px; }
.legal-pagina .brand a { color: inherit; text-decoration: none; }
.legal-text { color: var(--fg); line-height: 1.6; }
.legal-text h1 { margin-bottom: 4px; }
.legal-text h2 { font-family: var(--font-titlu); font-size: 1.1rem; font-weight: 600;
                 margin: 26px 0 8px; }
.legal-text p, .legal-text li { color: var(--fg); }
.legal-text ul { margin: 0 0 16px; padding-left: 22px; }
.legal-text li { margin: 0 0 6px; }
.legal-versiune { font-size: .85rem; color: var(--muted) !important; }
.legal-pe-scurt { background: var(--leaf-soft); padding: 12px 14px;
                  border-radius: var(--raza-mica); }
.legal-acord, .legal-formular { margin: 0 0 16px; padding: 12px 16px;
  border-left: 3px solid var(--line); background: var(--bg); border-radius: var(--raza-mica); }
.legal-acord p:last-child, .legal-formular p:last-child { margin-bottom: 0; }
.legal-tabel { overflow-x: auto; margin: 0 0 16px; }
.legal-tabel table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.legal-tabel th, .legal-tabel td { text-align: left; vertical-align: top;
  padding: 8px 10px; border-bottom: 1px solid var(--line); }
.legal-tabel code { font-size: .85rem; word-break: break-all; }
.legal-cuprins { list-style: none; padding: 0 !important; margin: 18px 0 !important; }
.legal-cuprins li { margin: 0; border-top: 1px solid var(--line); }
.legal-cuprins li:last-child { border-bottom: 1px solid var(--line); }
.legal-cuprins a { display: block; padding: 12px 4px; color: var(--fg); text-decoration: none; }
.legal-cuprins a:hover b { text-decoration: underline; }
.legal-cuprins span { display: block; color: var(--muted); font-size: .9rem; }
.legal-firma p { font-size: .9rem; color: var(--muted) !important; margin-bottom: 6px; }
.legal-inapoi { margin: 0 0 12px; font-size: .9rem; }
.legal-accept { margin: 14px 0 0; font-size: .85rem; }
/* The foot of the page: the company, the legal pages, ANPC's SAL pictogram. */
.legal-subsol { width: 100%; max-width: 720px; margin: 8px auto 0; text-align: center;
                font-size: .8rem; color: var(--muted); }
.legal-subsol p { margin: 6px 0; font-size: .8rem; }
.legal-subsol a { color: var(--muted); }
.legal-anpc img { display: inline-block; max-width: 100%; height: auto; }
.p26 .legal-subsol { max-width: none; margin-top: 32px; padding-top: 16px;
                     border-top: 1px solid var(--line); }

/* The disclaimers (Adrian's „Disclaimer.docx", 16.10.2026): small print, so
   they are there without standing out. The ones under the recommended tests
   and the menu go to paper with them; none shows under an empty list. */
.disclaimer { margin: 18px 0 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.disclaimer p { margin: 0 0 4px; font-size: inherit; line-height: inherit; color: inherit; }
/* Only the empty sentence in the list (and the hidden „Restrânge" button the
   long cards get): nothing to put small print under. */
#analize:not(:has(> :not(.empty, .extinde))) ~ .disclaimer,
#meniu:not(:has(> :not(.empty, .extinde))) ~ .disclaimer { display: none; }
.legal-subsol .disclaimer-scurt { font-size: .72rem; }
.legal-general { margin: 14px 0 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.legal-general p { margin: 0 0 4px; font-size: inherit; color: inherit; }
@media print { .disclaimer { color: #444; font-size: 7.5pt; } }

/* The paid package's page (card #110). */
.plata-ce { margin: 14px 0 0; padding-left: 20px; line-height: 1.5; }
.plata-pret { margin: 16px 0 0; font-size: 1.05rem; }
.plata-pret strong { font-size: 1.4rem; color: var(--accent); }
/* The year offered after the first month (20.10.2026). */
.plata-an-calcul { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--leaf-soft); line-height: 1.6; }
.plata-an-calcul s { color: var(--muted); }
.plata-an-sari { margin-top: 18px; text-align: center; }
/* Card #120: the marks EuPlătesc asks for, under the payment form. */
.plata-sigle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 14px; color: var(--muted); font-size: .85rem; }
.plata-sigle img { max-width: 100%; height: auto; }
.plata-sigle a { color: inherit; }