/* aplicatie.css — stiluri proprii lecției „Fracții: prezentare generală” (doar variabile de culoare). */

/* ---------- fracția etajată: numărătorul peste numitor ---------- */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.02;font-weight:800;margin:0 .08em;font-size:.92em}
.fr>b{font-weight:inherit;padding:0 .14em}
.fr>i{font-style:normal;border-top:.11em solid currentColor;padding:.04em .14em 0;align-self:stretch;text-align:center}
.fr .fr-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;text-decoration:none}
.fr.mare{font-size:calc(30px * var(--fs));font-family:var(--f-display)}
.t-a{color:var(--sun-ink)}
/* în butoane și pe rândurile de text, fracția rămâne compactă */
.chip .fr,.pool-item .fr,.af-rand .fr,.ocard .fr{font-size:1em}
.ans .fr{font-size:1.2em}
.task .chips .chip{min-width:3.2em;justify-content:center}
.task h3 .fr,.big .fr,.key .fr,.fact .fr,.say .fr,.qcard h2 .fr{font-size:.8em}

/* ---------- desenele comune (SVG) ---------- */
.fp-p{fill:var(--card);stroke:var(--ink);stroke-width:2.5px;stroke-linejoin:round}
.fp-p.on{fill:var(--sun)}
.fp-pizza{display:block;width:100%;height:auto;max-width:calc(150px * var(--fs));margin:0 auto}
.fp-banda{display:block;width:100%;height:calc(40px * var(--fs));overflow:visible}
.fp-banda.sub{height:calc(24px * var(--fs));margin:4px 0}
.fp-axa{display:block;width:100%;height:auto;overflow:visible}
.fp-ax{stroke:var(--ink);stroke-width:3px;stroke-linecap:round}
.fp-drum{stroke:var(--sun);stroke-width:7px;stroke-linecap:round}
.fp-tic{stroke:var(--ink);stroke-width:2.5px}
.fp-tic.mare{stroke-width:3.5px}
.fp-punct{fill:var(--berry);stroke:var(--card);stroke-width:3px}
.fp-axa text,.fh-svg text{fill:var(--ink);font-weight:800;font-family:var(--f-body)}
.fp-bara{stroke:var(--ink);stroke-width:2px}
.fp-et-p text{fill:var(--berry)} .fp-et-p .fp-bara{stroke:var(--berry)}
.fp-multime{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fp-grupa{display:grid;grid-template-columns:repeat(2,auto);gap:4px;padding:6px;border:2.5px solid var(--line);border-radius:12px;background:var(--card)}
.fp-grupa i,.ml-tot i,.ml-gr i{display:block;width:calc(14px * var(--fs));height:calc(14px * var(--fs));border-radius:50%;background:var(--card);border:2.5px solid var(--ink)}
.fp-grupa.on{border-color:var(--sun-edge);background:var(--sun-tint)}
.fp-grupa.on i{background:var(--sun)}
.fp-multime.mic .fp-grupa i{width:calc(11px * var(--fs));height:calc(11px * var(--fs))}

/* planșele: fundal de card, ca să fie lizibile în toate stilurile */
.plate .fh,.plate .pf,.plate .pe2,.plate .nn,.plate .cit,.plate .lab-hint,.plate .su,.plate .im,.qcard .q-viz{background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}

/* ---------- harta fracțiilor (copertă, stațiile 11 și 13) ---------- */
.fh-svg{display:block;width:100%;height:auto}
.fh-ram{stroke:var(--line);stroke-width:3px;stroke-dasharray:6 6}
.fh-ram.on{stroke:var(--sun);stroke-width:5px;stroke-dasharray:none}
.fh-ram.on.nou{stroke-dasharray:100;animation:fh-traseu .7s ease-out both}
.fh-centru{fill:var(--sun-tint);stroke:var(--sun-edge);stroke-width:4px}
.fh-fr text{fill:var(--ink);font-family:var(--f-display)}
.fh-fr .fp-bara{stroke-width:3.5px}
.fh-nod{opacity:.38;transition:opacity .35s}
.fh-nod.on{opacity:1}
.fh-nod.nou{animation:fh-pop .5s ease-out}
.fh-cut{fill:var(--card);stroke:var(--line);stroke-width:2.5px}
.fh-nod.on .fh-cut{stroke:var(--sun-edge);stroke-width:3.5px}
.fh-t{fill:var(--muted)!important;font-size:14px}
.fh-gr{fill:var(--card);stroke:var(--line);stroke-width:2px}
.fh-gr.on{fill:var(--sun-tint);stroke:var(--sun-edge)}
.fh-b{fill:var(--card);stroke:var(--ink);stroke-width:2px}
.fh-b.on{fill:var(--sun)}
.fh-mic{fill:var(--berry)!important}
.fh-cap{margin:8px 0 0;text-align:center;min-height:1.4em;font-size:calc(16px * var(--fs));color:var(--muted)}
.fh-cap.tinta{color:var(--ink)}
@keyframes fh-traseu{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fh-pop{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:none}}
.fh-nod{transform-box:fill-box;transform-origin:center}

/* ---------- stația 5 / 12: patru fețe ale lui 3/4 ---------- */
.pf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:3px solid var(--line);border-radius:12px;padding:8px;transition:border-color .3s,background .3s}
.pf-c .fp-pizza{max-width:calc(84px * var(--fs))}
.pf-viz{width:100%;min-height:calc(84px * var(--fs));display:flex;align-items:center;justify-content:center}
.pf-c .fp-grupa i{width:calc(10px * var(--fs));height:calc(10px * var(--fs))}
.pf-c .fp-grupa{grid-template-columns:auto;padding:4px}
.pf-c .fp-multime{flex-wrap:nowrap;gap:4px}
.pf-c small{font-size:calc(14px * var(--fs));color:var(--muted)}
.pf-c.on{border-color:var(--sun-edge);background:var(--sun-tint)}
.pf-c.on small{color:var(--ink)}
.pf-c.umple .fp-p.on,.pf-c.umple .fp-grupa.on{animation:pf-umple .45s ease-out both;animation-delay:calc(var(--d) * .18s)}
@keyframes pf-umple{from{opacity:.15}to{opacity:1}}

