/* Apple original: GroupPickerView in Auth/GroupState.swift, shown as a sheet.
   Measured from the Catalyst app (2026-10-16); iPad points = Mac points / 0.77.
   Mac: sheet 446.5 x 492.5 centred, radius 16, window dimmed 20%; title 43.5 down and 38.5 in;
   names 38 in. */
.GroupPickerView {
  position: absolute; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.2);
}
.GroupPickerView-sheet {
  display: flex; flex-direction: column;
  width: 580px; height: 640px;
  max-width: calc(100% - 40px); max-height: calc(100% - 40px);
  border-radius: 20.8px;
  background: var(--systemBackground);
  box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
/* "Fleet Admin Access": Gothic A1 SemiBold 22, highlight colour, 56 above, 40 below, 48 in */
.GroupPickerView-title {
  flex: none;
  padding: 52.7px 48px 40px 50px;
  font-family: "GothicA1", var(--ui);
  font-weight: 600; font-size: 22px; line-height: 28px;
  color: var(--highlight);
}
/* The vessels: a plain list, no lines; listRowTitleStyle (16 light, textCharcoal).
   Barney 2026-10-16: with a mouse the names need not be so far apart - 40 here against the
   iPad's finger-sized 56 (44 + 6 + 6). Touch screens keep 56. */
.GroupPickerView-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  margin-bottom: 40px;
  padding-top: 10.3px;   /* first name where the Mac has it; only the spacing below is tighter */
  scrollbar-width: none;
  /* Fades only where there is more to scroll (set by GroupPickerView.js) */
  --fadeTop: 0px; --fadeBottom: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fadeTop), #000 calc(100% - var(--fadeBottom)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fadeTop), #000 calc(100% - var(--fadeBottom)), transparent 100%);
}
.GroupPickerView-list::-webkit-scrollbar { display: none; }
.GroupPickerView-list.moreAbove { --fadeTop: 48px; }
.GroupPickerView-list.moreBelow { --fadeBottom: 48px; }
.GroupPickerView-row {
  display: flex; align-items: center;
  width: 100%; min-height: 40px;
  padding: 0 48px 0 49.4px;
  font-size: 16px; font-weight: 300; color: var(--textCharcoal);
  text-align: left;
}
.GroupPickerView-row:hover { color: var(--highlight); }
@media (pointer: coarse) {
  .GroupPickerView-row { min-height: 56px; }
}

/* Close (Barney 2026-10-17): a round glass ✕ at the top right, level with the input sheets' buttons */
.GroupPickerView-sheet { position: relative; }
.GroupPickerView-close {
  position: absolute; top: 29.2px; right: 32.1px; width: 44.8px; height: 44.8px;
  display: grid; place-items: center; border-radius: 22.4px;
  background: rgba(252, 252, 252, 0.95);
  box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.07), 0 1px 5px rgba(0, 0, 0, 0.06);
  color: var(--titanium);
}
.GroupPickerView-close .Icon { width: 22px; height: 22px; stroke-width: 1.3; }