/**
 * app.css — componentele aplicației Vocal Lab (profudecanto.ro)
 *
 * REGULA: nicio culoare, umbră, rază, spațiere sau familie de font scrisă
 * direct. Totul prin var(--app-*) din app-tokens.css. Verificabil cu o căutare
 * de coduri hex — dacă întoarce ceva în fișierul ăsta, e o greșeală.
 *
 * MOBIL ÎNTÂI, la propriu: regulile de bază sunt cele de telefon, desktopul
 * vine în media query. Publicul intră din TikTok, în picioare, cu o mână pe
 * telefon. Lecția deja plătită pe proiectul ăsta: clape de 15px pe 375px erau
 * inutilizabile.
 *
 * Formatul vine din machetele livrate de utilizator (sidebar, card de profil,
 * bandă de statistici, inel de progres, carduri de listă, setări rapide).
 * Paleta NU vine de acolo — violetul și gradientele rămân afară.
 */

*, *::before, *::after { box-sizing: border-box; }

.app-corp {
  margin: 0;
  background: var(--app-fundal);
  color: var(--app-text);
  font-family: var(--app-sans);
  font-size: var(--app-tf-baza);
  line-height: var(--app-ir-baza);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: calc(var(--app-bara-jos) + var(--app-sp-5));
}

/* ═══════════ TIPOGRAFIE ═══════════
   Ce e MĂSURAT se scrie mono. Ce e VORBIT, sans. Ce e NUME DE LUCRU, serif. */

.app-titlu {
  font-family: var(--app-serif);
  font-weight: 400;
  font-size: var(--app-tf-titlu);
  line-height: var(--app-ir-strans);
  letter-spacing: var(--app-ls-titlu);
  margin: 0 0 var(--app-sp-2);
}
.app-titlu em { font-style: italic; }

.app-titlu-mic {
  font-family: var(--app-serif);
  font-weight: 400;
  font-size: var(--app-tf-mare);
  line-height: var(--app-ir-strans);
  margin: 0 0 var(--app-sp-3);
}

/* Eticheta mono: mereu versale, spațiate, grafit. */
.app-eticheta {
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic);
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  color: var(--app-text-2);
  margin: 0;
}

.app-cifra {
  font-family: var(--app-mono);
  font-size: var(--app-tf-cifra);
  font-weight: 500;
  line-height: 1.1;
  color: var(--app-text);
  display: block;
}

.app-mono { font-family: var(--app-mono); }

.app-sub { color: var(--app-text-2); margin: 0 0 var(--app-sp-4); }
/* 🔴 Masurat in browser (21.08): --app-text-3 pe --app-suprafata da 3,93:1, sub
   pragul de 4,5:1 pe care si-l impune proiectul. Clasa asta poarta text explicativ
   — nota de sub o cifra, starea unui jurnal, rezumatul unui grafic — adica
   informatie, nu decor. Trecuta pe --app-text-2. Cifra nu se deduce din cod:
   se calculeaza pe culorile pe care le vede browserul, cu fondul mostenit real. */
.app-fin { color: var(--app-text-2); font-size: var(--app-tf-mic-2); }

.app-corp a { color: var(--app-accent); text-underline-offset: 2px; }
.app-corp a:hover { color: var(--app-accent-tare); }

/* ═══════════ ARANJARE ═══════════ */

.app-cadru { display: block; }

.app-continut {
  max-width: var(--app-lat-continut);
  margin: 0 auto;
  padding: var(--app-sp-5) var(--app-sp-4) var(--app-sp-6);
}

.app-ingust { max-width: var(--app-lat-ingust); margin: 0 auto; }

/* ── Bara de sus, pe telefon ── */
.app-bara-sus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-sp-3);
  padding: var(--app-sp-3) var(--app-sp-4);
  border-bottom: 1px solid var(--app-linie);
  background: var(--app-fundal);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--app-atingere);
  font-family: var(--app-serif);
  font-size: var(--app-tf-mediu);
  color: var(--app-text);
  text-decoration: none;
  line-height: 1.1;
}
.app-marca em { font-style: italic; }
.app-marca small {
  display: block;
  font-family: var(--app-mono);
  font-size: 0.625rem;
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  color: var(--app-text-3);
  margin-top: 2px;
}

/* ── Navigația laterală. Pe telefon devine bară de jos. ── */
.app-lateral { display: none; }

