/* aplicatie.css — stiluri proprii lecției „Estimează diferențe” (doar variabile de culoare).
   Toate clasele proprii au prefixul ax- / ec- / ed- / rs- / or- / rz- / an- / eb- / em-, ca să nu se amestece cu edulogia.css. */

/* ---------- planșe desenate ---------- */
.plate .ax-wrap,.plate .ed-cifre,.plate .ed-tab,.plate .ed-acel,.plate .ed-bara,.plate .ed-munti{
  background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font-weight:800}

/* ---------- axa numerelor (edAxa / edVecini din js/date.js) ----------
   .pa = descăzutul (albastru), .pb = scăzătorul (roșu); .ax-m este punctul care se mută la vecinul rotund. */
.ax-svg{display:block;width:100%;height:auto;font-family:var(--f-body);overflow:visible}
.ax-line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.ax-tk{stroke:var(--ink);stroke-width:2}
.ax-tk.mic{stroke:var(--muted);stroke-width:1.5}
.ax-tkr{stroke:var(--muted);stroke-width:3}
.ax-n{font-size:15px;font-weight:800;fill:var(--muted);transition:fill .4s}
.ax-n.mid{fill:var(--leaf-deep)}
.ax-mid{font-size:12px;font-weight:800;fill:var(--muted)}
.ax-v{font-size:18px;font-weight:900}
.pa .ax-v,.ax-pt.pa circle{fill:var(--sky)}
.pb .ax-v,.ax-pt.pb circle{fill:var(--berry)}
.ax-pt .ax-ghost{fill:var(--card)!important;stroke-width:2.5;stroke-dasharray:3 3}
.pa .ax-ghost{stroke:var(--sky)} .pb .ax-ghost{stroke:var(--berry)}
.ax-m{transition:transform .9s ease-in-out}
.ax-arc{fill:none;stroke-linecap:round}
.ax-ex{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:7 6}
.ax-es{stroke:var(--leaf);stroke-width:5}
.ax-lab{font-size:17px;font-weight:900}
.ax-lex{fill:var(--ink)}
.ax-les{fill:var(--leaf-deep)}
.ax-zj{fill:var(--berry-tint)} .ax-zs{fill:var(--leaf-tint)}
.ax-zt{font-size:16px;font-weight:900}
.ax-zt.j{fill:var(--berry)} .ax-zt.s{fill:var(--leaf-deep)}
/* arcul exact și arcul estimat apar doar când trebuie */
.ax-exg{opacity:0;transition:opacity .4s}
.ax-esg{opacity:0;transition:opacity .5s .55s}
.ax-anim .ax-exg,.ex-on .ax-exg{opacity:1}
.ax-r .ax-esg,.es-on .ax-esg{opacity:1}
/* punctele se mută la vecinii rotunzi: toate odată (ax-r) sau pe rând, în laborator (pa-r, pb-r) */
.ax-r .ax-m,.pa-r .pa .ax-m,.pb-r .pb .ax-m{transform:translateX(var(--dx))}
.ax-r .ax-n.ra,.pa-r .ax-n.ra{fill:var(--sky)}
.ax-r .ax-n.rb,.pb-r .ax-n.rb{fill:var(--berry)}
.ax-r .ax-tkr.ra,.pa-r .ax-tkr.ra{stroke:var(--sky)}
.ax-r .ax-tkr.rb,.pb-r .ax-tkr.rb{stroke:var(--berry)}
/* ecuația de sub axa de pe copertă: același ceas o schimbă odată cu punctele */
.ax-frz{margin:2px 0 0;text-align:center;font-family:var(--f-display);font-size:calc(24px * var(--fs));color:var(--ink);min-height:1.4em}
.ax-frz b{color:var(--leaf-deep)}
.ax-frz .f-es{display:none}
.ax-r .ax-frz .f-q{display:none}
.ax-r .ax-frz .f-es{display:inline}
/* fără animații: se vede starea completă (ecuația întreagă, ambele arce, cercurile punctate la locul exact) */
.ax-static .ax-m,.ax-static .ax-esg,.ax-static .ax-exg,.ax-static .ax-n{transition:none!important}
html.a-still .ax-m,html.a-still .ax-esg,html.a-still .ax-exg{transition:none!important}

