/* aplicatie.css — stiluri proprii lecției „Egalități mixte: adevărat sau fals” (doar variabile de culoare). */

/* ---------- planșe desenate ---------- */
.plate .eg-pl,.plate .eg-cov{background:var(--card);color:var(--ink);border-radius:12px;padding:14px 16px;font-weight:800}
.eg-op{color:var(--berry);font-weight:900}
.eg-da{color:var(--leaf-deep)} .eg-nu{color:var(--berry)}

/* ---------- balanța: talerul care valorează mai mult coboară ----------
   --t: -1 (stânga mai grea) · 0 (echilibru) · 1 (dreapta mai grea). Toate măsurile sunt în cqw, ca desenul să se scaleze. */
.eb{container-type:inline-size;position:relative;width:100%;aspect-ratio:100/50;margin:0 auto;user-select:none}
.eb-post{position:absolute;left:50%;top:8cqw;bottom:5cqw;width:2.4cqw;transform:translateX(-50%);background:var(--muted);border-radius:1cqw}
.eb-base{position:absolute;left:50%;bottom:2cqw;width:24cqw;height:3.6cqw;transform:translateX(-50%);background:var(--muted);border-radius:3cqw 3cqw 1cqw 1cqw}
.eb-beam{position:absolute;top:7cqw;left:20%;width:60%;height:2.2cqw;background:var(--ink);border-radius:2cqw;transform:rotate(calc(var(--t) * 7deg));transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
.eb-beam i{position:absolute;left:50%;top:50%;width:4.6cqw;height:4.6cqw;transform:translate(-50%,-50%);border-radius:50%;background:var(--sun);border:.6cqw solid var(--ink);box-sizing:border-box}
.eb-pan{position:absolute;top:8.2cqw;width:38cqw;display:flex;flex-direction:column;align-items:center;transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
.eb-l{left:1cqw;transform:translateY(calc(var(--t) * -3.7cqw))}
.eb-r{left:61cqw;transform:translateY(calc(var(--t) * 3.7cqw))}
/* sforile: două linii din capătul brațului până la marginile talerului */
.eb-str{display:block;width:32cqw;height:14cqw;background:
  linear-gradient(to bottom right,transparent calc(50% - .35cqw),var(--muted) 50%,transparent calc(50% + .35cqw)) left/50% 100% no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - .35cqw),var(--muted) 50%,transparent calc(50% + .35cqw)) right/50% 100% no-repeat}
.eb-expr{position:relative;z-index:1;margin-top:-7.4cqw;min-width:14cqw;box-sizing:border-box;text-align:center;white-space:nowrap;background:var(--card);color:var(--ink);border:.6cqw solid var(--sky);border-radius:1.8cqw;padding:.6cqw 1.6cqw;font-size:max(13px,4.6cqw);line-height:1.15;font-weight:800}
.eb-r .eb-expr{border-color:var(--berry)}
.eb-dish{display:block;width:34cqw;height:2.8cqw;margin-top:.5cqw;background:var(--sky);border-radius:0 0 50% 50%/0 0 100% 100%}
.eb-r .eb-dish{background:var(--berry)}
.eb-val{margin-top:1.4cqw;min-width:9cqw;text-align:center;padding:.2cqw 1.6cqw;border-radius:99px;background:var(--sun-tint);border:.5cqw solid var(--sun);color:var(--ink);font-size:max(13px,4.4cqw);font-weight:900;line-height:1.2}
.eb-sign{position:absolute;left:50%;top:21cqw;transform:translateX(-50%);z-index:2;width:10cqw;height:10cqw;display:grid;place-items:center;border-radius:50%;background:var(--card);border:.6cqw solid var(--line);color:var(--ink);font-size:max(15px,6cqw);font-weight:900;line-height:1}
.eb-ok .eb-sign{background:var(--leaf);border-color:var(--leaf-deep);color:var(--on-leaf)}
.eb-ok .eb-val{background:var(--leaf-tint);border-color:var(--leaf)}
/* balanța blocată: încă nu s-a judecat, deci valorile sunt ascunse */
.eb-lock .eb-val{background:var(--card);border-style:dashed;border-color:var(--line);color:var(--muted)}
.eb-lock .eb-post::after{content:"🔒";position:absolute;left:50%;top:20cqw;transform:translateX(-50%);font-size:max(12px,4.4cqw)}
html.a-still .eb-beam,html.a-still .eb-pan{transition:none}

