/* aplicatie.css — stiluri proprii lecției „Compară și contrastează personaje” (doar variabile de culoare).
   Prefixul „cp-” (compară personaje) evită clasele din edulogia.css.
   Culori: trăsătură fizică (👁️ cum arată) = sky, trăsătură morală (💛 cum este) = berry. */

/* ---------- planșe desenate ---------- */
.plate .cp-cov,.plate .cp-unul,.plate .cp-cantar,.plate .cp-doua,.plate .cp-sageata,.plate .cp-trei,.plate .cp-spune,.plate .cp-schimb{
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}

/* trăsătura: plăcuță cu iconiță; fizică = sky, morală = berry */
.cp-tr{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--line);border-radius:999px;padding:3px 10px;font-weight:800;font-size:calc(14px * var(--fs));line-height:1.2;color:var(--ink);background:var(--card)}
.cp-tr i{font-style:normal;font-size:.9em}
.cp-tr.fiz{border-color:var(--sky);background:var(--sky-tint)}
.cp-tr.mor{border-color:var(--berry);background:var(--berry-tint)}
/* apar pe rând, din ceasul din js/aplicatie.js; locul lor e rezervat, deci planșa nu sare */
.cp-k{opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s}
.cp-k.on,.static .cp-k{opacity:1;transform:none}
.static .cp-k{transition:none}

/* cartonașul de personaj */
.cp-card{display:flex;flex-direction:column;align-items:center;gap:6px;border:3px solid var(--line);border-radius:16px;padding:10px;background:var(--card);min-width:0;flex:1 1 0}
.cp-port{width:calc(84px * var(--fs));height:calc(96px * var(--fs))}
.cp-svg{display:block;width:100%;height:100%;overflow:visible}
.cp-nume{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));line-height:1}
.cp-rub{width:100%;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;border-top:2px dashed var(--line);padding-top:6px;min-height:calc(31px * var(--fs))}
.cp-rub small{flex:0 0 100%;text-align:center;font-size:calc(12px * var(--fs));color:var(--muted);font-weight:800}
.cp-rub-f small{color:var(--sky)} .cp-rub-m small{color:var(--berry)}
.cp-cov{display:flex;align-items:center;gap:10px}
.cp-vs{font-size:calc(26px * var(--fs));color:var(--muted)}
.cp-unul{display:flex;justify-content:center}
.cp-unul .cp-card{max-width:17em}

/* cântarul trăsăturilor: grinda sus, trei talere aliniate sub fire */
.cp-grinda{display:block;width:100%;height:calc(44px * var(--fs))}
.cp-talere{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:stretch}
.cp-taler{border:3px solid var(--line);border-radius:0 0 18px 18px;border-top-width:6px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--card);min-width:0}
.cp-taler h5{margin:0;font-size:calc(14px * var(--fs));color:var(--ink);text-align:center}
.cp-z0,.cp-z2{border-top-color:var(--sun)}
.cp-z1{border-top-color:var(--leaf);background:var(--leaf-tint)}
.cp-cantar .cp-taler{min-height:calc(150px * var(--fs))}

/* două coloane (fizic / moral; asemănare / deosebire) */
.cp-doua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-col{border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;align-items:center}
.cp-col h5{margin:0 0 2px;font-size:calc(18px * var(--fs))}
.cp-col span{background:var(--card);border-radius:999px;padding:3px 12px;font-size:calc(16px * var(--fs));border:2px solid var(--line)}
.cp-col-f{background:var(--sky-tint)} .cp-col-m{background:var(--berry-tint)}
.cp-col-as{background:var(--leaf-tint)} .cp-col-de{background:var(--sun-tint)}

