/* aplicatie.css — stiluri proprii lecției „Probleme în doi pași cu numere mari” (doar variabile de culoare). */

/* cifrele au aceeași lățime: „1 250” nu pare „1250” */
.lesson,.cover,.quiz{font-variant-numeric:tabular-nums}

/* ---------- culorile ordinelor: U verde · Z albastru · S roșu · M galben-maro · ZM gri ---------- */
.o0{--pdo:var(--leaf-deep);--pdo-t:var(--leaf-tint)}
.o1{--pdo:var(--sky);--pdo-t:var(--sky-tint)}
.o2{--pdo:var(--berry);--pdo-t:var(--berry-tint)}
.o3{--pdo:var(--sun-ink);--pdo-t:var(--sun-tint)}
.o4{--pdo:var(--muted);--pdo-t:var(--paper)}
b.o0,b.o1,b.o2,b.o3,b.o4{color:var(--pdo)}
b.pd-trb{color:var(--berry)}

/* ---------- planșele: fundal de card, lizibil în toate stilurile ---------- */
.plate .pd-plansa,.plate .pd-colanim,.plate .pd-semne,.plate .pd-ordine,.plate .pd-par,.plate .pd-plan,.plate .pd-est{background:var(--card);color:var(--ink);border-radius:12px;padding:14px 16px;font-weight:800}

/* ---------- modelul-bandă ---------- */
.pd-bd{display:grid;gap:2px;font-weight:800;color:var(--ink);min-width:0}
.pd-bd-sus,.pd-bd-bara,.pd-bd-jos{display:grid;min-width:0}
.pd-acol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;margin:0 2px;font-size:calc(15px * var(--fs));line-height:1.15;text-align:center;white-space:nowrap}
.pd-acol::after{content:"";align-self:stretch;height:calc(10px * var(--fs));margin-top:3px;border:3px solid var(--muted);border-bottom:0;border-radius:8px 8px 0 0}
.pd-acol.jos{justify-content:flex-start}
.pd-acol.jos::after{display:none}
.pd-acol.jos::before{content:"";align-self:stretch;height:calc(10px * var(--fs));margin-bottom:3px;border:3px solid var(--muted);border-top:0;border-radius:0 0 8px 8px}
.pd-acol b{font-weight:900}
.pd-acr b{color:var(--berry)}
.pd-seg,.pd-rest{height:calc(48px * var(--fs));display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;font-size:calc(13px * var(--fs));font-weight:900;color:var(--muted);background:var(--card);border:3px dashed var(--sky);border-right-width:0;transition:background .4s calc(var(--i,0) * .12s),color .4s calc(var(--i,0) * .12s),border-color .4s}
.pd-seg:first-child{border-radius:10px 0 0 10px}
.pd-rest{border:3px dashed var(--berry);border-radius:0 10px 10px 0;color:var(--berry);font-size:calc(16px * var(--fs))}
.pd-rest.pd-plus{border-style:solid;border-color:var(--sun-ink);background:var(--sun-tint);color:var(--sun-ink)}
.pd-bd:is([data-faza="1"],[data-faza="2"]) .pd-seg{background:var(--sky-tint);border-style:solid;color:var(--ink)}
.pd-bd[data-faza="2"] .pd-rest:not(.pd-plus){background:var(--berry-tint);border-style:solid}
/* textele fiecărei faze sunt toate în pagină; se vede doar faza curentă */
.pd-bd .pd-v1,.pd-bd .pd-v2{display:none}
.pd-bd:is([data-faza="1"],[data-faza="2"]) .pd-q1{display:none}
.pd-bd:is([data-faza="1"],[data-faza="2"]) .pd-v1{display:inline;color:var(--sky)}
.pd-bd[data-faza="2"] .pd-q{display:none}
.pd-bd[data-faza="2"] .pd-v2{display:inline;color:var(--berry)}
.pd-bd[data-faza="2"] .pd-acol.jos .pd-v2{color:var(--leaf-deep)}
.pd-bd-nota{margin:8px 0 0;min-height:2.6em;text-align:center;font-size:calc(17px * var(--fs));line-height:1.3}
.pd-bd-nota span{display:none}
.pd-bd[data-faza="0"] .pd-bd-nota [data-f="0"],.pd-bd[data-faza="1"] .pd-bd-nota [data-f="1"],.pd-bd[data-faza="2"] .pd-bd-nota [data-f="2"]{display:inline}
.pd-bd-nota b{color:var(--leaf-deep)}
/* întrebarea ascunsă găsită: acolada de deasupra grupurilor clipește */
.pd-bd.pd-intreaba .pd-acol:first-child{color:var(--berry)}
.pd-bd.pd-intreaba .pd-acol:first-child::after{border-color:var(--berry);animation:pd-puls 1s ease-in-out infinite}

