/* CUIBottomSheet - mirrors cui_bottom_sheet.dart (+ showCUIBottomSheet scrim/slide).
   Enter/exit 300ms: sheet slides with cubic-bezier(.32,.72,0,1), scrim fades easeInOut. Drag handle 56x4, drag down > 50% or fling > 700px/s dismisses.
   .cui-bottom-sheet-host is the playground "phone": a position:relative container the sheet overlays. */
.cui-bottom-sheet-host { --_dur: calc(300ms / var(--cui-speed, 1)); position: relative; isolation: isolate; width: 100%; height: 480px; overflow: hidden;
  border-radius: var(--cui-radius-lg); border: var(--cui-border-default) solid var(--cui-color-border-default); background: var(--cui-color-surface-bg-canvas); }
.cui-bottom-sheet-host__page { position: absolute; inset: 0; padding: var(--cui-space-md); display: flex; flex-direction: column; gap: var(--cui-space-sm); overflow: hidden;
  color: var(--cui-color-text-default); }
.cui-bottom-sheet-host__row { display: flex; align-items: center; gap: var(--cui-space-sm); padding: var(--cui-space-xs); background: var(--cui-color-surface-bg-default);
  border-radius: var(--cui-radius-md); }
.cui-bottom-sheet-host__thumb { width: var(--cui-img-xs3); height: var(--cui-img-xs3); border-radius: var(--cui-radius-sm); flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--cui-color-surface-bg-brand-subtle); font-size: 22px; }
.cui-bottom-sheet-host__lines { flex: 1; display: flex; flex-direction: column; gap: var(--cui-space-2xs); }
.cui-bottom-sheet-host__lines i { display: block; height: 8px; border-radius: var(--cui-radius-pill); background: var(--cui-color-surface-bg-sunken); }
.cui-bottom-sheet-host__lines i + i { width: 60%; }
.cui-bottom-sheet-host__open { margin-top: auto; }

.cui-bottom-sheet { position: absolute; inset: 0; z-index: 2; visibility: hidden; pointer-events: none; }
.cui-bottom-sheet.is-open, .cui-bottom-sheet.is-closing { visibility: visible; }
.cui-bottom-sheet__scrim { position: absolute; inset: 0; background: var(--cui-color-surface-bg-scrim); opacity: 0; pointer-events: auto;
  transition: opacity var(--_dur) cubic-bezier(0.42, 0, 0.58, 1); }
.cui-bottom-sheet.is-open .cui-bottom-sheet__scrim { opacity: 1; }
.cui-bottom-sheet__slide { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(100%); pointer-events: auto;
  transition: transform var(--_dur) cubic-bezier(0.32, 0.72, 0, 1); }
.cui-bottom-sheet.is-open .cui-bottom-sheet__slide { transform: none; }

.cui-bottom-sheet__surface { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--cui-space-md);
  padding: var(--cui-space-lg) var(--cui-space-lg) var(--cui-space-2xl);
  background: var(--cui-color-surface-bg-raised); border-radius: var(--cui-radius-xl) var(--cui-radius-xl) 0 0; color: var(--cui-color-text-default);
  transform: translateY(var(--_drag, 0px)); }
.cui-bottom-sheet--handle .cui-bottom-sheet__surface { padding-top: var(--cui-space-sm); }
.cui-bottom-sheet--dismissable .cui-bottom-sheet__surface { touch-action: none; }
.cui-bottom-sheet__surface.is-settling { transition: transform calc(250ms / var(--cui-speed, 1)) cubic-bezier(0.32, 0.72, 0, 1); }
.cui-bottom-sheet__handle { width: 56px; height: 4px; flex: none; border-radius: var(--cui-radius-pill); background: var(--cui-color-border-strong); cursor: grab; }
.cui-bottom-sheet__header { align-self: stretch; display: flex; flex-direction: column; gap: var(--cui-space-2xs); }
.cui-bottom-sheet__title { margin: 0; font-family: var(--cui-type-title-md-family); font-size: var(--cui-type-title-md-size); font-weight: var(--cui-type-title-md-weight);
  letter-spacing: var(--cui-type-title-md-spacing); line-height: var(--cui-type-title-md-line); color: var(--cui-color-text-default); }
.cui-bottom-sheet__subtitle { margin: 0; font-family: var(--cui-type-body-sm-family); font-size: var(--cui-type-body-sm-size); font-weight: var(--cui-type-body-sm-weight);
  letter-spacing: var(--cui-type-body-sm-spacing); line-height: var(--cui-type-body-sm-line); color: var(--cui-color-text-subtle); }
.cui-bottom-sheet__content { align-self: stretch; }
.cui-bottom-sheet__demo { height: 200px; box-sizing: border-box; padding: var(--cui-space-sm); border-radius: var(--cui-radius-md); background: var(--cui-color-surface-bg-sunken);
  display: flex; flex-direction: column; justify-content: space-around; font-family: var(--cui-type-body-md-family); font-size: var(--cui-type-body-md-size); line-height: var(--cui-type-body-md-line); }
.cui-bottom-sheet__demo span { display: flex; justify-content: space-between; }
.cui-bottom-sheet__demo span b { font-weight: 400; color: var(--cui-color-text-subtle); }
.cui-bottom-sheet__actions { display: flex; flex-wrap: wrap; gap: var(--cui-space-xs); margin-top: var(--cui-space-sm); }
@media (prefers-reduced-motion: reduce) { .cui-bottom-sheet-host { --_dur: 0.01ms; } }
:root[data-app="device"] .cui-bottom-sheet-host { height: 680px; }

.cui-bottom-sheet-host--bare { border: 0; border-radius: 0; background: transparent; }
.cui-bottom-sheet__demo--box { border-radius: 0; padding: 0; }
.cui-bottom-sheet__slide { display: flex; justify-content: center; }
.cui-bottom-sheet__surface { width: 100%; }
.cui-bottom-sheet__surface--hug { width: auto; }
/* inside the playground's device frame the mock phone simply fills the screen width */
.pg-stage.framed > .cui-bottom-sheet-host { align-self: stretch; width: 100%; max-width: 100%; border-left-width: 0; border-right-width: 0; border-radius: 0; }