.app-bara-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  background: var(--app-suprafata);
  border-top: 1px solid var(--app-linie);
}
.app-bara-nav a {
  flex: 1;
  min-height: var(--app-bara-jos);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--app-sp-1);
  color: var(--app-text-2);
  text-decoration: none;
  font-family: var(--app-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.app-bara-nav a[aria-current="page"] {
  color: var(--app-accent);
  box-shadow: inset 0 2px 0 0 var(--app-accent);
}
.app-bara-nav .app-pastila { position: static; margin: 0; }

/* ═══════════ CARDURI ═══════════ */

.app-card {
  background: var(--app-suprafata);
  border-radius: var(--app-raza);
  padding: var(--app-sp-4);
  margin-bottom: var(--app-sp-4);
}
.app-card-2 { background: var(--app-suprafata-2); }

.app-card-antet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--app-sp-3);
  margin-bottom: var(--app-sp-3);
}

/* Card de profil: fotografie, nume, rol, câteva date, două butoane. */
.app-profil {
  display: flex;
  flex-direction: column;
  gap: var(--app-sp-4);
}
.app-profil-sus { display: flex; align-items: center; gap: var(--app-sp-4); }

.app-avatar {
  width: 56px; height: 56px;
  flex: 0 0 56px;
  border-radius: var(--app-raza-rot);
  background: var(--app-ridicat);
  color: var(--app-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--app-serif);
  font-size: var(--app-tf-mare);
}

.app-profil-nume { font-size: var(--app-tf-mediu); font-weight: 600; margin: 0; }
.app-profil-rol { margin: 2px 0 0; }

.app-profil-date { display: grid; gap: var(--app-sp-3); }
.app-profil-date > div { min-width: 0; }
.app-profil-date dt { margin: 0 0 2px; }
.app-profil-date dd { margin: 0; font-family: var(--app-mono); font-size: var(--app-tf-mic-2); word-break: break-word; }

.app-profil-butoane { display: flex; flex-wrap: wrap; gap: var(--app-sp-2); }

/* ═══════════ BANDA DE STATISTICI ═══════════
   Patru-cinci coloane pe desktop; pe telefon două, ca cifrele să rămână mari. */

.app-statistici {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--app-sp-3);
  margin-bottom: var(--app-sp-4);
}
.app-stat {
  background: var(--app-suprafata);
  border-radius: var(--app-raza);
  padding: var(--app-sp-4);
}
.app-stat .app-cifra { margin-bottom: var(--app-sp-1); }

/* ═══════════ INEL DE PROGRES ═══════════
   SVG inline, fără bibliotecă. Valoarea din mijloc se scrie „NN/100", nu
   „NN%": e o măsurătoare a unei probe, nu un procent din cine ar trebui să fii. */

.app-inel { display: block; width: 128px; height: 128px; margin: 0 auto; }
.app-inel-fundal { fill: none; stroke: var(--app-ridicat); }
.app-inel-arc {
  fill: none;
  stroke: var(--app-accent);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--app-tranzitie);
}
.app-inel-text {
  fill: var(--app-text);
  font-family: var(--app-mono);
  font-size: 15px;
  text-anchor: middle;
}
.app-inel-text-mic { fill: var(--app-text-3); font-size: 7px; letter-spacing: var(--app-ls-mono); }

.app-inel-mic { width: 48px; height: 48px; flex: 0 0 48px; margin: 0; }
.app-inel-mic .app-inel-text { font-size: 20px; }

/* ═══════════ BARE DE ABILITĂȚI ═══════════ */

.app-abilitati { display: grid; gap: var(--app-sp-3); margin: 0; padding: 0; list-style: none; }
.app-abilitate-sus {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--app-sp-3);
  margin-bottom: var(--app-sp-1);
}
.app-abilitate-val { font-family: var(--app-mono); font-size: var(--app-tf-mic-2); color: var(--app-text); }
.app-bara {
  height: 6px;
  background: var(--app-ridicat);
  border-radius: var(--app-raza-rot);
  overflow: hidden;
}
.app-bara-umplere {
  height: 100%;
  background: var(--app-accent);
  border-radius: var(--app-raza-rot);
  transition: width var(--app-tranzitie);
}
.app-bara-umplere.este-gol { background: var(--app-linie-tare); }

/* ═══════════ CARDURI DE LISTĂ ═══════════
   Miniatură, titlu, subtitlu, stare, inel mic în dreapta. */

.app-lista { display: grid; gap: var(--app-sp-3); margin: 0; padding: 0; list-style: none; }

