/*
 * Bottom sheet: fixed, tall enough that when expanded its top sits just below the
 * Alert Me button (never covering it). Collapsed it is pushed down so its top sits
 * at 50dvh; expanded the inner .sheet__scroll becomes scrollable.
 */
.sheet {
  --sheet-top-clearance: calc(var(--safe-top) + var(--space-2) + var(--alert-me-height) + var(--space-2));
  --sheet-height: calc(100dvh - var(--sheet-top-clearance));
  --sheet-collapsed-offset: max(0px, calc(var(--sheet-height) - 50dvh)); /* covers lower 50% */
  --sheet-drag: 0px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  height: var(--sheet-height);
  max-width: var(--content-max); margin: 0 auto;
  display: flex; flex-direction: column;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overflow: clip; /* keep full-bleed children (sticky agenda header) inside the rounded corners */
  background: var(--color-bg);
  box-shadow: var(--shadow-sheet);
  transform: translateY(calc(var(--sheet-collapsed-offset) + var(--sheet-drag)));
  transition: transform 0.45s var(--ease);
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.sheet.is-expanded { transform: translateY(max(0px, var(--sheet-drag))); }
.sheet.is-dragging, .sheet.is-instant { transition: none; }

.sheet__grabber {
  flex: none; align-self: center;
  width: 64px; height: 20px; padding: 0; border: 0; background: none; cursor: grab;
}
.sheet__grabber::before {
  content: ""; display: block; width: 40px; height: 5px; margin: 0 auto;
  border-radius: var(--radius-pill); background: var(--color-border);
}

/* The drag handle only makes sense for touch; mouse users scroll or click the header */
@media (hover: hover) and (pointer: fine) {
  .sheet__grabber { display: none; }
  .sheet { padding-top: var(--space-4); }
}

.sheet__scroll {
  flex: 1; min-height: 0;
  overflow: hidden;
  padding: 0 var(--space-5) calc(var(--safe-bottom) + var(--space-6));
  -webkit-overflow-scrolling: touch;
}
.sheet.is-expanded /* The drag handle only makes sense for touch; mouse users scroll or click the header */
@media (hover: hover) and (pointer: fine) {
  .sheet__grabber { display: none; }
  .sheet { padding-top: var(--space-4); }
}

.sheet__scroll { overflow-y: auto; }

/* Equal side columns keep the title centered on the card whatever sits left/right of it */
.sheet__header {
  display: grid; grid-template-columns: var(--sheet-header-side) minmax(0, 1fr) var(--sheet-header-side);
  align-items: start; gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-4);
}
.sheet__titles { grid-column: 2; min-width: 0; text-align: center; }
.sheet__title { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.sheet__subtitle { margin-top: var(--space-1); font-size: var(--text-md); color: var(--color-text-muted); }
.sheet__close { grid-column: 3; justify-self: end; }

/* Wider screens: sheet floats on the left like a panel */
@media (min-width: 900px) {
  .sheet { left: var(--space-4); right: auto; width: 420px; margin: 0; }
}