/* aplicatie.css — stiluri proprii lecției „Scopul și mesajul autorului” (doar variabile de culoare).
   Prefixul „sm-” (scop–mesaj) ține clasele proprii departe de cele din edulogia.css. */

/* stațiile fără planșă (laboratoarele) folosesc toată lățimea */
.lesson:has(> .work:empty){grid-template-columns:minmax(0,1fr)}
.lesson > .work:empty{display:none}

/* culorile celor patru direcții */
.sm-inf{--dc:var(--sky);--dt:var(--sky-tint)}
.sm-con{--dc:var(--berry);--dt:var(--berry-tint)}
.sm-dis{--dc:var(--sun-ink);--dt:var(--sun-tint)}
.sm-exp{--dc:var(--leaf-deep);--dt:var(--leaf-tint)}

/* ---------- planșe ---------- */
.plate .sm-bus,.plate .sm-tab,.plate .sm-patru,.plate .sm-pov,.plate .sm-msg{background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}

/* busola autorului: etichetele stau exact în dreptul punctelor cardinale */
.sm-roza{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto;align-items:center;justify-items:center;gap:6px 8px}
.sm-d{display:inline-flex;align-items:center;gap:4px;border:3px solid var(--dc);background:var(--card);color:var(--ink);border-radius:999px;padding:3px 10px;font-weight:800;font-size:calc(15px * var(--fs));line-height:1.2;white-space:nowrap;transition:background .3s,color .3s,transform .3s}
.sm-d i{font-style:normal}
.sm-d.on{background:var(--dc);color:var(--card);transform:scale(1.08)}
.sm-d[data-d="0"]{grid-area:1/2}
.sm-d[data-d="1"]{grid-area:2/3;justify-self:start}
.sm-d[data-d="2"]{grid-area:3/2}
.sm-d[data-d="3"]{grid-area:2/1;justify-self:end}
.sm-cadran{grid-area:2/2;position:relative;width:calc(150px * var(--fs));height:calc(150px * var(--fs))}
.sm-cadran>svg,.sm-ac,.sm-ac svg{position:absolute;inset:0;width:100%;height:100%}
.sm-c1{fill:var(--card);stroke:var(--ink);stroke-width:3}
.sm-c2{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 4}
.sm-tic{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sm-ac{transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.sm-acn{fill:var(--berry)} .sm-as{fill:var(--muted)} .sm-ax{fill:var(--ink)}
.sm-semn{position:absolute;right:-4px;top:-6px;font-weight:900;font-size:calc(24px * var(--fs));color:var(--muted)}
.sm-bus.rezolvat .sm-semn{display:none}
/* textele de sub busolă: animat, unul singur (toate în aceeași celulă, deci înălțimea nu sare); static, toate */
.sm-ex{list-style:none;margin:12px 0 0;padding:0;display:grid}
.sm-ex li{grid-area:1/1;display:flex;gap:8px;align-items:center;border-left:6px solid var(--dc);background:var(--dt);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:calc(17px * var(--fs));line-height:1.3;opacity:0;transition:opacity .4s}
.sm-ex li i{font-style:normal}
.sm-ex li.on{opacity:1}
.sm-bus.static .sm-ex{gap:6px}
.sm-bus.static .sm-ex li{grid-area:auto;opacity:1;font-size:calc(14px * var(--fs));padding:5px 8px}
.sm-bus.static .sm-ac{transition:none}

/* stația 2–3: tabel colorat pe direcții */
.sm-tab{display:grid;gap:8px}
.sm-tab p{margin:0;display:grid;grid-template-columns:9.5em 1fr;align-items:center;gap:10px;background:var(--dt);border-left:6px solid var(--dc);border-radius:10px;padding:8px 12px;font-size:calc(18px * var(--fs))}
.sm-tab b{color:var(--dc)}
.sm-tab span{font-weight:700}
.sm-tab u{text-decoration-color:var(--dc);text-decoration-thickness:3px}
.sm-sem p{grid-template-columns:2em 1fr}

/* stația 5: patru texte despre arici; ceasul îl evidențiază pe rând pe fiecare */
.sm-patru{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sm-patru p{margin:0;display:flex;flex-direction:column;gap:4px;background:var(--dt);border:3px solid var(--dt);border-radius:12px;padding:10px;font-size:calc(16px * var(--fs));line-height:1.3;transition:border-color .3s,transform .3s}
.sm-patru b{font-size:1.3em}
.sm-patru p.on{border-color:var(--dc);transform:scale(1.03)}
.sm-patru.static p{border-color:var(--dc);transform:none}

/* povestiri pe planșă */
.sm-pov h4{margin:0 0 8px;font-size:calc(18px * var(--fs));color:var(--ink)}
.sm-pov p{margin:0;font-weight:700;font-size:calc(18px * var(--fs));line-height:1.45}

/* stația 9: mesajul */
.sm-msg{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:26px 16px!important}
.sm-msg span{background:var(--sun);color:var(--on-sun);border-radius:999px;padding:3px 14px}
.sm-msg b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));line-height:1.2}