/* casete: faptă → trăsătură; spune / dovedește; început → final */
.cp-box{border:3px solid var(--line);border-radius:12px;padding:8px 12px;font-size:calc(16px * var(--fs));line-height:1.3;display:flex;flex-direction:column;gap:3px}
.cp-box small{font-size:calc(12px * var(--fs));color:var(--muted);font-weight:800}
.cp-box b{margin-top:4px;font-size:calc(17px * var(--fs));color:var(--berry)}
.cp-box-f{border-color:var(--sky);background:var(--sky-tint)}
.cp-box-t{border-color:var(--berry);background:var(--berry-tint)}
.cp-sageata{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.cp-sageata .cp-box-t{align-self:center;font-size:calc(22px * var(--fs));text-align:center}
.cp-jos{display:flex;align-items:center;justify-content:center;gap:8px;font-size:calc(24px * var(--fs));color:var(--muted)}
.cp-jos small{font-size:calc(13px * var(--fs))}
.cp-spune{display:grid;gap:10px}
.cp-nu{border-style:dashed;opacity:.85}
.cp-nu small{color:var(--berry)}
.cp-da{border-color:var(--leaf);background:var(--leaf-tint)}
.cp-da small{color:var(--leaf-deep)}
.cp-schimb{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.cp-dreapta{display:flex;align-items:center;font-size:calc(28px * var(--fs));color:var(--muted)}
.cp-trei{display:grid;gap:8px}
.cp-tc{display:grid;grid-template-columns:6.2em 1fr;align-items:center;gap:8px;border-radius:12px;padding:8px 12px;font-size:calc(16px * var(--fs))}
.cp-tc b{font-size:calc(17px * var(--fs))}
.cp-tc span{font-weight:700}
.cp-tc0{background:var(--leaf-tint)} .cp-tc1{background:var(--sky-tint)} .cp-tc2{background:var(--sun-tint)}

/* stația 4: trei coșuri pe un rând, coloana exercițiului mai lată */
html:not(.flow) #v-s4 .lesson{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
html:not(.flow) #v-s4 .sort{grid-template-columns:repeat(3,minmax(0,1fr))}
#v-s4 .bin{min-height:60px}
#v-s4 .pool-item{font-size:.85em}
#v-s4 .cp-tc{grid-template-columns:1fr}

/* textul din indiciu (stațiile 7 și 10) arată ca o fișă de lectură */
.view:has(.cp-cantar) .task .hint,#v-schimbare .task .hint{background:var(--card);border:2px solid var(--line);border-left:6px solid var(--sky);border-radius:10px;padding:8px 12px;color:var(--ink);font-weight:700;font-size:calc(15px * var(--fs));line-height:1.35}

/* laboratoarele au nevoie de loc: coloana din stânga se lărgește */
html:not(.flow) .view:has(.cp-dv) .lesson,html:not(.flow) .view:has(.cp-ct) .lesson,html:not(.flow) .view:has(.cp-an) .lesson{grid-template-columns:minmax(0,1.6fr) minmax(0,.4fr)}
html:not(.flow) .view:has(.cp-dv) .notes .big,html:not(.flow) .view:has(.cp-ct) .notes .big,html:not(.flow) .view:has(.cp-an) .notes .big{font-size:1.1em}
html:not(.flow) .view:has(.cp-cantar) .lesson{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* rândul de jos al laboratoarelor: separat de opțiuni */
.cp-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:2px dashed var(--line)}
.cp-act .verif{margin-left:auto}
.cp-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.cp-scut{animation:cp-shake .45s}
@keyframes cp-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes cp-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:none}}

