/* aplicatie.css — stiluri proprii lecției „Creează grafice cu bare” (doar variabile de culoare). */

/* ---------- graficul cu bare (SVG din js/date.js → GB.svg) ---------- */
.gb{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f-body);touch-action:none;user-select:none;-webkit-user-select:none}
.gb text{fill:var(--ink);font-weight:800}
.gb .gb-t{font-size:17px;font-weight:900;fill:var(--leaf-deep)}
.gb .gb-n{font-size:13px}
.gb .gb-e{font-size:14px}
.gb .gb-ax{font-size:13px;fill:var(--muted)}
/* graficele din laboratoare sunt afișate mai mic: textul lor e mai mare în desen */
.gb.mare .gb-t{font-size:22px}
.gb.mare .gb-n{font-size:17px}
.gb.mare .gb-e{font-size:19px}
.gb.mare .gb-ax{font-size:16px}
.gb.mare .gb-dif-t{font-size:21px}
.gb-gr{stroke:var(--line);stroke-width:1.5}
.gb-gr.gb-0,.gb-axl{stroke:var(--ink);stroke-width:2.5}
.gb-bar{fill:var(--sky);stroke:var(--ink);stroke-width:1.2;transition:y .12s,height .12s}
.gb-bar.on{fill:var(--sun);stroke:var(--sun-edge)}
.gb-bar.peste{fill:var(--berry)}
.gb-rupt{fill:none;stroke:var(--berry);stroke-width:3;stroke-linejoin:round}
.gb-col{fill:transparent;cursor:pointer}
.gb-col:focus{outline:none;fill:var(--sun-tint);opacity:.6}
/* barele cresc din axă: starea finală este bara întreagă, deci fără animații totul rămâne complet */
.gb-bar.gb-cresc{transform-box:fill-box;transform-origin:50% 100%;animation:gbCresc .8s cubic-bezier(.2,.8,.3,1.1) both}
.gb-bar.salt{transform-box:fill-box;transform-origin:50% 100%;animation:gbSalt .6s ease-out both}
.gb-bar.scut{transform-box:fill-box;animation:gbScut .45s}
@keyframes gbCresc{from{transform:scaleY(0)}to{transform:none}}
@keyframes gbSalt{0%{transform:none}40%{transform:scaleY(1.08)}100%{transform:none}}
@keyframes gbScut{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes gbPop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* tabelul de date */
.gb-tab{border-collapse:separate;border-spacing:0;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:12px;overflow:hidden;font-weight:800;font-size:calc(16px * var(--fs));min-width:9.5em;width:auto!important;margin:0}
.gb-tab th{background:var(--leaf-tint);color:var(--leaf-deep);padding:6px 12px;text-align:left;font-size:calc(14px * var(--fs))}
.gb-tab td{padding:5px 12px;border-top:1px solid var(--line)}
.gb-tab th:last-child,.gb-tab td:last-child{text-align:right}
.gb-tab tr.on td{background:var(--sun-tint)}
.gb-tab tr.fost td{background:var(--sky-tint)}

/* planșe: tabel + grafic */
.plate .gb-pl,.plate .gb-cov,.plate .gb-parti,.plate .gb-scari{background:var(--card);color:var(--ink);border-radius:12px;padding:12px}
.gb-pl-t{font-weight:900;color:var(--muted);font-size:calc(14px * var(--fs));margin:0 0 6px}
.gb-pl-r,.gb-cov{display:flex;align-items:center;gap:12px}
.gb-pl-r .gb,.gb-cov .gb{flex:1 1 64%;min-width:0}
.gb-pl-r .gb-tab,.gb-cov .gb-tab{flex:0 0 auto;font-size:calc(14px * var(--fs));min-width:0}
.gb-pl-r .gb-tab td,.gb-pl-r .gb-tab th,.gb-cov .gb-tab td,.gb-cov .gb-tab th{padding:4px 8px}
.gb-cov .gb-tab tr td{transition:background .3s}
.gb-anim .gb-bar.asc{opacity:0}
/* stația 2: bulinele și legenda */
.gb-bul circle{fill:var(--berry)}
.gb .gb-bul text{fill:var(--card);font-size:13px;font-weight:900}
.gb-leg{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-weight:800;font-size:calc(15px * var(--fs))}
.gb-leg li{display:flex;align-items:center;gap:6px}
.gb-leg b{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--berry);color:var(--card);font-size:.85em}
/* stația 3: trei scări */
.gb-scari{display:flex;gap:6px;justify-content:center}
.gb-scari figure{margin:0;flex:1 1 0;min-width:0;text-align:center}
.gb-scari figcaption{font-weight:900;font-size:calc(15px * var(--fs));color:var(--leaf-deep);margin-bottom:2px}
.gb-scari .gb{max-height:calc(250px * var(--fs))}

