/* aplicatie.css — stiluri proprii lecției „Tabele de conversie metrică” (doar variabile de culoare). */

/* ---------- planșe desenate: fundal de card, ca să fie lizibile și în stilul Cald ---------- */
.plate .tcv,.plate .dw,.plate .rg,.plate .a4,.plate .vr,.plate .rgl,.plate .pt{
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px 16px;font-weight:800}

/* ---------- tabelul animat (copertă, stațiile 1, 2, 6) ----------
   Un singur ceas (js/aplicatie.js) mută săgeata pe rândul --k și aprinde numărul de pe acel rând. */
.tcv{--rh:calc(40px * var(--fs));font-size:calc(22px * var(--fs))}
.tcv-h,.tcv-r{display:grid;grid-template-columns:minmax(0,1fr) 6.4em minmax(0,1fr);align-items:center;text-align:center}
.tcv-h{font-family:"Baloo 2",system-ui,sans-serif;color:var(--leaf-deep);border-bottom:3px solid var(--line);padding-bottom:4px;margin-bottom:4px}
.tcv-reg-tag{font-family:inherit;font-size:.6em;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tcv-b{position:relative}
.tcv-r{height:var(--rh);border-radius:10px;font-variant-numeric:tabular-nums}
.tcv-r+.tcv-r{border-top:1px dashed var(--line)}
.tcv-r.reg{background:var(--sun-tint)}
.tcv-c.op{font-size:.68em;color:var(--sky);opacity:0;transition:opacity .3s}
.tcv-c.asc{opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s}
.tcv-r.vazut .tcv-c.asc{opacity:1;transform:none}
.tcv-r.vazut .tcv-c.op{opacity:.45}
.tcv-r.acum .tcv-c.op{opacity:0}
.tcv-r.acum .tcv-c.asc{color:var(--berry)}
/* săgeata care coboară */
.tcv-sag{position:absolute;left:50%;top:calc(var(--k,0) * var(--rh) + var(--rh) / 2);transform:translate(-50%,-50%);
  background:var(--sky);color:var(--card);border-radius:999px;padding:2px 12px;font-size:.7em;white-space:nowrap;
  box-shadow:0 3px 0 var(--ink);transition:top .45s ease,opacity .3s;pointer-events:none}
.tcv.plin .tcv-sag{opacity:0}
.tcv.plin .tcv-c.op{opacity:.8}
.tcv-txt{margin:8px 0 0;text-align:center;font-size:.72em;color:var(--leaf-deep)}
/* fără animații: tabel complet, regula scrisă pe fiecare rând */
.tcv.static .tcv-sag{display:none}
.tcv.static .tcv-c.asc,.tcv.static .tcv-c.op{opacity:1;transform:none;transition:none}
.tcv.static .tcv-r.acum .tcv-c.asc{color:inherit}

/* ---------- planșa „două sensuri” (stația 5) ---------- */
.dw{text-align:center;font-size:calc(22px * var(--fs))}
.dw-row{display:flex;align-items:center;justify-content:center;gap:12px}
.dw-box{display:inline-flex;align-items:center;justify-content:center;min-width:5em;height:calc(56px * var(--fs));border:3px solid var(--line);border-radius:14px;background:var(--paper);font-family:"Baloo 2",system-ui,sans-serif;font-size:1.2em}
.dw-eq{color:var(--muted)}
.dw-ar{margin:8px 0;font-size:.85em}
.dw-ar.jos{color:var(--sky)} .dw-ar.sus{color:var(--berry)}
.dw-note{margin:6px 0 0;font-size:.72em;color:var(--muted)}
.dw-note .j{color:var(--sky)} .dw-note .s{color:var(--berry)}

/* ---------- planșa cu regulile (stațiile 3 și 7) ---------- */
.rg{display:grid;gap:6px;font-size:calc(19px * var(--fs))}
.rg-t{margin:0 0 2px;text-align:center;color:var(--muted);font-size:.8em}
.rg-r{display:grid;grid-template-columns:2em 1fr auto;align-items:center;gap:8px;border-radius:10px;padding:5px 10px;background:var(--sky-tint)}
.rg-r.m{background:var(--leaf-tint)}
.rg-r i{font-style:normal;color:var(--berry);white-space:nowrap}

/* ---------- planșa „același 4” (stația 4) ---------- */
.a4{text-align:center}
.a4-n{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(70px * var(--fs));line-height:1;color:var(--berry)}
.a4-t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0;font-size:calc(19px * var(--fs))}
.a4-t span{border:2px dashed var(--sky);border-radius:10px;padding:6px;background:var(--sky-tint)}
.a4-q{margin:0;font-size:calc(17px * var(--fs));color:var(--leaf-deep)}

