/* UNCIAE — nucleu comun de stil pentru fișele educative animate
   Bazat pe designul stabilit în fisa-E08-planimetru (mod. septembrie 2026) */

:root{
  --bg:#fff; --panel:#fff; --panel-line:#c8b489;
  --ink:#2b2416; --ink-dim:#AAAFB0;
  --ring:#8a7c53; --ring-dim:#c3b691;
  --verdigris:#3c7562; --brass:#a97a24; --brass-bright:#c6912f;
  --focus:#3c7562; --red:#E92B51; --blue:#2762EC; --yellow:#FAE019;
  font-size:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11161f; --panel:#1a2130; --panel-line:#333f56;
    --ink:#e9e2cc; --ink-dim:#9aa0b0; --ring:#5a6885; --ring-dim:#333f56;
    --verdigris:#5fac96; --brass:#d9a94e; --brass-bright:#e8bd6a; --focus:#5fac96;
  }
}
:root[data-theme="dark"]{
  --bg:#11161f; --panel:#1a2130; --panel-line:#333f56;
  --ink:#e9e2cc; --ink-dim:#9aa0b0; --ring:#5a6885; --ring-dim:#333f56;
  --verdigris:#5fac96; --brass:#d9a94e; --brass-bright:#e8bd6a; --focus:#5fac96;
}

*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin:0; padding-inline:20px; padding-block:28px 40px; line-height:1.55;
}
.page{ max-width:640px; margin:0 auto; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.tag{
  display:inline-block; font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.72rem; letter-spacing:0.08em; color:var(--ink);
  background:var(--panel); border:1px solid var(--ink); border-radius:0px; padding:5px 12px;
}
.langbtn{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem; letter-spacing:0.06em; font-weight:600;
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  border-radius:0px; padding:5px 12px; cursor:pointer;
}
.langbtn:hover{ color:var(--ink); border-color:var(--ink); }
.langbtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

h1{ font-size:clamp(1.7rem, 5vw, 2.3rem); font-weight:600; margin:0 0 6px 0; text-wrap:balance; }
.tagline{ font-style:italic; color:var(--ink); margin:0 0 22px 0; max-width:52ch; }

.stage{ background:var(--panel); border:1px solid var(--ink); border-radius:0px; padding:18px 14px 10px; }
.stage svg{ display:block; width:100%; height:auto; }
.fig-caption{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.92rem; color:var(--ink); text-align:left; margin:8px 0 12px 0; }

.controls{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.control-row{ display:flex; flex-direction:column; gap:6px; }
.control-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:0.06em;
}
.readout{ font-variant-numeric: tabular-nums; color:var(--ink); font-weight:600; letter-spacing:0; text-transform:none; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:2px;
  background:var(--ink-dim); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--yellow); border:2px solid var(--panel); box-shadow:0 0 0 1px var(--ring); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--brass);
  border:2px solid var(--panel); box-shadow:0 0 0 1px var(--ring); cursor:pointer;
}
input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--focus); outline-offset:2px; }

