/* aplicatie.css — stiluri proprii lecției „Estimări cu operații mixte” (doar variabile de culoare). */

/* ---------- planșe desenate ---------- */
.plate .cov-est,.plate .rz,.plate .sl-card,.plate .op,.plate .dp,.plate .mm,.plate .rs,.plate .ln,.plate .rp-pl,.plate .ab-pl{
  background:var(--card);color:var(--ink);border-radius:12px;padding:12px 14px;font-weight:800}
.cv-t{margin:0 0 2px;font-size:calc(17px * var(--fs));line-height:1.3;text-align:center;color:var(--ink)}
.cv-t b{color:var(--berry)}

/* axa cu saltul: numărul (punct roșu) sare pe arc la vecinul rotund (cerc verde) */
svg.sl{display:block;width:100%;height:auto;overflow:visible;font-family:"Nunito",system-ui,sans-serif}
.sl-ax{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sl-head{fill:var(--ink)}
.sl-tk{stroke:var(--muted);stroke-width:2}
.sl-tk.m{stroke:var(--ink);stroke-width:3.5}
.sl-tk.j{stroke:var(--sun-edge);stroke-width:3;stroke-dasharray:3 3}
.sl-mid{fill:var(--muted);font-size:15px;font-weight:800;text-anchor:middle}
.sl-lab{fill:var(--ink);font-size:23px;font-weight:900;text-anchor:middle}
.sl-lab.tinta{fill:var(--leaf-deep)}
.sl-land{fill:none;stroke:var(--leaf);stroke-width:5}
.sl-arc{fill:none;stroke:var(--sun-edge);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.sl-varf{fill:var(--sun-edge)}
.sl-dot{fill:var(--berry);stroke:var(--card);stroke-width:3}
.sl-n{fill:var(--berry);font-size:22px;font-weight:900;text-anchor:middle}
/* animația pornește doar când svg-ul primește clasa „go” (la desenare sau când se deschide stația) */
.sl.go .sl-arc{animation:sl-arc .75s ease-in-out both}
.sl.go .sl-varf{animation:sl-ap .2s .7s both}
.sl.go .sl-land{animation:sl-land .45s .7s both;transform-box:fill-box;transform-origin:center}
.sl.go .sl-lab.tinta{animation:sl-ap .3s .75s both}
@keyframes sl-arc{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sl-ap{from{opacity:0}to{opacity:1}}
@keyframes sl-land{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:none}}

/* două coloane: estimarea (≈) și calculul exact (=) */
.co{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.co-col{border-radius:12px;padding:8px 10px;border:3px solid var(--line);text-align:center;min-width:0}
.co-col.est{border-color:var(--sun);background:var(--sun-tint)}
.co-col.ex{border-color:var(--sky);background:var(--sky-tint)}
.co-col.gol{opacity:.55}
.co-t{margin:0 0 4px;font-size:calc(14px * var(--fs));color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.co-r{margin:2px 0;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(20px * var(--fs));line-height:1.2;white-space:nowrap}
.co-rez{margin:6px 0 0;padding-top:4px;border-top:2px dashed var(--line);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));line-height:1.1}
.co-col.est .co-rez{color:var(--sun-ink)}
.co-col.ex .co-rez{color:var(--sky)}
.co-ok{margin:8px 0 0;text-align:center;color:var(--leaf-deep);font-size:calc(15px * var(--fs))}
.co-ok.ascuns{visibility:hidden}

/* stația 2: tabelul rotunjirilor */
.rz p{display:grid;grid-template-columns:4.2em 1fr 1.4fr 1fr;align-items:center;gap:8px;margin:6px 0;padding:6px 10px;border-radius:10px}
.rz-h{color:var(--muted);font-size:calc(13px * var(--fs));padding-top:0!important;padding-bottom:0!important}
.rz-r{font-size:calc(17px * var(--fs))}
.rz-r.z{background:var(--sun-tint)} .rz-r.s{background:var(--sky-tint)} .rz-r.m{background:var(--leaf-tint)} .rz-r.jos{background:var(--berry-tint)}
.rz-r b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(23px * var(--fs));white-space:nowrap}
.rz-r u{color:var(--berry);text-decoration-thickness:3px}
.rz-r i{font-style:normal;color:var(--muted);font-size:calc(15px * var(--fs))}
.rz-d{color:var(--leaf-deep);text-align:right}

/* stația 5: cuvintele-cheie și operațiile */
.op p{display:flex;align-items:center;gap:12px;margin:8px 0;padding:8px 12px;border-radius:12px;font-size:calc(18px * var(--fs))}
.op b{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:calc(44px * var(--fs));height:calc(44px * var(--fs));border-radius:12px;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));background:var(--card);border:3px solid var(--line)}
.op u{text-decoration-thickness:3px;text-decoration-color:var(--berry)}
.op-r.i{background:var(--sun-tint)} .op-r.s{background:var(--berry-tint)} .op-r.a{background:var(--leaf-tint)} .op-r.d{background:var(--sky-tint)}

