/* ===========================================================================
   FLUXURI DE LUCRU PENTRU ȘTIINȚA DATELOR
   Sistem de design

   Doua teme, comutate prin atributul data-tema de pe <html>.
   Fara atribut, se ia preferinta sistemului.

   Tipografie: Source Serif 4 pentru titluri, Inter pentru text si interfata,
   JetBrains Mono doar pentru cod si valori literale (fisiere, comenzi, tipuri).
   Marimile vin dintr-o scara de opt trepte (--t1 ... --t8).

   Paleta e calda: hartia bate in crema, griurile in masliniu. La tema deschisa,
   crema e retinuta: destul cat sa se vada ca hartia nu e alba, nu atat cat sa
   bata la ochi. Fundalul e #F9F8F4, cardurile stau pe #FDFCF9 si se desprind
   de el. Daca vreodata pare prea mult sau prea putin, se misca din aceste doua
   valori si din --linie, nicaieri altundeva.

   Reguli de culoare: un singur verde (--accent, cu --accent-text si
   --accent-slab ca variante ale lui; --ok are acelasi verde). In interfata,
   in rest, doar griuri: chenare, etichete, numere, cartonase. Ambra si roza
   apar doar in grafice si diagrame, unde deosebesc categorii, si in modul
   profesorului (ambra = ora live). --ceas ramane pentru ceasul orei.
   Doua culori
   cromatice, atat: salvia/teal pentru tot ce se actioneaza si pentru „bun", si
   teracota pentru „gresit". Perechea de stare e teal/teracota, nu verde/rosu,
   pentru ca verde-rosu e exact perechea pe care n-o deosebeste cel mai frecvent
   tip de daltonism; separarea e verificata cu validatorul, nu din ochi.

   Salvia e culoare de umplere, nu de date: are saturatie mica si contrast 2,35:1
   fata de hartia deschisa, deci nu poarta niciodata singura un inteles.

   Butonul principal e singurul lucru plin si saturat de pe pagina, in ambele
   teme, dar nu cu aceeasi culoare: pe hartie deschisa e teal cu scris crem
   (5,97:1), pe hartie inchisa e salvie cu scris inchis (6,55:1), ca in
   TranscriptionLab. Aceeasi idee, intoarsa corect pentru suprafata.
   =========================================================================== */

:root{
  /* tema deschisa */
  --fundal:       #F9F8F4;
  --panza:        #FDFCF9;
  --panza-2:      #EBE8DF;
  --text:         #22221A;
  --text-2:       #56554A;
  --text-3:       #75746A;
  --linie:        #E3E0D6;
  --linie-2:      #CBC7BA;
  --salvie:       #8DAE9F;
  --salvie-text:  #23231A;
  --buton:        #116A5F;
  --buton-text:   #FDFCF9;
  --accent:       #116A5F;
  --accent-text:  #0E5A50;
  --accent-slab:  #E4EFEB;
  --ok:           #116A5F;   /* „bun” are același verde ca accentul: un singur verde pe sit */
  --ok-slab:      #E4EFEB;
  --nu:           #AB3E24;
  --nu-slab:      #F6EAE4;
  /* ceasul orei. Chihlimbar, nu cărămiziu: --nu înseamnă „greșit" peste tot
     în sit, iar un ceas de aceeași culoare s-ar citi de la distanță, cu
     coada ochiului, ca un verdict. */
  --ceas:         #8A6D14;
  --ceas-slab:    #F2ECDC;
  /* din paleta Transcription Lab: Amber Earth și Smoky Rose, folosite discret */
  --ambra:        #B8650F;
  --ambra-slab:   #F7E9D9;
  --roza:         #945D5E;
  --roza-slab:    #F2E6E5;
  /* ardezia, din schema fluxului (cursul 1): a șasea culoare de categorie */
  --ardezie:      #5F7183;
  --ardezie-slab: #E6EAEE;
  --umbra:        0 1px 2px rgba(34,34,26,.06), 0 4px 14px rgba(34,34,26,.06);
  --umbra-2:      0 2px 6px rgba(34,34,26,.09), 0 12px 34px rgba(34,34,26,.10);

  /* cromul aplicatiei: bare laterale, bara de stare, bara de file.
     In VS Code, zona de editare si barele din jurul ei nu au acelasi fundal;
     diferenta aceea mica e ce face interfata sa arate ca o unealta. */
  --crom:         #EEEBE1;
  --crom-2:       #E6E2D7;
  --crom-linie:   #D9D5C9;
  --crom-text:    #4F4E44;

  /* tipografie: trei roluri, câte o familie pentru fiecare */
  --titlu: 'Source Serif 4', Georgia, 'Times New Roman', serif;   /* h1-h3, titlurile slide-urilor */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* text, interfață, cifre */
  --mono:  'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;  /* cod și valori literale */
  --serif: var(--titlu);

  /* scara de mărimi: opt trepte, nimic între ele */
  --t1: 12px;    /* note, axe, metadate */
  --t2: 13.5px;  /* etichete, capete de tabel, text secundar */
  --t3: 15px;    /* interfață, tabele, textul slide-urilor */
  --t4: 17px;    /* textul manualului, ideea principală a slide-ului */
  --t5: 20px;    /* h3 */
  --t6: 26px;    /* h2 în manual */
  --t7: 34px;    /* titlul slide-ului, h1 */
  --t8: 44px;    /* cifre mari */

  --citit: 68ch;      /* latimea coloanei de text */
  --lat:   1140px;    /* latimea maxima a paginii */
  --antet: 48px;
  --bara:  26px;      /* bara de stare, jos */
  --sina:  258px;     /* bara laterala a lectiei */
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="deschis"]){
    --fundal:       #292921;
    --panza:        #31312A;
    --panza-2:      #23231A;
    --text:         #E9E7E0;
    --text-2:       #B4B2A7;
    --text-3:       #9A998F;
    --linie:        #3A3A31;
    --linie-2:      #4D4D44;
    --salvie:       #8DAE9F;
    --salvie-text:  #23231A;
    --buton:        #8DAE9F;
    --buton-text:   #23231A;
    --accent:       #8DAE9F;
    --accent-text:  #A6C4B7;
    --accent-slab:  #1E2724;
    --ok:           #8DAE9F;
    --ok-slab:      #1E2724;
    --nu:           #D4664E;
    --nu-slab:      #2E201C;
    --ceas:         #E3B55C;
    --ceas-slab:    #2C2619;
    --ambra:        #E8871E;
    --ambra-slab:   #33261A;
    --roza:         #C9898A;
    --roza-slab:    #32232A;
    --ardezie:      #9DB0C2;
    --ardezie-slab: #232A31;
    --umbra:        0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --umbra-2:      0 2px 6px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
    --crom:         #232319;
    --crom-2:       #2B2B22;
    --crom-linie:   #3A3A31;
    --crom-text:    #B4B2A7;
  }
}
:root[data-tema="intunecat"]{
  --fundal:       #292921;
  --panza:        #31312A;
  --panza-2:      #23231A;
  --text:         #E9E7E0;
  --text-2:       #B4B2A7;
  --text-3:       #9A998F;
  --linie:        #3A3A31;
  --linie-2:      #4D4D44;
  --salvie:       #8DAE9F;
  --salvie-text:  #23231A;
  --buton:        #8DAE9F;
  --buton-text:   #23231A;
  --accent:       #8DAE9F;
  --accent-text:  #A6C4B7;
  --accent-slab:  #1E2724;
  --ok:           #8DAE9F;
  --ok-slab:      #1E2724;
  --nu:           #D4664E;
  --nu-slab:      #2E201C;
  --ceas:         #E3B55C;
  --ceas-slab:    #2C2619;
  --ambra:        #E8871E;
  --ambra-slab:   #33261A;
  --roza:         #C9898A;
  --roza-slab:    #32232A;
  --ardezie:      #9DB0C2;
  --ardezie-slab: #232A31;
  --umbra:        0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --umbra-2:      0 2px 6px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
  --crom:         #232319;
  --crom-2:       #2B2B22;
  --crom-linie:   #3A3A31;
  --crom-text:    #B4B2A7;
}

