/* The desktop board's D009, option A (Emily, 15 Oct): the chooser on the front door's plum ground. The crane and "Pocket
   Study" sit over the question; each profile is a cream card with its initial on a square in the profile's colour. */
.profile-launch {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  color: var(--ss-lock-ink);
  background-color: var(--ss-lock-ground);
  font-family: var(--ss-font-reading);
}

.profile-launch-card { width: min(772px, 100%); text-align: center; }
.profile-launch-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font: 400 20px/1 var(--ss-font-pixel-title, var(--ss-font-pixel)); }
.profile-launch-crane { display: block; width: 29px; height: 27px; image-rendering: pixelated; }
.profile-launch h1 { margin: 26px 0 14px; color: var(--ss-lock-ink); font: 400 clamp(30px, 6vw, 44px)/1.1 var(--ss-font-pixel-title, var(--ss-font-pixel)); }
.profile-launch-helper { margin: 0 auto 26px; font: 700 17px/1.4 var(--ss-font-reading); }

.profile-launch-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-launch-options button {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 206px;
  padding: 24px 16px;
  border: 1px solid var(--ss-lock-ink);
  border-radius: 4px;
  color: var(--ss-color-ink);
  background: var(--ss-crane-cream);
  box-shadow: 2px 3px 0 var(--ss-lock-raise);
}
.profile-launch-options button:hover { background: var(--ss-color-paper); }
.profile-launch-options button:focus-visible { outline: 3px solid var(--ss-crane-butter); outline-offset: 3px; }
.profile-launch-initial { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid var(--ss-color-purple-dark); border-radius: 2px; color: var(--ss-lock-raise); background: var(--ss-guide-tan); font: 400 34px/1 var(--ss-font-pixel-title, var(--ss-font-pixel)); }
[data-profile-colour="sky"] > .profile-launch-initial { background: var(--ss-crane-sky); }
[data-profile-colour="sage"] > .profile-launch-initial { background: var(--ss-crane-sage); }
[data-profile-colour="mint"] > .profile-launch-initial { background: var(--ss-color-mint); }
.profile-launch-options strong { color: var(--ss-color-purple-dark); font: 400 28px/1.1 var(--ss-font-pixel-title, var(--ss-font-pixel)); }
.profile-launch-options small { color: var(--ss-color-ink); font: 400 16px/1.35 var(--ss-font-reading); }

@media (max-width: 720px), (orientation: portrait) {
  .profile-launch { place-items: start center; padding: 40px 16px 24px; }
  .profile-launch-options { grid-template-columns: 1fr; gap: 14px; }
  .profile-launch-options button { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 16px; row-gap: 2px; min-height: 0; padding: 16px; text-align: start; }
  .profile-launch-initial { grid-row: 1 / 3; width: 56px; height: 56px; margin: 0; font-size: 26px; }
  .profile-launch-options strong { align-self: end; font-size: 24px; }
  .profile-launch-options small { align-self: start; }
}

.ui-profile-badge {
  appearance: none;
  display: grid;
  width: 52px;
  min-height: 30px;
  box-sizing: border-box;
  place-items: center;
  padding: 5px 3px;
  border: var(--ss-border-light);
  border-color: var(--ss-color-purple-dark);
  border-radius: var(--ss-radius-button);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-shadow-soft);
  font: 700 var(--ss-text-profile-badge)/1 var(--ss-font-pixel);
  text-align: center;
  cursor: pointer;
}

.ui-profile-badge:hover,
.ui-profile-badge:focus-visible {
  border-color: var(--ss-color-pink-strong);
  background: var(--ss-color-pink-soft);
}

@media (max-width: 720px), (orientation: portrait) {
  .ui-profile-badge { width: 44px; min-height: 42px; flex: 0 1 52px; font-size: var(--ss-text-profile-badge-mobile); }
}