/* 自動補樣式：js/components/ui.js（_build/style.py） */
/* ==========================================================================
   ui.js 補樣式：c-sheet-backdrop--dialog、is-in、is-open、is-out
   - .c-sheet-backdrop--dialog：面板在寬螢幕改為置中對話框時，遮罩的排版
   - .is-open：底部表單（遮罩與面板）開啟後的靜止狀態
   - .is-in／.is-out：toast 的進場靜止狀態與離場狀態
   ========================================================================== */

/* ---------- 遮罩：置中對話框模式 ---------- */
.c-sheet-backdrop--dialog {
  align-items: center;
  justify-content: center;
  padding:
    max(var(--sp-4), var(--safe-top))
    max(var(--sp-4), var(--safe-right))
    max(var(--sp-4), var(--safe-bottom))
    max(var(--sp-4), var(--safe-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-sheet-backdrop--dialog .c-sheet {
  margin: auto;
  max-height: min(86dvh, 100%);
  box-shadow: var(--shadow-2);
}

/* 平板以上：對話框留較寬的呼吸空間 */
@media (min-width: 1024px) {
  .c-sheet-backdrop--dialog {
    padding: var(--sp-8);
  }
}

/* 矮螢幕（手機橫式）：一律回到底部抽屜，避免對話框被裁切 */
@media (orientation: landscape) and (max-height: 500px) {
  .c-sheet-backdrop--dialog {
    align-items: flex-end;
    padding: 0;
  }
  .c-sheet-backdrop--dialog .c-sheet {
    margin: 0;
    max-height: 96dvh;
  }
}

/* ---------- 遮罩與面板：開啟後狀態 ---------- */
.c-sheet-backdrop.is-open {
  opacity: 1;
}

.c-sheet.is-open {
  opacity: 1;
  transform: translateY(var(--drag-y, 0px));
}

/* 對話框模式不位移，只以縮放與淡入呈現 */
.c-sheet-backdrop--dialog .c-sheet.is-open,
.c-sheet--dialog.is-open {
  opacity: 1;
  transform: none;
}

/* 對話框關閉：縮小並淡出（與遮罩淡出同步） */
.c-sheet-backdrop--dialog .c-sheet.is-closing {
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* ---------- Toast：進場靜止狀態與離場 ---------- */
.c-toast.is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.c-toast.is-out {
  animation: none;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-sheet-backdrop.is-open,
  .c-sheet.is-open,
  .c-sheet-backdrop--dialog .c-sheet.is-closing,
  .c-toast.is-in,
  .c-toast.is-out {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .c-sheet-backdrop--dialog .c-sheet.is-closing,
  .c-toast.is-out {
    transform: none;
  }
}