/* --- baza ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--fundal);color:var(--text);
  font-family:var(--sans);font-size:var(--t4);line-height:1.65;
  font-feature-settings:"cv11";
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--accent-slab);color:var(--text)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* --- latimi -------------------------------------------------------------- */

.pagina{width:100%;max-width:var(--lat);margin:0 auto;padding:0 32px}
.coloana{max-width:var(--citit)}
main{flex:1}

/* --- tipografie ---------------------------------------------------------- */

h1,h2,h3{font-family:var(--titlu);font-weight:600;letter-spacing:-.012em;
  line-height:1.18;color:var(--text)}
h4{font-family:var(--sans);font-weight:600;font-size:var(--t3);line-height:1.3;color:var(--text)}
h1{font-size:clamp(30px,4.2vw,44px);font-weight:600;letter-spacing:-.02em}
h2{font-size:var(--t6);margin:52px 0 14px}
h3{font-size:var(--t5);margin:34px 0 10px}
p{margin:0 0 20px;max-width:var(--citit)}
p:last-child{margin-bottom:0}
strong{font-weight:600}
em{font-style:italic}

.supratitlu{font-family:var(--sans);font-size:var(--t1);font-weight:500;color:var(--text-3);margin:0 0 14px}
.deck{font-size:var(--t5);line-height:1.5;color:var(--text-2);max-width:60ch;margin:0 0 34px}

ul,ol{margin:0 0 20px;padding-left:0;max-width:var(--citit);list-style:none}
ol{counter-reset:n}
li{position:relative;padding-left:26px;margin-bottom:9px}
ul>li::before{content:'';position:absolute;left:7px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--text-3)}
ol>li{counter-increment:n}
ol>li::before{content:counter(n);position:absolute;left:0;top:.06em;
  font-family:var(--sans);font-size:var(--t1);color:var(--text-3);font-variant-numeric:lining-nums}

code{font-family:var(--mono);font-size:.855em;background:var(--panza-2);
  padding:.1em .34em;border-radius:3px;border:1px solid var(--linie)}
pre{background:var(--panza-2);border:1px solid var(--linie);border-radius:8px;
  padding:17px 19px;overflow-x:auto;margin:0 0 24px;font-family:var(--mono);
  font-size:var(--t2);line-height:1.72}
pre code{background:none;border:0;padding:0;font-size:inherit}
pre .c{color:var(--text-3)}
pre .k{color:var(--accent-text)}

a.leg{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--linie-2);
  transition:border-color .13s,color .13s}
a.leg:hover{color:var(--accent-text);border-bottom-color:var(--accent)}

/* --- antet --------------------------------------------------------------- */

