/*
 * Golden Pastry — sertarul de meniu de pe telefon.
 *
 * Pe ecran mic bara laterală a panourilor se ascundea și nu punea nimic în
 * loc: din Catalog, Jurnal, Setări și Parola mea nu se mai putea ajunge
 * nicăieri, iar „Ieși din cont" devenea de neatins. Butonul ☰ și sertarul de
 * mai jos sunt înlocuitorul.
 *
 * Stilurile stau AICI, într-un singur fișier, nu în blocul <style> al fiecărei
 * pagini. Opt copii de CSS s-ar fi depărtat una de alta exact cum s-au
 * depărtat cele opt copii ale meniului — și atunci butoanele chiar ar fi stat
 * unul mai sus decât altul, de la o pagină la alta. Lista de intrări vine tot
 * dintr-un singur loc, `gp.meniu()` din shared/gp-api.js.
 *
 * `.claude/build-deploy.mjs` copiază folderul `shared` întreg și trece
 * fișierele .css prin aceeași rescriere de legături ca paginile.
 */

/* Butonul ☰ din bara de sus. Înlocuiește săgeata „←", care arăta la fel în
   toate panourile dar ducea în alt loc din fiecare: din Conturi la Comenzi,
   din Jurnal la Conturi, din Depozit la alegerea panoului. Un singur semn cu
   patru înțelesuri nu se poate învăța. */
.gp-burger {
  display: none;                 /* pe monitor există bara laterală */
  flex: none;
  margin-left: auto;             /* împins la dreapta în bara de sus; aici, nu
                                    în marcaj, ca butonul să n-aibă niciun stil
                                    scris pe el în cele opt pagini */
  align-items: center;
  justify-content: center;
  /* Lățime ȘI înălțime fixe, nu min-height: vecinii din bară au înălțimi
     date tot fix, iar un min-height s-ar fi întins după conținut și butonul
     ar fi stat cu câțiva pixeli mai jos decât restul rândului. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  color: var(--h-cream-100);
  font-family: var(--h-font-body);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gp-burger:hover { background: rgba(255, 255, 255, .18); }

/* Varianta pentru antetele deschise la culoare.
   Culorile de mai sus sunt scrise pentru o bară cocoa: cremă peste un alb
   străveziu. Zece pagini au bara aceea. Recomandări nu: butonul ei stă direct
   pe fundalul de cremă al paginii, iar acolo regula de sus îl desena cremă pe
   cremă. Butonul exista, se apăsa, deschidea sertarul — dar nu se vedea, deci
   pagina părea fără nicio ieșire. Aceeași rețetă, întoarsă: cerneala paginii
   peste un întuneric străveziu. */
.gp-burger--lumina {
  background: rgba(27, 18, 11, .07);
  color: var(--h-fg);
}
.gp-burger--lumina:hover { background: rgba(27, 18, 11, .14); }

/* Fundalul întunecat. Apăsat, închide sertarul. */
.gp-navsheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* Foaia stă la mijlocul înălțimii, nu lipită de marginea de jos.
     Prima formă o ridica de jos, „unde ajunge degetul". Pe telefoanele lungi
     de azi asta o împingea atât de jos încât primele rânduri cădeau sub linia
     în care se uită omul, iar pe un ecran lat rămânea un dreptunghi mic
     agățat de marginea de jos a monitorului. La mijloc se vede toată dintr-o
     privire, și pe telefon, și pe tabletă. */
  justify-content: center;
  padding: 16px 12px;
  background: rgba(27, 18, 11, .62);
  animation: gp-navfade .18s var(--h-ease-out);
}

/* Foaia propriu-zisă. Culorile barei laterale, fiindcă e același meniu — doar
   pus altfel. Dacă ar fi fost deschisă la culoare, ar fi semănat cu foaia de
   filtre din Comenzi, care e altceva. */