/* stația 2: cifrele care decid */
.ed-cifre{text-align:center}
.ec-rand{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.ec-rand span{font-family:var(--f-display);font-size:calc(30px * var(--fs));border-radius:10px;padding:4px 0;line-height:1.2}
.ec-rand .j{background:var(--berry-tint);color:var(--berry)}
.ec-rand .s{background:var(--leaf-tint);color:var(--leaf-deep)}
.ec-rand .cinci{outline:3px solid var(--leaf);outline-offset:-3px}
.ec-et{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px;font-size:calc(18px * var(--fs))}
.ec-et .j,.ec-ex .j{color:var(--berry)} .ec-et .s,.ec-ex .s{color:var(--leaf-deep)}
.ec-ex{margin:14px 0 0;font-size:calc(19px * var(--fs))}
.ec-ex b{color:var(--sun-ink)}

/* stația 3: tabelul rotunjirilor */
.ed-tab{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center;font-size:calc(22px * var(--fs))}
.ed-tab .h{color:var(--muted);font-size:calc(15px * var(--fs))}
.ed-tab .h:first-child{font-family:var(--f-display);font-size:calc(24px * var(--fs));color:var(--ink)}
.ed-tab span{text-align:center}
.ed-tab span:nth-child(3n+1){text-align:left;color:var(--muted)}
.ed-tab u{text-decoration:none;border-bottom:4px solid var(--berry);color:var(--berry)}
.ed-tab b{background:var(--leaf-tint);color:var(--leaf-deep);border-radius:10px;padding:2px 12px;text-align:center}

/* stația 6: aceeași estimare */
.ed-acel p{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0;font-size:calc(22px * var(--fs))}
.ed-acel span{background:var(--sun-tint);border-radius:10px;padding:2px 10px}
.ed-acel p span:last-child{background:var(--leaf-tint);color:var(--leaf-deep)}
.ed-acel i{font-style:normal;color:var(--muted)}
.ed-acel .tot{font-family:var(--f-display);font-size:calc(30px * var(--fs));color:var(--leaf-deep)}

/* stația 11: bara „cât mai e până la” */
.ed-bara{text-align:center}
.eb-tot{margin:0 0 6px;font-size:calc(20px * var(--fs))}
.eb-tot small,.eb-bar small{color:var(--muted);font-size:.8em}
.eb-bar{display:flex;height:calc(58px * var(--fs));border:3px solid var(--ink);border-radius:12px;overflow:hidden}
.eb-bar span{display:flex;align-items:center;justify-content:center;gap:6px;font-size:calc(17px * var(--fs))}
.eb-cit{flex:189;background:var(--sky-tint);color:var(--ink)}
.eb-rest{flex:223;background:var(--sun-tint);color:var(--sun-ink);border-left:3px dashed var(--ink)}
.eb-op{margin:10px 0 0;font-family:var(--f-display);font-size:calc(26px * var(--fs))}
.eb-op b{color:var(--leaf-deep)}

/* stația 12: doi munți */
.ed-munti svg{display:block;width:100%;height:auto;max-height:calc(190px * var(--fs))}
.em-m1{fill:var(--sky-tint);stroke:var(--sky);stroke-width:3;stroke-linejoin:round}
.em-m2{fill:var(--leaf-tint);stroke:var(--leaf);stroke-width:3;stroke-linejoin:round}
.em-l{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4}
.em-d{stroke:var(--berry);stroke-width:4;stroke-linecap:round}
.em-t{font-size:16px;font-weight:900;fill:var(--berry)}
.em-et{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:calc(15px * var(--fs));color:var(--muted)}
.em-et b{color:var(--ink);font-size:calc(19px * var(--fs))}
.em-op{margin:6px 0 0;text-align:center;font-family:var(--f-display);font-size:calc(24px * var(--fs))}
.em-op b{color:var(--leaf-deep)}

/* ---------- scăderea în coloană (școala românească) ----------
   o coloană pe ordin + o coloană pentru semn, la DREAPTA primului număr; linia sub al doilea număr */
.ec-col{--w:1.05em;display:inline-grid;grid-template-columns:repeat(var(--n),var(--w)) var(--w);
  font-family:var(--f-display);font-weight:800;font-size:calc(36px * var(--fs));line-height:1.12;font-variant-numeric:tabular-nums;color:var(--ink)}
.ec-col>span{display:flex;align-items:center;justify-content:center;min-width:0}
.ec-h{font-size:.42em;font-weight:900;padding:2px 0;border-radius:6px 6px 0 0}
.ec-h.ec-o0{color:var(--leaf-deep);background:var(--leaf-tint)}
.ec-h.ec-o1{color:var(--sky);background:var(--sky-tint)}
.ec-h.ec-o2{color:var(--berry);background:var(--berry-tint)}
.ec-col .ec-h:empty{background:none}
.ec-semn{color:var(--berry)}
.ec-r{border-top:4px solid var(--ink);min-height:1.12em}
.ec-col .ec-mii{padding-right:.12em}

/* ---------- laboratoarele: primesc mai mult loc, planșa rămâne mică (doar pe scenă) ---------- */
html:not(.flow) .view:has(.ed-lab) .lesson{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}
html:not(.flow) .view:has(.ed-lab) .emoji-plansa{font-size:4.6em;padding:8px 0}
.ed-lab{display:grid;gap:8px}
.ed-top,.an-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.ed-ord{color:var(--sky)}
.ed-msg{margin:0;min-height:1.4em;text-align:center;font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs))}
.ed-msg.bine{color:var(--leaf-deep)} .ed-msg.rau{color:var(--berry)}
.ed-msg b{color:var(--leaf-deep)}
/* plăcuțele de răspuns: mari, la fel, cu starea „ales” clară */
.ed-opt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ed-lab .ed-opt .chip.ed-t{display:inline-flex;align-items:center;justify-content:center;min-width:calc(92px * var(--fs));min-height:calc(48px * var(--fs));padding:4px 16px;font-family:var(--f-display);font-size:calc(21px * var(--fs));font-weight:800;color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer}
.ed-lab .ed-opt .chip.ed-t:hover{transform:translateY(-2px)}
.ed-lab .ed-opt .chip.ed-t.ales{background:var(--sky);border-color:var(--sky);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.ed-lab .ed-opt .chip.ed-t.good{background:var(--leaf-tint);border-color:var(--leaf);color:var(--leaf-deep);box-shadow:0 5px 0 var(--leaf)}
.ed-lab .ed-opt .chip.ed-t.bad{background:var(--berry-tint);border-color:var(--berry);color:var(--berry);box-shadow:0 5px 0 var(--berry)}
.ed-lab .ed-opt .chip.ed-t:disabled{cursor:default;transform:none}
.ed-lab .ed-opt .chip.ed-t:disabled:not(.good):not(.bad):not(.ales){opacity:.5}
.ed-lab .ed-opt .chip.ed-t.rau{animation:ed-shake .45s}
/* butoanele de jos: separate de plăcuțe */
.ed-act{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:2px dashed var(--line);min-height:calc(52px * var(--fs))}
.ed-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.ed-final{text-align:center}
.ed-final .ed-act{justify-content:center}
.ed-scor{font-family:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:ed-pop .5s}
@keyframes ed-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes ed-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* laborator 1: rotunjește și scade */
.rs-ec{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-family:var(--f-display);font-size:calc(26px * var(--fs));color:var(--ink)}
.rs-ec i{font-style:normal;color:var(--muted)}
.rs-s{display:inline-flex;align-items:center;justify-content:center;min-width:3.4em;height:1.5em;border:3px dashed var(--muted);border-radius:12px;color:var(--muted);padding:0 6px}
.rs-s.plin{border-style:solid;border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep);animation:ed-pop .35s ease-out}
.rs-ax,.or-ax{border:2px solid var(--line);border-radius:12px;padding:2px 8px;background:var(--card)}
.rs-ax .ax-svg,.or-ax .ax-svg{max-height:calc(170px * var(--fs));margin:0 auto}
.ed-lab .ed-opt:empty,.ed-lab .ed-act:empty,.rs-q:empty{display:none}
.rs-q{margin:0;text-align:center;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink);min-height:1.4em}
.rs-q b{color:var(--sky)}