.antet{position:sticky;top:0;z-index:60;height:var(--antet);flex:none;
  background:color-mix(in srgb, var(--fundal) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linie)}
.antet--crom{background:var(--crom);border-bottom-color:var(--crom-linie);
  backdrop-filter:none}
.antet--crom .antet__in{max-width:none;padding:0 12px 0 14px}
.antet__in{height:100%;display:flex;align-items:center;gap:14px}
.antet__marca{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.antet__marca svg{flex:none}
.antet__nume{font-family:var(--sans);font-weight:600;font-size:var(--t2);letter-spacing:-.01em}
.firimituri{display:flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:var(--t2);color:var(--text-2);min-width:0;overflow:hidden}
.firimituri a{text-decoration:none}
.firimituri a:hover{color:var(--text)}
.firimituri span.sep{color:var(--linie-2)}
.firimituri .aici{color:var(--text);font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.antet__dr{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* zona contului poate avea două elemente: scurtătura de profesor și cipul */
#zona-cont{display:flex;align-items:center;gap:8px}

.icon-btn{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;
  color:var(--text-2);transition:.13s;border:1px solid transparent}
.icon-btn:hover{background:var(--panza-2);color:var(--text);border-color:var(--linie)}

.cont-chip{display:flex;align-items:center;gap:8px;padding:4px 11px 4px 5px;
  border-radius:20px;border:1px solid var(--linie);background:var(--panza);
  font-family:var(--sans);font-size:var(--t1);font-weight:500;text-decoration:none;
  transition:.13s;white-space:nowrap}
.cont-chip:hover{border-color:var(--linie-2);box-shadow:var(--umbra)}
.cont-chip__cerc{width:23px;height:23px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:var(--t1);font-weight:600;flex:none}
:root[data-tema="intunecat"] .cont-chip__cerc{color:var(--salvie-text)}
.cont-chip--prof .cont-chip__cerc{background:var(--ambra)}
.cont-chip--prof{border-color:color-mix(in srgb,var(--ambra) 40%,var(--linie))}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="deschis"]) .cont-chip__cerc{color:var(--salvie-text)}
}

.btn-intra{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:20px;
  background:var(--buton);color:var(--buton-text);font-family:var(--sans);font-size:var(--t1);
  font-weight:600;text-decoration:none;transition:.13s;white-space:nowrap}
.btn-intra:hover{opacity:.86}

/* --- butoane -------------------------------------------------------------

   Trei feluri de umplere, si nu se amesteca intre ele:

     --buton      ce apesi ca sa mergi inainte  (Incepe lectia, Inainte, Intra)
     --text       ce ai ales tu                 (chipul selectat, filtrul activ)
     --ok / --nu  verdictul                     (corect, gresit)

   De aceea un chip selectat ramane negru, nu salvie: altfel „am ales asta"
   si „asta e bun" ar arata la fel, iar in exercitii exact aia conteaza.
   -------------------------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:500;font-size:var(--t2);padding:9px 16px;
  border-radius:8px;border:1px solid var(--linie-2);background:var(--panza);
  color:var(--text);text-decoration:none;transition:.14s;white-space:nowrap}
.btn:hover{border-color:var(--text-3);box-shadow:var(--umbra)}
.btn--tare{background:var(--buton);color:var(--buton-text);border-color:var(--buton)}
.btn--tare:hover{opacity:.87;box-shadow:var(--umbra-2)}
/* Un buton stins trebuie sa arate stins. Altfel omul il apasa, nu se intampla
   nimic, si crede ca s-a stricat pagina. */
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn:disabled:hover{opacity:.45;box-shadow:none}
.btn--mic{font-size:var(--t2);padding:7px 13px;border-radius:7px}

/* --- fluxul: elementul-semnatura ---------------------------------------------
   Opt etape, legate printr-o linie. E si navigatie, si imaginea subiectului:
   un flux de lucru e chiar asta, o succesiune prin care trec datele.
   --------------------------------------------------------------------------- */

.flux{position:relative;padding:4px 0}
.flux__sina{display:flex;align-items:flex-start;gap:0;overflow-x:auto;
  scrollbar-width:none;padding-bottom:4px}
.flux__sina::-webkit-scrollbar{display:none}
.etapa{position:relative;flex:1 1 0;min-width:94px;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 2px}
.etapa::before{content:'';position:absolute;top:10px;left:-50%;width:100%;height:1.5px;
  background:var(--linie-2)}
.etapa:first-child::before{display:none}
.etapa__nod{position:relative;z-index:2;width:21px;height:21px;border-radius:50%;
  background:var(--fundal);border:1.5px solid var(--linie-2);
  display:grid;place-items:center;font-family:var(--sans);font-size:var(--t1);
  font-weight:500;color:var(--text-3);transition:.15s}
.etapa__et{font-family:var(--sans);font-size:var(--t1);line-height:1.3;text-align:center;
  color:var(--text-3);transition:.15s;max-width:13ch}
.etapa:hover .etapa__nod{border-color:var(--accent);color:var(--accent-text)}
.etapa:hover .etapa__et{color:var(--text-2)}
.etapa.gata .etapa__nod{background:var(--accent);border-color:var(--accent);color:var(--fundal)}
.etapa.gata::before{background:var(--accent)}
.etapa.acum .etapa__nod{border-color:var(--accent);border-width:2px;color:var(--accent-text);
  box-shadow:0 0 0 4px var(--accent-slab)}