.app-rand {
  display: flex;
  align-items: center;
  gap: var(--app-sp-4);
  background: var(--app-suprafata);
  border-radius: var(--app-raza);
  padding: var(--app-sp-4);
  color: var(--app-text);
  text-decoration: none;
  min-height: var(--app-atingere);
  transition: background var(--app-tranzitie);
}
a.app-rand:hover { background: var(--app-suprafata-2); color: var(--app-text); }

.app-rand-mij { flex: 1 1 auto; min-width: 0; }
.app-rand-titlu { font-weight: 600; margin: 0 0 2px; }
.app-rand-sub { color: var(--app-text-2); font-size: var(--app-tf-mic-2); margin: 0; }

.app-miniatura {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--app-raza-mic);
  background: var(--app-ridicat);
  display: flex; align-items: center; justify-content: center;
  color: var(--app-accent);
}

/* ═══════════ PASTILE ȘI STĂRI ═══════════
   Fiecare stare are și text, nu doar culoare: pentru daltonism și pentru
   tipărire alb-negru. */

.app-pastila {
  display: inline-flex;
  align-items: center;
  gap: var(--app-sp-1);
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--app-sp-2);
  border-radius: var(--app-raza-mic);
  background: var(--app-ridicat);
  color: var(--app-text-2);
  white-space: nowrap;
}
.app-pastila-accent { background: var(--app-accent-slab); color: var(--app-accent); }
.app-pastila-acum   { background: var(--app-acum-slab);   color: var(--app-acum); }
.app-pastila-tinta  { background: var(--app-tinta-slab);  color: var(--app-tinta); }

/* ═══════════ BUTOANE ═══════════ */

.app-buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-sp-2);
  min-height: var(--app-atingere);
  padding: var(--app-sp-3) var(--app-sp-5);
  border: 1px solid transparent;
  border-radius: var(--app-raza);
  /* Butonul principal poartă gradientul de brand — e singurul loc din
     aplicație unde apare umplut. La hover nu se schimbă culoarea (un
     gradient nu are „o culoare mai închisă"), ci luminozitatea. */
  background: var(--app-grad);
  color: var(--app-grad-contra);
  font-family: var(--app-sans);
  font-size: var(--app-tf-baza);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--app-glow);
  transition: filter var(--app-tranzitie), transform var(--app-tranzitie);
}
.app-buton:hover { filter: brightness(1.08); transform: translateY(-1px); }
.app-buton:disabled { opacity: 0.5; cursor: default; box-shadow: none;
                      filter: none; transform: none; }
.app-buton-lat { width: 100%; }

.app-buton-2 {
  background: transparent;
  color: var(--app-text);
  border-color: var(--app-linie-tare);
}
.app-buton-2:hover { background: var(--app-ridicat); color: var(--app-text); }

.app-buton-text {
  background: none; border: none; padding: var(--app-sp-2) 0;
  color: var(--app-text-2); text-decoration: underline; cursor: pointer;
  min-height: var(--app-atingere);
  font-family: var(--app-sans); font-size: var(--app-tf-mic-2);
}

/* ═══════════ FORMULARE ═══════════ */

.app-camp { margin-bottom: var(--app-sp-4); }
.app-camp > label {
  display: block;
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic);
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  color: var(--app-text-2);
  margin-bottom: var(--app-sp-2);
}

.app-input {
  display: block;
  width: 100%;
  min-height: var(--app-atingere);
  padding: var(--app-sp-3);
  background: var(--app-suprafata-2);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza);
  color: var(--app-text);
  font-family: var(--app-sans);
  font-size: var(--app-tf-baza);   /* 16px: sub atât, iOS mărește pagina la focus */
}
.app-input:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }
.app-input::placeholder { color: var(--app-text-3); }

.app-ajutor { color: var(--app-text-3); font-size: var(--app-tf-mic-2); margin: var(--app-sp-2) 0 0; }
/* 18.09: rândul cu paginile legale, scris de canto_app_subsol() pe orice ecran de
   aplicație. Stă sub grilă, centrat; țintele de 44px vin din .app-ajutor a. */
.app-legal { text-align: center; padding: var(--app-sp-4) var(--app-sp-4) var(--app-sp-5);
             color: var(--app-text-2); }   /* text-3 dădea 4,49:1 pe fundalul paginii (axe, 24.09) */

/* Legăturile de navigare de sine stătătoare („Am uitat parola", „Nu am cont")
   trebuie să respecte ținta de atingere, ca orice buton: pe telefon sunt
   folosite exact la fel. Măsurate la 17px înainte de regula asta.
   Legăturile din interiorul unei fraze (ex. „termenii") rămân inline —
   acolo o înălțime de 44px ar rupe rândul, iar ținta e cuvântul, nu un control. */