/* ---------- planșe „verifică un rând” (stațiile 7, 8) ---------- */
.vr{font-size:calc(21px * var(--fs))}
.vr-t{margin:0 0 6px;text-align:center;font-size:.85em}
.vr-h,.vr-r{display:grid;grid-template-columns:1fr 1.4fr 1.4fr;align-items:center;text-align:center}
.vr-h{color:var(--leaf-deep);border-bottom:3px solid var(--line);padding-bottom:4px}
.vr-r{height:calc(42px * var(--fs));border-radius:10px;margin-top:4px}
.vr-r.ok{background:var(--leaf-tint)} .vr-r.ok b{color:var(--leaf-deep);font-size:.8em}
.vr-r.ko{background:var(--berry-tint)} .vr-r.ko b{color:var(--berry)}
.vr-n{margin:8px 0 0;font-size:.72em;color:var(--muted);text-align:center}

/* ---------- rigla (stația 9) ---------- */
.rgl-svg{display:block;width:100%;height:auto}
.rgl-corp{fill:var(--sun-tint);stroke:var(--sun-ink);stroke-width:2}
.rgl-mm{fill:var(--berry);opacity:.35}
.rgl-lin line{stroke:var(--ink);stroke-width:1.6}
.rgl-lin text{fill:var(--ink);font-size:15px;font-weight:800;text-anchor:middle}
.rgl-ac{fill:none;stroke:var(--berry);stroke-width:2.5}
.rgl-n{margin:4px 0 0;text-align:center;font-size:calc(17px * var(--fs))}
.rgl-n b{color:var(--berry)} .rgl-n span{color:var(--muted)}

/* ---------- tabelul pieței (stația 10) ---------- */
.pt{font-size:calc(20px * var(--fs))}
.pt-h,.pt-r{display:grid;grid-template-columns:1fr 1fr 1.3fr;align-items:center;text-align:center}
.pt-h{color:var(--leaf-deep);border-bottom:3px solid var(--line);padding-bottom:4px}
.pt-r{height:calc(42px * var(--fs));border-radius:10px;margin-top:4px;background:var(--paper)}
.pt-r span:nth-child(2){color:var(--sky)} .pt-r span:nth-child(3){color:var(--berry)}
.pt-n{margin:8px 0 0;font-size:.75em;text-align:center;color:var(--muted)}
.pt-n b{color:var(--ink)}

/* ---------- laborator: completează tabelul ---------- */
.ct-top,.rp-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))}
.ct-sens{display:flex;gap:8px}
.ct-sens b{border-radius:999px;padding:1px 10px}
.ct-sens .j{background:var(--sky-tint);color:var(--sky)} .ct-sens .s{background:var(--berry-tint);color:var(--berry)}
.ct-tab,.rp-tab{max-width:420px;margin:6px auto 0;font-weight:800;font-size:calc(20px * var(--fs));font-variant-numeric:tabular-nums}
.ct-h,.ct-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:center;text-align:center}
.ct-h,.rp-h{font-family:"Baloo 2",system-ui,sans-serif;color:var(--leaf-deep);border-bottom:3px solid var(--line)}
.ct-r{height:calc(38px * var(--fs));border-bottom:1px dashed var(--line)}
.ct-r.reg,.rp-r.reg{background:var(--sun-tint);border-radius:10px}
.ct-c{display:flex;align-items:center;justify-content:center;height:100%}
.ct-in{box-sizing:border-box;width:100%;max-width:150px;height:calc(36px * var(--fs));border:3px dashed var(--sky);border-radius:10px;background:var(--card);color:var(--ink);
  font:inherit;font-weight:800;text-align:center;padding:0 6px}