/* stația 1: părți egale / inegale */
.pe2{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.pe2-c{display:flex;flex-direction:column;align-items:center;gap:4px}
.pe2-c .fp-pizza{max-width:calc(130px * var(--fs))}
.pe2 .da{color:var(--leaf-deep);font-size:calc(18px * var(--fs))}
.pe2 .nu{color:var(--berry);font-size:calc(18px * var(--fs))}
.pe2 small{color:var(--muted);font-size:calc(14px * var(--fs))}

/* stația 2: numărător și numitor, cu etichetele pe același rând cu fiecare parte */
.nn{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;align-items:center}
.nn-a,.nn-n{font-family:var(--f-display);font-size:calc(54px * var(--fs));line-height:1;text-align:center}
.nn-a{color:var(--sun-ink)} .nn-n{color:var(--sky)}
.nn-l{display:block;justify-self:stretch;height:6px;border-radius:3px;background:var(--ink)}
.nn>span:not(.nn-l){display:flex;flex-direction:column;justify-content:center;color:var(--muted);line-height:1.25;font-size:calc(15px * var(--fs))}
.nn>span b{font-size:calc(17px * var(--fs))}
.nn-ea b{color:var(--sun-ink)} .nn-en b{color:var(--sky)} .nn-el b{color:var(--ink)}
.nn-viz{grid-column:1/-1;margin-top:12px}

/* stația 3: tabelul de citire */
.cit{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;font-size:calc(19px * var(--fs))}
.cit>span{text-align:center;font-size:calc(22px * var(--fs))}
.cit>b{background:var(--sun-tint);border-radius:10px;padding:5px 12px}
.cit small{color:var(--muted);font-size:.78em}

/* stațiile cu laborator: planșa-indiciu */
.lab-hint{text-align:center}
.lab-hint .fp-pizza{max-width:calc(120px * var(--fs))}
.lab-hint p{margin:8px 0 0}
.lh-n{font-size:calc(15px * var(--fs));color:var(--muted);line-height:1.45}
.lh-n b{color:var(--ink)}
.lh-axa{padding:0 4px}

/* stația 9: sub, egal, peste 1 */
.su{display:grid;gap:10px}
.su-r{display:grid;grid-template-columns:2.2em minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center}
.su-r>span{grid-row:1/3;font-size:calc(24px * var(--fs));text-align:center}
.su-b{display:flex;gap:6px}
.su-b{min-width:0}
.su-b .fp-banda{flex:1 1 0;min-width:0;height:calc(28px * var(--fs))}
.su-r>b{font-size:calc(14px * var(--fs));color:var(--muted)}

/* stația 10: ideile mari */
.im-t{margin:6px 0 2px;font-size:calc(16px * var(--fs))}
.im-t:first-child{margin-top:0}

/* verificarea: desenele din întrebări */
.qcard .q-viz{display:flex;align-items:center;justify-content:center;min-width:calc(220px * var(--fs))}
.qcard .q-viz .fp-pizza{max-width:calc(150px * var(--fs))}

/* ---------- laboratoare: părți comune ---------- */
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.lb-tinta .fr.mare{font-size:calc(24px * var(--fs))}
.lb-tinta{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:calc(20px * var(--fs));background:var(--sun-tint);border:2px solid var(--sun-edge);border-radius:12px;padding:2px 12px}
.lb-et{margin:8px 0 6px;font-weight:800;color:var(--ink);font-size:calc(15px * var(--fs))}
.lb-et b{color:var(--sky)}
.lb-rand{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:8px 0 4px}
.lb-rand .lb-et{margin:0}
/* plăcuțele de ales: mari, la fel, cu starea „ales” clară */
.lb-ch{display:flex;flex-wrap:wrap;gap:8px}
.task .lb-ch .chip.lb-t{min-width:calc(48px * var(--fs));min-height:calc(42px * var(--fs));padding:2px 12px;font-size:calc(18px * var(--fs));font-weight:800;color:var(--ink);border:3px solid var(--stripe);border-radius:12px;box-shadow:0 4px 0 var(--stripe);cursor:pointer;justify-content:center}
.task .lb-ch .chip.lb-t:hover{transform:translateY(-2px)}
.task .lb-ch .chip.lb-t.ales{background:var(--sky);border-color:var(--sky);color:var(--card);box-shadow:0 4px 0 var(--ink);transform:translateY(-2px)}
/* butoanele de jos: separate de plăcuțe */
.lb-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.lb-act .verif{margin-left:auto}
.lb-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* laborator 1: construiește fracția */
.cf-main{display:flex;gap:18px;align-items:center;margin-top:6px}
.cf-pizza{flex:0 0 calc(178px * var(--fs))}
.cf-pizza .fp-pizza{max-width:none}
.cf-pizza .fp-p{cursor:pointer;transition:fill .2s}
.cf-pizza .fp-p:hover{fill:var(--sun-tint)}
.cf-pizza .fp-p.on:hover{fill:var(--sun)}
.cf-pizza .fp-p:focus-visible{outline:none;stroke:var(--sky);stroke-width:5px}
.cf-ctrl{flex:1;min-width:0}
.cf-rez{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0;min-height:calc(66px * var(--fs));font-weight:800;color:var(--muted);font-size:calc(16px * var(--fs))}
.cf-rez span{color:var(--ink);font-size:calc(19px * var(--fs))}

/* laborator 2: fracția dintr-o mulțime */
.ml-bile{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;min-height:calc(80px * var(--fs));margin-top:4px}
.ml-tot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:90%}
.ml-gr{display:grid;grid-template-columns:repeat(3,auto);gap:5px;padding:8px;border:3px dashed var(--sky);border-radius:14px;background:var(--card);box-shadow:0 4px 0 var(--line);cursor:pointer;animation:fh-pop .35s ease-out}
.ml-gr:hover{transform:translateY(-2px)}
.ml-gr.on{border-style:solid;border-color:var(--sun-edge);background:var(--sun-tint);box-shadow:0 4px 0 var(--sun-edge)}
.ml-gr.on i{background:var(--sun)}
.ml-rez{margin:8px 0 0;text-align:center;font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs));min-height:1.5em}
.ml-rez b{color:var(--leaf-deep)}