.app-ajutor a {
  display: inline-flex;
  align-items: center;
  min-height: var(--app-atingere);
  padding: 0 var(--app-sp-1);
}

.app-bifa {
  display: flex;
  align-items: flex-start;
  gap: var(--app-sp-3);
  margin-bottom: var(--app-sp-4);
  cursor: pointer;
  line-height: var(--app-ir-baza);
}
.app-bifa input {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  accent-color: var(--app-accent);
}
.app-bifa span { font-size: var(--app-tf-mic-2); color: var(--app-text-2); }
.app-bifa.este-blocat { opacity: 0.55; cursor: not-allowed; }

.app-capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══════════ MESAJE ═══════════ */

.app-mesaj {
  border-radius: var(--app-raza);
  padding: var(--app-sp-3) var(--app-sp-4);
  margin-bottom: var(--app-sp-4);
  font-size: var(--app-tf-mic-2);
  border-left: 3px solid var(--app-linie-tare);
  background: var(--app-suprafata-2);
}
.app-mesaj-ok  { border-left-color: var(--app-tinta); }
.app-mesaj-rau { border-left-color: var(--app-acum); }

/* ═══════════ STĂRI GOALE ═══════════
   „Nu ai făcut încă niciun exercițiu" scris ca text util, nu ca gol.
   Un ecran gol care nu spune ce urmează e un ecran care pierde omul. */

.app-gol {
  text-align: center;
  padding: var(--app-sp-6) var(--app-sp-4);
  color: var(--app-text-2);
}
.app-gol .app-titlu-mic { color: var(--app-text); }
.app-gol p { max-width: 34em; margin-left: auto; margin-right: auto; }

/* ═══════════ BANDA DE SETĂRI RAPIDE ═══════════ */

.app-rapide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--app-sp-3);
}
.app-rapid {
  background: var(--app-suprafata);
  border-radius: var(--app-raza);
  padding: var(--app-sp-4);
  color: var(--app-text);
  text-decoration: none;
  min-height: var(--app-atingere);
  display: block;
}
a.app-rapid:hover { background: var(--app-suprafata-2); color: var(--app-text); }
.app-rapid strong { display: block; margin-bottom: var(--app-sp-1); }

/* ═══════════ PAȘI NUMEROTAȚI ═══════════ */

.app-pasi { list-style: none; margin: 0; padding: 0; counter-reset: pas; }
.app-pas {
  counter-increment: pas;
  display: flex;
  gap: var(--app-sp-4);
  padding: var(--app-sp-4) 0;
  border-bottom: 1px solid var(--app-linie);
}
.app-pas::before {
  content: counter(pas) ".";
  font-family: var(--app-mono);
  color: var(--app-accent);
  flex: 0 0 auto;
}

/* ═══════════ ACCESIBILITATE ═══════════ */

.app-sari {
  position: absolute; left: -9999px;
  background: var(--app-accent); color: var(--app-accent-contra);
  padding: var(--app-sp-3) var(--app-sp-4); border-radius: var(--app-raza);
}
.app-sari:focus { left: var(--app-sp-4); top: var(--app-sp-4); z-index: 100; }

:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

.doar-cititor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════ DESKTOP ═══════════
   Aici apare sidebarul din machete. Pe telefon nu există: e bara de jos. */

