/* aplicatie.css — stiluri proprii lecției „Compară informații din două texte” (doar variabile de culoare). */

/* Butonul „Verifică” din bara de jos este ascuns; verificarea se deschide din cuprins sau după ultima stație. */
.bottom #checkBtn{display:none!important}

/* ---------- culorile legăturilor: la fel / diferă / doar într-un text ----------
   Se definesc pe containere, ca să folosească varianta locală a culorilor (de ex. .card-ink în stilul Cald).
   Culoarea nu e singurul semn: fiecare legătură are și simbolul ei (=, ≠, +). */
.cd-leg,.cd-tb,.cd-dt,.cd-an,.cd-cheie,.cd-contra,.cd-timp,.cd-rot,.cd-varf,.cd-tab{--cd-eq:var(--leaf);--cd-dif:var(--sun-edge);--cd-doar:var(--sky)}
:root[data-style="warm"] :is(.cd-leg,.cd-tb,.cd-dt,.cd-an,.cd-cheie,.cd-contra,.cd-timp,.cd-rot,.cd-varf,.cd-tab){--cd-dif:var(--berry)}
.k-eq{--k:var(--cd-eq)} .k-dif{--k:var(--cd-dif)} .k-doar{--k:var(--cd-doar)}

/* ---------- planșe desenate ---------- */
.plate :is(.cd-leg,.cd-contra,.cd-tab,.cd-timp,.cd-varf,.cd-rot,.cd-cheie){background:var(--card);color:var(--ink);border-radius:12px;padding:12px 14px}

/* două texte unul lângă altul, cu linii între informații */
.cd-cols{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);align-items:start}
.cd-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cd-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.cd-tx h4{margin:0 0 2px;font-size:calc(16px * var(--fs));line-height:1.15;color:var(--ink)}
.cd-src{font-size:calc(11.5px * var(--fs));font-weight:800;color:var(--muted);line-height:1.2}
.cd-inf{margin:0;padding:6px 9px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:calc(13.5px * var(--fs));line-height:1.3;text-align:left;transition:border-color .3s,background-color .3s}
.cd-inf.on-eq{border-color:var(--cd-eq);background:var(--leaf-tint)}
.cd-inf.on-dif{border-color:var(--cd-dif);background:var(--sun-tint)}
.cd-inf.on-doar{border-color:var(--cd-doar);background:var(--sky-tint)}
.cd-l path{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.cd-l.on path{stroke-dashoffset:0}
.cd-eq path{stroke:var(--cd-eq)} .cd-dif path{stroke:var(--cd-dif)} .cd-doar path{stroke:var(--cd-doar)}
.cd-b{opacity:0;transition:opacity .3s ease .45s}
.cd-l.on .cd-b{opacity:1}
.cd-b circle{fill:var(--card);stroke-width:3}
.cd-eq circle{stroke:var(--cd-eq)} .cd-dif circle{stroke:var(--cd-dif)} .cd-doar circle{stroke:var(--cd-doar)}
.cd-b text{fill:var(--ink);font-weight:900;font-size:13px;text-anchor:middle;font-family:var(--f-body)}
.cd-svg.fara-anim path,.cd-svg.fara-anim .cd-b{transition:none!important}
/* cheia culorilor */
.cd-key{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-weight:800;font-size:calc(13px * var(--fs));color:var(--ink)}
.cd-key span{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 4px;border-radius:999px;border:2px solid transparent;transition:border-color .3s}
.cd-key span.aprins{border-color:var(--k)}
.cd-key i,.cd-cheie i{font-style:normal;display:inline-grid;place-items:center;border-radius:50%;font-weight:900}
.cd-key i{width:24px;height:24px;border:3px solid var(--k);background:var(--card)}

/* stația 4: aceeași întrebare, două răspunsuri */
.cd-ct-q{text-align:center;font-weight:900;font-size:calc(20px * var(--fs));margin:0 0 12px}
.cd-ct-row{display:flex;align-items:center;gap:10px}
.cd-ct-c{flex:1;border:3px solid var(--cd-dif);background:var(--sun-tint);border-radius:12px;padding:10px;font-weight:800;font-size:calc(16px * var(--fs));text-align:center;line-height:1.3}
.cd-ct-c small{display:block;color:var(--muted);font-size:calc(12px * var(--fs))}
.cd-ct-c b{font-family:var(--f-display);font-size:1.7em;color:var(--sun-ink)}
.cd-ct-ne{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--cd-dif);color:var(--card);font-weight:900;font-size:calc(26px * var(--fs))}
.cd-ct-n{text-align:center;margin:12px 0 0;font-weight:700;font-size:calc(15px * var(--fs))}