/* stația 6: lanțul în doi pași */
.dp{text-align:center}
.dp-t{margin:0 0 10px;font-size:calc(18px * var(--fs))}
.dp-t b{color:var(--berry)}
.dp-lant{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.dp-p{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(64px * var(--fs));padding:4px 12px;border-radius:12px;border:3px solid var(--line);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));white-space:nowrap}
.dp-p small{font-family:"Nunito",system-ui,sans-serif;font-size:calc(12px * var(--fs));color:var(--muted);line-height:1}
.dp-p.p1{border-color:var(--sun);background:var(--sun-tint)} .dp-p.p2{border-color:var(--sky);background:var(--sky-tint)}
.dp-lant i{font-style:normal;color:var(--muted);font-size:calc(24px * var(--fs))}
.dp-r{margin:12px 0 0;font-size:calc(22px * var(--fs))}
.dp-r b{color:var(--leaf-deep)}

/* stația 8: mai mult sau mai puțin */
.mm-r{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;margin:10px 0;padding:12px;border-radius:12px;font-size:calc(19px * var(--fs))}
.mm-r.jos{background:var(--sky-tint)} .mm-r.sus{background:var(--sun-tint)}
.mm-r b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));white-space:nowrap}
.mm-r i{font-style:normal;color:var(--muted)}
.mm-r span{white-space:nowrap}
.mm-r em{font-style:normal;color:var(--berry);white-space:nowrap}

/* stația 9: are sens? */
.rs-q{margin:0 0 10px;text-align:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs))}
.rs-q b{color:var(--sun-ink)}
.rs-r{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:10px 14px;border-radius:12px;font-size:calc(17px * var(--fs))}
.rs-r span{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));white-space:nowrap}
.rs-r em{font-style:normal}
.rs-r.da{background:var(--leaf-tint)} .rs-r.da em{color:var(--leaf-deep)}
.rs-r.nu{background:var(--berry-tint)} .rs-r.nu em{color:var(--berry)}

/* stația 12: lanțul cu „≈” */
.ln{text-align:center}
.ln-r{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.ln-b{display:inline-flex;align-items:center;height:calc(54px * var(--fs));padding:0 12px;border-radius:12px;border:3px solid var(--line);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));white-space:nowrap}
.ln-b.c{border-color:var(--sun);background:var(--sun-tint)}
.ln-b.r{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.ln-r i{font-style:normal;font-size:calc(28px * var(--fs));color:var(--muted)}
.ln-s{margin:10px 0 0;color:var(--muted);font-size:calc(17px * var(--fs))}
.ln-s b{color:var(--ink)}

/* ---------- laborator: rotunjește și estimează pas cu pas ---------- */
.rp-top,.ab-top,.nr-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))}
.rp-pas{color:var(--sky)}
.rp-t{margin:6px 0;font-weight:700;font-size:calc(16px * var(--fs));line-height:1.35;color:var(--ink)}
.rp-q{display:block;margin:6px 0 8px;line-height:1.5;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink)}
.rp-q b{color:var(--berry)}
.rp-gata{display:inline-block;margin-right:10px;line-height:1.3;background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:999px;padding:1px 10px;font-size:calc(14px * var(--fs))}
.rp-calc{display:inline-block;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));line-height:1.1}
.rp-calc i{font-style:normal;color:var(--berry)}
.rp-calc.fin{font-family:inherit;font-size:calc(19px * var(--fs))}
.rp-calc.fin b{color:var(--leaf-deep)}
.rp-pt,.ab-pt{margin:0;text-align:center;color:var(--muted);font-size:calc(15px * var(--fs))}
/* plăcuțele de răspuns: mari, la fel de înalte, pe un rând */
.rp-var{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-height:calc(56px * var(--fs))}
.rp .rp-var .chip.rp-o{display:inline-flex;align-items:center;justify-content:center;min-width:calc(92px * var(--fs));min-height:calc(52px * var(--fs));padding:4px 14px;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer}
.rp .rp-var .chip.rp-o:hover{transform:translateY(-2px)}
.rp .rp-var .chip.rp-o.good{background:var(--leaf);border-color:var(--leaf-deep);color:var(--on-leaf);box-shadow:0 5px 0 var(--leaf-deep)}
.rp .rp-var .chip.rp-o.bad{background:var(--berry-tint);border-color:var(--berry);color:var(--berry);animation:shake .45s}
.rp .rp-var .chip.rp-o:disabled:not(.good){opacity:.45;transform:none}
.rp-msg,.ab-msg,.nr-msg{min-height:1.4em;margin:8px 0 0;font-weight:800;font-size:calc(15px * var(--fs));line-height:1.3}
.rp-msg.bine,.ab-msg.bine,.nr-msg.bine{color:var(--leaf-deep)}
.rp-msg.rau,.ab-msg.rau{color:var(--berry)}
.rp-act,.ab-next,.nr-act{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:2px dashed var(--line)}
.rp-act[hidden],.ab-next[hidden],.nr-act [hidden]{display:none}

