/* aplicatie.css — stiluri proprii lecției „Calculează restul, prețul sau plata” (doar variabile de culoare). */

/* ---------- planșe desenate ---------- */
.plate .rp-pl-c{background:var(--card);color:var(--ink);border-radius:12px;padding:16px;font-weight:800;text-align:center;width:100%;box-sizing:border-box}
.rp-f{margin:12px 0 0;font-size:calc(19px * var(--fs));line-height:1.35}
.rp-f b{color:var(--leaf-deep)}
.rp-ok{color:var(--leaf-deep);font-size:1.2em}
/* culorile celor trei sume, aceleași peste tot */
.rp-k-pr{color:var(--sky)} .rp-k-pl{color:var(--leaf-deep)} .rp-k-rs{color:var(--berry)}
.rp-tag{display:inline-flex;align-items:center;border:2px solid currentColor;border-radius:10px;padding:2px 10px;background:var(--card)}

/* monede și bancnote (SVG generic): culorile vin din stil */
.rp-m,.rp-b{display:block;height:auto;flex:0 0 auto}
.rp-m{width:calc(52px * var(--fs))}
.rp-b{width:calc(86px * var(--fs))}
.rp-ex{stroke-width:3}
.rp-in{fill:none;stroke-width:1.5;stroke-dasharray:3 3;opacity:.7}
.rp-o{fill:none;stroke-width:2;opacity:.6}
.rp-v,.rp-u{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;text-anchor:middle;fill:var(--ink)}
.rp-v{font-size:22px}
.rp-u{font-size:10px}
.rp-b .rp-v{font-size:24px}
.rp-b .rp-u{font-size:11px}
.rp-m1 .rp-ex{fill:var(--sun-tint);stroke:var(--sun-edge)} .rp-m1 .rp-in{stroke:var(--sun-edge)}
.rp-m5 .rp-ex{fill:var(--berry-tint);stroke:var(--berry)} .rp-m5 .rp-in{stroke:var(--berry)}
.rp-m10 .rp-ex{fill:var(--sky-tint);stroke:var(--sky)} .rp-m10 .rp-in{stroke:var(--sky)}
.rp-m50 .rp-ex{fill:var(--sun);stroke:var(--sun-edge)} .rp-m50 .rp-in{stroke:var(--sun-edge)} .rp-m50 text{fill:var(--on-sun)}
.rp-b1 .rp-ex{fill:var(--leaf-tint);stroke:var(--leaf)} .rp-b1 .rp-in,.rp-b1 .rp-o{stroke:var(--leaf)}
.rp-b5 .rp-ex{fill:var(--berry-tint);stroke:var(--berry)} .rp-b5 .rp-in,.rp-b5 .rp-o{stroke:var(--berry)}
.rp-b10 .rp-ex{fill:var(--sky-tint);stroke:var(--sky)} .rp-b10 .rp-in,.rp-b10 .rp-o{stroke:var(--sky)}
.rp-b20 .rp-ex{fill:var(--sun-tint);stroke:var(--berry)} .rp-b20 .rp-in,.rp-b20 .rp-o{stroke:var(--berry)}
.rp-b50 .rp-ex{fill:var(--sun-tint);stroke:var(--sun-edge)} .rp-b50 .rp-in,.rp-b50 .rp-o{stroke:var(--sun-edge)}
.rp-b100 .rp-ex{fill:var(--leaf);stroke:var(--leaf-deep)} .rp-b100 .rp-in,.rp-b100 .rp-o{stroke:var(--on-leaf)} .rp-b100 text{fill:var(--on-leaf)}