.presets{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.preset{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.74rem;
  background:transparent; color:var(--ink); border:1px solid var(--ink-dim);
  border-radius:0px; padding:5px 11px; cursor:pointer;
}
.preset:hover{ border-color:var(--ink); }
.preset.active{ color:var(--bg); background:var(--ink); border-color:var(--ink); }
.preset:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.playrow{ display:flex; align-items:center; gap:10px; padding:20px 0px; }
.playbtn{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.9rem;
  background:var(--yellow); color:var(--ink); border:none; border-radius:20px;
  padding:8px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
}
.playbtn:hover{ filter:brightness(1.08); }
.playbtn:focus-visible{ outline:2px solid var(--ink-dim); outline-offset:3px; }
.playhint{ font-size:0.78rem; color:var(--ink-dim); }

.note, .warn{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem;
  color:var(--ink-dim); margin-top:2px;
}

.stats{ display:flex; gap:22px; flex-wrap:wrap; margin-top:2px; }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat .label{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.68rem; color:var(--ink);
  text-transform:uppercase; letter-spacing:0.05em;
}
.stat .value{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:1.05rem; color:var(--ink-dim); font-variant-numeric: tabular-nums; }

.steps{ list-style:none; margin:26px 0 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:520px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.steps li{ font-size:0.9rem; color:var(--ink); border-top:1px solid var(--ink-dim); padding-top:8px; display:flex; gap:8px; }
.steps .n{ font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--yellow); font-weight:600; flex-shrink:0; font-size:1.2rem; }

.pending{
  margin-top:18px; font-size:0.82rem; color:var(--ink-dim);
  border:1px dashed var(--ink-dim); border-radius:0px; padding:10px 12px;
}

footer{
  margin-top:30px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.8rem;
  color:var(--ink); border-top:1px solid var(--ink-dim); padding-top:12px;
}
footer .collection-line{ font-weight:600; margin-bottom:6px; }
footer .obj-line{ display:block; line-height:1.6; }
footer .obj-line .inv{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600; }

@media (prefers-reduced-motion: reduce){ * { transition:none !important; } }

/* ══════════════════════════════════════════════════════════════════
   ADAOS septembrie 2026 — fișa ca pagină de sine stătătoare
   (nu mai e încapsulată în iframe-ul catalogului)

   1. bara de navigație cu întoarcere la pagina-gazdă
   2. pe desktop: două coloane — desenul la stânga, controalele la
      dreapta, ca nimic să nu ceară derulare
   3. pe mobil (sub 1000px) nu se schimbă absolut nimic
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · link de întoarcere (injectat de unciae-fise.js) ─────────── */
.backlink{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.72rem; letter-spacing:0.06em;
  color:var(--ink); text-decoration:none;
  border:1px solid var(--ink-dim); border-radius:0px;
  padding:5px 12px; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
}
.backlink:hover{ border-color:var(--ink); }
.backlink:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* topbar-ul are acum 3 elemente: înapoi · cod · limbă */
.topbar{ flex-wrap:wrap; }

/* ── 2 · aranjare pe două coloane, doar pe ecrane late ──────────── */
/* Structura .fisa-cols > .col-vis + .col-ctl e construită la runtime
   de UNCIAE.layout(); fișele nu trebuie modificate una câte una. */
.fisa-cols{ display:contents; }

@media (min-width:1000px){
  .page{ max-width:1160px; }

  .fisa-cols{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,390px);
    gap:34px;
    align-items:start;
    margin-bottom:6px;
  }

  /* coloana din dreapta rămâne pe ecran cât timp derulezi desenul */
  .col-ctl{ position:sticky; top:24px; }
  .col-ctl .controls{ margin-top:0; }
  .col-ctl .playrow{ padding-top:14px; }

  /* desenul nu depășește înălțimea ferestrei: controalele rămân
     vizibile fără derulare, care a fost tot rostul schimbării */
  .col-vis .stage svg{ max-height:calc(100vh - 280px); }

  /* titlul poate respira pe lățimea mare */
  h1{ font-size:2.5rem; }
  .tagline{ font-size:1.05rem; max-width:60ch; }

  /* pașii rămân pe toată lățimea, sub cele două coloane; câte coloane
     încap, atâtea — patru pași nu se mai rup în 3 + 1 */
  .steps{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:14px; }
}

@media (min-width:1360px){
  .page{ max-width:1280px; }
  .fisa-cols{ grid-template-columns:minmax(0,1fr) 420px; gap:44px; }
}

/* ── 3 · cele trei blocuri de text ──────────────────────────────────
   Fișele noi le au scrise în fișier, cu stilul lor; regulile de aici
   sunt identice, ca blocurile injectate de unciae-fise.js în fișele
   vechi să arate la fel. Duplicarea e inofensivă: aceleași valori. */
.lead{ font-size:1.02rem; line-height:1.6; margin:0 0 22px 0; max-width:62ch; }

.prose{ margin-top:26px; display:grid; gap:22px; }
@media (min-width:760px){ .prose{ grid-template-columns:repeat(3,1fr); gap:26px; } }
.prose h2{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600; margin:0 0 6px 0;
}
.prose p{ margin:0; font-size:0.92rem; line-height:1.55; }
.prose .keep{ border-left:3px solid var(--yellow); padding-left:12px; }

/* pe desktop blocurile stau sub cele două coloane, pe toată lățimea */
@media (min-width:1000px){ .prose{ margin-top:8px; } }

/* ══════════════════════════════════════════════════════════════════
   ADAOS · elementele generate de UNCIAE.fisa()

   Până acum fiecare fișă își copia aceste reguli în <style>-ul ei și
   copiile au început să difere. De aici încolo stau într-un singur loc.
   ══════════════════════════════════════════════════════════════════ */

/* verdict: o singură linie care spune dacă starea curentă e bună sau nu.
   Culoarea o dă clasa a doua (.ok / .off), pusă de fișă din render. */
.verdict{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.82rem;
  padding:7px 11px; border:1px solid var(--ink-dim); margin-top:4px;
}
.verdict.ok{  border-color:var(--verdigris); color:var(--verdigris); }
.verdict.off{ border-color:var(--red);       color:var(--red); }