.gp-navcard {
  box-sizing: border-box;
  width: 100%;
  /* Foaia se măsoară după mână, nu după ecran. Pe telefon `max-width` nu se
     simte — ecranul e mai îngust. Pe tabletă și pe monitor, unde butonul ☰
     rămâne (Laborator și Rută n-au bară laterală), fără el rândurile s-ar
     întinde pe toată lățimea: o țintă de 1400px cu scrisul singur în capătul
     din stânga, la care ochiul și mâna au de mers degeaba. */
  max-width: 520px;
  margin: 0 auto;
  /* Scăzut din înălțime, nu din ecran: foaia stă acum la mijloc, între cele
     două margini de 16px ale fundalului, deci un `88vh` ar fi ieșit din ele. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 8px 14px 16px;
  /* Rotunjită de toate patru colțurile: nu mai atinge marginea de jos, iar
     două colțuri drepte în aer ar arăta ca o foaie tăiată. */
  border-radius: 22px;
  background: var(--h-cocoa-800);
  color: var(--h-cream-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: gp-navpop .22s var(--h-ease-spring);
}

/* Bara mică de sus: spune din priviri că foaia se trage și se închide. */
.gp-navgrab {
  flex: none;
  width: 38px;
  height: 4px;
  margin: 4px auto 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
}

.gp-navhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 4px;
}
.gp-navtitle {
  font-family: var(--h-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;
}
.gp-navsub {
  font-size: 13px;
  opacity: .66;
}
.gp-navx {
  margin-left: auto;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  color: var(--h-cream-100);
  font-family: var(--h-font-body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.gp-navx:hover { background: rgba(255, 255, 255, .18); }

/* Un rând de meniu. Aceleași măsuri pentru <a> și pentru <button>, ca rândul
   de ieșire din cont să nu iasă cu un pixel mai jos decât celelalte. */
.gp-navrow {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: var(--h-cream-100);
  font-family: var(--h-font-body);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.gp-navrow:hover { background: rgba(255, 255, 255, .14); }

/* Pagina pe care ești deja. E <span>, nu <a>: o legătură care te duce unde
   ești arată ca un buton stricat. */
.gp-navrow--on {
  background: var(--h-accent);
  color: #1B120B;
  font-weight: 700;
  cursor: default;
}
.gp-navrow--on:hover { background: var(--h-accent); }

/* Rândul cu numele contului: arată ca un rând de meniu, dar nu duce nicăieri —
   butonul de ieșire din el e cel care face ceva. */
.gp-navrow--who { cursor: default; }
.gp-navrow--who:hover { background: rgba(255, 255, 255, .07); }

/* Numele paginii, în capul foii. */
.gp-navid {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Despărțitorul dintre panouri și ce ține de cont. */
.gp-navsep {
  height: 1px;
  margin: 8px 2px 4px;
  background: rgba(255, 255, 255, .12);
}
.gp-navwho {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.gp-navname {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-navquiet {
  font-size: 12px;
  opacity: .6;
}
.gp-navout {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  background: transparent;
  color: var(--h-cream-100);
  font-family: var(--h-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.gp-navout:hover { background: rgba(255, 255, 255, .10); }

@keyframes gp-navfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes gp-navpop {
  from { transform: translateY(14px); opacity: 0 }
  to   { transform: translateY(0); opacity: 1 }
}

/* Bara de derulare a meniului, pe fundalul lui închis.
   Pe Windows bara e desenată de sistem, deschisă la culoare: lângă panoul
   cafeniu apărea o dungă albă pe toată înălțimea, de cum avea meniul mai multe
   intrări decât încap (fondatorul, pe un ecran de 900px). Pe Mac nu se vedea,
   fiindcă acolo bara plutește și apare numai cât derulezi.
   `.gp-meniu-derulat` se pune pe cele două cutii ale barei laterale care se
   pot derula (bara întreagă și lista de intrări); foaia de pe telefon o are
   de aici. `gp-aici` e semnul mut din rândul paginii deschise — v.
   shared/gp-api.js. */
.gp-meniu-derulat,
.gp-navcard {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .30) transparent;
}
gp-aici { display: none; }

/* Pe telefon apare butonul. */
@media (max-width: 760px) {
  .gp-burger { display: flex }
}
/* Panourile de tabletă (Laborator, Rută) n-au bară laterală pe niciun ecran,
   deci butonul trebuie să existe la orice lățime — altfel de pe monitor n-ar
   mai fi nicio cale de ieșire din ele. */
.gp-burger--mereu {
  display: flex;
  /* Fără împinsul la dreapta: în antetele astea vecinul din stânga are deja
     `margin-left:auto`, iar două margini automate ar împărți spațiul liber
     între ele și ar lăsa butonul rupt de restul rândului. */
  margin-left: 0;
}

/* Sertarul NU se ascunde pe ecran lat, deși prima formă a fișierului îl
   ascundea — cu gândul la sertarul rămas deschis când o tabletă se rotește.
   Regula aceea rupea tocmai panourile pentru care butonul a fost făcut: în
   Laborator și Rută butonul se vede la orice lățime, fiindcă n-au bară
   laterală, iar pe monitor apăsarea lui nu mai deschidea nimic. Un buton care
   nu face nimic e mai rău decât o foaie rămasă deschisă — mai ales aici, unde
   e singura cale de ieșire din panou.
   Foaia rămasă deschisă nu e o încurcătură: se închide și cu „×", și apăsând
   pe fundal. În celelalte șase panouri nici nu se poate deschide pe monitor,
   fiindcă acolo butonul ☰ e ascuns de la 761px în sus. */

/* Pastila cu versiunea, în colțul de jos — și în sertarul de telefon, și în
   subsolul barei laterale.

   O SINGURĂ REGULĂ PENTRU AMÂNDOUĂ LOCURILE, fiindcă e același lucru. Cele opt
   subsoluri de bară laterală s-au depărtat unul de altul de-a lungul rundelor
   (opt forme deosebite, măsurate) — un stil scris pe element ar fi făcut a
   noua formă, iar peste încă două runde nimeni n-ar mai fi știut care e cea
   bună. Aici e un singur loc, deci nu se pot depărta.

   Se poate lua cu mouse-ul (`user-select`), fiindcă rostul ei e să poată fi
   CITITĂ CU GLAS TARE la telefon ori copiată într-un mesaj: „ce scrie în
   colț?" e prima întrebare de pus când o actualizare pare să nu fi intrat.

   Elementul e `<gp-versiune>`, scris în `shared/gp-api.js`. Până se
   înregistrează el, browserul îl ține drept element necunoscut, adică `inline`
   și gol — de-asta `display:block` stă scris aici și nu se moștenește de
   nicăieri. Iar dacă fișierul acela n-a ajuns deloc, pastila rămâne goală și
   nu lasă nicio gaură în colț.

   SE ÎMBRACĂ DUPĂ NUMELE ETICHETEI, NU DUPĂ O CLASĂ — și nu din cochetărie.
   O cratimă în numele etichetei o face element străin pentru React, iar
   atunci `className` nu se mai potrivește cu `class`: se scrie ca atribut,
   sub numele lui, coborât la litere mici de `setAttribute`. Un
   `class="gp-navver"` din marcaj ajungea în pagină `classname="gp-navver"`,
   care nu se potrivește cu nimic: pastila rămânea cu litera de 16px și
   aproape albă, fără nicio eroare nicăieri — măsurat pe ecran, la 1440px,
   fiindcă n-avea cum să se vadă altfel. Felul ăsta e și felul casei: celălalt
   element al nostru, `<image-slot>`, n-a purtat vreodată `class`. Păzit în
   `.claude/check-pages.mjs`. */
gp-versiune {
  display: block;
  padding: 2px 2px 0;
  color: rgba(255, 255, 255, .44);
  font-family: var(--h-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  user-select: text;
  -webkit-user-select: text;
}

/* ÎN SERTAR, PASTILA STĂ ÎN CAP — sub numele casei, nu la coada listei.
   Aici a fost, o rundă, lipită de FUNDUL foii (`position:sticky; bottom:0`),
   ca să nu cadă sub fald la rangurile cu multe rânduri. Leacul acela ținea,
   dar plătea cu ce se vede: lipită de fund, pastila PLUTEȘTE peste rândurile
   care trec pe dedesubt la derulare, iar patronul a citit-o exact așa — „se
   suprapune peste meniu". Și avea dreptate: un fundal opac pus peste o listă
   care se mișcă ARATĂ ca o stricăciune, chiar când e o pază.

   Deci pastila se mută acolo unde nu trebuie păzită de nimic: în capul
   foii, în aceeași coloană cu „Golden Pastry" și cu numele paginii. Capul e
   primul lucru din card, deci se vede la deschidere, la ORICE rang, fără
   nicio derulare — nu fiindcă o ține ceva sus, ci fiindcă de acolo se începe.
   Depășirea de la fondator (140 px, măsurată la 390x844) rămâne ce era: o
   listă mai lungă decât ecranul, care se derulează. Numai că acum ce cade
   sub fald e coada meniului, nu ștampila codului.

   Nu mai trebuie nici `background`: nimic nu trece pe sub ea. Rămâne o
   singură haină de potrivit — marginea din stânga. Subsolul barei laterale
   are 2px de împins, capul foii n-are: aici pastila se aliniază cu titlul
   și cu numele paginii, altfel cele trei rânduri ies în trepte. */
.gp-navsheet gp-versiune {
  padding: 2px 0 0;
}