/* ---------- modelul-bandă: plata sus, prețul | restul jos; fiecare segment are aceeași înălțime ---------- */
.rp-banda{display:flex;flex-direction:column;gap:6px;width:100%}
.rp-r{display:flex;gap:0;align-items:stretch}
.rp-s{flex:1 1 0;min-width:0;box-sizing:border-box;min-height:calc(62px * var(--fs));display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid;padding:4px 6px;line-height:1.1;transition:background .35s,box-shadow .35s}
.rp-s small{font-size:calc(13px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.rp-s b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));white-space:nowrap}
.rp-pl{border-radius:12px;border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.rp-pr{border-radius:12px 0 0 12px;border-color:var(--sky);background:var(--sky-tint);color:var(--sky);border-right-style:dashed}
.rp-rs{border-radius:0 12px 12px 0;border-color:var(--berry);background:var(--berry-tint);color:var(--berry);border-left-width:0}
.rp-s.rp-lips{background:var(--sun);border-color:var(--sun-edge);color:var(--on-sun);border-style:solid;animation:rp-lum 1.6s ease-in-out infinite}
.rp-s.rp-lips b{font-size:calc(30px * var(--fs))}
@keyframes rp-lum{0%,100%{box-shadow:0 0 0 0 var(--sun)}50%{box-shadow:0 0 0 7px var(--sun-tint)}}
.rp-mic .rp-s{min-height:calc(34px * var(--fs));padding:2px 4px}
.rp-mic .rp-s small{font-size:calc(11px * var(--fs))}
.rp-mic{gap:3px}

/* copertă */
.rp-cov{padding:22px 16px!important}
.rp-cov .rp-s{min-height:calc(78px * var(--fs))}
.rp-cov .rp-s b{font-size:calc(30px * var(--fs))}
.rp-cov-f{font-size:calc(26px * var(--fs));font-family:"Baloo 2",system-ui,sans-serif;color:var(--ink)}

/* stația 1: la casă — fiecare rând: emoji, text, desen, etichetă, toate pe aceeași linie */
.rp-casa{display:flex;flex-direction:column;gap:12px}
.rp-casa-r{display:grid;grid-template-columns:2.2em 7.5em 1fr auto;align-items:center;gap:10px;text-align:left;font-size:calc(18px * var(--fs))}
.rp-casa-e{font-size:1.7em;line-height:1}
.rp-casa-b{display:flex;gap:4px}
.rp-casa .rp-b{width:calc(70px * var(--fs))}
.rp-casa-b .rp-b{width:calc(52px * var(--fs))}
.rp-casa .rp-tag{justify-self:end}

/* stația 4: axa numerică „numără în sus” */
.rp-axa{width:100%;height:auto;display:block}
.rp-ax-l{stroke:var(--ink);stroke-width:3}
.rp-ax-h1,.rp-ax-h2{fill:none;stroke-width:4;stroke-linecap:round}
.rp-ax-h1{stroke:var(--sun-edge)} .rp-ax-h2{stroke:var(--berry)}
.rp-ax-e1,.rp-ax-e2,.rp-ax-n{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;text-anchor:middle}
.rp-ax-e1{fill:var(--sun-ink);font-size:20px} .rp-ax-e2{fill:var(--berry);font-size:24px}
.rp-ax-n{fill:var(--ink);font-size:22px}
.rp-ax-p{fill:var(--sky)} .rp-ax-fin{fill:var(--leaf)}
/* pașii animației: data-f = 0…3; starea 3 este completă (și fără animații) */
.rp-anim :is(.ap1,.ap2,.ap3){opacity:0;transition:opacity .45s}
.rp-anim:is([data-f="1"],[data-f="2"],[data-f="3"]) .ap1{opacity:1}
.rp-anim:is([data-f="2"],[data-f="3"]) .ap2{opacity:1}
.rp-anim[data-f="3"] .ap3{opacity:1}

/* stația 5: numărarea cu monede — sumele au aceeași lățime, monedele stau centrate pe rând */
.rp-nc{padding:12px 8px!important}
.rp-nc-t{margin:0 0 8px;font-size:calc(16px * var(--fs))}
.rp-nc-r{display:grid;grid-template-columns:2.6em .8em calc(60px * var(--fs)) .9em 2.9em;align-items:center;justify-content:center;justify-items:center;gap:4px;margin:4px 0}
.rp-nc-s{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(19px * var(--fs))}
.rp-nc-a{color:var(--muted);font-size:calc(18px * var(--fs))}
.rp-nc .rp-m{width:calc(38px * var(--fs))}
.rp-nc .rp-b{width:calc(60px * var(--fs))}
.rp-nc .rp-f{font-size:calc(17px * var(--fs))}

/* stația 8: trei benzi mici */
.rp-trei{display:flex;flex-direction:column;gap:12px}
.rp-trei-r{display:grid;grid-template-columns:1fr 10.5em;gap:12px;align-items:center}
.rp-trei-r p{margin:0;text-align:left;font-size:calc(16px * var(--fs));line-height:1.3}
.rp-op{display:inline-block;margin-top:2px;background:var(--sky-tint);color:var(--ink);border-radius:8px;padding:1px 8px}
.rp-op-p{background:var(--leaf-tint)}

/* stația 10: bancnotele, cu etichetele exact sub fiecare */
.rp-bn{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;align-items:start}
.rp-bn-c{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:calc(14px * var(--fs));line-height:1.2}
.rp-bn-c .rp-b{width:100%;max-width:calc(96px * var(--fs))}
.rp-nu{opacity:.55} .rp-nu span{color:var(--berry)}
.rp-da span{color:var(--leaf-deep)}
.rp-da .rp-b{outline:4px solid var(--leaf);outline-offset:3px;border-radius:8px}

/* stația 8 (sortare): problemele pe toată lățimea, butoanele aliniate la dreapta, pe un singur rând */
.pool .pool-item{width:100%;box-sizing:border-box;line-height:1.3}
.pool .pool-item button{white-space:nowrap;flex:0 0 auto;min-width:5.6em;padding:7px 10px}
.pool .pool-item .to-v{margin-left:auto}

/* ---------- laboratoarele „casa” și „lipsa” au nevoie de loc: coloana cu exercițiul este mai lată ---------- */
html:not(.flow) .lesson:has(.cs),html:not(.flow) .lesson:has(.lp){grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}

/* ---------- laborator 1: casa de marcat ---------- */
.cs-top,.lp-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))}
.cs-cl{color:var(--ink)}
.cs-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:stretch;margin-top:6px}
.cs-bon{border:2px dashed var(--line);border-radius:12px;padding:8px 12px;background:var(--card);color:var(--ink)}
.cs-l{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0;font-weight:800;font-size:calc(17px * var(--fs));min-height:calc(44px * var(--fs))}
.cs-l b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs))}
.cs-bn{width:calc(78px * var(--fs))!important}
.cs-side{display:flex;flex-direction:column;justify-content:center;gap:4px}
.cs-ax{display:flex;align-items:center;gap:8px;font-weight:800;font-size:calc(15px * var(--fs))}
.cs-ax-a{color:var(--sky)} .cs-ax-b{color:var(--leaf-deep)}
.cs-ax-bar{flex:1;height:14px;background:var(--line);border-radius:99px;overflow:hidden}
.cs-ax-bar i{display:block;height:100%;width:0;background:var(--berry);transition:width .35s}
.cs-nr{margin:0;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink)}
.cs-sum{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));color:var(--leaf-deep)}
.cs-sum.peste{color:var(--berry)}
.cs-lant{margin:0;font-weight:700;font-size:calc(14px * var(--fs));color:var(--muted);min-height:1.3em}
.cs-rest{display:flex;align-items:center;gap:10px;margin:8px 0 6px;padding:6px 10px;border:2px solid var(--berry);border-radius:12px;background:var(--berry-tint);min-height:calc(58px * var(--fs));box-sizing:border-box}
.cs-et{font-weight:800;color:var(--berry);white-space:nowrap}
.cs-it{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-gl{color:var(--muted);font-weight:700}
.cs-w,.cs-d{position:relative;background:none;border:0;padding:2px;cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center}
.cs-w .rp-m{width:calc(40px * var(--fs))} .cs-w .rp-b{width:calc(66px * var(--fs))}
.cs-w{gap:3px}
.cs-x{background:var(--ink);color:var(--card);border-radius:99px;padding:0 6px;font-size:calc(13px * var(--fs));line-height:1.4}
.cs-nou{animation:rp-pop .35s ease-out}
/* sertarul casei: plăcuțe mari, la aceeași înălțime */
.cs-pal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.cs-d{min-height:calc(62px * var(--fs));min-width:calc(62px * var(--fs));background:var(--card);border:3px solid var(--stripe);box-shadow:0 4px 0 var(--stripe);padding:4px 6px}
.cs-d:hover{transform:translateY(-2px);border-color:var(--sky)}
.cs-d:active{transform:translateY(2px);box-shadow:0 1px 0 var(--stripe)}
.cs-d .rp-m{width:calc(46px * var(--fs))} .cs-d .rp-b{width:calc(74px * var(--fs))}
.cs-d:disabled{opacity:.5;transform:none}
.cs-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)}
.cs-msg{flex:1;margin:0;text-align:center;font-weight:800;color:var(--leaf-deep);min-width:8em}