/* stația 6: tabelul despre lup */
.cd-tab{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:5px;font-size:calc(14px * var(--fs));font-weight:700}
.cd-tab>span{border:2px solid var(--line);border-radius:9px;padding:6px 8px;display:flex;align-items:center;line-height:1.25}
.cd-tab .h{border:0;justify-content:center;color:var(--muted);font-weight:800;font-size:calc(12.5px * var(--fs));padding:0 4px}
.cd-tab .c{background:var(--sun-tint);font-weight:900;white-space:nowrap}
.cd-tab .nu{font-style:italic;color:var(--muted);border-style:dashed}

/* stația 7: linia timpului */
.cd-timp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-tm-p{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.cd-tm-p b{font-family:var(--f-display);font-size:calc(22px * var(--fs));line-height:1.1}
.cd-tm-p i{align-self:stretch;height:20px;position:relative;margin:4px 0 10px}
.cd-tm-p i::before{content:"";position:absolute;top:8px;height:4px;left:0;right:0;background:var(--line)}
.cd-tm-p.p1 i::before{left:50%} .cd-tm-p.p3 i::before{right:50%}
.cd-tm-p i::after{content:"";position:absolute;left:50%;top:0;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--cd-dif)}
.cd-tm-p.p2 i::after{background:var(--cd-eq)}
.cd-tm-p span{display:block;margin:0 4px;border:3px solid var(--cd-dif);border-radius:10px;padding:8px 6px;font-weight:800;font-size:calc(14px * var(--fs));line-height:1.3;background:var(--sun-tint)}
.cd-tm-p.p2 span{border-color:var(--cd-eq);background:var(--leaf-tint)}
.cd-tm-p small{display:block;color:var(--muted);font-size:calc(12px * var(--fs))}