/* ---------- laborator: ajung banii? ---------- */
.ab-buget{margin:4px 0 4px;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink)}
.ab-buget b{color:var(--leaf-deep)}
.ab-lista{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ab-lista li{display:grid;grid-template-columns:calc(30px * var(--fs)) minmax(0,1fr) auto 6.2em;align-items:center;gap:8px;padding:2px 10px;border-radius:10px;background:var(--sky-tint);border:2px solid var(--line);font-weight:800;font-size:calc(16px * var(--fs));color:var(--ink)}
.ab-em{font-size:calc(22px * var(--fs));line-height:1}
.ab-p{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(19px * var(--fs));white-space:nowrap}
.ab-r{color:var(--sun-ink);background:var(--sun-tint);border-radius:8px;padding:0 6px;text-align:center;white-space:nowrap}
.ab-r.ascuns{visibility:hidden}
.ab-dec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ab-dec .ab-hint{margin-right:auto}
.ab .ab-dec .ab-b{display:inline-flex;align-items:center;justify-content:center;min-width:calc(130px * var(--fs));min-height:calc(54px * var(--fs));padding:4px 16px;font:inherit;font-weight:900;font-size:calc(19px * var(--fs));border-radius:14px;border:3px solid;cursor:pointer;color:var(--ink)}
.ab .ab-dec .ab-b.da{border-color:var(--leaf);background:var(--leaf-tint);box-shadow:0 5px 0 var(--leaf)}
.ab .ab-dec .ab-b.nu{border-color:var(--berry);background:var(--berry-tint);box-shadow:0 5px 0 var(--berry)}
.ab .ab-dec .ab-b:hover:not(:disabled){transform:translateY(-2px)}
.ab .ab-dec .ab-b.good{outline:4px solid var(--leaf-deep);outline-offset:2px}
.ab .ab-dec .ab-b.bad{outline:4px dashed var(--berry);outline-offset:2px}
.ab .ab-dec .ab-b:disabled:not(.good):not(.bad),.ab .ab-dec .btn:disabled{opacity:.5;box-shadow:none;transform:none;cursor:default}
/* barele din planșă: banii tăi, estimarea și totalul exact, pe aceeași scară */
.ab-bar{display:grid;grid-template-columns:5.2em minmax(0,1fr) 6.4em;align-items:center;gap:8px;margin:10px 0}
.ab-l{color:var(--muted);font-size:calc(15px * var(--fs))}
.ab-bar b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(20px * var(--fs));text-align:right;white-space:nowrap}
.ab-tr{position:relative;height:calc(26px * var(--fs));border-radius:8px;background:var(--card);border:2px solid var(--line)}
.ab-tr i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transition:width .6s ease-out}
.ab-tr i.b{background:var(--leaf)} .ab-tr i.e{background:var(--sun)} .ab-tr i.x{background:var(--sky)}
.ab-tr u{position:absolute;top:-6px;bottom:-6px;width:0;border-left:3px dashed var(--leaf-deep)}
.ab-bar.gol b{color:var(--muted)}
.ab-concl{margin:8px 0 0;text-align:center;font-size:calc(18px * var(--fs));color:var(--ink)}
.ab-concl.ascuns{visibility:hidden}