/* ---------- coloana de calcul: o coloană pe ordin + coloana semnului, la dreapta ---------- */
.pd-col{--pdw:calc(44px * var(--fs));display:grid;justify-content:center;font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;line-height:1;color:var(--ink)}
.pd-c{height:calc(48px * var(--fs));display:flex;align-items:center;justify-content:center;font-size:calc(40px * var(--fs));color:var(--pdo,var(--ink));border-radius:8px;transition:opacity .35s,transform .35s,background .3s}
.pd-h{height:calc(24px * var(--fs));margin:0 3px 4px;font-size:calc(14px * var(--fs));font-family:"Nunito",system-ui,sans-serif;font-weight:900;background:var(--pdo-t);color:var(--pdo)}
.pd-sg{color:var(--berry);font-size:calc(32px * var(--fs))}
.pd-tr{height:calc(32px * var(--fs));font-size:calc(19px * var(--fs));color:var(--berry)}
.pd-tr:not(.pd-gol){width:calc(28px * var(--fs));height:calc(28px * var(--fs));margin:2px auto;border:2.5px solid var(--berry);border-radius:50%;background:var(--berry-tint)}
.pd-ln{display:block;height:4px;background:var(--ink);border-radius:2px;margin:4px 0}
.pd-asc{opacity:0;transform:translateY(-6px)}
.pd-c.nou{animation:pd-pop .45s ease-out}
.pd-c.pd-cur:not(:empty){background:var(--sun-tint)}
.pd-nota{margin:10px 0 0;text-align:center;font-weight:800;font-size:calc(17px * var(--fs));color:var(--ink);min-height:1.4em}
.pd-colanim.static .pd-asc{opacity:1;transform:none}
/* celulele de completat din laborator */
.pd-c.pd-cel.pd-pr{margin:2px;height:calc(46px * var(--fs));border-radius:10px}
.pd-c.pd-cel.pd-activ{outline:3px dashed var(--sky);outline-offset:-3px;background:var(--card)}
.pd-c.pd-cel.pd-sel{outline-style:solid;outline-color:var(--berry);background:var(--sun-tint)}
.pd-c.pd-cel.pd-ok{color:var(--leaf-deep)}
.pd-c.pd-cel.pd-tr.pd-ok{color:var(--berry)}
.pd-c.pd-cel.rau{animation:pd-scutura .45s}

