/* Long-press settings on every session card (card-hold.js), and the drawers' lanes as a page to scroll on a phone. */
.holdable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hold-back { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.45); }
.hold-sheet, .work-menu.hold-sheet {
  position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80dvh; overflow-y: auto;
  display: grid; gap: 2px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
  background: var(--panel-2, var(--panel)); border: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}
.hold-sheet.pop, .work-menu.hold-sheet.pop { left: auto; right: auto; bottom: auto; width: 260px; border-radius: 12px; padding: 6px; }
.hold-title { margin: 4px 6px 6px; font-weight: 600; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hold-note { margin: 0 6px 6px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hold-item, .work-menu.hold-sheet .work-menu-item { min-height: 48px; text-align: left; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.hold-item:hover, .hold-item:focus-visible { background: var(--gold-soft); }
.hold-item.danger { color: #e0675b; }
.hold-cancel { margin-top: 4px; color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.hold-sheet.pop .hold-cancel { display: none; }
.hold-sheet.pop .hold-item, .work-menu.hold-sheet.pop .work-menu-item { min-height: 40px; font-size: 14.5px; }

/* On a phone the lane in a drawer runs down the page, a whole card to a row, and scrolls with the finger. */
@media (max-width: 699px) {
  .mine-drop .work-strip, .pane-crew .mine-drop .work-strip {
    display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y;
    max-height: calc(100dvh - 260px); overscroll-behavior: contain; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
  }
  .mine-drop .work-strip::after { display: none; }
  .mine-drop .work-strip .work-strip-item { width: 100%; min-width: 0; max-width: none; flex: none; }
}

/* Drawn as popovers (top layer, in front of the modal window): the browser's own popover box is undone. */
.hold-back[popover], .hold-sheet[popover] { margin: 0; inset: auto; color: var(--text); }
.hold-back[popover] { inset: 0; width: 100vw; height: 100dvh; padding: 0; border: 0; overflow: hidden; }
.hold-sheet[popover] { left: 0; right: 0; bottom: 0; top: auto; height: auto; }
.hold-sheet.pop[popover] { right: auto; bottom: auto; }