/* stația 9: două vârfuri */
.cd-varf svg{display:block;width:100%;max-height:150px}
.cd-varf .v1{fill:var(--sky-tint);stroke:var(--sky);stroke-width:3;stroke-linejoin:round}
.cd-varf .v2{fill:var(--leaf-tint);stroke:var(--cd-eq);stroke-width:3;stroke-linejoin:round}
.cd-varf line{stroke:var(--muted);stroke-width:3}
.cd-vf-t{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-vf-t p{margin:6px 0 0;font-size:calc(14px * var(--fs));font-weight:700;line-height:1.3}
.cd-vf-t b{display:block;font-size:calc(15px * var(--fs))}
.cd-vf-t p:first-child b{color:var(--sky)} .cd-vf-t p:last-child b{color:var(--leaf-deep)}

/* stația 10: număr exact și număr rotunjit */
.cd-rot svg{display:block;width:100%;max-height:110px}
.cd-rot .ax,.cd-rot .tk{stroke:var(--ink);stroke-width:3}
.cd-rot text{fill:var(--ink);font-size:13px;font-weight:800;text-anchor:middle;font-family:var(--f-body)}
.cd-rot .lb{fill:var(--sun-ink);font-size:15px;font-weight:900}
.cd-rot .arc{fill:none;stroke:var(--cd-dif);stroke-width:3;stroke-dasharray:5 4}
.cd-rot .pt{fill:var(--cd-dif)}
.cd-rot p{margin:8px 0 0;text-align:center;font-weight:700;font-size:calc(15px * var(--fs))}

/* stația 13: cheia */
.cd-cheie p{display:flex;gap:12px;align-items:center;margin:8px 0;padding:10px 12px;border-radius:12px;border:3px solid var(--k);font-weight:700;font-size:calc(15px * var(--fs));line-height:1.3}
.cd-cheie p.k-eq{background:var(--leaf-tint)} .cd-cheie p.k-dif{background:var(--sun-tint)} .cd-cheie p.k-doar{background:var(--sky-tint)}
.cd-cheie i{flex:0 0 40px;height:40px;font-size:calc(22px * var(--fs));color:var(--card);background:var(--k)}
.cd-cheie b{display:block;font-size:calc(17px * var(--fs))}

/* ---------- laboratoarele: lățime întreagă (fără planșă) ---------- */
html:not(.flow) .view:has(.cd-tb,.cd-dt,.cd-an) .lesson{grid-template-columns:minmax(0,1fr)}
html:not(.flow) .view:has(.cd-tb,.cd-dt,.cd-an) .work{display:none}
.view:has(.cd-tb,.cd-dt,.cd-an) .notes .big{font-size:1.1em}
.cd-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.cd-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.cd-nr{margin-right:auto;font-weight:800;color:var(--muted)}
@keyframes cd-pop{0%{transform:scale(.85)}70%{transform:scale(1.05)}100%{transform:none}}
@keyframes cd-in{0%{opacity:.4;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes cd-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- laborator: tabelul de comparație ---------- */
.cd-tb{display:grid;gap:8px}
.cd-tb-tema{margin:0;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.cd-tb-tema b{color:var(--ink)}
.cd-tb-src{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cd-tv{border:2px dashed var(--line);border-radius:12px;padding:6px 8px 8px}
.cd-tv small{display:block;font-weight:800;color:var(--muted);font-size:calc(12px * var(--fs));margin-bottom:5px}
.cd-tv-in{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.cd-tile{display:flex;align-items:center;min-height:38px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:calc(13.5px * var(--fs));line-height:1.25;padding:5px 10px;cursor:grab;box-shadow:0 3px 0 var(--line);touch-action:none;text-align:left;user-select:none}
.cd-tile:hover{border-color:var(--sky)}
.cd-tile.ales{border-color:var(--sky);background:var(--sky-tint);box-shadow:0 3px 0 var(--sky);transform:translateY(-2px)}
.cd-tile.nu{font-style:italic;color:var(--muted);border-style:dashed}
.cd-tile[hidden]{display:none}
.cd-ghost{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-70%) rotate(-2deg);background:var(--sky-tint);border:2px solid var(--sky);color:var(--ink);border-radius:10px;padding:6px 10px;font:700 15px var(--f-body);box-shadow:var(--shadow);max-width:260px}
.cd-grid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:stretch}
.cd-grid .h{font-weight:800;color:var(--muted);font-size:calc(12.5px * var(--fs));text-align:center}
.cd-crit{display:flex;align-items:center;font-weight:900;font-size:calc(14px * var(--fs));padding:0 10px;border-radius:10px;background:var(--sun-tint);border-left:6px solid var(--sun-tint);white-space:nowrap}
.cd-cell{min-height:44px;display:flex;align-items:center;border:2px dashed var(--line);border-radius:10px;background:var(--card);color:var(--muted);font:inherit;font-size:calc(13.5px * var(--fs));font-weight:700;line-height:1.25;padding:4px 10px;text-align:left;cursor:pointer}
.cd-cell.plin{border-style:solid;border-color:var(--sky);color:var(--ink)}
.cd-cell.gol-nu{font-style:italic;color:var(--muted)}
.cd-cell.pop{animation:cd-in .3s ease-out}
.cd-cell.rau{border-color:var(--berry);animation:cd-shake .45s}
.cd-cell:disabled{cursor:default}
.cd-rel{display:flex;gap:5px;align-items:center}
.cd-rb{width:40px;height:40px;border-radius:10px;border:3px solid var(--line);background:var(--card);color:var(--ink);font:900 calc(20px * var(--fs)) var(--f-body);cursor:pointer;box-shadow:0 3px 0 var(--line);padding:0}
.cd-rb.ales{transform:translateY(-2px);color:var(--card)}
.cd-rb-eq.ales{background:var(--cd-eq);border-color:var(--cd-eq);box-shadow:0 3px 0 var(--ink)}
.cd-rb-dif.ales{background:var(--cd-dif);border-color:var(--cd-dif);box-shadow:0 3px 0 var(--ink)}
.cd-rb-doar.ales{background:var(--cd-doar);border-color:var(--cd-doar);box-shadow:0 3px 0 var(--ink)}
.cd-rb:disabled{cursor:default}
.cd-cell.rel-eq{border-color:var(--cd-eq);background:var(--leaf-tint)} .cd-crit.rel-eq{border-left-color:var(--cd-eq)}
.cd-cell.rel-dif{border-color:var(--cd-dif);background:var(--sun-tint)} .cd-crit.rel-dif{border-left-color:var(--cd-dif)}
.cd-cell.rel-doar{border-color:var(--cd-doar);background:var(--sky-tint)} .cd-crit.rel-doar{border-left-color:var(--cd-doar)}
.cd-leg-mic{margin-right:auto;font-weight:700;color:var(--muted);font-size:calc(12.5px * var(--fs))}
.cd-leg-mic b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--k);color:var(--ink);margin:0 2px 0 6px}
.cd-msg{flex-basis:100%;order:-1;font-weight:800;color:var(--sky);font-size:calc(13.5px * var(--fs))}
.cd-msg:empty{display:none}

/* ---------- laborator: detectivul de contradicții ---------- */
.cd-dt{display:grid;gap:4px}
.cd-dt .cd-tx{gap:5px}
.cd-dt .cd-inf{padding:5px 9px}
.cd-dt .cd-act{margin-top:4px;padding-top:6px}
.cd-dt-cols{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr)}
html.flow .cd-dt-cols{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
.cd-dt-b{cursor:pointer;box-shadow:0 3px 0 var(--line)}
.cd-dt-b:hover{border-color:var(--cd-dif)}
.cd-dt-b.ales{border-color:var(--cd-dif);background:var(--sun-tint);box-shadow:0 3px 0 var(--cd-dif);transform:translateY(-1px)}
.cd-dt-b:disabled{cursor:default}
.cd-dt-q{margin:4px 0 0;font-weight:800;font-size:calc(15px * var(--fs));color:var(--ink)}
.cd-dt-opt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cd-dt-o{display:flex;align-items:center;justify-content:center;border:3px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:calc(13.5px * var(--fs));line-height:1.25;padding:6px 8px;min-height:44px;cursor:pointer;box-shadow:0 4px 0 var(--line);text-align:center}
.cd-dt-o:hover{border-color:var(--sky)}
.cd-dt-o.ales{border-color:var(--sky);background:var(--sky-tint);box-shadow:0 4px 0 var(--sky);transform:translateY(-2px)}
.cd-dt-o:disabled{cursor:default}

/* ---------- laborator: antrenament rapid ---------- */
.cd-an-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.cd-an-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.cd-an-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.cd-an-serie.aprinsa{color:var(--berry);animation:cd-pop .4s ease-out}
.cd-an-tx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.cd-an-c{border:2px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:800;font-size:calc(17px * var(--fs));line-height:1.3;background:var(--card);color:var(--ink)}
.cd-an-c small{display:block;color:var(--muted);font-size:calc(12px * var(--fs));margin-bottom:2px}
.cd-an-c.nu{font-style:italic;color:var(--muted);border-style:dashed}
.cd-an-q{font-size:calc(20px * var(--fs));font-weight:800;margin:12px 0 10px;color:var(--ink);text-align:center}
.cd-an-var{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cd-an-o{min-width:10em;max-width:100%;border:3px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:calc(15px * var(--fs));line-height:1.25;padding:10px 14px;cursor:pointer;box-shadow:0 4px 0 var(--line)}
.cd-an-o.r-eq{border-color:var(--cd-eq)} .cd-an-o.r-dif{border-color:var(--cd-dif)} .cd-an-o.r-doar{border-color:var(--cd-doar)}
.cd-an-o:hover:not(:disabled){transform:translateY(-2px)}
.cd-an-o.bun{background:var(--leaf-tint);border-color:var(--leaf);box-shadow:0 4px 0 var(--leaf)}
.cd-an-o.rau{background:var(--berry-tint);border-color:var(--berry);box-shadow:0 4px 0 var(--berry)}
.cd-an-o:disabled{cursor:default}
.cd-an-msg{min-height:1.4em;margin:10px 0 0;text-align:center;font-weight:800}
.cd-an-msg.bine{color:var(--leaf-deep)} .cd-an-msg.rau{color:var(--berry)}
.cd-an-final{text-align:center}
.cd-an-scor{font-family:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:cd-pop .5s}

/* ---------- telefon ---------- */
html.flow .cd-cols{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
html.flow .cd-inf{font-size:calc(12.5px * var(--fs));padding:5px 7px}
html.flow .cd-tb-src,html.flow .cd-an-tx{grid-template-columns:minmax(0,1fr)}
html.flow .cd-grid{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
html.flow .cd-grid .h:nth-child(4){display:none}
html.flow .cd-rel{grid-column:2/-1;justify-content:flex-end;margin-bottom:6px}
html.flow .cd-crit{padding:0 6px;font-size:calc(12.5px * var(--fs))}
html.flow .cd-cell{font-size:calc(12.5px * var(--fs));padding:4px 6px}
html.flow .cd-dt-opt{grid-template-columns:repeat(2,minmax(0,1fr))}
html.flow .cd-vf-t{grid-template-columns:minmax(0,1fr)}

/* fără animații (accesibilitate) sau mișcare redusă: totul static, în starea finală */
html.a-still .cd-l path,html.a-still .cd-b,html.a-still .cd-inf{transition:none!important}
html.a-still :is(.cd-cell,.cd-an-scor,.cd-an-serie){animation:none!important}
@media (prefers-reduced-motion: reduce){
  .cd-l path,.cd-b,.cd-inf,.cd-key span{transition:none!important}
  .cd-cell,.cd-an-scor,.cd-an-serie{animation:none!important}
}

/* stația 9: afirmațiile au nevoie de mai mult loc decât desenul */
html:not(.flow) #v-s9 .lesson{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}

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