/* aplicatie.css — stiluri proprii lecției „Scade fracții cu modele de arie” (doar variabile de culoare). */

/* ---------- fracția etajată: numărătorul deasupra liniei, numitorul dedesubt ---------- */
.sf-fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.02;font-size:.84em;margin:0 .1em;font-variant-numeric:tabular-nums;font-weight:800}
.sf-fr .sf-n{display:block;padding:0 .2em .06em;border-bottom:.1em solid currentColor}
.sf-fr .sf-d{display:block;padding:.06em .2em 0}
/* în variantele de răspuns, fracțiile etajate sunt mai mari, ca să se citească ușor */
.qcard .ans .sf-fr,.task .chips .chip .sf-fr{font-size:1.05em}

/* ---------- modelele de arie (SVG): hașurat = ce ai, X = ce iei ---------- */
.sf-svg{display:block;max-width:100%;height:auto;overflow:visible}
.sf-p{fill:var(--card);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;transition:fill .25s}
.sf-drept .sf-p{stroke-width:1.4}
.sf-hb{fill:var(--sun)}
.sf-hl{stroke:var(--sun-ink);stroke-width:2.2}
.sf-g.h .sf-p{fill:var(--hp)}
.sf-g{transition:opacity .45s,transform .45s}
.sf-x{display:none}
.sf-x line{stroke:var(--berry);stroke-width:4.5;stroke-linecap:round}
.sf-drept .sf-x line{stroke-width:3.6}
.sf-g.x .sf-x{display:inline}
.sf-g.x .sf-p{opacity:.55}
/* planșe animate: X-ul apare în pasul lui, apoi felia se desprinde și se estompează */
.sf-anim .sf-x[data-k]{transition:opacity .3s}
.sf-anim .sf-x[data-k]:not(.on){opacity:0}
.sf-anim .sf-g[data-k].on{opacity:.28;transform:translate(var(--dx),var(--dy))}
.sf-anim .sf-t[data-k]{transition:opacity .3s}
.sf-anim .sf-t[data-k]:not(.on){opacity:0}
.sf-anim.static .sf-g,.sf-anim.static .sf-t,.sf-anim.static .sf-x{transition:none}

/* culorile din text: aceleași ca pe model */
.th,.tx,.tc{display:inline-flex;align-items:center;gap:4px;border-radius:10px;padding:2px 8px}
.th{background:var(--sun-tint);color:var(--sun-ink);box-shadow:inset 0 0 0 2px var(--sun)}
.tx{background:var(--berry-tint);color:var(--ink);box-shadow:inset 0 0 0 2px var(--berry)}
.tc{background:var(--leaf-tint);color:var(--leaf-deep);box-shadow:inset 0 0 0 2px var(--leaf)}