/* ---------- laboratoarele au loc mai mult: planșa se îngustează ---------- */
html:not(.flow) .view:has(.gbl) .lesson,html:not(.flow) .view:has(.an) .lesson{grid-template-columns:minmax(0,1.7fr) minmax(0,.3fr)}
html:not(.flow) .view:has(.gbl) .notes,html:not(.flow) .view:has(.an) .notes{gap:8px}
html:not(.flow) .view:has(.gbl) .work .emoji-plansa,html:not(.flow) .view:has(.an) .work .emoji-plansa{font-size:3em}

/* ---------- laboratoare: părți comune ---------- */
.gbl-top{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs))}
.gbl-step{color:var(--muted);font-size:calc(13px * var(--fs));text-transform:uppercase;letter-spacing:.04em}
.gbl-ttl{color:var(--leaf-deep)}
.gbl-nr{margin-left:auto;background:var(--sun-tint);color:var(--sun-ink);border-radius:999px;padding:2px 12px;font-size:calc(14px * var(--fs))}
.gbl-nr:empty{display:none}
.gbl-nr.plin{background:var(--leaf-tint);color:var(--leaf-deep)}
.gbl-main{display:flex;align-items:center;gap:14px;margin-top:6px}
.gbl-st{display:flex;flex-direction:column;gap:10px;flex:0 0 13em;min-width:0}
.gbl-st .gbl-msg{flex:0 0 auto;font-size:calc(14px * var(--fs));line-height:1.3}
.gbl-top .gbl-msg{flex:1 1 12em;text-align:right}
.gbl-side .gbl-msg{flex:0 0 auto}
.gbl-graf{flex:1 1 auto;min-width:0;display:flex;justify-content:center;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:4px 8px}
.gbl-graf .gb{width:auto;max-width:100%;height:calc(232px * var(--fs))}
.gbl.bun .gbl-graf{border-color:var(--leaf);background:var(--leaf-tint)}
.gbl-eti{font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs))}
.gbl-sc{margin:0;font-weight:800;color:var(--muted);font-size:calc(15px * var(--fs))}
.gbl-sc b{color:var(--leaf-deep)}
/* plăcuțe mari, la fel, cu starea „ales” clară */
.gbl .chip.gbl-o{min-width:calc(60px * var(--fs));min-height:calc(46px * var(--fs));justify-content:center;font-size:calc(17px * var(--fs));font-weight:800;color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer}
.gbl .chip.gbl-o:hover{transform:translateY(-2px)}
.gbl .chip.gbl-o.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.gbl .chip.gbl-o.good{background:var(--leaf-tint);border-color:var(--leaf);color:var(--leaf-deep);box-shadow:0 5px 0 var(--leaf)}
.gbl .chip.gbl-o.bad{background:var(--berry-tint);border-color:var(--berry);animation:gbScut .45s}
.gbl .chip.gbl-o:disabled{cursor:default;transform:none}
.gbl .chip.gbl-o:disabled:not(.good):not(.ales){opacity:.55}
.gbl-alege,.gbl-act .gbl-q{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-right:auto}
/* rândul de jos: mesajul la stânga, butoanele separate, la dreapta */
.gbl-act{display:flex;align-items:center;justify-content:flex-end;gap:10px 14px;flex-wrap:wrap;margin-top:8px;min-height:calc(50px * var(--fs))}
.gbl-msg{flex:1 1 14em;margin:0;min-height:1.4em;font-weight:800;color:var(--ink);font-size:calc(15px * var(--fs))}
.gbl-msg.bine{color:var(--leaf-deep)} .gbl-msg.rau{color:var(--berry)}
.gbl-bt{display:flex;gap:10px;padding-left:14px;border-left:2px dashed var(--line)}
.gbl-bt:empty{display:none}
.gbl-bt .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* laborator 2: barele de ridicat */
.gb-mut{cursor:ns-resize}
.gb-mut.gresit{fill:var(--berry-tint);stroke:var(--berry);stroke-width:2.5;stroke-dasharray:5 3}
.gb-man{fill:var(--ink);cursor:ns-resize;opacity:.85}
.gb-man.ascuns{display:none}
.gb-ghid{display:none;stroke:var(--berry);stroke-width:2;stroke-dasharray:6 4}
.gb-ghid.on{display:inline}
.gbl-constr .gb-tab tr.on td{background:var(--sun-tint)}