/* laborator 2: alege ordinul */
.or-rand{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.or-et{font-weight:800;color:var(--muted)}
.or-ax{min-height:calc(120px * var(--fs));display:flex;align-items:center;justify-content:center}
.or-ax .ax-svg{width:100%}
.or .ed-msg:empty,.rs .ed-msg:empty{display:none}
.or-ax .ax-svg{max-height:calc(148px * var(--fs))}
.or-gol{margin:0;color:var(--muted);font-weight:800}
.or-ec{margin:0;text-align:center;font-family:var(--f-display);font-size:calc(24px * var(--fs));color:var(--ink)}
.or-ec b{color:var(--leaf-deep)}

/* laborator 3: e rezonabil? */
.rz-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.rz-caiet{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 14px;display:grid;justify-items:center;gap:4px}
.rz-cine{margin:0;font-weight:800;color:var(--muted);font-size:calc(15px * var(--fs))}
.rz-dr{display:grid;gap:12px}
.rz-q{margin:0;text-align:center;font-weight:800;font-size:calc(20px * var(--fs));color:var(--ink)}
.rz-opt .chip.ed-t{min-width:calc(170px * var(--fs))!important}
html.flow .rz-main{grid-template-columns:minmax(0,1fr)}

/* laborator 4: antrenament rapid */
.an-bar{flex:1;min-width:60px;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:ed-pop .4s ease-out}
.an-q{font-size:calc(24px * var(--fs));font-weight:800;margin:10px 0;color:var(--ink);text-align:center}
.an-msg{min-height:2.8em}

/* mișcare redusă (sistem): animațiile se opresc; axele animate sunt oprite din js/aplicatie.js pe starea completă */
@media (prefers-reduced-motion: reduce){
  .ax-m,.ax-esg,.ax-exg,.ax-n,.an-bar i{transition:none!important}
  .rs-s.plin,.ed-scor,.an-serie,.ed-t{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}