.etapa.acum .etapa__et{color:var(--text);font-weight:600}
.etapa.viitor{opacity:.6}

/* banda subtire, pentru paginile de lectie */
.flux--banda{border-bottom:1px solid var(--linie);background:var(--panza)}
.flux--banda .flux__sina{padding:11px 0 13px}
.flux--banda .etapa{min-width:78px}
.flux--banda .etapa__et{font-size:var(--t1);max-width:11ch}

/* --- carduri ------------------------------------------------------------- */

.grila{display:grid;gap:14px}
.grila--2{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.grila--3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.card{background:var(--panza);border:1px solid var(--linie);border-radius:11px;
  padding:19px 21px;transition:.15s;text-decoration:none;display:block}
a.card:hover{border-color:var(--linie-2);box-shadow:var(--umbra);transform:translateY(-1px)}
.card__sus{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.card__nr{font-family:var(--sans);font-size:var(--t1);color:var(--text-3);flex:none}
.card__t{font-family:var(--sans);font-weight:600;font-size:var(--t4);letter-spacing:-.012em;
  line-height:1.3}
.card__d{font-size:var(--t3);color:var(--text-2);line-height:1.52}
.card__jos{display:flex;align-items:center;gap:9px;margin-top:13px;
  font-family:var(--sans);font-size:var(--t1);color:var(--text-3)}

/* --- resurse ------------------------------------------------------------- */

.resurse{display:grid;gap:9px}
.resursa{display:flex;align-items:center;gap:13px;padding:13px 16px;background:var(--panza);
  border:1px solid var(--linie);border-radius:9px;text-decoration:none;transition:.14s}
.resursa:hover{border-color:var(--linie-2);box-shadow:var(--umbra)}
.resursa__ic{width:30px;height:30px;border-radius:7px;background:var(--panza-2);
  display:grid;place-items:center;flex:none;color:var(--text-2)}
.resursa__txt{min-width:0}
.resursa__t{display:block;font-family:var(--sans);font-weight:500;font-size:var(--t3);line-height:1.3}
.resursa__d{display:block;font-size:var(--t2);line-height:1.35;color:var(--text-3);margin-top:2px}
.resursa__sageata{margin-left:auto;color:var(--text-3);flex:none}

.legaturi{display:flex;flex-direction:column;gap:2px}
.legatura{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--linie);text-decoration:none;transition:.12s}
.legatura:last-child{border-bottom:0}
.legatura:hover .legatura__t{color:var(--accent-text)}
.legatura__t{font-family:var(--sans);font-size:var(--t3);font-weight:500;transition:.12s}
.legatura__g{font-family:var(--sans);font-size:var(--t1);color:var(--text-3);
  margin-left:auto;flex:none}

/* --- note ---------------------------------------------------------------- */

/* nota: o linie fină în stânga, fără fundal colorat; nu concurează cu textul */
.nota{border-left:2px solid var(--linie-2);background:none;
  padding:2px 0 2px 20px;margin:0 0 24px;max-width:var(--citit)}
.nota__et{font-family:var(--sans);font-size:var(--t2);font-weight:600;color:var(--text);margin-bottom:4px}
.nota p{font-size:var(--t4);margin-bottom:10px}
.nota p:last-child{margin-bottom:0}
.nota--sobru{border-left-color:var(--linie)}
.nota--sobru .nota__et{color:var(--text-3)}

/* --- tabel --------------------------------------------------------------- */

/* Regula tabelelor, peste tot: ca într-o publicație (booktabs). O linie mai
   groasă sus și jos, una subțire sub capul de coloană, separatoare abia
   vizibile între rânduri, fără chenare verticale și fără fundaluri. Culoarea
   apare doar unde grupează ceva (rândurile de grupă), foarte discret. */
.tabel{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--t3);margin:0 0 24px;
  border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text)}
.tabel th{font-family:var(--sans);font-weight:600;font-size:var(--t1);letter-spacing:.02em;text-align:left;
  padding:9px 16px 8px 0;color:var(--text-3);border-bottom:1px solid var(--linie-2);vertical-align:bottom}
.tabel td{padding:10px 16px 10px 0;border-bottom:1px solid var(--linie);vertical-align:top;line-height:1.5}
.tabel tr:last-child td{border-bottom:0}
.tabel td:first-child{color:var(--text);font-weight:500}
.tabel td.mono{font-family:var(--mono);font-size:var(--t2);font-weight:400}
.tabel td.num,.tabel th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabel code{font-size:var(--t1);background:none;border:0;padding:0;color:var(--text-2)}
/* rândul de grupă: o bandă abia colorată, cu un reper în culoarea grupei */
.tabel .dp__cap th{padding:9px 12px 7px;border-bottom:1px solid var(--linie);font-size:var(--t2);letter-spacing:0;
  color:var(--text);background:color-mix(in srgb,var(--g,var(--text)) 7%,transparent);vertical-align:middle}
.tabel .dp__cap th i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--g,var(--text-3));margin-right:9px}
.tabel .dp__cap th span{font-weight:400;color:var(--text-3);margin-left:10px}
.tabel tbody + tbody .dp__cap th{border-top:1px solid var(--linie-2)}

/* --- etichete ------------------------------------------------------------ */

.et{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:var(--t1);
  font-weight:500;padding:3px 8px;
  border-radius:4px;background:var(--panza-2);color:var(--text-3);border:1px solid var(--linie)}
