/* [cc 18.10] Meniul de sus după derulare: „Bandă de sticlă cu umbră adâncă” (varianta 03, aleasă de David pe 18.10: „menu variant 3 works well”).
   Sursa: hero-vercel/_piese-noi/meniu-v3/v/03/ (meniu.css + meniu.js + note.md; baza: README-baza.md). Port 1:1: aceleași reguli și valori;
   singura schimbare = prefixul html[data-mv3="03"] (pus de loader.js în machetă) a devenit html.ins (clasa pusă de final.js la încărcare; o clasă = aceeași specificitate ca atributul).
   Sus pe pagină: antetul de azi, neatins. De la 8 px derulați (html.ins-up, pus de final.js):
   - o bandă pe toată lățimea ferestrei, 56 px, sticlă în culoarea paginii (88 % deschis / 86 % închis, blur 20 + saturație 170 %);
   - sub ea o umbră adâncă și moale în 4 straturi (contact 1 px, apropiată, medie, lungă) în loc de linie;
   - logo-ul, meniul și butoanele rămân pe locul lor pe orizontală; urcă 4 px, ca să stea la mijlocul benzii (pe telefon nu se mișcă: antetul are deja 56 px);
   - cutia antetului rămâne 64 px (doar padding-bottom 8 px), deci nimic din pagină nu sare la prag;
   - insulele de azi (.ins-isle, .ins-link) sunt ascunse; panourile Programul / Resurse / Limba se deschid la 8 px sub bandă.
   Banda = ::before al antetului, position:fixed (left:0; right:0 = lățimea ferestrei fără bara de derulare, deci fără derulare laterală),
   z-index -1 în contextul antetului: sub scris, peste pagină. Singurul JS: menu-banda.js (inelul de focus al logo-ului + html.b3-toc).
   Conținutul panoului Programul (#dd-prog, harta cu hexagoane din menu-harta.js) nu se atinge. */

/* jetoanele stau pe <html>, nu pe antet: și bara cuprinsului (.toc, în afara antetului) ia aceeași sticlă și aceeași umbră */
html.ins{
  --b3-h:56px;
  --b3-fill:rgba(19,21,25,.86);   /* pe negru: suprafață ridicată, din familia sticlei de azi (rgba(20,22,26,.8)) */
  --b3-solid:#131519;
  --b3-blur:blur(20px) saturate(170%);
  --b3-glint:inset 0 -1px 0 rgba(255,255,255,.07);   /* pe negru o umbră nu se vede: muchia de jos o arată această lumină slabă */
  --b3-drop:
    0 1px 0 rgba(0,0,0,.9),
    0 10px 24px -6px rgba(0,0,0,.72),
    0 30px 60px -18px rgba(0,0,0,.85);
  --b3-shadow:var(--b3-glint),var(--b3-drop);
  --b3-ease:cubic-bezier(.2,.8,.2,1);
}
html.ins[data-theme=light]{
  --b3-fill:rgba(242,241,239,.88);
  --b3-solid:#f2f1ef;
  --b3-glint:0 0 0 0 transparent;
  --b3-drop:
    0 1px 0 rgba(20,42,62,.07),
    0 4px 8px -2px rgba(20,42,62,.10),
    0 10px 22px -6px rgba(20,42,62,.17),
    0 30px 56px -24px rgba(20,42,62,.26);
  --b3-shadow:var(--b3-drop);
}

/* ---------- insulele de azi ies ---------- */
html.ins .ins-isle,html.ins .ins-link{display:none!important}

/* ---------- banda ---------- */
html.ins header.top::before{
  content:""!important;   /* Acasa are „#c41 *::before{content:none}” (specificitate de ID) */
  position:fixed;left:0;right:0;top:0;height:var(--b3-h);z-index:-1;pointer-events:none;
  background:var(--b3-fill);
  -webkit-backdrop-filter:var(--b3-blur);backdrop-filter:var(--b3-blur);
  box-shadow:var(--b3-shadow);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility 0s linear .18s,box-shadow .2s ease;
}
html.ins.ins-up header.top::before{
  opacity:1;visibility:visible;pointer-events:auto;   /* banda prinde clicul: pagina de dedesubt nu se atinge prin ea */
  transition:opacity .26s var(--b3-ease),visibility 0s,box-shadow .2s ease;
}
/* Flota sub 1280 px: bara îngustă a cuprinsului (.toc) stă lipită sub bandă. menu-banda.js pune html.b3-toc cât timp e lipită (și vizibilă).
   Atunci banda și bara sunt O SINGURĂ suprafață de sticlă (56 + 44 px) cu o singură umbră moale, la muchia ei de jos (vezi blocul „bara cuprinsului”). */
