/* aplicatie.css — stiluri proprii lecției „Laturile și unghiurile patrulaterelor” (doar variabile de culoare).
   Prefixe: gq- (figurile pe rețea), ec- (echerul), rg- (rigla), fs- (fișa), an- (antrenamentul). */

/* ---------- planșele desenate ---------- */
.plate .gq-cov,.plate .gq-anim,.plate .gq-lab,.plate .gq-patru,.plate .gq-q{background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font-weight:800}
.gq-svg{display:block;width:100%;height:auto;max-height:290px;margin:0 auto;overflow:visible}
.gq-grid{fill:none;stroke:var(--line);stroke-width:.045}
.gq-poly{fill:var(--sky-tint);stroke:var(--ink);stroke-width:.11;stroke-linejoin:round}
.gq-sq{fill:var(--berry-tint);stroke:var(--berry);stroke-width:.1;stroke-linejoin:miter}
.gq-lin line{stroke:var(--berry);stroke-width:.1;stroke-linecap:round}
.gq-lit{font-family:Nunito,system-ui,sans-serif;font-weight:800;font-size:.62px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.gq-len{font-family:Nunito,system-ui,sans-serif;font-weight:800;font-size:.52px;fill:var(--sky);text-anchor:middle;dominant-baseline:central}
.gq-nu{fill:var(--berry);fill-opacity:.28;stroke:none}
.gq-sel{stroke:var(--leaf);stroke-width:.34;stroke-linecap:round;stroke-opacity:.55}
/* echerul: triunghi cu colț drept, gol la mijloc, gradații pe o margine */
.gq-echer .gq-ech-c{fill:var(--sun);fill-opacity:.62;stroke:var(--sun-edge);stroke-width:.06;stroke-linejoin:round}
.gq-echer .gq-ech-g{fill:none;stroke:var(--on-sun);stroke-width:.035;stroke-opacity:.7}
.gq-echer .gq-ech-s{fill:none;stroke:var(--on-sun);stroke-width:.05}
/* rigla: bandă gradată lipită de latură, cu numere de la 0 */
.gq-rigla rect{fill:var(--sun-tint);stroke:var(--sun-edge);stroke-width:.05}
.gq-rigla path{fill:none;stroke:var(--ink);stroke-width:.04}
.gq-rigla text{font-family:Nunito,system-ui,sans-serif;font-weight:800;font-size:.3px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
/* zonele de atins (laturi și colțuri) */
.gq-hit-l{stroke:transparent;stroke-width:.8;stroke-linecap:round;cursor:pointer;pointer-events:stroke}
.gq-hit-v{fill:transparent;cursor:pointer;pointer-events:all}
.gq-hit-l:hover{stroke:var(--sun);stroke-opacity:.4}
.gq-hit-v:hover{fill:var(--sun);fill-opacity:.4}
/* animații scurte, doar unde arată o acțiune: echerul se așază, rigla alunecă, semnul apare */
.gq-pune{animation:gq-pune .5s ease-out both}
.gq-aluneca .gq-rigla-in{animation:gq-aluneca .55s ease-out both}
.gq-pop{animation:gq-apare .45s ease-out both}
@keyframes gq-pune{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:none}}
@keyframes gq-aluneca{from{opacity:0;transform:translateX(-1.4px)}to{opacity:1;transform:none}}
@keyframes gq-apare{from{opacity:0}to{opacity:1}}
.gq-cap{margin:8px 0 0;text-align:center;font-size:calc(16px * var(--fs));min-height:1.5em;color:var(--ink)}
.gq-stare{margin:6px 0 0;text-align:center;font-size:calc(15px * var(--fs));color:var(--muted);min-height:1.5em}
.gq-stare b{color:var(--ink)}
.gq-c-lin{color:var(--berry);letter-spacing:1px}
.gq-c-sq{color:var(--berry)}

/* copertă și stația 7: trei figuri mici, cu numele sub fiecare */
.gq-trei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.gq-trei figure{margin:0;text-align:center}
.gq-trei figcaption{margin-top:4px;font-size:calc(16px * var(--fs));color:var(--ink)}
.gq-trei .gq-svg{max-height:150px}
/* copertă: același ceas aprinde semnele și schimbă textul */
[data-anim="cov"] .gq-lin,[data-anim="cov"] .gq-sq{opacity:0;transition:opacity .45s}
[data-anim="cov"].arata-lin .gq-lin,[data-anim="cov"].arata-sq .gq-sq{opacity:1}
.gq-cov .gq-cap [data-p]{display:none}
.gq-cov .gq-cap [data-p].on{display:inline}
.gq-cov .gq-cap .gq-st{display:none}
.gq-cov.static .gq-cap .gq-st{display:inline}

/* stația 1: latura sau unghiul de acum se colorează */
.gq-hl{opacity:0;transition:opacity .3s}
.gq-hl.on{opacity:1}
.gq-hl-l{stroke:var(--berry);stroke-width:.24;stroke-linecap:round}
.gq-hl-u{fill:var(--sun);fill-opacity:.7;stroke:var(--sun-edge);stroke-width:.05}
/* stațiile 2 și 5: un singur pas vizibil */
.gq-anim .gq-pas{display:none}
.gq-anim .gq-pas.on{display:inline}
.gq-s2 .gq-echer.on{animation:gq-pune .5s ease-out both}
.gq-s2 .gq-sq.on{animation:gq-apare .4s ease-out both}
.gq-s5 .gq-rigla.on .gq-rigla-in{animation:gq-aluneca .55s ease-out both}
.gq-s5 .gq-len{opacity:0;transition:opacity .3s}
.gq-s5 .gq-len.on{opacity:1}
.gq-s5 .gq-lin{opacity:0;transition:opacity .4s}
.gq-s5.arata-lin .gq-lin{opacity:1}

/* stația 4: patru figuri numerotate */
.gq-patru{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gq-patru figure{margin:0;position:relative;border:2px solid var(--line);border-radius:10px;padding:6px}
.gq-patru .gq-svg{max-height:120px}
.gq-nr{position:absolute;top:4px;left:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--on-sun);font-size:calc(15px * var(--fs));z-index:1}

/* figurile din laboratoare: desenul în dreapta, comenzile în stânga */
.gq-lab{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.gq-lab .gq-svg{max-height:320px}
.gq-gata{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(64px * var(--fs));text-align:center;color:var(--leaf-deep)}
.gq-q .gq-svg{max-height:230px}
/* verificarea: figura întrebării mai mare, ca semnele să se citească */
html:not(.flow) .qgrid:has(.gq-q){grid-template-columns:300px minmax(0,1fr)}
.plate .gq-q{padding:6px}
html.flow .qgrid .plate:has(.gq-q){max-width:300px}

/* ---------- laborator: echerul ---------- */
.ec-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.ec-vf{display:flex;gap:6px}
.ec-p{min-width:calc(46px * var(--fs));height:calc(34px * var(--fs));display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:calc(16px * var(--fs))}
.ec-p.acum{border-color:var(--sun-edge);background:var(--sun-tint);color:var(--sun-ink)}
.ec-p.da{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.ec-p.nu{border-color:var(--berry);background:var(--berry-tint);color:var(--berry)}
.ec-p.scutura,.rg-l.scutura{animation:gq-scutura .45s}
@keyframes gq-scutura{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ec-q{margin:12px 0;font-size:calc(19px * var(--fs));font-weight:800;color:var(--ink);min-height:2.7em}
.ec-act,.ec-urm{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ec-act .btn{min-height:calc(54px * var(--fs));font-size:calc(18px * var(--fs));padding:8px 20px}
.ec-urm{justify-content:flex-end}

/* ---------- laborator: rigla ---------- */
.rg-pas{margin:0 0 10px;font-weight:800;font-size:calc(16px * var(--fs));color:var(--ink);min-height:2.8em}
.rg-nr{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;background:var(--sun-tint);color:var(--sun-ink);font-size:.9em}
.rg-lat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rg .rg-l{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:calc(78px * var(--fs));padding:4px;border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);cursor:pointer}
.rg .rg-l b{font-size:calc(18px * var(--fs))}
.rg-v{font-size:calc(15px * var(--fs));color:var(--muted)}
.rg-m{font-size:calc(18px * var(--fs));color:var(--berry);letter-spacing:2px;min-height:1.2em;line-height:1.2}
.rg .rg-l.masurat{border-color:var(--sky)}
.rg .rg-l.masurat .rg-v{color:var(--sky)}
.rg .rg-l.ales{background:var(--sun-tint);border-color:var(--sun-edge)}
.rg-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:2px dashed var(--line)}
.rg-act .verif{margin-left:auto}
.rg-act .verif:disabled,.fs-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator: fișa de identitate ---------- */
.fs-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;font-size:calc(14px * var(--fs));color:var(--muted)}
.fs-pas{color:var(--sky)}
.fs-card{margin-top:6px;border:2px solid var(--line);border-radius:14px;padding:4px 10px;background:var(--card)}
.fs-rand{display:grid;grid-template-columns:calc(118px * var(--fs)) 1fr;align-items:center;gap:8px;padding:6px 0}
.fs-rand+.fs-rand{border-top:2px dashed var(--line)}
.fs-et{font-weight:800;font-size:calc(15px * var(--fs));color:var(--ink)}
.fs-opt{display:flex;flex-wrap:wrap;gap:6px}
.fs .fs-o{min-height:calc(38px * var(--fs));padding:4px 10px;font-size:calc(15px * var(--fs));border:2px solid var(--line);box-shadow:0 3px 0 var(--line);cursor:pointer}
.fs .fs-o.ales,.rg .rg-l.ales{transform:translateY(-1px)}
.fs .fs-o.ales{background:var(--sky);border-color:var(--sky);color:var(--card);box-shadow:0 3px 0 var(--ink)}
.fs-act{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:10px}

/* ---------- 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:gq-apare .4s ease-out}
.an-q{font-size:calc(23px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(18px * var(--fs));min-width:5em;min-height:calc(48px * var(--fs))}
.an-msg{min-height:3em;margin:10px 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)}

/* pe telefon, desenul laboratorului stă deasupra comenzilor */
html.flow .lesson .work:has(.gq-lab){order:-1}

/* mișcare redusă (sistem): fără animații; planșele animate sunt oprite din js/aplicatie.js pe o stare completă */
@media (prefers-reduced-motion: reduce){
  .gq-pune,.gq-aluneca .gq-rigla-in,.gq-pop,.gq-s2 .gq-echer.on,.gq-s2 .gq-sq.on,.gq-s5 .gq-rigla.on .gq-rigla-in,.ec-p.scutura,.rg-l.scutura,.an-serie.aprinsa{animation:none!important}
  .gq-hl,.gq-s5 .gq-len,.gq-s5 .gq-lin,[data-anim="cov"] .gq-lin,[data-anim="cov"] .gq-sq{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}