/* The gym part of the sign-up form's step 2 (site/gym-pick.js, Sam 20 Oct 2026: one search box, names only; then "Can you
   make this look better? On both phone and laptop"): the search and its rows, the picked club as one card with its benefits
   inside, "Somewhere else" as an even grid, "Already a member there?" as even segments, and the optional equipment note
   behind a link. Calm and dark: green only for what's picked and for ticks, red only for buttons. Everything is scoped to
   these classes and to #gymChips and #gymMemberWrap, so the chips on other steps keep their own look. */
.gp { display: grid; gap: 12px; margin: 4px 0 18px; }
.gp-find { display: grid; gap: 8px; }
.gp-find[hidden], .gp-picked[hidden], .gp-perks[hidden], .gp-more[hidden], .gp-hint[hidden], .gp-place[hidden], .gp-else[hidden], .gp-note-link[hidden], .gp-logo[hidden] { display: none; }
.gp-label { font-size: .92rem; font-weight: 600; color: #e4e4e7; }
/* Lands at the top of the screen when the phone's keyboard opens (gym-pick.js), with room above it. */
.gp-find input { width: 100%; padding-left: 44px; scroll-margin-top: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px 50%; background-size: 20px; }
.gp-hint, .gp-more { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
/* The matches: plain rows, each at least 52 px tall. */
.gp-rows { display: grid; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--surface); }
.gp-rows:empty { display: none; }
.gp-row { display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%; padding: 9px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gp-row:first-child { border-top: 0; }
.gp-row:hover { background: var(--surface-2); }
.gp-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.gp-text { display: grid; gap: 2px; min-width: 0; }
.gp-name { font-weight: 700; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.gp-place { font-size: .84rem; color: var(--muted); }
/* A club's logo, when it has one (its brand's, added by Sam with its written OK): small, on a white tile so a dark logo
   still shows on this dark page, as on the desk page (site/start.html). A bit bigger on the picked card. */
.gp-logo { flex: none; display: block; width: 46px; height: 36px; padding: 3px; box-sizing: border-box; object-fit: contain; background: #fff; border-radius: 8px; }
.gp-picked .gp-logo { width: 56px; height: 44px; padding: 4px; border-radius: 10px; }

/* The picked club: one card. "Your gym" and a small green tick, the name, a quiet Change, and the benefits under a hairline. */
.gp-picked { padding: 16px 18px; border: 1px solid rgba(70,201,135,.55); border-radius: 14px; background: linear-gradient(180deg, rgba(70,201,135,.07), rgba(70,201,135,.02)), var(--surface); }
.gp:has(> .gp-picked:not([hidden])) { margin-bottom: 0; }
.gp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.gp-who { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 2px; }
.gp-kick { display: flex; align-items: center; gap: 7px; margin: 0; font: 800 .64rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: #46c987; }
.gp-tick { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #46c987; }
.gp-tick::after { content: ""; position: absolute; left: 4px; top: 4.5px; width: 7px; height: 3.5px; border: solid #0a0a0b; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.gp-picked .gp-name { font-size: 1.06rem; line-height: 1.25; overflow-wrap: normal; }
/* Change: a small ghost button (a 44 px tall tap area, a 32 px pill you see). */
.gp-change { position: relative; min-height: 44px; margin: -10px -4px -10px 0; padding: 0 14px; background: none; border: 0; color: #e4e4e7; font: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; }
.gp-change::before { content: ""; position: absolute; inset: 6px 0; border: 1px solid var(--line-strong); border-radius: 999px; transition: border-color .15s, background .15s; }
.gp-change:hover::before { border-color: var(--muted-2); background: rgba(255,255,255,.04); }
.gp-change:focus-visible { outline: none; }
.gp-change:focus-visible::before { outline: 2px solid var(--ink); outline-offset: 2px; }

/* What members get at the picked club (gym-perks.js), inside its card: compact rows with green ticks, and a small muted
   "Coming soon" at the end of a row it hasn't set up yet. */
.gp-perks { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.gp-perks-h { margin: 0 0 9px; font: 800 .64rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gp-perks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.gp-perks li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; font-size: .9rem; line-height: 1.45; color: #e4e4e7; }
.gp-perks li::before { content: ""; width: 9px; height: 5px; margin: .42em 0 0 3px; border: solid #46c987; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.gp-perks li.soon::before { width: 6px; height: 6px; margin: .5em 0 0 4px; border: 1.5px solid var(--muted-2); border-radius: 50%; transform: none; }
.gp-perks .soon-tag { margin-top: 1px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: var(--muted); white-space: nowrap; }

/* "Somewhere else": Another gym, Home gym and Minimal / bodyweight as one even grid (three across on a laptop, stacked on a
   phone), and "Already a member there?" as even segments (stacked on a phone, where "Thinking of joining" won't fit a third). */
.gp-else { margin: 2px 0 10px; font: 800 .64rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
#intake #gymChips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#intake #gymChips[hidden] { display: none; }
#intake #gymMemberWrap .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--surface); }
#intake #gymChips label, #intake #gymMemberWrap .chips label { position: relative; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 10px 10px 10px 12px; border-radius: 12px; font-size: .86rem; font-weight: 600; line-height: 1.25; color: #e4e4e7; background: var(--surface); }
#intake #gymMemberWrap .chips label { justify-content: center; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
#intake #gymMemberWrap .chips label:first-child { border-left: 0; }
/* The radio itself, out of sight but still the thing that's focused and checked; a round mark stands in for it. */
#intake #gymChips input, #intake #gymMemberWrap .chips input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#intake #gymChips label::before, #intake #gymMemberWrap .chips label::before { content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line-strong); transition: border-color .15s, background .15s; }
#intake #gymChips label:has(input:checked), #intake #gymMemberWrap .chips label:has(input:checked) { background: rgba(70,201,135,.1); color: #fff; }
#intake #gymChips label:has(input:checked) { border-color: #46c987; }
#intake #gymChips label:has(input:checked)::before, #intake #gymMemberWrap .chips label:has(input:checked)::before { border-color: #46c987; background: #46c987; box-shadow: inset 0 0 0 3px #121214; }
#intake #gymMemberWrap .chips label:has(input:focus-visible) { outline-offset: -3px; }
@media (max-width: 560px) {
  #intake #gymChips { grid-template-columns: 1fr; }
  #intake #gymMemberWrap .chips { grid-template-columns: 1fr; }
  #intake #gymMemberWrap .chips label { justify-content: flex-start; border-left: 0; border-top: 1px solid var(--line); }
  #intake #gymMemberWrap .chips label:first-child { border-top: 0; }
  #intake #gymChips label, #intake #gymMemberWrap .chips label { font-size: .92rem; padding: 10px 14px; gap: 10px; }
  /* "Coming soon" goes under its line on a phone, so the words keep the row's width. */
  .gp-perks li { grid-template-columns: 16px minmax(0, 1fr); }
  .gp-perks .soon-tag { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 5px; }
}

/* The optional note about the gym's equipment, behind a link until it's wanted (intake.html updateGym). */
.gp-note-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; color: #e4e4e7; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.gp-note-link::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 1rem; line-height: 1; color: var(--muted); }
.gp-note-link:hover::before { border-color: var(--muted-2); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gp-change::before, #intake #gymChips label::before, #intake #gymMemberWrap .chips label::before { transition: none; } }