.ct-in:focus{outline:none;border-style:solid;border-color:var(--sky);background:var(--sky-tint)}
.ct-in.bun{border-style:solid;border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.ct-in.rau{border-style:solid;border-color:var(--berry);background:var(--berry-tint)}
.ct-in.scutura,.rp-r.scutura{animation:shake .45s}
.ct-act,.rp-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)}
.ct-act .verif,.rp-act .verif{margin-left:auto}
.rp-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator: repară tabelul ---------- */
.rp-h,.rp-r{display:grid;grid-template-columns:1fr 1.5fr 4.2em;gap:8px;align-items:center;text-align:center}
.rp-r{width:100%;height:calc(35px * var(--fs));margin-top:3px;padding:0 6px;border:3px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.rp-r.reg{border-color:transparent;cursor:default}
button.rp-r:hover{border-color:var(--sky)}
.rp-r.ales{border-color:var(--berry);background:var(--berry-tint)}
.rp-r.ales .rp-s::before{content:"✗ greșit";color:var(--berry);font-size:calc(13px * var(--fs))}
.rp-r.acum{box-shadow:0 0 0 3px var(--sun)}
.rp-r.reparat{border-color:var(--leaf);background:var(--leaf-tint);color:var(--ink)}
.rp-r.reparat .rp-s{color:var(--leaf-deep)}
.rp-r:disabled{cursor:default}
.rp-s{font-size:calc(13px * var(--fs));color:var(--muted)}
.rp-v s{color:var(--berry);opacity:.7;font-size:.8em}
.rp-v .fix{color:var(--leaf-deep);display:inline-block;animation:pop .45s ease-out both}
.rp-fix{margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.rp-q{margin:0 0 6px;font-weight:800;text-align:center;color:var(--ink);font-size:calc(16px * var(--fs))}
.rp-opt{justify-content:center}
.rp-opt .chip{min-width:5.5em;font-size:calc(19px * var(--fs));font-weight:800}

/* ---------- 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-corp{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:8px 0}
.an-tab{min-width:190px;font-weight:800;font-size:calc(19px * var(--fs));font-variant-numeric:tabular-nums}
.an-h,.an-r{display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center}
.an-h{font-family:"Baloo 2",system-ui,sans-serif;color:var(--leaf-deep);border-bottom:3px solid var(--line)}
.an-r{height:calc(34px * var(--fs));border-bottom:1px dashed var(--line)}
.an-r.reg{background:var(--sun-tint);border-radius:8px}
.an-r .gol{justify-self:center;min-width:3em;border-bottom:3px dashed var(--leaf);color:var(--muted)}
.an-r .gol.plin{border-bottom-style:solid;color:var(--leaf-deep);animation:pop .35s}
.an-q{font-size:calc(21px * var(--fs));font-weight:800;margin:0;color:var(--ink);text-align:center}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(18px * var(--fs));min-width:6em;font-weight:800}
.an-msg{min-height:1.4em;margin:6px 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: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)}}

/* mișcare redusă (sistem): animațiile decorative se opresc; tabelele animate sunt oprite din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .rp-v .fix,.an-r .gol,.an-scor,.an-serie,.ct-in,.rp-r{animation:none!important}
  .tcv-sag,.tcv-c{transition:none!important}
}
html.a-still .rp-v .fix,html.a-still .an-r .gol,html.a-still .an-scor{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}