/* ═══ Phone picker, shared by V1, V2 and V3 (loaded after each version's own CSS) ═══
   Below 40rem the 17-chip wall becomes: 3 tabs (the gear family) -> one swipe row of photo
   cards -> the result card right under it, so the choice and the picture share one screen.
   → 3 families first, not 17 chips (Hick) · the next card peeks in, so it reads as a swipe (signifier)
   → every option shows the enclosure it maps to (recognition over recall)
   Above 40rem nothing here applies and each version keeps its own chips. */

.mp .mp-img, .mp .mp-tabs { display: none; }

@media (max-width: 39.99rem) {
  .mp .mp-label { display: none; }

  .mp .mp-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    margin: 16px 0 12px; padding: 4px; border-radius: 999px; background: var(--mp-seg-bg);
  }
  .mp .mp-tabs button {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 6px; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--mp-seg-fg);
    font-family: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1; white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
  }
  .mp .mp-tabs i { font-style: normal; font-size: 0.68rem; font-weight: 600; opacity: 0.72; }
  .mp .mp-tabs button[aria-selected='true'] { background: var(--mp-seg-on-bg); color: var(--mp-seg-on-fg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); }

  /* the row bleeds to the container's own edges; --mp-bleed is read from its padding.
     contain: inline-size stops the unwrapped row's full width (8 cards = 1100px) from
     becoming the min-content of every grid track above it, which stretched the block
     and the whole row past the plate. Its width now comes from the container only. */
  .mp { min-width: 0; }
  .mp .chips {
    contain: inline-size;
    position: relative; display: flex; flex-wrap: nowrap; gap: 10px;
    margin: 0 calc(-1 * var(--mp-bleed, 16px)); padding: 4px var(--mp-bleed, 16px) 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mp-bleed, 16px); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mp .chips::-webkit-scrollbar { display: none; }
  .mp .chips:not(.mp-active) { display: none; }

  .mp .chip {
    position: relative; flex: 0 0 124px; display: grid; align-content: start; gap: 8px;
    height: auto; min-height: 0; margin: 0; padding: 8px 8px 10px;
    border: 0; border-radius: 16px; background: #fff; color: #0e1116;
    box-shadow: inset 0 0 0 1px rgba(14, 17, 22, 0.1);
    text-align: left; white-space: normal; font-size: 0.78rem; line-height: 1.25;
    scroll-snap-align: start; transform: none;
  }
  .mp .chip:hover { background: #fff; color: #0e1116; }
  .mp .chip .mp-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; }
  .mp .chip .mp-name { display: block; min-height: 2.5em; font-weight: 700; }
  .mp .chip[aria-pressed='true'] { background: #fff; color: #0e1116; box-shadow: inset 0 0 0 3px var(--mp-ring); }
  .mp .chip[aria-pressed='true']::after {
    content: ''; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--mp-ring) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  }
  .mp .chip-other { border: 0; }
}

/* V2 and V3: the picker sits on the blue block */
.mp-blue { --mp-seg-bg: rgba(255, 255, 255, 0.14); --mp-seg-fg: #fff; --mp-seg-on-bg: #fff; --mp-seg-on-fg: #0c4f9e; --mp-ring: #0c4f9e; }
/* V1: the picker sits on a light grey box; red is V1's selected-chip colour */
.mp-light { --mp-seg-bg: rgba(12, 79, 158, 0.08); --mp-seg-fg: #282828; --mp-seg-on-bg: #0c4f9e; --mp-seg-on-fg: #fff; --mp-ring: #e70000; }

@media (prefers-reduced-motion: reduce) { .mp .mp-tabs button { transition: none; } }