.et--ok{background:var(--ok-slab);color:var(--ok);border-color:transparent}
.et--nu{background:var(--nu-slab);color:var(--nu);border-color:transparent}
.et--accent{background:var(--accent-slab);color:var(--accent-text);border-color:transparent}

/* --- subsol -------------------------------------------------------------- */

.subsol{border-top:1px solid var(--linie);margin-top:74px;padding:30px 0 52px;
  font-family:var(--sans);font-size:var(--t2);color:var(--text-3)}
.subsol__in{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.subsol a{text-decoration:none}
.subsol a:hover{color:var(--text-2)}
.subsol__dr{margin-left:auto}

/* --- navigare intre lectii ----------------------------------------------- */

.nav-lectii{display:flex;gap:12px;margin-top:60px;padding-top:26px;
  border-top:1px solid var(--linie)}
.nav-lectii a{flex:1;max-width:48%;padding:14px 17px;border:1px solid var(--linie);
  border-radius:10px;text-decoration:none;transition:.14s;background:var(--panza)}
.nav-lectii a:hover{border-color:var(--linie-2);box-shadow:var(--umbra)}
.nav-lectii .et-mica{font-family:var(--sans);font-size:var(--t1);color:var(--text-3);display:block;margin-bottom:4px}
.nav-lectii .t{font-family:var(--sans);font-size:var(--t3);font-weight:500;line-height:1.3}
.nav-lectii .dr{margin-left:auto;text-align:right}

/* --- utilitare ----------------------------------------------------------- */

.doar-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
.incarca{color:var(--text-3);font-style:italic;padding:44px 0;text-align:center}

@media(max-width:780px){
  body{font-size:var(--t4)}
  .pagina{padding:0 20px}
  h2{font-size:var(--t5);margin-top:42px}
  .deck{font-size:var(--t5)}
  .nav-lectii{flex-direction:column}
  .nav-lectii a{max-width:none}
  .antet__nume{display:none}
}
/* butonul profesorului, cât e o oră pornită */
.cont-chip--live{background:var(--ambra-slab);border-color:var(--ambra)}
.cont-chip--live .cont-chip__cerc{position:relative}
.cont-chip--live .cont-chip__cerc::after{content:"";position:absolute;right:-2px;top:-2px;width:8px;height:8px;
  border-radius:50%;background:var(--ambra);box-shadow:0 0 0 2px var(--panza)}
/* „Înapoi la oră”, în antet, pe orice pagină, cât e o oră pornită */
.btn-ora{display:inline-flex;align-items:center;gap:8px;margin-right:8px;padding:5px 12px;border-radius:20px;
  background:var(--ambra);color:#fff;font-family:var(--sans);font-size:var(--t1);font-weight:600;text-decoration:none;white-space:nowrap}
.btn-ora:hover{filter:brightness(1.07)}
.btn-ora i{width:7px;height:7px;border-radius:50%;background:#fff;animation:ora-puls 1.6s ease-in-out infinite}
@keyframes ora-puls{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.btn-ora i{animation:none}}
#zona-cont{display:flex;align-items:center}

/* --- surse oficiale: documentația, cu ce găsești în ea ----------------------- */
.surse{border:0;border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text);border-radius:0;padding:10px 0 4px;margin:18px 0;background:none}
.surse__et{font-family:var(--sans);font-size:var(--t1);color:var(--text-3);margin-bottom:6px}
.surse ul{list-style:none;margin:0;padding:0}
.surse li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:12px;padding:6px 0;border-top:1px solid var(--linie);font-family:var(--sans);font-size:var(--t2)}
.surse li:first-child{border-top:0}
.surse li span{color:var(--text-2);line-height:1.45}
.surse__a{color:var(--accent-text,var(--accent));text-decoration:none;font-weight:500}
.surse__a:hover{text-decoration:underline}
.surse__a::after{content:" ↗";font-size:.85em;color:var(--text-3)}
@media(max-width:640px){.surse li{grid-template-columns:1fr;gap:2px}}
.surse li::before{content:none !important;display:none !important}
.sld .surse li{padding-left:0;margin:0}

/* --- lecturi: literatura, pe feluri, în ordinea din flux --------------------- */
.lit{border:0;border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text);border-radius:0;padding:10px 0 6px;margin:18px 0;background:none}
.lit__et{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--sans);font-size:var(--t1);color:var(--text-3);margin-bottom:8px}
.lit__toata{font-family:var(--sans);font-size:var(--t1);letter-spacing:0;text-transform:none;color:var(--accent-text,var(--accent));text-decoration:none}
.lit__toata:hover{text-decoration:underline}
.lit__g{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--linie)}
.lit__g:first-of-type{border-top:0}
.lit__f{font-family:var(--sans);font-size:var(--t2);font-weight:600;color:var(--text)}
.lit__f small{display:block;font-weight:400;font-size:var(--t1);color:var(--text-3);line-height:1.35;margin-top:2px}
.lit__f::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--text-3)}
.lit__f--date::before{background:var(--ambra)} .lit__f--teorie::before{background:var(--accent)}
.lit__f--metoda::before{background:var(--roza)} .lit__f--documentatie::before{background:var(--text-3)}
.lit ul{list-style:none;margin:0;padding:0}
.lit li{display:flex;flex-direction:column;gap:1px;padding:3px 0 7px;font-family:var(--sans);font-size:var(--t2);line-height:1.45}
.lit li::before{content:none !important;display:none !important}
.sld .lit li{padding-left:0;margin:0}
.lit li span{color:var(--text-2);font-size:var(--t2)}
.lit__a{color:var(--accent-text,var(--accent));text-decoration:none;font-weight:500}
.lit__a:hover{text-decoration:underline} .lit__a::after{content:" ↗";font-size:.85em;color:var(--text-3)}
@media(max-width:640px){.lit__g{grid-template-columns:1fr;gap:4px}}