/* ---------- laboratoarele: pe toată lățimea stației ---------- */
html:not(.flow) .view:has(.pd-lab,.an,.task .order) .lesson{grid-template-columns:minmax(0,1fr)}
.view:has(.pd-lab,.an,.task .order) .work:empty{display:none}
.pd-lab{display:grid;gap:10px}
.pd-lab-gr{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.pd-trl .pd-lab-gr{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
html.flow .pd-lab-gr,html.flow .pd-trl .pd-lab-gr{grid-template-columns:minmax(0,1fr)}
.pd-lab-st{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 16px;min-width:0}
.pd-trl .pd-lab-st{min-width:calc(250px * var(--fs))}
.pd-lab-dr{display:grid;gap:10px;min-width:0}
.pd-lab-stg{display:grid;gap:12px;min-width:0}
.pd-lab-stg .pd-act{border-top:0;padding-top:0}
.pd-pb{margin:0;display:flex;gap:10px;align-items:center;font-weight:800;font-size:calc(18px * var(--fs));line-height:1.35;color:var(--ink);background:var(--sun-tint);border:2px solid var(--line);border-radius:12px;padding:8px 12px}
.pd-pb-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:calc(44px * var(--fs));height:calc(30px * var(--fs));border-radius:999px;background:var(--card);color:var(--muted);font-size:calc(14px * var(--fs))}
.pd-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))}
.pd-prob{color:var(--sky);font-size:calc(18px * var(--fs))}
.pd-pasi{display:flex;gap:6px;flex-wrap:wrap}
.pd-pasi i{font-style:normal;padding:2px 10px;border-radius:999px;background:var(--paper);color:var(--muted);border:2px solid var(--line)}
.pd-pasi i.acum{background:var(--sky-tint);color:var(--sky);border-color:var(--sky)}
.pd-pasi i.gata{background:var(--leaf-tint);color:var(--leaf-deep);border-color:var(--leaf)}
.pd-pasi i.gata::before{content:"✓ "}
.pd-intr{margin:0;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink)}
.pd-opt{display:grid;gap:10px}
.pd-lab .chip.pd-o{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-height:calc(46px * var(--fs));padding:6px 14px;font-size:calc(17px * var(--fs));font-weight:800;border-width:3px;border-radius:14px;cursor:pointer}
.pd-lab .chip.pd-o:disabled:not(.good){opacity:.5}
.pd-msg{margin:0;min-height:1.4em;font-weight:800;font-size:calc(16px * var(--fs));color:var(--muted)}
.pd-msg.bine{color:var(--ink)}
.pd-msg b{color:var(--leaf-deep)}
.pd-msg b.pd-trb{color:var(--berry)}
.pd-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:2px dashed var(--line)}
.pd-act .verif,.pd-act .pd-next{margin-left:auto}
.pd-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* laboratorul „Coloana cu transport” */
.pd-calc{margin:0;display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:calc(32px * var(--fs));line-height:1.1;color:var(--ink)}
.pd-calc small{font-family:"Nunito",system-ui,sans-serif;font-size:calc(14px * var(--fs));color:var(--berry)}
.pd-sloturi{display:flex;justify-content:center;align-items:stretch;gap:14px}
.pd-sl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:calc(120px * var(--fs));min-height:calc(70px * var(--fs));padding:4px 12px;border:3px dashed var(--line);border-radius:14px;background:var(--card);color:var(--ink);cursor:pointer;font-family:inherit}
.pd-sl small{font-weight:800;font-size:calc(13px * var(--fs));color:var(--muted)}
.pd-sl b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(32px * var(--fs));line-height:1;color:var(--muted)}
.pd-sl.plin b{color:var(--ink)}
.pd-sl[data-sl="t"] b{color:var(--berry)}
.pd-sl.ales{border-style:solid;border-color:var(--berry);background:var(--sun-tint);box-shadow:0 4px 0 var(--berry)}
.pd-sl[hidden]{display:none}
.pd-tast{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
html.flow .pd-tast{grid-template-columns:repeat(6,minmax(0,1fr))}
.pd-lab .chip.pd-k{min-height:calc(48px * var(--fs));padding:0;justify-content:center;font-size:calc(22px * var(--fs));font-weight:800;color:var(--ink);border-width:3px;border-radius:12px;cursor:pointer}
.pd-lab .chip.pd-k[data-k="x"]{color:var(--berry)}
.pd-lab .chip.pd-k:disabled{opacity:.45}

/* ---------- 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:pd-pop .4s ease-out}
.an-pb{margin:14px 0;padding:12px 16px;border-radius:14px;background:var(--sun-tint);border:2px solid var(--line);color:var(--ink);font-weight:800;font-size:calc(21px * var(--fs));line-height:1.4}
.an-q{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(34px * var(--fs));font-weight:800;margin:10px 0;color:var(--ink);text-align:center}
.an-var{justify-content:center;gap:12px}
.an-var .chip{font-size:calc(21px * var(--fs));min-width:8em;min-height:calc(52px * var(--fs));justify-content:center;font-weight:800;border-width:3px}
.an-msg{min-height:1.5em;margin:12px 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:pd-pop .5s}

/* ---------- planșe statice ---------- */
.pd-semne p{display:flex;align-items:center;gap:14px;margin:10px 0;padding:10px 14px;border-radius:12px;font-size:calc(18px * var(--fs))}
.pd-semne b{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:calc(44px * var(--fs));height:calc(44px * var(--fs));border-radius:50%;font-size:calc(30px * var(--fs));background:var(--card)}
.pd-sm-a{background:var(--sun-tint)} .pd-sm-a b{color:var(--sun-ink);border:3px solid var(--sun-ink)}
.pd-sm-s{background:var(--berry-tint)} .pd-sm-s b{color:var(--berry);border:3px solid var(--berry)}
.pd-ordine p{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin:10px 0;padding:10px 14px;border-radius:12px;font-size:calc(20px * var(--fs))}
.pd-ordine p span{grid-column:1}
.pd-ordine p i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-size:calc(30px * var(--fs))}
.pd-ordine .ok{background:var(--leaf-tint)} .pd-ordine .ok i{color:var(--leaf-deep)}
.pd-ordine .ko{background:var(--berry-tint);color:var(--muted)} .pd-ordine .ko i{color:var(--berry)}
.pd-ordine small{display:block;text-align:center;color:var(--muted);font-size:calc(15px * var(--fs))}
.pd-par-ex{text-align:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(38px * var(--fs));line-height:1.2;margin-bottom:10px}
.pd-par .pd-p1{color:var(--sky)}
.pd-par-ex .pd-p1{background:var(--sky-tint);border-radius:10px;padding:0 6px}
.pd-par-r{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:calc(20px * var(--fs))}
.pd-par-r b{flex:0 0 auto;padding:2px 10px;border-radius:999px;font-size:calc(14px * var(--fs));background:var(--paper)}
.pd-par-r b.pd-p1{background:var(--sky-tint)} .pd-par-r b.pd-p2{color:var(--berry);background:var(--berry-tint)}
.pd-plan p{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:calc(19px * var(--fs))}
.pd-plan b{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:calc(34px * var(--fs));height:calc(34px * var(--fs));border-radius:50%;background:var(--leaf-tint);color:var(--leaf-deep);border:3px solid var(--leaf)}
.pd-est-c{margin:0 0 6px;text-align:center;font-size:calc(19px * var(--fs))}
.pd-est-c b{color:var(--sky)}
.pd-axa{position:relative;height:calc(86px * var(--fs));margin:0 22px}
.pd-axa i{position:absolute;left:0;right:0;top:calc(40px * var(--fs));height:4px;background:var(--ink);border-radius:2px}
.pd-axa small{position:absolute;white-space:nowrap;top:calc(50px * var(--fs));transform:translateX(-50%);color:var(--muted);font-weight:800;font-size:calc(13px * var(--fs))}
.pd-ax-p{position:absolute;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:calc(14px * var(--fs));padding:1px 8px;border-radius:999px;border:2px solid currentColor}
.pd-ax-est{top:calc(6px * var(--fs));background:var(--sky-tint);color:var(--sky)}
.pd-ax-bun{top:calc(58px * var(--fs));background:var(--leaf-tint);color:var(--leaf-deep)}
.pd-ax-rau{top:calc(6px * var(--fs));background:var(--berry-tint);color:var(--berry)}
.pd-ax-p::after{content:"";position:absolute;left:50%;width:3px;height:calc(10px * var(--fs));background:currentColor;transform:translateX(-50%)}
.pd-ax-est::after,.pd-ax-rau::after{top:100%}
.pd-ax-bun::after{bottom:100%}

@keyframes pd-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes pd-scutura{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pd-puls{0%,100%{opacity:1}50%{opacity:.35}}

/* fără animații (accesibilitate) sau mișcare redusă: totul se vede, nimic nu se mișcă */
html.a-still :is(.pd-c,.pd-seg,.pd-rest,.an-bar i,.an-scor,.an-serie),.pd-bd.static :is(.pd-seg,.pd-rest){transition:none!important;animation:none!important}
html.a-still .pd-bd.pd-intreaba .pd-acol:first-child::after{animation:none}
@media (prefers-reduced-motion: reduce){
  .pd-c,.pd-seg,.pd-rest,.an-bar i,.an-scor,.an-serie,.pd-bd.pd-intreaba .pd-acol:first-child::after{animation:none!important;transition: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}