/* ---------- laborator: dovada din text ---------- */
.cp-pas{margin:0 0 7px;font-weight:800;font-size:calc(16px * var(--fs));color:var(--ink)}
.cp-dv-tr{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.cp-dv-t{display:inline-flex;align-items:center;gap:6px;min-height:calc(42px * var(--fs));padding:3px 14px;border:3px solid var(--leaf);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:calc(16px * var(--fs));box-shadow:0 4px 0 var(--leaf-deep);cursor:pointer}
.cp-dv-t i{font-style:normal}
.cp-dv-t:hover{transform:translateY(-2px)}
.cp-dv-t.ales{transform:translateY(-3px);box-shadow:0 5px 0 var(--ink);outline:3px solid var(--ink);outline-offset:2px}
.cp-dv-ok{display:inline-flex;align-items:center;justify-content:center;width:1.2em;color:var(--leaf-deep);font-weight:900}
.cp-dv-t:disabled{transform:none;cursor:default}
/* cele trei culori ale legăturilor: trăsătura și propoziția ei au aceeași culoare */
.cp-dv-t.cp-c0{border-color:var(--sun)} .cp-dv-t.cp-c1{border-color:var(--sky)} .cp-dv-t.cp-c2{border-color:var(--berry)}
.cp-dv-t.cp-c0.legat,.cp-dv-t.cp-c0.ales{background:var(--sun-tint)}
.cp-dv-t.cp-c1.legat,.cp-dv-t.cp-c1.ales{background:var(--sky-tint)}
.cp-dv-t.cp-c2.legat,.cp-dv-t.cp-c2.ales{background:var(--berry-tint)}
.cp-dv-txt{border:2px solid var(--line);border-radius:12px;padding:5px 10px 7px;background:var(--card);display:flex;flex-direction:column;gap:4px}
.cp-dv-txt h4{margin:0;font-size:calc(16px * var(--fs));color:var(--ink)}
.cp-dv-txt h4 small,.cp-ct-txt h4 small{font-weight:700;color:var(--muted);font-size:.8em}
.cp-dv-p{display:flex;align-items:center;gap:8px;text-align:left;border:2px dashed var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:3px 10px;font:inherit;font-weight:700;font-size:calc(15px * var(--fs));line-height:1.25;cursor:pointer;min-height:calc(31px * var(--fs))}
.cp-dv-p:hover{border-color:var(--sky)}
.cp-dv-et{flex:0 0 auto;border-radius:999px;font-size:calc(13px * var(--fs));font-weight:900;padding:0;max-width:0;overflow:hidden;white-space:nowrap}
.cp-dv-p.legat{border-style:solid}
.cp-dv-p.legat .cp-dv-et{max-width:12em;padding:2px 9px}
.cp-dv-p.cp-c0{border-color:var(--sun);background:var(--sun-tint)} .cp-dv-p.cp-c0 .cp-dv-et{background:var(--sun);color:var(--on-sun)}
.cp-dv-p.cp-c1{border-color:var(--sky);background:var(--sky-tint)} .cp-dv-p.cp-c1 .cp-dv-et{background:var(--sky);color:var(--card)}
.cp-dv-p.cp-c2{border-color:var(--berry);background:var(--berry-tint)} .cp-dv-p.cp-c2 .cp-dv-et{background:var(--berry);color:var(--card)}
.cp-dv-p.bun{box-shadow:inset 0 0 0 1px currentColor}
.cp-dv-p:disabled{cursor:default}

/* ---------- laborator: asemănător sau diferit? ---------- */
.cp-ct-txt{border:2px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--card)}
.cp-ct-txt h4{margin:0 0 2px;font-size:calc(15px * var(--fs));color:var(--ink)}
.cp-ct-txt p{margin:0;font-weight:700;font-size:calc(15px * var(--fs));line-height:1.35;color:var(--ink)}
.cp-ct-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:calc(48px * var(--fs));margin:8px 0 0}
.cp-ct-gol{color:var(--muted);font-weight:800;font-size:calc(14px * var(--fs))}
.cp-ct-c{display:inline-flex;align-items:center;gap:5px;min-height:calc(40px * var(--fs));padding:3px 12px;border:3px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:calc(15px * var(--fs));box-shadow:0 3px 0 var(--line);cursor:pointer}
.cp-ct-c i{font-style:normal}
.cp-ct-c.fiz{border-color:var(--sky);background:var(--sky-tint)}
.cp-ct-c.mor{border-color:var(--berry);background:var(--berry-tint)}
.cp-ct-c.ales{transform:translateY(-3px);box-shadow:0 5px 0 var(--ink);outline:3px solid var(--ink);outline-offset:2px}
.cp-ct-c.bun{box-shadow:0 3px 0 var(--leaf)}
.cp-ct-c:disabled{cursor:default}
.cp-ct-gr{height:calc(22px * var(--fs));margin-top:4px}
.cp-ct .cp-taler{cursor:pointer;min-height:calc(108px * var(--fs))}
.cp-ct .cp-taler.tinta{border-style:dashed;border-top-style:solid}
.cp-tl-h{width:100%;border:0;border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-weight:900;font-size:calc(14px * var(--fs));padding:5px 6px;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.cp-taler.tinta .cp-tl-h{background:var(--sun);color:var(--on-sun);box-shadow:0 3px 0 var(--sun-edge)}
.cp-tl-in{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:flex-start;width:100%}
.cp-ct-nr{color:var(--muted);font-weight:800}

/* ---------- laborator: antrenament rapid ---------- */
.cp-an-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.cp-an-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.cp-an-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.cp-an-serie.aprinsa{color:var(--berry);animation:cp-pop .4s ease-out}
.cp-an-ctx{margin:10px 0 0;border:2px solid var(--line);border-left:6px solid var(--sky);border-radius:10px;padding:6px 12px;background:var(--card)}
.cp-an-ctx p{margin:2px 0;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink)}
.cp-an-q{font-size:calc(21px * var(--fs));font-weight:800;margin:10px 0;color:var(--ink);text-align:center}
.cp-an-var{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cp-an-o{min-width:8em;min-height:calc(48px * var(--fs));padding:4px 16px;border:3px solid var(--leaf);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:calc(17px * var(--fs));box-shadow:0 4px 0 var(--leaf-deep);cursor:pointer}
.cp-an-o:hover:not(:disabled){transform:translateY(-2px)}
.cp-an-o.bun{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.cp-an-o.rau{border-color:var(--berry);background:var(--berry-tint)}
.cp-an-o:disabled{cursor:default}
.cp-an-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800}
.cp-an-msg.bine{color:var(--leaf-deep)} .cp-an-msg.rau{color:var(--berry)}
.cp-an-final{text-align:center}
.cp-an-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:cp-pop .5s}

/* telefon (pagină care se derulează) */
html.flow .cp-cov{flex-direction:row}
html.flow .cp-schimb{grid-template-columns:1fr}
html.flow .cp-dreapta{justify-content:center;transform:rotate(90deg)}
@media (max-width:520px){html.flow .cp-talere{grid-template-columns:1fr}}

/* mișcare redusă (sistem): animațiile decorative se opresc; ceasul din js/aplicatie.js arată tot */
@media (prefers-reduced-motion: reduce){
  .cp-k{opacity:1!important;transform:none!important;transition:none!important}
  .cp-dv-p.bun,.cp-ct-c.bun,.cp-an-serie,.cp-an-scor,.cp-scut{animation:none!important}
}
html.a-still .cp-k{opacity:1!important;transform: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}