/* --- echipele de proiect (js/echipe.js) -----------------------------------
   Fiecare echipă are culoarea ei din paletă (--ec, după numărul echipei) și o
   păstrează peste tot: în cont, pe slide, la profesor. Cartonașul prinde
   culoare pe măsură ce se umple (--tenta); echipa completă e plină de culoare.
   Locurile sunt cercuri: goale, punctate; ocupate, cu inițialele. Numele stau
   dedesubt, mic. Cine intră acum apare cu o mică animație. */
.echp{font-family:var(--sans)}
.echp__lead{font-size:var(--t3);color:var(--text-2);margin:0 0 16px;max-width:62ch}
.echp__info{font-size:var(--t2);color:var(--text-3);margin:8px 0 0}
.echp__gol{font-size:var(--t3);color:var(--text-2);margin:0}
.echp__msg{font-size:var(--t2);color:var(--nu);margin:12px 0 0}
.echp__gdpr{font-size:var(--t1);color:var(--text-3);margin:20px 0 0}
.echp__et2{font-size:var(--t2);font-weight:600;color:var(--text-2);margin:18px 0 8px}
.echp__ec{color:color-mix(in srgb,var(--ec) 78%,var(--text))}

.echp__grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px;margin:0 0 14px}
.echp__grila--mic{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.echp__grila--prof{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* cartonașul */
.echp__c{--ec:var(--accent);--tenta:6%;
  display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;
  font:inherit;text-align:left;color:var(--text);
  background:color-mix(in srgb,var(--ec) var(--tenta),var(--panza));
  border:1px solid color-mix(in srgb,var(--ec) 28%,var(--linie));border-radius:14px;
  padding:16px 14px 12px;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .3s ease}
.echp__c::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ec)}
.echp__cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.echp__cap b{font-size:var(--t3);font-weight:600;color:color-mix(in srgb,var(--ec) 78%,var(--text))}
.echp__cap small{font-size:var(--t1);font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.echp__loc{display:flex;flex-wrap:wrap;gap:6px}
.echp__loc i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--ec) 50%,transparent);
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1}
.echp__loc i.da{background:var(--ec);border:1.5px solid var(--ec);color:var(--panza)}
.echp__nume{display:flex;flex-direction:column;gap:2px;min-width:0}
.echp__nume > span{font-size:var(--t1);line-height:1.35;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.echp__nume em{font-style:normal;font-weight:600;color:color-mix(in srgb,var(--ec) 78%,var(--text))}
.echp__et{margin-top:auto;font-size:var(--t1);font-weight:600;letter-spacing:.02em;
  color:color-mix(in srgb,var(--ec) 78%,var(--text))}

/* cartonașul pe care se poate apăsa */
.echp__c.act{cursor:pointer}
.echp__c.act .echp__et::after{content:"→";display:inline-block;margin-left:5px;transition:transform .18s ease}
.echp__c.act:hover{transform:translateY(-2px);border-color:var(--ec);box-shadow:var(--umbra-2)}
.echp__c.act:hover .echp__et::after{transform:translateX(3px)}
.echp__c.act:hover .echp__loc i:not(.da):first-of-type,
.echp__c.act:focus-visible .echp__loc i:not(.da):first-of-type{border-style:solid;border-color:var(--ec);
  background:color-mix(in srgb,var(--ec) 18%,transparent)}
.echp__c.act:focus-visible{outline:2px solid var(--ec);outline-offset:2px}
.echp__c.act:active{transform:translateY(0)}

/* echipa ta, sau cea căreia i-ai trimis cererea */
.echp__c.a-mea{border-color:var(--ec);box-shadow:0 0 0 1px var(--ec)}

/* echipa completă: plină de culoare */
.echp__c.plina{background:var(--ec);border-color:var(--ec)}
.echp__c.plina::before{content:none}
.echp__c.plina .echp__cap b,.echp__c.plina .echp__et,.echp__c.plina .echp__nume em{color:var(--panza)}
.echp__c.plina .echp__cap small{color:color-mix(in srgb,var(--panza) 75%,var(--ec))}
.echp__c.plina .echp__nume > span{color:color-mix(in srgb,var(--panza) 88%,var(--ec))}
.echp__c.plina .echp__loc i.da{background:var(--panza);border-color:var(--panza);color:var(--ec)}
.echp__c.plina .echp__et{opacity:.8;font-weight:500}

/* varianta mică: celelalte echipe, când ai deja una */
.echp__c.mic{gap:8px;padding:12px 12px 10px;border-radius:12px}
.echp__c.mic .echp__loc{gap:4px}
.echp__c.mic .echp__loc i{width:16px;height:16px}

/* echipa ta, mare, cu textul alături */
.echp__a-mea{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;align-items:start;margin:0 0 6px}
.echp__a-mea > .echp__c{padding:18px 18px 16px;gap:12px}
.echp__a-mea > .echp__c .echp__loc i{width:34px;height:34px;font-size:12px}
.echp__a-mea > .echp__c .echp__nume > span{font-size:var(--t2)}
.echp__lat .echp__lead{font-size:var(--t4);margin:4px 0 10px}
.echp__lat .echp__lead b{font-weight:600}
@media(max-width:640px){.echp__a-mea{grid-template-columns:1fr;gap:12px}}
.echp__iesi{margin-top:2px}

/* pe slide: numele se citesc din fundul sălii */
.echp--slide .echp__grila{grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}
.echp--slide .echp__nume > span{font-size:var(--t2)}
.echp--slide .echp__loc i{width:28px;height:28px;font-size:11px}
.echp--slide .echp__c{padding:14px 13px 11px;gap:8px}
.echp--slide .echp__nume{gap:0}
.echp--slide .echp__nume > span{line-height:1.3}
.echp--slide .echp__c:not(.act) .echp__et{display:none}

/* cererile */
.echp__cereri,.echp__fara{margin:0 0 18px}
.echp__cerere{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--linie);font-size:var(--t3)}
.echp__cerere:last-of-type{border-bottom:0}
.echp__cerere span{flex:1;min-width:200px}
.echp__cererea{border-left:3px solid var(--ec);padding:2px 0 2px 14px;margin:0 0 16px}
.echp__cererea .echp__lead{margin:0 0 8px}
.echp__noua{display:flex;align-items:center;gap:12px;margin:6px 0 0;font-size:var(--t3);color:var(--text-2)}
.echp__noua p{margin:0}

