/* sheet — bottom sheet primitive with drag-to-dismiss
 *
 * Structure (built by sheet.js, but the styles here are the contract):
 *   .sheet-backdrop
 *     .sheet
 *       .sheet-handle      ← drag-affordance pill
 *       .sheet-header      ← optional, dragable
 *       .sheet-body        ← scrollable, dragable when at scrollTop:0
 *       .sheet-footer      ← optional, sticky to bottom
 *
 * State classes are toggled by JS:
 *   .is-open      — applied next frame to drive the slide-up transition
 *   .is-dragging  — disables the transition during finger drag
 */

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(42, 37, 32, 0.45);
  z-index: 110;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease-out;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sheet-backdrop.is-open { opacity: 1; }

.sheet {
  background: var(--surface, #FFFFFF);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  touch-action: pan-y;
}
.sheet.is-open { transform: translateY(0); }
.sheet.is-dragging { transition: none; }

.sheet-handle {
  width: 40px; height: 4px;
  background: var(--border-strong, #D9CFBA);
  border-radius: 2px;
  margin: 8px auto 6px;
  flex-shrink: 0;
}

.sheet-header {
  padding: 8px 18px 10px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.sheet-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
}

.sheet-body {
  padding: 4px 14px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sheet-footer {
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border, #EAE3D4);
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sheet-body { padding: 4px 16px 14px; }
}

/* Disable backdrop blur on devices that don't support it well */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .sheet-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}