/* laborator 3: așază pe axă */
.ax-zona{padding:4px 10px 0;max-width:calc(620px * var(--fs));margin:0 auto}
.ax-in{position:relative}
.ax-tic{position:absolute;top:43.6%;transform:translate(-50%,-50%);aspect-ratio:1;max-height:28px;padding:0;border:3px solid var(--sky);border-radius:50%;background:var(--sky-tint);cursor:pointer}
.ax-tic:hover{background:var(--sky)}
.ax-tic.ales{background:var(--berry);border-color:var(--berry)}
.ax-rez{margin:2px 0 0;text-align:center;font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs));min-height:1.6em}

/* ---------- laborator 4: 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:pop .4s ease-out}
.an-q{font-size:calc(24px * var(--fs));font-weight:800;margin:10px 0;color:var(--ink);text-align:center}
.an-viz-b{max-width:420px;margin:0 auto 10px}
.an-viz-p{margin:0 auto 8px}
.an-viz-p .fp-pizza{max-width:calc(96px * var(--fs))}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(18px * var(--fs));min-width:5.5em;justify-content:center}
.an-msg{min-height:1.5em;margin:8px 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:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:pop .5s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* fără animații (accesibilitate) și mișcare redusă: totul static, în starea completă */
html.a-still .fh-ram,html.a-still .fh-nod,html.a-still .pf-c .fp-p,html.a-still .pf-c .fp-grupa,html.a-still .ml-gr,html.a-still .an-scor{animation:none!important}
@media (prefers-reduced-motion: reduce){
  .fh-ram,.fh-nod,.pf-c .fp-p,.pf-c .fp-grupa,.ml-gr,.an-scor,.an-serie{animation:none!important}
}


/* ---------- coloane: laboratoarele și sortarea primesc mai mult loc, planșa rămâne alături ---------- */
html:not(.flow) #v-s4 .lesson,html:not(.flow) #v-s6 .lesson,html:not(.flow) #v-s8 .lesson,html:not(.flow) #v-s12 .lesson{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}
html:not(.flow) #v-s5 .lesson,html:not(.flow) #v-s9 .lesson{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
#v-s9 .sort{grid-template-columns:repeat(3,minmax(0,1fr))}
html.flow #v-s9 .sort{grid-template-columns:minmax(0,1fr)}
.plate .fh-svg{max-height:calc(300px * var(--fs));margin:0 auto}

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