/* bara de stare și banda grupei */
.echp__bara{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 14px}
.echp__bara .sp{flex:1}
.echp--slide .echp__bara{margin:6px 0 0}
.echp__stare{display:inline-flex;align-items:center;gap:7px;font-size:var(--t2);font-weight:600;color:var(--text-2)}
.echp__stare::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--linie-2)}
.echp__stare.on{color:var(--accent-text)}
.echp__stare.on::before{background:var(--accent);animation:echp-puls 2s ease-in-out infinite}
.echp__banda{display:flex;gap:2px;height:6px;flex:1;min-width:120px;border-radius:3px;overflow:hidden}
.echp--prof > .echp__banda{margin:0 0 18px}
.echp__banda i{display:block;background:var(--ec);flex-basis:0;transition:flex-grow .5s ease}
.echp__banda i.rest{background:var(--linie)}

/* profesorul: lista membrilor, cu mutare */
.echp__lista{list-style:none;margin:0;padding:0;max-width:none}
.echp__lista li{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:5px 0;margin:0;
  border-top:1px solid color-mix(in srgb,var(--ec,var(--text)) 14%,transparent);font-size:var(--t2)}
.echp__lista li::before{content:none}
.echp__lista li > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.echp__lista small{font-size:var(--t1);color:var(--text-3)}
.echp__lista select{flex:none;font-size:var(--t1);padding:2px 4px;border:1px solid var(--linie-2);border-radius:6px;background:var(--panza);color:var(--text)}
.echp__fara .echp__lista{columns:2 260px;column-gap:28px}
.echp__fara .echp__lista li{break-inside:avoid}
.echp__porneste{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.echp__porneste .echp__lead{flex-basis:100%;margin:0}
.echp__porneste .echp__info,.echp__porneste .echp__msg{flex-basis:100%}
.echp__porneste label{font-size:var(--t2);color:var(--text-2);display:flex;align-items:center;gap:6px}
.echp__porneste input{width:64px;font-size:var(--t3);padding:5px 8px;border:1px solid var(--linie-2);border-radius:6px;background:var(--panza);color:var(--text)}

/* mișcarea */
@keyframes echp-loc{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@keyframes echp-unda{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ec) 55%,transparent)}100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--ec) 0%,transparent)}}
@keyframes echp-nume{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes echp-intra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes echp-puls{0%,100%{opacity:1}50%{opacity:.35}}
.echp__loc i.nou{animation:echp-loc .5s cubic-bezier(.3,1.4,.5,1) both,echp-unda 1.1s .25s ease-out}
.echp__nume > .nou{animation:echp-nume .5s .15s ease-out both}
.intra > .echp__c,.echp__a-mea.intra > *{animation:echp-intra .45s ease-out both;animation-delay:calc(var(--i,0) * 45ms)}
@media (prefers-reduced-motion:reduce){
  .echp *,.echp *::before,.echp *::after{animation:none !important;transition:none !important}
}
.anunt-echipa{border-bottom:1px solid var(--linie);background:var(--panza);font-family:var(--sans);font-size:var(--t2);color:var(--text-2)}
.anunt-echipa .pagina{padding-top:9px;padding-bottom:9px}
.cont-chip--anunt{position:relative}
.cont-chip--anunt::after{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--fundal)}
.surse ul,.lit ul{max-width:none!important}
/* v83: pe slide, cele cinci locuri încap pe un rând și la cinci echipe pe rând */
.echp--slide .echp__loc{gap:4px;flex-wrap:nowrap}
.echp--slide .echp__loc i{flex:0 0 auto}

/* v85: pe slide, fiecare echipă e un pătrat cu un rând pentru fiecare loc și
   numele întreg pe rând, ca să se citească din sală */
