/* ============================================================
   18-sheets.css — 9 Oct 2026: one grab bar for every bottom sheet.
   On a phone the dialogs and menus (ui.js openModal), the playtest's sheets
   and the scanner's panel open from the bottom like the filter sheet, and
   all of them now carry its handle: a 40×5 bar 15px below the top edge,
   the same rounding, and a drag down (or a tap on the bar) closes them
   (ui.js dragToClose). Loads last and overrides.
   ============================================================ */
:root{
  --grab-w:40px; --grab-h:5px; --grab-top:15px;
  --grab-color:rgba(255,255,255,.24);
  --sheet-radius:22px;
}

/* the dialogs' and the playtest's handle; a wide screen shows them centred,
   with nothing to pull */
.sheet-handle{display:none;}

@media(max-width:960px){
  /* the filter sheet's bar, from the shared values */
  .fs-grab{height:calc(var(--grab-top) + var(--grab-h));}
  .fs-grab::before{width:var(--grab-w); height:var(--grab-h); background:var(--grab-color);}
  body.filters-open .filter-sheet{border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;}

  /* 16 Oct 2026: the handle is a 48px strip that stays at the top while the
     sheet's content scrolls (sticky, not absolute: a scrolled dialog used to
     take its handle away with it, and the old 32px strip was easy to miss).
     It overlaps the first row by the difference, so the content still starts
     34px below the top edge; once scrolled it gets the sheet's colour, so the
     rows pass under it. */
  .modal, .pt-sheet{border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; padding-top:0;}
  .modal{--sheet-gap:14px; --sheet-px:18px;}
  .modal.confirm-mail{--sheet-gap:10px;}
  .pt-sheet{--sheet-gap:12px; --sheet-px:16px;}
  .sheet-handle{
    display:flex; justify-content:center; align-items:flex-start; flex-shrink:0;
    position:sticky; top:0; z-index:2; align-self:stretch;
    height:48px; padding-top:var(--grab-top); box-sizing:border-box;
    margin:0 calc(-1 * var(--sheet-px, 0px)) calc(var(--grab-top) + var(--grab-h) + 14px - 48px - var(--sheet-gap, 0px));
    border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
    touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none;
  }
  .sheet-handle.stuck{background:var(--surface);}
  .sheet-handle:active{cursor:grabbing;}
  .sheet-handle::before{content:""; width:var(--grab-w); height:var(--grab-h); border-radius:3px; background:var(--grab-color);}
  /* the × sits beside the title, below the bar */
  .modal-x{top:calc(var(--grab-top) + var(--grab-h) + 6px);}
}

/* the scanner's panel (full-screen scanner, at any width): same bar, same place.
   The grip is a padded, invisible tap area; the bar inside it is drawn as
   ::before, like the other sheets' bars. (Painting the grip itself with the
   `background` shorthand reset 07-scanner.css's background-clip, and the
   whole tap area turned into a grey block.) */
body.scan-full .scan-wrap > div:last-child{border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;}
body.scan-full .sheet-grab{
  box-sizing:content-box; width:var(--grab-w); height:var(--grab-h);
  padding:var(--grab-top) 40px 24px; margin:-12px auto -12px;
  background:none; border-radius:0;
  /* 16 Oct 2026: a 44px grip that stays in view while the list scrolls, and
     a pull on it always moves the panel (scanner.js initSheetDrag) */
  position:sticky; top:0; z-index:2; touch-action:none;
}
body.scan-full .sheet-grab::before{
  content:""; display:block; width:100%; height:100%; border-radius:3px; background:var(--grab-color);
}