/* copertă */
.eg-cov{text-align:center}
.eg-cov-txt{margin:6px 0 0;font-size:calc(22px * var(--fs));display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.eg-cov-v{border-radius:99px;padding:2px 12px;background:var(--leaf-tint)}
.eg-cov-v.eg-nu{background:var(--berry-tint)}

/* stația 2: benzi */
.eg-benzi{display:grid;gap:12px}
.eg-bz{display:grid;grid-template-columns:5.2em minmax(0,1fr) 2.4em;align-items:center;gap:10px;font-size:calc(20px * var(--fs))}
.eg-bz-e{text-align:right}
.eg-bz-b{display:flex;height:34px;width:calc(var(--n) / var(--m) * 100%)}
.eg-bz-b i{display:block;width:calc(var(--w) / var(--n) * 100%);background:var(--sky-tint);border:2px solid var(--sky);box-sizing:border-box;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--w) - 2px),var(--sky) calc(100% / var(--w) - 2px) calc(100% / var(--w)))}
.eg-bz-b i.b2{background-color:var(--sun-tint);border-color:var(--sun-edge);background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--w) - 2px),var(--sun-edge) calc(100% / var(--w) - 2px) calc(100% / var(--w)))}
.eg-bz>b{font-size:1.15em}
.eg-bz-n{margin:4px 0 0;text-align:center;color:var(--muted);font-size:calc(17px * var(--fs))}
.eg-bz-n s{color:var(--berry)}

/* stația 3: tabel colorat */
.eg-tab{display:grid;grid-template-columns:1fr auto 1fr auto auto;gap:6px 10px;align-items:center;font-size:calc(21px * var(--fs))}
.eg-tab .h{color:var(--muted);font-size:.7em;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.eg-tab .e{background:var(--sky-tint);border-radius:10px;padding:4px 10px;text-align:center}
.eg-tab .v{background:var(--sun-tint);border-radius:99px;padding:2px 10px;min-width:2.2em;text-align:center}
.eg-tab .r{font-size:1.1em;text-align:center}
.eg-tab .r.da{color:var(--leaf-deep)} .eg-tab .r.nu{color:var(--berry)}

/* stația 5: pașii ordinii */
.eg-pasi{text-align:center}
.eg-pasi p{margin:6px 0;display:flex;align-items:center;justify-content:center;gap:14px;font-size:calc(32px * var(--fs))}
.eg-pasi u.p1,.eg-par u.p1{text-decoration:none;border-bottom:5px solid var(--berry);padding:0 4px}
.eg-tag{font-style:normal;font-size:calc(15px * var(--fs));border-radius:99px;padding:3px 10px}
.eg-tag.t1{background:var(--berry-tint);color:var(--berry)} .eg-tag.t2{background:var(--sky-tint);color:var(--sky)}
.eg-rez{background:var(--leaf);color:var(--on-leaf);border-radius:12px;padding:0 18px}

/* stația 6: parantezele */
.eg-par{display:grid;gap:12px}
.eg-par-r{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:calc(28px * var(--fs));background:var(--sun-tint);border-radius:12px;padding:8px 10px}
.eg-par-r:last-child{background:var(--sky-tint)}
.eg-par-p{color:var(--muted)} .eg-par-p b{color:var(--ink)}

/* stația 7: compensarea, pe benzi de aceeași lungime */
.eg-comp{display:grid;gap:4px}
.eg-cb-b{display:flex;height:42px}
.eg-cb-b i{display:flex;align-items:center;justify-content:center;font-style:normal;width:calc(var(--w) / 44 * 100%);background:var(--sky-tint);border:3px solid var(--sky);box-sizing:border-box;font-size:calc(20px * var(--fs))}
.eg-cb-b i.b2{background:var(--sun-tint);border-color:var(--sun-edge)}
.eg-cb-s{position:relative;height:1.6em;font-size:calc(17px * var(--fs))}
.eg-cb-s span{position:absolute;top:0;border-radius:99px;padding:0 8px}
.eg-cb-s .m{right:calc(100% - 25 / 44 * 100% + 6px);background:var(--berry-tint);color:var(--berry)}
.eg-cb-s .p{left:calc(25 / 44 * 100% + 6px);background:var(--leaf-tint);color:var(--leaf-deep)}
.eg-cb-n{margin:8px 0 0;text-align:center;font-size:calc(24px * var(--fs))}

/* ---------- elemente comune laboratoarelor ---------- */
.eg-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.eg-eq{margin:10px 0 12px;text-align:center;font-weight:800;font-size:calc(30px * var(--fs));color:var(--ink);line-height:1.2}
.eg-egal{color:var(--leaf-deep);padding:0 .15em}
.eg-egal.gol{display:inline-block;min-width:1.4em;border-bottom:3px dashed var(--leaf);color:var(--muted)}
.eg-egal.plin{border-bottom-style:solid;color:var(--leaf-deep);animation:eg-pop .35s}
.eg-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800;color:var(--muted)}
.eg-msg.bine{color:var(--leaf-deep)} .eg-msg.rau{color:var(--berry)}
.eg-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.eg-act .verif,.eg-act .ba-next{margin-left:auto}
.eg-act:has(> .ba-next[hidden]:only-child){display:none}
.eg-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.eg-final,.an-final{text-align:center}
.eg-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:eg-pop .5s}
@keyframes eg-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes eg-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* laborator 1: Adevărat / Fals, plăcuțe mari */
.ba-ch{display:flex;gap:14px;justify-content:center;align-items:center}
.ba .ba-b{min-width:9em;min-height:calc(54px * var(--fs));font-size:calc(20px * var(--fs));background:var(--card);color:var(--ink);border:3px solid var(--line)}
.ba .ba-a{border-color:var(--leaf);box-shadow:0 5px 0 var(--leaf)}
.ba .ba-f{border-color:var(--berry);box-shadow:0 5px 0 var(--berry)}
.ba .ba-b:disabled{opacity:.55;transform:none}
.ba .ba-b.eg-good{opacity:1;background:var(--leaf-tint);color:var(--leaf-deep)}
.ba .ba-b.eg-bad{opacity:1;background:var(--berry-tint);color:var(--berry);animation:eg-shake .45s}