@media (min-width: 900px) {
  .app-corp { padding-bottom: 0; }

  .app-cadru {
    display: grid;
    grid-template-columns: var(--app-lat-sidebar) minmax(0, 1fr);
    /* Antetul stă deasupra grilei, deci grila nu mai are voie să ceară toată
       înălțimea ferestrei: ar face fiecare ecran cu 62px mai înalt decât
       fereastra și ar scoate o bară de derulare pe pagini care încap. */
    min-height: calc(100vh - var(--app-antet));
  }

  .app-bara-nav { display: none; }

  .app-lateral {
    display: block;
    background: var(--app-suprafata);
    border-right: 1px solid var(--app-linie);
    padding: var(--app-sp-5) var(--app-sp-4);
  }
  /* Bara isi poarta singura derularea cand trece de inaltimea ecranului.
     Din 14.08 are trei grupuri, nu doua — cele noua instrumente au intrat si ele
     aici — deci 25 de intrari, adica ~1300px pe un ecran de 720. Fara regula
     asta, „sticky" nu se mai lipeste de nimic: bara e mai inalta decat fereastra,
     curge cu pagina, iar intrarile de cont ajung sub pliu pe orice ecran de
     laptop. Derularea proprie tine grupurile la locul lor si le lasa accesibile. */
  /* Din 15.08 deasupra grilei stă bara de sus a site-ului, lipită și ea. Deci
     „sus" pentru bara laterală nu mai e sus în fereastră: fără scăderea asta,
     primul grup ar sta permanent sub antet, iar ultimul rând ar cădea sub
     marginea de jos exact cu înălțimea antetului. */
  .app-lateral-fix {
    position: sticky;
    top: calc(var(--app-antet) + var(--app-sp-5));
    max-height: calc(100vh - var(--app-antet) - var(--app-sp-5) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Bara de derulare implicită a Windows-ului e albă-deschisă, lată și cu
       săgeți la capete: pe fundalul aproape negru al aplicației e lucrul cel
       mai luminos de pe ecran, mai vizibil decât intrarea activă. Firefox ia
       cele două proprietăți standard, Chromium pseudo-elementele de dedesubt. */
    scrollbar-width: thin;
    scrollbar-color: var(--app-linie-tare) transparent;
  }
  .app-lateral-fix::-webkit-scrollbar { width: 8px; }
  .app-lateral-fix::-webkit-scrollbar-track { background: transparent; }
  .app-lateral-fix::-webkit-scrollbar-button { display: none; }
  .app-lateral-fix::-webkit-scrollbar-thumb {
    background: var(--app-linie-tare);
    border-radius: var(--app-raza-rot);
  }
  .app-lateral-fix:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.26); }

  .app-bara-sus { position: static; border-bottom: none; padding-left: 0; padding-right: 0; }
  .app-bara-sus .app-marca { display: none; }

  .app-grup { margin-bottom: var(--app-sp-5); }
  .app-grup > .app-eticheta { margin-bottom: var(--app-sp-2); }
  .app-grup ul { list-style: none; margin: 0; padding: 0; }
  .app-grup a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--app-sp-2);
    min-height: var(--app-atingere);
    padding: var(--app-sp-2) var(--app-sp-3);
    border-radius: var(--app-raza-mic);
    color: var(--app-text-2);
    text-decoration: none;
  }
  .app-grup a:hover { background: var(--app-ridicat); color: var(--app-text); }
  .app-grup a[aria-current="page"] { background: var(--app-accent-slab); color: var(--app-accent); }

  /* Pictogramele (04.09). Semnul e primul copil, eticheta al doilea și ea ia
     tot spațiul rămas — așa `space-between` de mai sus nu mai are ce distribui
     și rândul iese semn-apoi-text, fără să schimbăm regula.
     `min-width: 0` pe etichetă: fără el, un titlu lung de instrument ar întinde
     rândul în loc să se taie, iar semnele n-ar mai fi aliniate pe o coloană. */
  .app-semn {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    opacity: 0.7;
  }
  /* Eticheta se rupe pe două rânduri, NU se taie cu „…". Semnul lasă 146px
     pentru text, iar șapte intrări cer între 149 și 179 (măsurat în browser, nu
     estimat). Cu tăiere, „Antrenamentul zilnic" și „Antrenor de intervale"
     ajung amândouă „Antren…" — două intrări diferite, același rând pe ecran.
     Rândul crește atunci de la 44px la ~62px; e prețul corect. */
  .app-grup a > span { flex: 1 1 auto; min-width: 0; }
  /* Semnul se aprinde odată cu rândul: stins, ar contrazice starea activă. */
  .app-grup a:hover .app-semn,
  .app-grup a[aria-current="page"] .app-semn { opacity: 1; }

  .app-statistici { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-statistici.are-cinci { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .app-rapide { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .app-profil { flex-direction: row; align-items: center; justify-content: space-between; }
  .app-profil-date { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 auto; }

  .app-doua { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--app-sp-4); }
  .app-doua > * { margin-bottom: 0; }
}

/* ═══════════ GRAFICE (Faza 1) ═══════════
   SVG generat în PHP, din 5-15 valori. Culorile stau AICI, în tokenuri —
   generatorul de markup nu are voie să fie locul în care se ascunde un cod
   hexazecimal. Scara verticală e mereu 0-100, ca o creștere de două puncte să
   arate ca o creștere de două puncte. */

.app-grafic {
  display: block;
  width: 100%;
  height: 110px;
  margin-bottom: var(--app-sp-2);
  overflow: visible;
}
.app-grafic-bara { fill: var(--app-linie-tare); }
.app-grafic-bara.este-varf { fill: var(--app-accent); }
.app-grafic-reper { stroke: var(--app-linie); stroke-width: 1; stroke-dasharray: 3 4; }
.app-grafic-baza  { stroke: var(--app-linie-tare); stroke-width: 1; }

/* Culoarea: --app-text-2, nu --app-text-3. Axa nu e decor — pe ea scrie de la ce
   dată începe graficul, până unde merge și (în panoul profesorului) care e
   maximul serie. Cu --app-text-3 iese 3,93:1 pe suprafață, sub pragul de 4,5:1
   al proiectului; măsurat în browser pe 21.08, nu dedus din CSS. */
.app-grafic-axa {
  display: flex;
  justify-content: space-between;
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic);
  letter-spacing: var(--app-ls-mono);
  color: var(--app-text-2);
  margin-bottom: var(--app-sp-3);
}