/* ---------- laborator 2: ce lipsește? ---------- */
.lp-q{margin:6px 0 8px;font-weight:800;font-size:calc(19px * var(--fs));color:var(--ink);line-height:1.35}
.lp-band{background:var(--card);border-radius:12px;padding:10px;border:2px solid var(--line)}
.lp-c{margin:10px 0 6px;font-weight:800;color:var(--ink);font-size:calc(17px * var(--fs))}
.lp-ops{justify-content:center;gap:12px}
.lp .lp-ops .chip{min-height:calc(52px * var(--fs));min-width:9em;font-size:calc(19px * var(--fs));font-weight:800;border:3px solid var(--stripe);box-shadow:0 5px 0 var(--stripe);justify-content:center}
.lp-scut{animation:rp-shake .45s}
.lp-in{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:12px}
.lp-calc{font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink)}
.lp-f{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--ink);font-size:calc(17px * var(--fs))}
.lp-n{width:4.2em;height:calc(48px * var(--fs));box-sizing:border-box;font:inherit;font-size:calc(22px * var(--fs));text-align:center;border:3px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.lp-n:focus{outline:none;border-color:var(--sky)}
.lp-in .verif{margin-left:8px}
.lp-act{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:10px}
.lp-ver{margin:10px 0 0;font-weight:800;color:var(--leaf-deep);font-size:calc(18px * var(--fs));text-align:center}
.lp-act .lp-ver{margin:0}

/* ---------- laborator 3: 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:rp-pop .4s ease-out}
.an-q{font-size:calc(22px * var(--fs));font-weight:800;margin:12px 0;color:var(--ink);text-align:center;line-height:1.35}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(18px * var(--fs));min-width:7em;justify-content:center}
.an-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800}
.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:rp-pop .5s}

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

/* fără animații (accesibilitate) și mișcare redusă: partea lipsă rămâne luminată, dar nu mai pulsează */
html.a-still .rp-s.rp-lips,html.a-still .cs-nou,html.a-still .lp-scut,html.a-still .an-scor,html.a-still .an-serie{animation:none!important}
html.a-still .rp-anim :is(.ap1,.ap2,.ap3){opacity:1!important}
@media (prefers-reduced-motion: reduce){
  .rp-s.rp-lips,.cs-nou,.lp-scut,.an-scor,.an-serie{animation:none!important}
  .rp-anim :is(.ap1,.ap2,.ap3){opacity:1!important}
}

/* telefon: coloanele se așază una sub alta */
html.flow .cs-row{grid-template-columns:1fr}
html.flow .rp-trei-r{grid-template-columns:1fr}
html.flow .rp-casa-r{grid-template-columns:1.6em minmax(0,1fr) auto auto;gap:6px;font-size:calc(15px * var(--fs))}
html.flow .rp-casa .rp-b{width:calc(56px * var(--fs))}
html.flow .rp-casa-b{gap:2px}
html.flow .rp-casa-b .rp-b{width:calc(36px * var(--fs))}
html.flow .rp-casa .rp-tag{padding:1px 6px}

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