/* ---------- planșe ---------- */
.plate .sf-plansa{background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sf-rand{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.sf-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.sf-fig figcaption{font-size:calc(16px * var(--fs));display:flex;align-items:center;gap:4px}
.sf-rau{color:var(--berry)}
.sf-ec{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:calc(20px * var(--fs))}
.sf-ec.mare{font-size:calc(28px * var(--fs));min-height:2.2em}
.sf-mic{margin:0;font-size:calc(15px * var(--fs));color:var(--muted)}
.sf-intreg{background:var(--leaf);color:var(--on-leaf);border-radius:10px;padding:2px 10px}
.sf-note{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sf-tag{font-size:calc(16px * var(--fs))}
.sf-tag.gri{display:inline-flex;align-items:center;border-radius:10px;padding:2px 8px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.sf-gresit{margin:0;font-size:calc(17px * var(--fs));color:var(--berry);display:flex;align-items:center;gap:8px}
.sf-gresit s{position:relative;text-decoration:none;display:inline-flex}
.sf-gresit s::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;border-top:3px solid var(--berry);transform:rotate(-24deg)}
.sf-leg{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:calc(15px * var(--fs))}
.sf-leg span{display:inline-flex;align-items:center;gap:6px}
.sf-sw{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;border:2px solid var(--ink);font-style:normal;font-size:14px;line-height:1}
.sf-sw.h{background:repeating-linear-gradient(45deg,var(--sun) 0 4px,var(--sun-ink) 4px 6px)}
.sf-sw.x{background:var(--card);color:var(--berry);font-weight:900}
/* stația 10: întregul netăiat și același întreg desfăcut stau în aceeași căsuță */
.sf-desf{display:grid}
.sf-desf > *{grid-area:1/1}
.sf-anim .sf-cu{transition:opacity .3s}
.sf-anim .sf-cu.on{opacity:0}

/* ---------- laboratoarele „Mănâncă din tort” și „Desface întregul” ---------- */
.sf-lab{display:grid;gap:6px}
.sf-lab-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.sf-ce{color:var(--ink)}
.sf-ecl{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:calc(18px * var(--fs));color:var(--ink)}
.sf-gol{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;border:3px dashed var(--leaf);border-radius:10px;color:var(--muted)}
.sf-lab-mid{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.sf-modele{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.sf-mod{display:flex;flex-direction:column;align-items:center;gap:4px}
.sf-mod-et{font-size:calc(12px * var(--fs));font-weight:800;color:var(--muted)}
.sf-mod .sf-g{cursor:pointer}
.sf-mod .sf-g:hover .sf-p{stroke:var(--berry);stroke-width:3}
.sf-mod .sf-g:focus-visible{outline:none}
.sf-mod .sf-g:focus-visible .sf-p{stroke:var(--berry);stroke-width:4}
.sf-mod.desfacut{animation:sf-pop .4s ease-out}
/* întregul netăiat: un buton mare, care se desface la atingere */
button.sf-intreg{background:var(--card);border:3px dashed var(--leaf);border-radius:14px;padding:6px;cursor:pointer;color:var(--ink);font:inherit}
button.sf-intreg:hover{border-style:solid;transform:translateY(-2px)}
button.sf-intreg .sf-mod-et{color:var(--leaf-deep)}
.sf-dr{display:flex;flex-direction:column;align-items:center;gap:6px}
.sf-et{font-weight:800;color:var(--muted)}
.sf-scrie{display:flex;align-items:center;gap:8px}
.sf-int{display:flex;flex-direction:column;align-items:center;gap:2px}
.sf-int small{font-size:calc(11px * var(--fs));font-weight:800;color:var(--muted)}
.sf-frin{display:flex;flex-direction:column;align-items:center;gap:4px}
.sf-frin i{display:block;width:100%;height:4px;border-radius:2px;background:var(--ink)}
.sf-in{width:calc(62px * var(--fs));height:calc(46px * var(--fs));text-align:center;font:inherit;font-weight:800;font-size:calc(22px * var(--fs));color:var(--ink);background:var(--card);border:3px solid var(--line);border-radius:12px;padding:0;-moz-appearance:textfield;appearance:textfield}
.sf-in::-webkit-outer-spin-button,.sf-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sf-in:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-tint)}
.sf-in.bine{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.sf-stare{margin:0;min-height:1.4em;text-align:center;font-weight:800;color:var(--ink);font-size:calc(15px * var(--fs))}
/* butoanele de jos: separate de model și de căsuțe */
.sf-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:2px dashed var(--line)}
.sf-act .verif,.sf-act .sf-urm{margin-left:auto}
.sf-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
@keyframes sf-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:none}}

/* ---------- laborator: antrenament rapid ---------- */
.sa-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.sa-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.sa-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.sa-serie.aprinsa{color:var(--berry);animation:sf-pop .4s ease-out}
.sa-rand{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0;flex-wrap:wrap}
.sa-mod{display:flex;align-items:center}
.sa-ec{display:flex;align-items:center;gap:8px;font-weight:800;font-size:calc(22px * var(--fs));color:var(--ink)}
.sa-op{color:var(--muted);font-size:calc(26px * var(--fs))}
.sa-gol{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;min-height:2.4em;border:3px dashed var(--leaf);border-radius:12px;color:var(--muted)}
.sa-gol.plin{border-style:solid;background:var(--leaf-tint);color:var(--leaf-deep);animation:sf-pop .35s}
.sa-var{justify-content:center;gap:12px}
.sa .sa-var .chip{font-size:calc(21px * var(--fs));min-width:4.2em;min-height:calc(58px * var(--fs));display:inline-flex;align-items:center;justify-content:center;font-weight:800;border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe)}
.sa .sa-var .chip:hover:not(:disabled){transform:translateY(-2px)}
.sa .sa-var .chip.good{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf)}
.sa .sa-var .chip.bad{background:var(--berry-tint);border-color:var(--berry)}
.sa .sa-var .chip:disabled:not(.good):not(.bad){opacity:.45}
.sa-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800}
.sa-msg.bine{color:var(--leaf-deep)} .sa-msg.rau{color:var(--berry)}
.sa-q{font-size:calc(26px * var(--fs));font-weight:800;margin:12px 0;color:var(--ink);text-align:center}
.sa-final{text-align:center}
.sa-final .grp{justify-content:center}
.sa-scor{font-family:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:sf-pop .5s}

/* mișcare redusă (sistem): animațiile decorative se opresc; planșele animate sunt oprite din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .sf-g,.sf-t,.sf-x,.sf-mod,.sa-gol,.sa-scor,.sa-serie,.sf-cu{animation:none!important;transition:none!important}
}
html.a-still .sf-g,html.a-still .sf-t,html.a-still .sf-x,html.a-still .sf-mod,html.a-still .sa-gol,html.a-still .sa-scor,html.a-still .sf-cu{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}