/**
 * SANCTUARY GESTURAL BOTTOM-SHEET SYSTEM (sheets.css)
 * Physics-based, detented sheets with grabber handles, spring transitions,
 * desktop right-drawer mode (>=1024px), and focus trapping support.
 */

/* ==========================================================================
   1. Sheet Host & Backdrop
   ========================================================================== */
.sheet-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.sheet-host.is-active {
  pointer-events: auto;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 8, 11, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2, 220ms) var(--ease-out, ease-out),
              visibility var(--dur-2, 220ms);
  pointer-events: none;
  z-index: 1020;
}

.sheet-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   2. Sheet Container Base (Mobile First: Bottom Sheet)
   ========================================================================== */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--obs-1, #0d0f14);
  border-top: 1px solid var(--hairline-strong, rgba(232, 213, 181, 0.24));
  border-radius: var(--r-xl, 18px) var(--r-xl, 18px) 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  transform: translateY(105%);
  transition: transform var(--dur-3, 300ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity var(--dur-2, 220ms) var(--ease-out, ease-out);
  will-change: transform;
  z-index: 1030;
  pointer-events: auto;
  outline: none;
  visibility: hidden;
}

.sheet.is-open {
  transform: translateY(0);
  visibility: visible;
}

.sheet.is-dragging {
  transition: none !important;
}

/* Stacked under another sheet */
.sheet.is-stacked {
  transform: translateY(18px) scale(0.96);
  filter: brightness(0.65);
  pointer-events: none;
}

/* ==========================================================================
   3. Detents (Mobile Heights)
   ========================================================================== */
.sheet[data-detent="auto"] {
  height: auto;
  max-height: 88vh;
}

.sheet[data-detent="medium"] {
  height: 60vh;
  max-height: 85vh;
}

.sheet[data-detent="large"] {
  height: 88vh;
  max-height: 94vh;
}

.sheet[data-detent="full"] {
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}

/* ==========================================================================
   4. Sheet Header & Drag Handle
   ========================================================================== */
.sheet__handle-zone {
  padding: 12px 18px 8px 18px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--hairline, rgba(232, 213, 181, 0.10));
  background: var(--obs-1, #0d0f14);
  border-radius: var(--r-xl, 18px) var(--r-xl, 18px) 0 0;
}

.sheet.is-dragging .sheet__handle-zone {
  cursor: grabbing;
}

.sheet__grabber {
  width: 42px;
  height: 4px;
  border-radius: var(--r-pill, 9999px);
  background: var(--ink-4, #55514a);
  margin-bottom: 8px;
  transition: background var(--dur-1, 140ms);
}

.sheet__handle-zone:hover .sheet__grabber {
  background: var(--champagne, #e8d5b5);
}

.sheet__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sheet__title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: var(--fs-lg, 18px);
  font-weight: 700;
  color: var(--champagne, #e8d5b5);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet__close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline, rgba(232, 213, 181, 0.10));
  color: var(--ink-2, #b9b2a6);
  width: 36px;
  height: 36px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-1, 140ms);
  padding: 0;
}

.sheet__close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink-1, #f4efe6);
  border-color: var(--champagne, #e8d5b5);
}

/* ==========================================================================
   5. Sheet Body
   ========================================================================== */
.sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 32px 20px;
}

.sheet__body::-webkit-scrollbar {
  width: 5px;
}

.sheet__body::-webkit-scrollbar-thumb {
  background: var(--hairline-strong, rgba(232, 213, 181, 0.24));
  border-radius: 4px;
}

/* ==========================================================================
   6. Operational Gear Selection Sheet Card Styling
   ========================================================================== */
.sheet-gear-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.sheet-gear-card {
  background: var(--obs-2, #12151c);
  border: 1px solid var(--hairline, rgba(232, 213, 181, 0.10));
  border-radius: var(--r-md, 10px);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--dur-1, 140ms);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  text-align: left;
  min-height: 44px;
}

.sheet-gear-card:hover {
  border-color: var(--champagne, #e8d5b5);
  background: var(--obs-3, #191d26);
}

.sheet-gear-card.is-active {
  border-width: 1.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.sheet-gear-card[data-gear="gear1"].is-active {
  border-color: var(--sage, #8fb8a0);
  background: rgba(143, 184, 160, 0.10);
}

.sheet-gear-card[data-gear="gear2"].is-active {
  border-color: var(--honey, #e0b36a);
  background: rgba(224, 179, 106, 0.10);
}

.sheet-gear-card[data-gear="gear2.5"].is-active {
  border-color: var(--lavender, #9d8ec4);
  background: rgba(157, 142, 196, 0.10);
}

.sheet-gear-card[data-gear="gear3"].is-active {
  border-color: var(--candle, #d4af37);
  background: rgba(212, 175, 55, 0.10);
}

.sheet-gear-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sheet-gear-title {
  font-size: var(--fs-md, 15px);
  font-weight: 700;
  color: var(--ink-1, #f4efe6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-gear-desc {
  font-size: var(--fs-sm, 13px);
  color: var(--ink-2, #b9b2a6);
  line-height: 1.4;
}

/* ==========================================================================
   7. Confirmation Sheet Dialog Variant
   ========================================================================== */
.sheet--dialog .sheet__body {
  padding-bottom: 20px;
}

/* ==========================================================================
   8. Desktop Right-Drawer Mode (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  /* Content sheets slide in as right drawers */
  .sheet:not(.sheet--dialog) {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    height: 100% !important;
    max-height: 100% !important;
    border-top: none;
    border-left: 1px solid var(--hairline-strong, rgba(232, 213, 181, 0.24));
    border-radius: 0;
    box-shadow: -16px 0 56px rgba(0, 0, 0, 0.85);
    transform: translateX(105%);
    transition: transform var(--dur-3, 300ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .sheet:not(.sheet--dialog).is-open {
    transform: translateX(0);
  }

  .sheet:not(.sheet--dialog).is-stacked {
    transform: translateX(-16px) scale(0.98);
    filter: brightness(0.75);
  }

  .sheet:not(.sheet--dialog) .sheet__handle-zone {
    border-radius: 0;
    padding: 16px 22px 12px 22px;
  }

  .sheet:not(.sheet--dialog) .sheet__grabber {
    display: none;
  }

  /* Centered dialogs on desktop */
  .sheet--dialog {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 460px;
    max-width: 90vw;
    height: auto !important;
    border-radius: var(--r-xl, 18px);
    border: 1px solid var(--hairline-strong, rgba(232, 213, 181, 0.24));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    transition: transform var(--dur-2, 220ms) var(--ease-out, ease-out),
                opacity var(--dur-2, 220ms) var(--ease-out, ease-out);
  }

  .sheet--dialog.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .sheet--dialog.is-stacked {
    transform: translate(-50%, -52%) scale(0.94);
    filter: brightness(0.7);
  }

  .sheet--dialog .sheet__grabber {
    display: none;
  }
}

/* ==========================================================================
   9. Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet-backdrop,
  .sheet--dialog {
    transition: opacity 0.01ms ease !important;
  }
  .sheet.is-open,
  .sheet--dialog.is-open {
    transform: none !important;
  }
  @media (min-width: 1024px) {
    .sheet--dialog.is-open {
      transform: translate(-50%, -50%) !important;
    }
  }
}