/* ============================================================================
   SITE TOUR — coach-marks (sess.73, REGIA-3/tutorial)
   ----------------------------------------------------------------------------
   Velo scuro + buco luminoso sull'elemento + card con titolo, due righe e il
   passo. Tutto con i token: niente colori in duro, dark/light per definizione.

   IL BUCO E' UN'OMBRA. `.ds-tour__spot` è un rettangolo vuoto con
   `box-shadow: 0 0 0 9999px <velo>`: l'ombra copre tutto lo schermo TRANNE il
   rettangolo. Nessuna maschera SVG, nessun ritaglio, nessun z-index da
   negoziare con i widget: quello che sta nel buco è la pagina vera, qualunque
   z-index abbia. Il primo box-shadow (l'anello ambra) si disegna SOPRA il
   secondo (il velo) — è l'ordine di pittura delle ombre, non un caso.

   Chi prende i click è `.ds-tour__catch`, che sta SOTTO lo spot: lo spot ha
   pointer-events:none, quindi non intercetta e non sfarfalla. La rotella però
   passa: la pagina scorre anche col tour aperto e il buco la insegue (il JS
   ridisegna su scroll). Bloccare lo scroll avrebbe rotto il tour stesso, che
   per andare al passo dopo deve scrollare.

   Fasce: mobile <1100 la card diventa un pannello in basso a tutta larghezza
   (`.is-sheet`), il buco si limita al 44% dell'altezza così non ci finisce
   sotto. Da 1100 in su la card insegue il buco.
   ============================================================================ */

/* ══ CONTENITORE ═════════════════════════════════════════════════════════ */
.ds-tour{
  position: fixed;
  inset: 0;
  z-index: 12500;
}
.ds-tour[hidden]{ display: none !important; }

/* ══ IL CATTURA-CLICK ════════════════════════════════════════════════════ */
.ds-tour__catch{
  position: fixed;
  inset: 0;
  z-index: 1;
  cursor: default;
}

/* ══ IL BUCO ═════════════════════════════════════════════════════════════ */
.ds-tour__spot{
  position: fixed;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  box-shadow:
    /* anello ambra — sottile, non un neon */
    0 0 0 1.5px rgba(244,181,50,.62),
    0 0 18px rgba(244,181,50,.20),
    /* il velo */
    0 0 0 9999px rgba(12,12,12,.58);
  transition:
    top .34s cubic-bezier(.22,1,.36,1),
    left .34s cubic-bezier(.22,1,.36,1),
    width .34s cubic-bezier(.22,1,.36,1),
    height .34s cubic-bezier(.22,1,.36,1);
}
body.ds-dark .ds-tour__spot{
  box-shadow:
    0 0 0 1.5px rgba(244,181,50,.52),
    0 0 18px rgba(244,181,50,.16),
    0 0 0 9999px rgba(0,0,0,.68);
}
/* Entrata: il velo si posa, non sbatte. Una volta sola, all'apertura. */
.ds-tour.is-open .ds-tour__spot{
  animation: ds-tour-veil .28s ease-out;
}
@keyframes ds-tour-veil{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

/* ══ LA CARD ═════════════════════════════════════════════════════════════ */
.ds-tour__card{
  position: fixed;
  z-index: 3;
  width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 16px 13px;
  border-radius: 14px;
  background: var(--ds-surface-1-bg);
  border: 1px solid var(--ds-surface-1-border);
  /* bordino accento a SINISTRA — la card è un blocco intero, non una colonna
     destra: regola `feedback_accent_borders_logical` */
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.48),
    0 14px 40px rgba(0,0,0,.22);
  color: var(--ds-c-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
body.ds-dark .ds-tour__card{
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.32),
    0 14px 40px rgba(0,0,0,.42);
}
.ds-tour__card.is-in{
  opacity: 1;
  transform: translateY(0);
}

.ds-tour__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ds-tour__count{
  font-family: "ConthraxSB", "Oswald", system-ui;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ds-c-text-tertiary);
}
.ds-tour__x{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 4px;
  margin: -4px -6px -4px 0;
  line-height: 0;
  border-radius: 50%;
  color: var(--ds-c-text-tertiary);
  transition: color .18s ease, background-color .18s ease;
}
.ds-tour__x:hover{ color: var(--ds-c-text); background: var(--ds-c-surface-hover); }
.ds-tour__x:focus-visible{ outline: 2px solid var(--ds-c-focus); outline-offset: 2px; }

.ds-tour__title{
  margin: 0 0 5px;
  font-family: "Oswald", system-ui;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--ds-c-text);
}
.ds-tour__text{
  margin: 0 0 12px;
  font-family: "Oswald", system-ui;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.42;
  color: var(--ds-c-text-secondary);
}

.ds-tour__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ds-tour__dots{
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  justify-content: center;
}
.ds-tour__dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-c-surface-border);
  transition: background-color .2s ease, transform .2s ease;
}
.ds-tour__dot.is-on{
  background: var(--ds-c-accent);
  transform: scale(1.35);
}
body.ds-dark .ds-tour__dot{ background: rgba(255,255,255,.18); }
body.ds-dark .ds-tour__dot.is-on{ background: var(--ds-c-accent); }

/* ══ IL «?» ══════════════════════════════════════════════════════════════
   In basso a SINISTRA: il rail RFQ e il FAB stanno a destra, la tools-dock in
   alto a sinistra. È l'unico angolo libero in tutte e quattro le fasce. */
.ds-tour-launch{
  position: fixed;
  left: clamp(10px, 1.4vw, 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 900;
  width: 36px;
  height: 36px;
  background: var(--ds-surface-2-bg);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.ds-tour-launch:hover{ opacity: 1; }
.ds-tour-launch__q{
  font-family: "Oswald", system-ui;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(.5px);
}
/* Col tour aperto il pulsante che l'ha aperto sparisce: sta sotto il velo e
   sarebbe solo una macchia grigia. */
body.ds-tour-open .ds-tour-launch{
  opacity: 0;
  pointer-events: none;
}

/* ══ L'INVITO (prima visita) ═════════════════════════════════════════════
   Non è l'overlay che parte da solo: è un cartellino accanto al «?». Se lo si
   ignora se ne va da solo dopo 14 secondi; se lo si chiude non torna. */
.ds-tour-invite{
  position: fixed;
  left: clamp(10px, 1.4vw, 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  z-index: 901;
  width: min(258px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 11px 13px 11px;
  border-radius: 13px;
  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),
    0 10px 30px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
}
body.ds-dark .ds-tour-invite{
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.32),
    0 10px 30px rgba(0,0,0,.38);
}
.ds-tour-invite.is-in{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ds-tour-invite__txt{
  margin: 0 0 9px;
  font-family: "Oswald", system-ui;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.36;
  color: var(--ds-c-text);
}
.ds-tour-invite__nav{
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ══ MOBILE / COMPACT-NARROW (<1100) ═════════════════════════════════════
   La card diventa un pannello in basso: a 390 una card che insegue il buco
   finisce sempre mezza fuori. Il buco resta nella metà alta (JS: 44%). */
@media (max-width: 1099.98px){
  .ds-tour__card.is-sheet{
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    top: auto;
    width: auto;
    padding: 13px 15px 12px;
  }
  .ds-tour__title{ font-size: 1rem; }
  .ds-tour__text{ font-size: .84rem; }
  /* Il «?» sale sopra la home-indicator e resta lontano dal pollice destro */
  .ds-tour-launch{
    width: 38px;
    height: 38px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    opacity: .85;
  }
  .ds-tour-invite{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
  }
}

/* ══ REDUCED MOTION ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .ds-tour__spot,
  .ds-tour__card,
  .ds-tour-invite,
  .ds-tour-launch{
    transition: none !important;
    animation: none !important;
  }
}