/* descompunerea unei citiri în cifre colorate, sub glisor */
.ctl-below{ margin-top:2px; }
.digits{
  display:flex; gap:0; align-items:baseline; flex-wrap:wrap;
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.95rem;
}
.digits b{ font-weight:600; padding:2px 6px; }
.digits .d1{ color:var(--blue); }
.digits .d2{ color:var(--red); }
.digits .d3{ color:#8a6b00; background:var(--yellow); }
.digits .op{ color:var(--ink-dim); padding:0 3px; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .digits .d3{ color:#2b2416; }
}

/* fișa generată nu are conținut înainte de JS: ținem pagina liniștită
   până se construiește, ca să nu clipească un bloc gol */
.page:empty{ min-height:60vh; }

/* ── mânere de tras, în desen ────────────────────────────────────────
   `touch-action:none` stă NUMAI pe mâner, nu pe tot SVG-ul: altfel
   degetul n-ar mai putea derula pagina peste desen. */
.hgrab{ cursor:grab; touch-action:none; }
#svg.dragging .hgrab{ cursor:grabbing; }
.hdot{ opacity:.92; transition:r .12s; }
.hgrab:hover + .hdot{ opacity:1; }
@media (hover:none){ .hdot{ opacity:1; } }


/* ══════════════════════════════════════════════════════════════════
   FOTOGRAFIILE PIESELOR · și simplificările pentru telefon
   ══════════════════════════════════════════════════════════════════ */
.ph-box{ margin:0 0 20px 0; }
.ph-box[hidden]{ display:none; }
.ph-main{ display:block; background:rgba(0,0,0,.025); }
.ph-main img{ display:block; width:100%; height:210px; object-fit:contain; }
.ph-box figcaption{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem; color:var(--ink-dim);
  margin-top:6px; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ph-box figcaption .inv{ color:var(--ink); font-weight:600; }

@media (min-width:1000px){
  .intro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,390px); gap:34px; align-items:end; margin-bottom:22px; }
  .intro .lead{ margin-bottom:0; }
  .ph-box{ margin:0; }
  .ph-main img{ height:250px; }
}
@media (min-width:1360px){
  .intro{ grid-template-columns:minmax(0,1fr) 420px; gap:44px; }
}

/* butoanele de mai jos există doar pe telefon */
.m-more, .m-tog{ display:none; }
@media (max-width:999px){
  /* ordinea pe telefon: titlu, subtitlu, poza, apoi textul */
  .intro, .intro-txt{ display:flex; flex-direction:column; }
  .intro-txt{ display:contents; }
  .intro h1{ order:1; } .intro .tagline{ order:2; } .intro .ph-box{ order:3; }
  .intro .lead{ order:4; } .intro .m-more{ order:5; }
  .tagline{ margin-bottom:14px; }
  .ph-main img{ height:200px; }

  .lead{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; margin-bottom:4px; }
  .lead.open{ display:block; -webkit-line-clamp:unset; }
  .m-more{ display:inline-block; align-self:flex-start; background:none; border:0; padding:2px 0; margin:0 0 18px 0;
    font:inherit; font-size:0.85rem; color:var(--ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

  .m-tog{ display:flex; width:100%; justify-content:space-between; align-items:center; background:none; cursor:pointer;
    border:0; border-top:1px solid var(--ink-dim); padding:12px 0; margin-top:22px;
    font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); }
  .m-tog::after{ content:"+"; font-size:1.1rem; }
  .m-tog.open::after{ content:"–"; }
  .steps:not(.open){ display:none; }
  .steps.open{ margin-top:8px; }
  footer:not(.open) .obj-line, footer:not(.open) .collection-line{ display:none; }
  footer .m-tog{ margin-top:0; }
}

/* ── antetul și subsolul site-ului (ca pe pagina fișelor) ──────────── */
.site-head{ background:#0b0e12; color:#DEE0DA; margin:-28px -20px 26px; padding:18px 0; }
.site-foot{ background:#0b0e12; color:#8B949A; margin:56px -20px -40px; padding:30px 0; font-size:13px; }
.sh-wrap{ max-width:680px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.site-foot .sh-wrap{ display:block; }
.site-foot h3{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:300; font-size:18px; color:#DEE0DA; margin:0 0 6px; }
.site-foot p{ margin:0; }
.site-foot .foot-note{ color:#C2C8C4; max-width:66ch; margin:0 0 6px; }
.sh-logo{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.sh-mark{ width:30px; height:auto; fill:#C79A45; display:block; }
.sh-logo span{ font-size:20px; font-weight:400; color:#fff; letter-spacing:0; }
.sh-lang{ display:flex; }
.sh-lang button{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px; letter-spacing:.14em; padding:6px 12px;
  background:none; border:0; border-bottom:2px solid transparent; color:#8B949A; cursor:pointer; }
.sh-lang button:hover, .sh-lang button.on{ color:#fff; font-weight:600; border-bottom-color:currentColor; }
/* butonul de limbă al fișei rămâne în pagină, dar se apasă din antet */
.topbar .langbtn{ display:none; }
/* aceeași lățime ca pagina fișei, ca sigla să stea deasupra titlului */
@media (min-width:1000px){ .sh-wrap{ max-width:1200px; } }
@media (min-width:1360px){ .sh-wrap{ max-width:1320px; } }
@media (max-width:720px){ .sh-logo span{ font-size:17px; } .sh-mark{ width:26px; } }

/* ── „La școală”: legătura fișei cu programa ─────────────────────── */
.school{ margin-top:30px; padding:16px 18px; border-left:3px solid var(--yellow); background:var(--panel); }
.school h2{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; margin:0 0 10px 0; }
.school ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
@media (min-width:900px){ .school ul{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px 26px; } }
.school li{ display:flex; flex-direction:column; gap:3px; }
.school .sc-tag{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem; color:var(--ink); font-weight:600; }
.school .sc-txt{ font-size:0.9rem; line-height:1.5; }
.school .sc-note{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.66rem; color:var(--ink-dim); margin:12px 0 0 0; }
.school .sc-link{ margin:14px 0 0 0; font-size:0.92rem; }
.school .sc-link a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }