/* proto-menu.css — „Opțiuni prototip”: meniul mov al uneltelor de prototip.
   Contract: components/proto-menu.json · Reguli: docs/components/proto-menu.md

   NU e UI de produs și NU e în bono-ds.css: o aplicație de producție nu leagă fișierul
   ăsta. Îl copiază doar prototipurile, lângă copia lor ștampilată de bono-ds.css, împreună
   cu proto-menu.js (care construiește markup-ul).

   Mov-ul (#4C1D95, text #EDE9FE) e EXCEPȚIA declarată de la „nicio culoare în afara
   tokenilor": nu există în paleta Bono tocmai ca să spună „asta nu e parte din produs".
   De aceea nu e token în :root și nu apare în foundation-colors — trăiește doar aici, ca
   variabile locale pe .proto, scrise o singură dată. Contrast: textul #EDE9FE pe mov
   9.2:1, eticheta grupului (opacitate .75) 6.0:1, rândul ales (mov pe alb) 10.9:1.

   Portat din Dublin-VS (dublin.css, `.du-sim` + `.du-proto-*`, 25–26.10.2026), fără
   prefixul `du-`. Iese la print. */

.proto {
  --proto-bg: #4C1D95;
  --proto-fg: #EDE9FE;
  --proto-line: rgba(255, 255, 255, 0.14);
  --proto-hover: rgba(255, 255, 255, 0.12);
  --proto-shadow: 0 6px 20px rgba(76, 29, 149, 0.28);
  --proto-shadow-up: 0 10px 28px rgba(76, 29, 149, 0.36);

  /* Jos-stânga. Stratul 400 e deasupra modalului (200) și a tooltipului (300): resetul
     trebuie să meargă și cu un modal deschis (foundation-grid.html § Scara z-index). */
  position: fixed; bottom: 12px; left: 12px; z-index: 400;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 8px; border-radius: var(--r-full);
  background: var(--proto-bg); color: var(--proto-fg);
  box-shadow: var(--proto-shadow);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;   /* pe telefon, starea o dau rândurile, nu un flash albastru */
}
.proto[hidden] { display: none; }
@media print { .proto { display: none !important; } }

/* Se mută cu mouse-ul: corpul pastilei și butonul ei sunt mânerul (tragerea pornește
   după 3px, deci un click rămâne click). */
.proto.is-draggable { cursor: grab; touch-action: none; user-select: none; }
.proto.is-dragging { cursor: grabbing; box-shadow: var(--proto-shadow-up); }

/* Mânerul — grila de puncte (Lucide grip-vertical) de la marginea din stânga. Cursorul
   `grab` spune că se mută abia după ce ai pus mouse-ul pe pastilă; punctele o spun dinainte. */
.proto-grip { opacity: .45; transition: opacity 120ms; }
.proto.is-dragging > .proto-grip { opacity: .9; }
@media (hover: hover) {
  .proto.is-draggable:hover > .proto-grip { opacity: .9; }
}

/* Butonul „Opțiuni prototip”: deschis = alb cu text mov, focus cu contur alb. */
.proto-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px;
  border: 0; border-radius: var(--r-full); background: transparent; color: var(--proto-fg);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
}
.proto-trigger[aria-expanded="true"] { background: var(--c-white); color: var(--proto-bg); }
.proto-trigger:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
@media (hover: hover) {
  .proto-trigger[aria-expanded="false"]:hover { background: var(--proto-hover); }
}
/* chevron-down, rotit: în sus cât e închis — meniul se deschide deasupra. */
.proto-chev { transform: rotate(180deg); transition: transform 160ms; }
.proto-trigger[aria-expanded="true"] .proto-chev { transform: none; }

/* Meniul — o listă verticală, ca un sidebar: un grup per comutator, acțiunile jos.
   Deasupra pastilei; dedesubt dacă pastila e mutată sus (.is-below), aliniat la dreapta
   lângă marginea din dreapta (.is-right). */
.proto-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); box-sizing: border-box;
  width: 248px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 4px; padding: 8px;
  border-radius: var(--r-md); background: var(--proto-bg); color: var(--proto-fg);
  box-shadow: var(--proto-shadow-up); cursor: default;
}
.proto-menu[hidden] { display: none; }
.proto-menu.is-below { bottom: auto; top: calc(100% + 8px); }
.proto-menu.is-right { left: auto; right: 0; }

.proto-grps { display: grid; gap: 4px; }
.proto-grp { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 2px; }
.proto-grp + .proto-grp,
.proto-act { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--proto-line); }
.proto-act[hidden] { display: none; }
/* Doar acțiuni, niciun grup (de ex. o pagină care are doar Reset): fără linia de deasupra. */
.proto-grps:empty { display: none; }
.proto-grps:empty + .proto-act { margin-top: 0; padding-top: 0; border-top: 0; }

/* Eticheta grupului (Design, Stare, Variantă…). */
.proto-lb {
  float: left; width: 100%; padding: 4px 10px 6px; box-sizing: border-box;
  font: 600 11px/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; opacity: .75;
}
/* Propoziția unui grup „Simulează": ce face, în produs, altcineva în locul tău. */
.proto-note {
  clear: both; margin: 0; padding: 0 10px 4px;
  font: 400 12px/16px var(--font-sans); opacity: .75;
}

/* Un rând: opțiune (radio / bifă) sau acțiune. */
.proto-opt, .proto-do {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: inherit; font: 500 14px/20px var(--font-sans); text-align: left; cursor: pointer;
}
.proto-opt:has(input:checked) { background: var(--c-white); color: var(--proto-bg); }
.proto-opt:has(input:focus-visible), .proto-do:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
@media (hover: hover) {
  .proto-opt:hover, .proto-do:hover { background: var(--proto-hover); }
  .proto-opt:has(input:checked):hover { background: var(--c-white); }
}
.proto-opt input {
  appearance: none; flex-shrink: 0; width: 14px; height: 14px; margin: 0;
  border: 1.5px solid currentColor; border-radius: 50%; cursor: pointer;
}
.proto-opt input:checked { background: currentColor; box-shadow: inset 0 0 0 3px var(--c-white); }
/* Bifa (`Proto.check`): același rând, cu pătrat în loc de cerc. */
.proto-opt.is-check input { border-radius: 3px; }
.proto-opt input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .proto-grip, .proto-chev { transition: none; }
}