/* =======================================================================
   BOTTOM SHEET — componente riusabile mobile (sess.26 Tier 0)
   =======================================================================
   Pattern Apple Maps / iOS native: pannello che sale dal bottom dello
   schermo, draggable peek (40svh) → full (90svh), backdrop dim,
   close per drag-down / tap backdrop / ESC.

   Riusato in Tier 1 sess.26+:
     - DMX details su tap card canale (Step 5)
     - Photometrics marker tap → tooltip data (Step 7)
     - Accessories preview espanso su long-press card (Step 8)

   API JS: window.DSBottomSheet (vedi modules/bottom-sheet.js)

   Token utilizzati:
     --ds-mobile-card-radius (16) top corner
     --ds-mobile-card-pad-block/inline (20/16) padding interno
     --ds-ease-spring spring snap easing
     --ds-mobile-tap-scale (.96) handle press feedback

   Z-index: 1200 (sopra widget toolbar overlay 1100, sotto fullscreen
   modal 1500). Coerente con z-hierarchy mobile dichiarata in
   brief_mobile_touch_widgets.md (sess.22 brief).
   ======================================================================= */

.ds-bottom-sheet{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  pointer-events: none;
}

.ds-bottom-sheet.is-open{
  display: block;
  pointer-events: auto;
}

/* Backdrop */
.ds-bottom-sheet__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  opacity: 0;
  transition: opacity .28s ease;
  cursor: pointer;
}
.ds-bottom-sheet.is-open .ds-bottom-sheet__backdrop{
  opacity: 1;
}

/* Panel */
.ds-bottom-sheet__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Default chiuso: tutto fuori viewport (translateY 100%).
     Aperto: in base allo snap stop (peek 40svh, full 90svh).
     Easing spring per "pop" iOS native. */
  transform: translateY(100%);
  transition: transform .42s var(--ds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  background: var(--ds-surface-1-bg);
  border-top: 1px solid var(--ds-surface-1-border);
  border-radius: var(--ds-mobile-card-radius, 16px) var(--ds-mobile-card-radius, 16px) 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .35);
  /* Massima altezza in entrambi i snap = 90svh. Lo snap controlla la
     posizione transform, non l'altezza intrinseca (= permette content
     scroll interno senza re-flow al cambio snap). */
  max-height: 90svh;
  height: 90svh;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  /* Safe area iOS — il content interno è offset di safe-area-inset-bottom */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Snap stops via data-snap (controllato JS).
   "peek" = pannello visibile per ~40% schermo (translateY 50svh).
   "full" = pannello a quasi-tutta altezza (translateY 10svh = sopra
   header e sotto status bar iOS). */
.ds-bottom-sheet.is-open .ds-bottom-sheet__panel[data-snap="peek"]{
  transform: translateY(50svh);
}
.ds-bottom-sheet.is-open .ds-bottom-sheet__panel[data-snap="full"]{
  transform: translateY(10svh);
}
/* Stato "dragging" — JS imposta inline transform durante drag.
   Disattiva transition CSS per tracking fluido del finger. */
.ds-bottom-sheet__panel.is-dragging{
  transition: none !important;
}

/* Drag handle */
.ds-bottom-sheet__handle{
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;   /* JS gestisce gesture verticale */
}
.ds-bottom-sheet__handle::before{
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--ds-c-text-tertiary, rgba(255, 255, 255, .28));
  transition: background .15s ease;
}
.ds-bottom-sheet__handle:active::before{
  background: var(--ds-c-text-secondary, rgba(255, 255, 255, .48));
}

/* Header opzionale (titolo + close button) */
.ds-bottom-sheet__header{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--ds-mobile-card-pad-inline, 16px) 8px;
}
.ds-bottom-sheet__title{
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(.88rem, 1vw + .5rem, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-c-text);
  margin: 0;
}
.ds-bottom-sheet__close{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ds-c-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform 80ms ease;
}
.ds-bottom-sheet__close:hover{
  background: var(--ds-c-surface-hover);
}
.ds-bottom-sheet__close:active{
  transform: scale(var(--ds-mobile-tap-scale, .96));
}

/* Content scrollable area */
.ds-bottom-sheet__content{
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--ds-mobile-card-pad-inline, 16px) var(--ds-mobile-card-pad-block, 20px);
  -webkit-overflow-scrolling: touch;
}

/* Footer opzionale (CTA primaria sticky) */
.ds-bottom-sheet__footer{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  padding: 12px var(--ds-mobile-card-pad-inline, 16px) 12px;
  border-top: 1px solid var(--ds-surface-1-border);
}

/* Reduced-motion: animazione istantanea */
@media (prefers-reduced-motion: reduce){
  .ds-bottom-sheet__panel{
    transition-duration: 0.01ms !important;
  }
  .ds-bottom-sheet__backdrop{
    transition-duration: 0.01ms !important;
  }
}

/* Light mode override (handle + close button) */
:root.ds-light .ds-bottom-sheet__handle::before,
body.ds-light .ds-bottom-sheet__handle::before{
  background: rgba(0, 0, 0, .22);
}
:root.ds-light .ds-bottom-sheet__handle:active::before,
body.ds-light .ds-bottom-sheet__handle:active::before{
  background: rgba(0, 0, 0, .42);
}