.echp .echp__grila.echp__grila--sl{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.echp__c--sl{gap:8px;padding:14px 16px 12px}
.echp__sls{display:flex;flex-direction:column}
.echp__sl{display:flex;align-items:baseline;gap:10px;padding:4px 0;min-width:0;line-height:1.35;
  border-bottom:1px solid color-mix(in srgb,var(--ec) 22%,transparent)}
.echp__sl:last-child{border-bottom:0}
.echp__sl--liber{border-bottom-style:dashed}
.echp__sl--liber:last-child{border-bottom:0}
.echp__sl i{flex:none;width:12px;font-style:normal;font-size:var(--t1);color:color-mix(in srgb,var(--ec) 70%,var(--text-3))}
.echp__sl > span{font-size:var(--t4);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.echp__sl--liber > span{font-size:var(--t3);font-weight:400;color:var(--text-3)}
.echp__sl em{font-style:normal;font-weight:600;margin-left:4px;color:color-mix(in srgb,var(--ec) 78%,var(--text))}
.echp__sl.nou > span{animation:echp-nou 1.2s ease}
@keyframes echp-nou{from{color:var(--ec)}}
.echp__c--sl.plina .echp__sl > span{color:var(--panza)}
.echp__c--sl.plina .echp__sl i{color:color-mix(in srgb,var(--panza) 70%,var(--ec))}
.echp__c--sl.plina .echp__sl{border-bottom-color:color-mix(in srgb,var(--panza) 30%,transparent)}

/* v89: în cod, >= rămâne >= (fără ligaturi), ca începătorii să vadă ce se tastează */
code,pre,kbd,samp,code *,pre *,.ed__cod,.ed__cod *,.jc,.jc *,.trm,.trm *{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}

/* Informație suplimentară, deschisă de un buton (popover nativ, fără JavaScript):
   apare peste pagină și se închide cu Esc, cu un clic în afară sau cu „Închide”. */
.info-b{display:inline-flex;align-items:center;gap:6px;font:500 var(--t2)/1.2 var(--sans);
  color:var(--accent-text);background:var(--accent-slab);border:1px solid transparent;border-radius:999px;
  padding:7px 13px;margin:6px 0 12px;cursor:pointer}
.info-b:hover,.info-b:focus-visible{border-color:var(--accent)}
.info-p{width:min(720px,calc(100vw - 32px));max-height:min(82vh,780px);overflow:auto;margin:auto;
  padding:22px 26px 24px;background:var(--panza);color:var(--text);border:1px solid var(--linie);
  border-radius:12px;box-shadow:var(--umbra-2);text-align:left}
.info-p::backdrop{background:rgba(20,20,15,.38)}
.info-p h3{font-family:var(--titlu);font-size:22px;margin:0 0 12px;padding-right:80px}
.info-p h4{font:600 var(--t3)/1.3 var(--sans);color:var(--text);margin:18px 0 6px}
.info-p p,.info-p li{font-size:var(--t3);line-height:1.55;color:var(--text-2);margin:0 0 8px}
.info-p ul{margin:0 0 8px;padding-left:20px}
.info-p pre{font-size:var(--t2);margin:6px 0 10px;overflow:auto}
.info-p__x{float:right;font:500 var(--t2)/1 var(--sans);color:var(--text-2);background:none;
  border:1px solid var(--linie-2);border-radius:999px;padding:6px 11px;cursor:pointer}
.info-p__x:hover{color:var(--text);border-color:var(--text-3)}

/* Eticheta unui exercițiu pe slide, la fel ca la întrebările de verificare:
   un punct verde și „Verificare”, ca să se vadă că aici se răspunde. */
.ex-et{font-family:var(--sans);font-size:var(--t1);font-weight:500;color:var(--text-3);
  display:flex;align-items:center;gap:7px;margin:2px 0 8px}
.ex-et::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* Pașii de azi (cursul 3): o linie de timp. Stânga: numărul, cine face pasul
   (aceeași culoare pentru aceeași persoană) și ce face; dreapta: comanda. */
.pz{list-style:none;margin:2px 0 0;padding:0;position:relative}
.pz::before{content:'';position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--linie-2)}
.pz__p{display:grid;grid-template-columns:23px 220px minmax(0,1fr);gap:0 12px;align-items:start;
  margin:0;padding:4px 0;position:relative}
.pz__p::before{content:none}
.pz__p + .pz__p{border-top:1px dashed var(--linie)}
.pz__n{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  font:600 var(--t1)/1 var(--sans);color:var(--text-2);background:var(--panza);border:1px solid var(--linie-2)}
.pz__cap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:2px;min-width:0}
.pz__cine{font:600 11px/1 var(--sans);padding:4px 8px;border-radius:999px;white-space:nowrap}
.c-tot{background:var(--accent-slab);color:var(--accent-text)}
.c-unu{background:var(--ambra-slab);color:var(--ambra)}
.c-doi{background:var(--roza-slab);color:var(--roza)}
.c-rest{background:var(--ardezie-slab);color:var(--ardezie)}
.pz__ce{font:500 var(--t2)/1.3 var(--sans);color:var(--text)}
.pz__cmd{margin:0;padding:6px 10px;border-radius:7px;font-size:11px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere}
.pz__alt{margin:0;padding-top:4px;font-size:var(--t2);color:var(--text-2);overflow-wrap:anywhere}
@media (max-width:760px){
  .pz::before{content:none}
  .pz__p{grid-template-columns:23px minmax(0,1fr);gap:6px 10px}
  .pz__cmd,.pz__alt{grid-column:2}
}

/* Conflictul (cursul 3): cerința, deasupra variantelor */
.cf__cer{font-family:var(--sans);font-size:var(--t3);color:var(--text);margin:10px 0 6px}