/* ---------- laborator: detectivul de indicii ---------- */
.sm-det{display:flex;gap:14px;align-items:center}
.sm-det-txt{flex:1;min-width:0;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px}
.sm-det-txt h4{margin:0 0 6px;font-size:calc(17px * var(--fs));color:var(--ink)}
.sm-det-txt p{margin:0;line-height:2.1;font-size:calc(18px * var(--fs));color:var(--ink)}
.sm-grup{border-radius:6px;transition:background .2s}
.sm-w{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;border-bottom:3px solid transparent;border-radius:4px;padding:0 1px;cursor:pointer;line-height:1.3}
.sm-w:hover{background:var(--sky-tint)}
.sm-grup.ales .sm-w{border-bottom-color:var(--berry);background:var(--berry-tint)}
.sm-grup.gasit .sm-w{border-bottom-color:var(--dc);background:var(--dt);color:var(--ink)}
.sm-grup.gasit{animation:sm-pop .45s ease-out both}
.sm-grup.scutura{animation:sm-shake .45s}
.sm-w:disabled{cursor:default}
.sm-bus.sm-mica{flex:0 0 auto}
.sm-mica .sm-cadran{width:calc(110px * var(--fs));height:calc(110px * var(--fs))}
.sm-mica .sm-d{font-size:calc(13px * var(--fs));padding:2px 8px;border-width:2px}
.sm-act{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:2px dashed var(--line)}
.sm-nr{margin-right:auto;color:var(--muted);font-weight:800}
.sm-act .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator: subiect sau mesaj? ---------- */
.sm-sm .sm-pov{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 14px}
.sm-sm .sm-pov p{font-size:calc(16px * var(--fs));line-height:1.4}
.sm-q{display:flex;align-items:center;gap:12px;margin:10px 0 8px}
.sm-pas{flex:0 0 auto;background:var(--sun-tint);color:var(--sun-ink);border-radius:999px;padding:3px 10px;font-weight:800;font-size:calc(14px * var(--fs))}
.sm-prop{margin:0;flex:1;font-weight:800;font-size:calc(20px * var(--fs));color:var(--ink)}
.sm-prop.nou{animation:sm-pop .35s ease-out}
.sm-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sm-b{flex:1 1 0;min-width:7em;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:calc(48px * var(--fs));padding:4px 12px;font:inherit;font-weight:800;font-size:calc(19px * var(--fs));color:var(--ink);background:var(--card);border:3px solid var(--bc);border-radius:14px;box-shadow:0 5px 0 var(--bc);cursor:pointer}
.sm-b i{font-style:normal}
.sm-b:hover{transform:translateY(-2px)}
.sm-b:active{transform:translateY(2px);box-shadow:0 2px 0 var(--bc)}
.sm-b0{--bc:var(--sky)} .sm-b1{--bc:var(--sun-edge)} .sm-b2{--bc:var(--leaf)}
.sm-b:disabled{opacity:.45;transform:none;cursor:default}
.sm-b.scutura{animation:sm-shake .45s}
.sm-btns .sm-again{flex:0 0 auto}
.sm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.sm-col{border:2px dashed var(--line);border-radius:12px;padding:6px 8px;min-height:calc(56px * var(--fs))}
.sm-col h5{margin:0 0 4px;font-size:calc(14px * var(--fs));color:var(--muted)}
.sm-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sm-col li{border-radius:8px;padding:3px 8px;font-weight:700;font-size:calc(14px * var(--fs));line-height:1.25;animation:sm-pop .35s ease-out}
.sm-col0 li{background:var(--sky-tint)} .sm-col1 li{background:var(--sun-tint)} .sm-col2 li{background:var(--leaf-tint)}

/* ---------- laborator: antrenament rapid ---------- */
.sm-an-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.sm-an-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.sm-an-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.sm-an-serie.aprinsa{color:var(--berry);animation:sm-pop .4s ease-out}
.sm-an-txt{margin:10px 0 6px;background:var(--card);border:2px solid var(--line);border-left:6px solid var(--sky);border-radius:12px;padding:8px 12px;font-weight:700;font-size:calc(18px * var(--fs));line-height:1.4;color:var(--ink)}
.sm-an-q{font-size:calc(19px * var(--fs));font-weight:800;margin:6px 0 8px;color:var(--ink)}
.sm-an-var{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sm-an-var.lung{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm-an-var .chip{display:flex;align-items:center;justify-content:center;text-align:center;min-height:calc(46px * var(--fs));font-size:calc(16px * var(--fs));line-height:1.25;overflow-wrap:anywhere}
.sm-an-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800}
.sm-an-msg.bine{color:var(--leaf-deep)} .sm-an-msg.rau{color:var(--berry)}
.sm-an-final{text-align:center}
.sm-an-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:sm-pop .5s}

@keyframes sm-pop{0%{transform:scale(.7)}70%{transform:scale(1.08)}100%{transform:none}}
@keyframes sm-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* telefon: casetele trec una sub alta */
html.flow .sm-det{flex-direction:column;align-items:stretch}
html.flow .sm-roza{gap:4px 4px}
html.flow .sm-cadran,html.flow .sm-mica .sm-cadran{width:96px;height:96px}
html.flow .sm-d,html.flow .sm-mica .sm-d{font-size:12px;padding:2px 6px;border-width:2px}
html.flow .sm-an-var{grid-template-columns:repeat(2,minmax(0,1fr))}
html.flow .sm-an-var.lung{grid-template-columns:minmax(0,1fr)}
html.flow .sm-cols{grid-template-columns:minmax(0,1fr)}
html.flow .sm-tab p{grid-template-columns:minmax(0,1fr)}
html.flow .sm-patru{grid-template-columns:minmax(0,1fr)}

/* fără animații: stare statică, completă */
html.a-still .sm-ac,html.a-still .sm-ex li,html.a-still .sm-d,html.a-still .sm-patru p{transition:none!important}
html.a-still .sm-grup,html.a-still .sm-prop,html.a-still .sm-col li,html.a-still .sm-an-scor,html.a-still .sm-an-serie{animation:none!important}
@media (prefers-reduced-motion: reduce){
  .sm-ac,.sm-ex li,.sm-d,.sm-patru p{transition:none!important}
  .sm-grup,.sm-prop,.sm-col li,.sm-an-scor,.sm-an-serie,.sm-b{animation: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}