html.ins.b3-toc header.top::before{box-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.ins header.top::before{background:var(--b3-solid)}
}
@media (prefers-reduced-transparency:reduce){
  html.ins header.top::before{background:var(--b3-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* foaia de meniu (telefon / tabletă) deschisă: antetul e plin, ca azi; fără umbră peste foaie */
html.ins header.top:has(#msheet:not([hidden]))::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

/* ---------- birou + tabletă (antet 64): scrisul urcă 4 px la mijlocul benzii de 56; cutia rămâne 64, deci pagina nu sare ---------- */
@media (min-width:761px){
  html.ins header.top.top{transition:padding-bottom .26s var(--b3-ease)}
  html.ins.ins-up header.top.top{padding-bottom:8px!important}
  html.ins.ins-up header.top #msheet{top:var(--b3-h)!important}          /* tabletă: foaia pornește chiar sub bandă */
  /* ce se lipește sub antet (bara îngustă a cuprinsului sub 1280 px, ancorele, --toc-y) urcă și el la 56: fără crăpătură de 8 px între bandă și bara cuprinsului.
     Pe Acasa --ins-band e pe #c41 (64), deci locul rezervat sub antetul fix rămâne 64 și pagina nu sare. */
  html.ins.ins-up{--ins-band:var(--b3-h,56px)}
  html.ins.ins-up header.top .globe ul{top:50px!important}                /* Limba: 8 px sub bandă (globul, 28 px, stă la 14 px de sus); !important: Acasa are #c41 .globe ul */
}
/* panourile: 8 px sub bandă (banda se termină la 56; antetul are 64, iar .dd stă la 10–46) */
@media (min-width:1024px){   /* !important: pe Acasa regulile panourilor au două ID-uri (#c41 ... #dd-prog) */
  html.ins[data-st-meniu=h].ins-up .top #dd-prog{top:100%!important}
  html.ins[data-st-meniu=h].ins-up .top #dd-res.ra-p{top:calc(100% + 18px)!important}
}

/* ---------- bara cuprinsului (Flota, sub 1280 px): sticlă ca banda, umbra stă pe ea, la capătul de jos al stivei ----------
   Fără clasa html.b3-toc nu se schimbă nimic: bara rămâne plină (var(--bg)) cu linia ei de progres, iar banda își ține umbra ei. */
@media (max-width:1279px){
  html.ins .toc{transition:box-shadow .2s ease}
  html.ins .toc-bar{transition:background-color .2s ease}
  html.ins.b3-toc .toc-bar{
    background:var(--b3-fill);
    -webkit-backdrop-filter:var(--b3-blur);backdrop-filter:var(--b3-blur);
  }
  html.ins.b3-toc .toc{box-shadow:var(--b3-drop)}   /* linia de progres (.toc-bar-p) rămâne în bară */
  /* foaia cuprinsului deschisă: umbra trece de pe bară pe marginea de jos a foii (sus e tăiată, ca să nu pice peste bară); sub foaie nu e nicio a doua umbră */
  html.ins.b3-toc .toc.is-open{box-shadow:none}
  html.ins.b3-toc .toc.is-open .toc-panel{box-shadow:var(--b3-drop);clip-path:inset(0 -80px -140px -80px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.ins.b3-toc .toc-bar{background:var(--b3-solid)}
}
@media (prefers-reduced-transparency:reduce){
  html.ins.b3-toc .toc-bar{background:var(--b3-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- tastatura: inel vizibil pe tot ce se atinge în bandă ---------- */
html.ins header.top :is(.nav>a,.nav>.dd>.dd-t,.r>a.txt,.r>.globe>button,.r>.theme-btn,.r>.burger):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
/* logo-ul e un hexagon decupat cu mască (masca taie orice inel): inelul îl desenează antetul (::after), în jurul cutiei logo-ului.
   Orizontal: menu-banda.js măsoară logo-ul la focus (--b3-fx/--b3-fw/--b3-fh); vertical: mijlocul benzii (--b3-cy), deci inelul urcă odată cu logo-ul. */
html.ins header.top{--b3-cy:32px}
@media (min-width:761px){html.ins.ins-up header.top{--b3-cy:28px}}
@media (max-width:760px){html.ins header.top{--b3-cy:28px}}
html.ins header.top .logo:focus-visible{outline:0;color:var(--ink);opacity:1}
html.ins header.top:has(.logo:focus-visible)::after{
  content:""!important;position:absolute;z-index:1;pointer-events:none;box-sizing:border-box;
  left:var(--b3-fx,18px);width:var(--b3-fw,47px);height:var(--b3-fh,48px);top:calc(var(--b3-cy) - var(--b3-fh,48px) / 2);
  border-radius:10px;box-shadow:0 0 0 2px var(--ink);
  transition:top .26s var(--b3-ease)}

/* ---------- mișcare redusă: totul pe loc ---------- */
@media (prefers-reduced-motion:reduce){
  html.ins header.top.top,
  html.ins header.top::before,
  html.ins.ins-up header.top::before,
  html.ins .toc,
  html.ins .toc-bar,
  html.ins header.top::after{transition:none!important}
  /* [cc 18.10] și estomparea culorii legăturilor din bară (final.css: .nav a{transition:color .2s}, menu-final.css: .dd-t{...}) la trecerea peste 8 px: 200 ms rămâneau */
  html.ins header.top :is(.nav a,.dd-t,.r>a){transition:none!important}
}