/* Selectorul de perioadă din istoric. */
.app-perioade { display: flex; flex-wrap: wrap; gap: var(--app-sp-2); margin-bottom: var(--app-sp-4); }
.app-perioada {
  min-height: var(--app-atingere);
  display: inline-flex; align-items: center;
  padding: 0 var(--app-sp-3);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza-rot);
  background: transparent;
  color: var(--app-text-2);
  font: inherit;
  font-size: var(--app-tf-mic-2);
  text-decoration: none;
  cursor: pointer;
}
.app-perioada:hover { color: var(--app-text); border-color: var(--app-text-3); }
.app-perioada[aria-current="true"] {
  background: var(--app-accent-slab);
  border-color: var(--app-accent);
  color: var(--app-accent);
}
.app-perioada.este-blocat { opacity: 0.5; cursor: not-allowed; }

/* Acelasi prag ca restul aplicatiei (900px). Regulile astea vin dupa blocul de
   mai sus si au si specificitate mai mare, deci castiga fata de cele patru
   coloane implicite — un ecran cu doua dimensiuni nu trebuie sa aiba doua
   coloane goale langa ele. */
@media (min-width: 900px) {
  .app-statistici.are-doua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-statistici.are-trei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════ BARA LATERALĂ PE PAGINILE DE INSTRUMENT ═══════════
   15.08.2026. Instrumentele stau la /tools/<slug>/ și rămân acolo: sunt
   indexate și sunt a doua secțiune ca trafic. Ce se schimbă e doar CADRUL —
   cine vine din Vocal Lab își păstrează bara laterală, ca să poată trece de
   la un instrument la altul fără să iasă din aplicație.

   Deci pagina rămâne a temei (style.css, conținutul pe hârtie, subsolul
   întreg) și primește pe deasupra bara laterală a aplicației. NU e cadrul
   aplicației mutat peste ea: canto_app_cap() scrie noindex necondiționat,
   iar un instrument scos din Google ar fi un preț plătit pentru un meniu.

   Regulile de aici sunt singurele necesare, fiindcă .app-cadru, .app-lateral
   și .app-grup de mai sus nu cer .app-corp — sunt scrise pe clasele lor. */

/* Corpul paginii de instrument, cât timp e deschisă din Vocal Lab. Bara de jos
   de pe telefon e fixată peste conținut, deci ultimul rând are nevoie de loc
   sub el; pe desktop bara de jos nu există, deci nici spațiul. */
.lab-cadru { padding-bottom: calc(var(--app-bara-jos) + var(--app-sp-5)); }

/* Coloana de conținut a paginii de instrument. Fără min-width: 0, o grilă CSS
   dă coloanei lățimea celui mai lat copil indivizibil, iar claviatura și
   rigla de întindere, care derulează pe orizontală, ar împinge pagina în
   afara ecranului în loc să deruleze în cutia lor. */
.lab-continut { min-width: 0; }

@media (min-width: 900px) {
  .lab-cadru { padding-bottom: 0; }
  /* Bara laterală pornește sub antet și ține toată înălțimea coloanei, ca
     linia ei din dreapta să nu se oprească la jumătatea unei pagini lungi. */
  .lab-cadru .app-lateral { padding-top: var(--app-sp-5); }

  /* Pe pagina de instrument e încărcat și style.css, care dă fiecărui <li> o
     margine de .45rem. În aplicație regula nu există, deci bara ar avea aici
     intrările mai rărite decât pe ecranele de aplicație — aceeași bară, două
     înălțimi, pe două pagini între care omul trece dintr-un click. */
  .lab-cadru .app-grup li { margin-bottom: 0; }
}