/* ============================================================================
   TOOLS DOCK (B1, sess.47 · redesign sess.47b) — toolbar orizzontale a SX
   Visibile SOLO in compact 1400-1849 quando l'header è collassato (sticky),
   dove i tool del nav (search/theme/units/lang) diventano inaccessibili.
   Pannello surface SEMPRE aperto (niente collapse): riga orizzontale compatta
   SOTTO la card F7, larga come la pill, coerente con le card del rail DX +
   bordino accento sx (regola accent logica: rail sx → bordo sx).
   ============================================================================ */
.ds-tools-dock{
  display: none;
  position: fixed;
  left: clamp(8px, 1.4vw, 20px);
  /* sess.47b: TRA il cerchio hamburger e la pill F7 (coerenza narrativo-operativa:
     menu/tool prima, identità prodotto dopo). La pill scende sotto → override
     in product-bar.css scopato a compact-sticky. */
  top: var(--ds-header-sticky-top, 8px);   /* sess.49 b: la dock INCLUDE l'hamburger → sale dove stava il pallino */
  width: var(--ds-dock-w, 176px);   /* largo come la pill product-bar */
  z-index: 60;
  isolation: isolate;               /* compositing isolato → niente artefatti sticky vicini */

  /* sess.49 b: rettangolo 2 righe — grid 3 col: riga1 menu/theme/lang, riga2 search/units/A */
  grid-template-columns: repeat(3, 1fr);
  align-items: center; justify-items: center;
  gap: 5px 4px;
  padding: 7px 6px;
  border-radius: 14px;
  background: var(--ds-surface-1-bg);
  border: 1px solid var(--ds-surface-1-border);
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.48),   /* bordino accento sx — tocco brand */
    var(--ds-surface-1-accent),
    0 8px 24px rgba(0,0,0,.16);
  /* sess.49 (fix expand): cross-fade morbido quando l'header si espande (hand-off
     dock → header), coordinato col morph del nav in header.css. */
  transition: opacity .2s ease, transform .22s ease;
}
body.ds-dark .ds-tools-dock{
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.32),
    var(--ds-surface-1-accent),
    0 8px 24px rgba(0,0,0,.20);
}
/* Mostra solo in compact (1400-1849) + header collassato (sticky) */
body.ds-vp-compact.is-page-sticky .ds-tools-dock{
  display: grid;
  /* sess.49: entrata coerente con la pill title-bar (stesso curtain-drop) → niente "pop".
     NB: niente fill `both` → dopo l'entrata il valore torna alla cascade normale,
     così la regola .ds-sticky-expanded può sfumare la dock in uscita (con `both`
     l'animazione manteneva opacity:1 e vinceva sulla classe). */
  animation: ds-dock-in 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ds-dock-in{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: translateY(0); }
}
/* Header espanso (≡ premuto): la dock cede il posto all'header che si apre */
body.ds-sticky-expanded.ds-vp-compact.is-page-sticky .ds-tools-dock{
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  pointer-events: none;
}

.ds-tdock-btn{
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ds-c-text-secondary);
  transition: background 160ms ease, color 160ms ease, transform 90ms ease;
}
@media (hover: hover){
  .ds-tdock-btn:hover{ background: var(--ds-c-accent-subtle, rgba(244,181,50,.10)); color: var(--ds-c-text); }
}
.ds-tdock-btn:active{ transform: scale(.94); }
.ds-tdock-btn:focus-visible{ outline: 2px solid var(--ds-c-focus, #F4B532); outline-offset: 2px; }

.ds-tdock-units__txt,
.ds-tdock-a__txt,
.ds-tdock-lang__cur{ font: 700 .72rem/1 "Oswald", system-ui, sans-serif; letter-spacing: .04em; }
.ds-tdock-a__txt{ font-size: .9rem; }

/* sess.49 b: il bottone MENU è il pallino brand De Sisti (richiamo logo) +
   hamburger sopra → brand + menu nello stesso elemento, come il vecchio pallino.
   !important per non farsi cancellare il pallino dall'hover base (.ds-tdock-btn:hover background shorthand). */
.ds-tdock-menu,
.ds-tdock-menu:hover{
  background-image: url("../../img/pallino%20De%20Sisti.svg") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #101010;
}

/* Lang popup — esce SOTTO il pulsante lingua */
.ds-tdock-lang{ position: relative; flex: 0 0 auto; }
.ds-tdock-lang__menu{
  position: absolute; top: calc(100% + 8px); left: 0;
  margin: 0; padding: 6px; list-style: none; min-width: 132px;
  border-radius: 12px;
  background: var(--ds-c-bg-overlay, rgba(20,18,15,.96));
  border: 1px solid var(--ds-surface-1-border);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  z-index: 2;
}
.ds-tdock-lang__menu[hidden]{ display: none; }
.ds-tdock-lang__menu button{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 100%; text-align: left; padding: 8px 12px; border-radius: 8px;
  color: var(--ds-c-text);
  font: 600 .82rem/1 "Oswald", system-ui, sans-serif;
}
@media (hover: hover){
  .ds-tdock-lang__menu button:hover{ background: var(--ds-c-accent-subtle, rgba(244,181,50,.12)); }
}
.ds-tdock-lang__menu button:focus-visible{ outline: 2px solid var(--ds-c-focus, #F4B532); outline-offset: -2px; }