/* ---------- laborator: rezultatul nerezonabil ---------- */
.nr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.nzr .nr-grid .nr-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:calc(92px * var(--fs));padding:6px 8px;font:inherit;border:3px solid var(--sky);border-radius:14px;background:var(--sky-tint);color:var(--ink);box-shadow:0 5px 0 var(--sky);cursor:pointer}
.nzr .nr-grid .nr-c:hover:not(:disabled){transform:translateY(-2px)}
.nr-e{font-weight:800;font-size:calc(17px * var(--fs));white-space:nowrap}
.nr-r{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));line-height:1.05}
.nr-est{min-height:1.2em;font-weight:900;font-size:calc(14px * var(--fs))}
.nzr .nr-grid .nr-c.ales{border-color:var(--berry);background:var(--berry-tint);box-shadow:0 5px 0 var(--berry);transform:translateY(-3px)}
.nzr .nr-grid .nr-c.bun{border-color:var(--leaf);background:var(--leaf-tint);box-shadow:none;transform:none}
.nzr .nr-grid .nr-c.bun .nr-est{color:var(--leaf-deep)}
.nzr .nr-grid .nr-c.rau{border-color:var(--berry);background:var(--berry-tint);box-shadow:none;transform:none}
.nzr .nr-grid .nr-c.rau .nr-r{text-decoration:line-through;color:var(--berry)}
.nzr .nr-grid .nr-c.rau .nr-est{color:var(--berry)}
.nzr .nr-grid .nr-c.scutura{animation:shake .45s}
.nr-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator: 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:pop .4s ease-out}
.an-q{font-weight:800;font-size:calc(19px * var(--fs));line-height:1.35;margin:10px 0;color:var(--ink)}
.an-q.mare{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(30px * var(--fs));text-align:center}
.an-var{justify-content:center}
.an-var .chip{display:inline-flex;align-items:center;justify-content:center;font-size:calc(20px * var(--fs));min-width:6.5em;min-height:calc(50px * var(--fs));font-weight:900}
.an-msg{min-height:2.6em;margin:8px 0 0;text-align:center;font-weight:800;font-size:calc(15px * var(--fs));line-height:1.3}
.an-msg.bine{color:var(--leaf-deep)} .an-msg.rau{color:var(--berry)}
.an-final{text-align:center}
.an-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:pop .5s}

@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* fără animații: arcul, inelul și coloanele se văd complet, fără mișcare */
html.a-still .sl .sl-arc,html.a-still .sl .sl-varf,html.a-still .sl .sl-land,html.a-still .sl .sl-lab,
html.a-still .an-scor,html.a-still .an-serie,html.a-still .rp-o,html.a-still .nr-c{animation:none!important}
html.a-still .ab-tr i,html.a-still .an-bar i{transition:none!important}
@media (prefers-reduced-motion: reduce){
  .sl .sl-arc,.sl .sl-varf,.sl .sl-land,.sl .sl-lab,.an-scor,.an-serie,.rp-o,.nr-c{animation:none!important}
  .ab-tr i,.an-bar i{transition:none!important}
}

/* telefon (pagina se derulează): rândurile planșelor se rup, ca nimic să nu iasă din card */
html.flow .co{grid-template-columns:minmax(0,1fr)}
html.flow .co-r{font-size:calc(18px * var(--fs))}
html.flow .co-rez{font-size:calc(19px * var(--fs))}
html.flow .rz p{grid-template-columns:3.6em 1fr 1fr;gap:4px 8px}
html.flow .rz-r i{grid-column:2/-1;grid-row:2}
html.flow .rz-h span:nth-child(3){display:none}
html.flow .rz-r b{font-size:calc(19px * var(--fs))}
html.flow .mm-r{grid-template-columns:auto 1fr}
html.flow .mm-r i{display:none}
html.flow .mm-r span,html.flow .mm-r em{grid-column:1/-1}
html.flow .rs-r{flex-wrap:wrap}
html.flow .rs-r span{font-size:calc(20px * var(--fs))}
html.flow .ln-b,html.flow .dp-p{font-size:calc(19px * var(--fs));padding:0 8px}
html.flow .ab-lista li{grid-template-columns:calc(26px * var(--fs)) minmax(0,1fr) auto}
html.flow .ab-r{grid-column:2/-1;justify-self:start}
html.flow .ab-r.ascuns{display:none}
html.flow .ab-dec .ab-hint{flex:1 1 100%;margin-right:0}
html.flow .ab .ab-dec .ab-b{flex:1;min-width:0}
html.flow .ab-bar{grid-template-columns:4.4em minmax(0,1fr) 5.6em;gap:6px}
html.flow .ab-bar b{font-size:calc(16px * var(--fs))}
html.flow .nr-e{font-size:calc(14px * var(--fs));white-space:normal;text-align:center}
html.flow .nr-r{font-size:calc(21px * var(--fs))}

/* 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}