/* laborator 3: lupa */
.gbl-lupa{flex:0 0 auto;width:calc(150px * var(--fs))}
.gb-lupa{display:block;width:100%;height:auto;animation:gbPop .5s ease-out both}
.gb-lupa .lp-fond{fill:var(--card)}
.gb-lupa .lp-ram{fill:none;stroke:var(--sky);stroke-width:6}
.gb-lupa .gb-gr{stroke:var(--ink);stroke-width:2}
.gb-lupa .lp-mij{stroke:var(--berry);stroke-width:2.5;stroke-dasharray:6 4}
.gb-lupa text{fill:var(--ink);font-weight:900}
.gb-lupa .lp-n{font-size:20px;fill:var(--ink)}
.gb-lupa .lp-q{font-size:24px;fill:var(--berry)}
.gb-lupa.gata .lp-q{fill:var(--leaf-deep)}
.gb-lupa-c{fill:none;stroke:var(--berry);stroke-width:3;stroke-dasharray:5 3}
.gbl-q .chips,.gbl-side .chips{display:flex;gap:10px;flex-wrap:wrap}

/* laborator 4: compară */
.gbl-side{flex:0 1 17em;display:flex;flex-direction:column;gap:10px}
.gbl-side .gbl-eti{margin:0;line-height:1.35}
.gbl-ind{margin:0;font-weight:800;color:var(--muted);font-size:calc(15px * var(--fs))}
.gbl-comp .gb-col{cursor:pointer}
.gbl-comp .gb-col:hover{fill:var(--sun-tint);opacity:.5}
.gb-dif{fill:var(--sun);stroke:var(--berry);stroke-width:2.5;stroke-dasharray:5 3;transform-box:fill-box;transform-origin:50% 100%;animation:gbCresc .7s ease-out both}
.gb-dif-l{stroke:var(--berry);stroke-width:2;stroke-dasharray:6 4}
.gb .gb-dif-t{font-size:16px;font-weight:900;fill:var(--ink)}

/* ---------- laborator 5: 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:gbPop .4s ease-out}
.an-main{display:flex;align-items:center;gap:16px;margin-top:8px}
.an-vis{flex:0 0 auto;display:flex;justify-content:center;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:4px 8px}
.an-vis .gb{width:auto;height:calc(240px * var(--fs))}
.an-vis.tab{padding:10px;border:0;background:none}
.an-dr{flex:1 1 0;min-width:0}
.an-q{font-size:calc(20px * var(--fs));font-weight:800;margin:0 0 10px;color:var(--ink);line-height:1.35}
.an-var{display:flex;gap:10px;flex-wrap:wrap}
.an-var .chip{font-size:calc(17px * var(--fs));min-width:4.5em;min-height:calc(46px * var(--fs));justify-content:center}
.an-var .chip.bad{border-color:var(--berry);background:var(--berry-tint);animation:gbScut .45s}
.an-msg{min-height:1.5em;margin:10px 0 0;font-weight:800;font-size:calc(15px * var(--fs))}
.an-msg.bine{color:var(--leaf-deep)} .an-msg.rau{color:var(--berry)}
.an-final{text-align:center}
.an-final .an-q{text-align:center}
.an-scor{font-family:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:gbPop .5s}

/* telefon: laboratoarele se așază pe verticală */
html.flow .gbl-main,html.flow .an-main{flex-direction:column;align-items:stretch}
html.flow .gbl-alege{flex-direction:row;flex-wrap:wrap;align-items:center}
html.flow .gbl-graf .gb,html.flow .an-vis .gb{width:100%;height:auto}
html.flow .gbl-lupa{align-self:center}
html.flow .gbl-bt{padding-left:0;border-left:0}

/* mișcare redusă (sistem) și „fără animații”: barele apar direct întregi; coperta e oprită din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .gb-bar,.gb-dif,.gb-lupa,.an-serie,.an-scor,.gbl .chip.gbl-o,.an-var .chip{animation:none!important;transition:none!important}
}
html.a-still .gb-bar,html.a-still .gb-dif,html.a-still .gb-lupa{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}

/* exercițiile cu bifat (stația 6): starea „ales” clară, „Verifică” separat de opțiuni (culorile plăcuțelor rămân cele ale stilului) */
.task .ex-zona:has(> .chips + .grp) > .chips .chip{min-height:calc(46px * var(--fs));padding:4px 16px;font-size:calc(17px * var(--fs))}
.task .ex-zona:has(> .chips + .grp) > .chips .chip.ales:not(.good):not(.bad){background:var(--berry);border-color:var(--berry);color:var(--card);transform:translateY(-3px)}
.task .ex-zona > .chips + .grp{justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:2px dashed var(--line)}