/* laborator 2: repară — plăcuțele egalității, toate de aceeași înălțime, pe aceeași linie */
.rp-eq{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.rp-eq .eg-egal{font-size:calc(32px * var(--fs));font-weight:900}
.rp-tk{height:calc(56px * var(--fs));min-width:calc(56px * var(--fs));box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border:3px solid var(--sky);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:calc(26px * var(--fs));font-weight:900;box-shadow:0 4px 0 var(--sky);cursor:pointer}
.rp-tk.s{border-color:var(--berry);box-shadow:0 4px 0 var(--berry);color:var(--berry);border-radius:50%;min-width:calc(48px * var(--fs));height:calc(48px * var(--fs))}
.rp-tk.sch{background:var(--leaf-tint);border-style:dashed}
.rp-tk.on{background:var(--sun);border-color:var(--sun-edge);color:var(--on-sun);box-shadow:0 5px 0 var(--sun-edge);transform:translateY(-3px)}
.rp-tk:disabled{cursor:default}
.rp-ed{min-height:calc(64px * var(--fs));display:flex;align-items:center;justify-content:center;background:var(--sun-tint);border-radius:14px;padding:8px}
.rp-hint{margin:0;font-weight:800;color:var(--ink);text-align:center}
.rp-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.rp-ed .chip{min-width:calc(56px * var(--fs));min-height:calc(48px * var(--fs));font-size:calc(20px * var(--fs));font-weight:900;border:3px solid var(--stripe);border-radius:14px;box-shadow:0 4px 0 var(--stripe);cursor:pointer}
.rp-ed .chip.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 4px 0 var(--ink)}
.rp-v{min-width:2.4em;text-align:center;font-size:calc(28px * var(--fs));font-weight:900;color:var(--ink);background:var(--card);border-radius:12px;padding:2px 10px}
.rp-nr b{color:var(--ink)}
.rp-nr.prea,.rp-nr.prea b{color:var(--berry)}
.rp-gata{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rp-gata span{background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:99px;padding:3px 12px;font-weight:800;animation:eg-pop .35s ease-out}
.rp-gata .eg-op{color:var(--leaf-deep)}

/* laborator 3: construiește — căsuțe și plăcuțe */
.cs-eq{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.cs-st{height:calc(56px * var(--fs));display:inline-flex;align-items:center;padding:0 14px;box-sizing:border-box;border-radius:14px;background:var(--sky-tint);border:3px solid var(--sky);font-size:calc(26px * var(--fs));font-weight:900;color:var(--ink)}
.cs-eq .eg-egal{font-size:calc(32px * var(--fs));font-weight:900}
.cs-sl{height:calc(56px * var(--fs));min-width:calc(56px * var(--fs));box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border:3px dashed var(--berry);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:calc(26px * var(--fs));font-weight:900;cursor:pointer}
.cs-sl.s{border-radius:50%;min-width:calc(48px * var(--fs));height:calc(48px * var(--fs));color:var(--berry)}
.cs-sl.plin{border-style:solid;background:var(--berry-tint)}
.cs-tiles{display:grid;gap:10px}
.cs-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cs .chip.cs-t{min-width:calc(56px * var(--fs));min-height:calc(48px * var(--fs));padding:2px 12px;font-size:calc(21px * var(--fs));font-weight:900;color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 4px 0 var(--stripe);cursor:pointer}
.cs .chip.cs-t.s{color:var(--berry);border-radius:50%;min-width:calc(48px * var(--fs));padding:0}
.cs .chip.cs-t:hover{transform:translateY(-2px)}
.cs .chip.cs-t.pop{animation:eg-pop .3s ease-out}
.cs .chip.cs-t:disabled{opacity:.5;transform:none}

/* laborator 4: antrenament rapid */
.an-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.an-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.an-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.an-serie.aprinsa{color:var(--berry);animation:eg-pop .4s ease-out}
.an-cer{margin:10px 0 0;text-align:center;font-weight:800;color:var(--muted)}
.an-var{justify-content:center;gap:12px}
.an-var .chip{font-size:calc(19px * var(--fs));min-width:7.5em;min-height:calc(50px * var(--fs));border-width:3px}
.an-var.semn .chip{min-width:calc(64px * var(--fs));font-size:calc(28px * var(--fs));font-weight:900}

/* stația 10: semnele = < > pe plăcuțe mari */
#v-semne .task .chip{min-width:calc(60px * var(--fs));min-height:calc(50px * var(--fs));font-size:calc(26px * var(--fs));font-weight:900}

/* telefon: la laboratoare, balanța stă deasupra exercițiului */
@media (max-width:900px){ html.flow .lesson .work:has(.eg-live){order:-1} }

/* mișcare redusă (sistem): animațiile se opresc; coperta e oprită din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .eb-beam,.eb-pan,.an-bar i{transition:none!important}
  .eg-scor,.eg-egal.plin,.rp-gata span,.ba-b.eg-bad,.cs-t.pop,.an-serie{animation:none!important}
}

/* Butonul „Verifică” din bara de jos este ascuns; verificarea se deschide din cuprins sau după ultima stație. */
.bottom #checkBtn{display:none!important}


/* ===== aliniere comună (lecțiile refăcute): fără suprapuneri de butoane și text ===== */
/* plasă de siguranță: dacă o stație e mai înaltă decât scena, se derulează în interior, nu intră sub bara de jos */
html:not(.flow) .view.on{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
/* ordonare: toate cartonașele pe un rând, loc pentru bulina cu numărul, textul rămâne în cartonaș */
.task .order{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:10px;margin-top:16px}
.task .order .ocard{min-width:0;padding:10px 6px 8px;overflow-wrap:anywhere;hyphens:auto}
.task .order .oc-emoji{font-size:2.1em;line-height:1.1}
.task .order .ocard .lab{font-size:calc(14px * var(--fs));line-height:1.2}
.task .order .ocard .more{font-size:calc(12px * var(--fs));line-height:1.2;color:var(--muted)}
.task .order .ocard .badge{top:-14px;left:-8px}
html.flow .task .order{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
/* perechi: bulina cu numărul stă pe același rând cu textul, deci butonul nu crește după rezolvare */
.perechi .chip{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.perechi .chip[data-p]::after{flex:0 0 22px}
/* rânduri de butoane: se rup pe rândul următor în loc să se calce */
.grp,.chips,.actions{flex-wrap:wrap;row-gap:10px}
.chip,.btn{max-width:100%}
.btn{white-space:normal}