/* ============================================
   Group search study (Interactions board, frame 03)
   A phone screen for relatives and friends who search for a missing person
   together. Deliberately its own product look (not the portfolio design
   system): one blue for "you", a warm map, no shadows, thin icons.
   Design size is 402 x 874, JS scales it into the iPhone frame.
   ============================================ */

.board-frame.board-frame--phone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  cursor: default;
}

.board-frame--phone .iphone-pro { --iphone-pro-width: 322px; }

.gs-host { position: absolute; inset: 0; }

.gs {
  --gs-ink: #14161A;
  --gs-gray: #6B7078;
  --gs-hair: #E3E5E8;
  --gs-box: #F2F4F9;
  --gs-track: #EEF0F6;
  --gs-blue: #2B44D1;
  --gs-coral: #F0463A;
  --gs-ease: cubic-bezier(0.32, 0.72, 0.2, 1);
  --gs-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
  --inv: 1;

  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #F3F0EA;
  font-family: var(--font-body, Geist, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--gs-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

:where(.gs) button { -webkit-tap-highlight-color: transparent; font: inherit; letter-spacing: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.gs button:focus:not(:focus-visible) { outline: none; }
.gs button:focus-visible { outline: 2px solid var(--gs-blue); outline-offset: 2px; }
.gs svg { display: block; flex: none; }
.gs-i { overflow: visible; }

/* --- Map camera --- */
.gs-cam {
  position: absolute;
  top: -30px;
  left: 0;
  width: 402px;
  height: 600px;
  transform-origin: 0 0;
  transform: translate(0, -30px);
  transition: transform 0.9s var(--gs-ease);
}

.gs-cam > svg { position: absolute; inset: 0; width: 402px; height: 600px; }

.gs-mkl { position: absolute; inset: 0; pointer-events: none; }

.gs-mk { position: absolute; left: 0; top: 0; transform: translate(var(--x, 0px), var(--y, 0px)); }
.gs-mk--btn { pointer-events: auto; }

.gs-mk__in {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(var(--inv));
  transition: transform 0.9s var(--gs-ease), opacity 0.4s var(--gs-ease);
}

/* Search area */
.gs-zone__ring { animation: gs-spin 40s linear infinite; transform-origin: 148px 300px; }
@keyframes gs-spin { to { transform: rotate(360deg); } }

/* Trails */
.gs-trail__fill { transition: opacity 0.4s; }
.gs-trail.is-dim { opacity: 0.25; }
.gs-trail { transition: opacity 0.4s var(--gs-ease); }

.gs-past { opacity: 0; transition: opacity 0.5s var(--gs-ease); }
.gs--team .gs-past { opacity: 1; }
.gs-mk--past .gs-mk__in { opacity: 0; }
.gs--team .gs-mk--past .gs-mk__in { opacity: 1; }

/* Routes */
.gs-routeset, .gs-ends, .gs-coveredset { transition: opacity 0.45s var(--gs-ease); }
.gs--team .gs-routeset, .gs--team .gs-ends, .gs--team .gs-coveredset { opacity: 0; pointer-events: none; }

.gs-route__halo { stroke: var(--gs-blue); stroke-opacity: 0; stroke-width: 22; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke-opacity 0.4s; }
.gs-route__case { stroke: #fff; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gs-route__core { stroke: #A9B4E3; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s var(--gs-ease); }
.gs-route__march { stroke: #fff; stroke-width: 2.2; stroke-dasharray: 0.1 11; fill: none; stroke-linecap: round; opacity: 0; transition: opacity 0.3s; }
.gs-route.is-sel .gs-route__halo { stroke-opacity: 0.16; }
.gs-route.is-sel .gs-route__core { stroke: var(--gs-blue); }
.gs-route.is-sel .gs-route__march { opacity: 0.9; animation: gs-march var(--gs-march, 1.2s) linear infinite; }
@keyframes gs-march { to { stroke-dashoffset: -11.1; } }
.gs-route.is-draw .gs-route__halo,
.gs-route.is-draw .gs-route__case,
.gs-route.is-draw .gs-route__core { transition: stroke-dashoffset 0.8s var(--gs-ease), stroke 0.4s var(--gs-ease), stroke-opacity 0.4s; }

.gs-end { fill: #fff; stroke: #A9B4E3; stroke-width: 5; transition: stroke 0.4s var(--gs-ease); }
.gs-end.is-sel { stroke: var(--gs-blue); }

.gs-covered { fill: none; stroke: var(--gs-blue); stroke-opacity: 0.2; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }

/* Route pills on the map */
.gs-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 9px;
  border-radius: 8px;
  background: #fff;
  color: var(--gs-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 0.35s var(--gs-ease), color 0.35s var(--gs-ease), transform 0.5s var(--gs-spring);
}
.gs-pill .gs-i { color: #4C5470; transition: color 0.35s; }
.gs-pill.is-sel { background: var(--gs-blue); color: #fff; transform: scale(1.08); }
.gs-pill.is-sel .gs-i { color: #fff; }
.gs--team .gs-mk--pill .gs-mk__in { opacity: 0; pointer-events: none; }

/* People markers */
.gs-mem {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: transform 0.45s var(--gs-spring);
}
.gs-mem:hover { transform: scale(1.06); }
.gs-mem img {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--c);
  object-fit: cover;
}
.gs-mem__badge {
  position: absolute;
  left: 32px;
  top: 32px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid #fff;
  color: #fff;
}
.gs-mem.is-focus::after, .gs-mem.is-focus::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--c);
  animation: gs-ping 1.6s var(--gs-ease) infinite;
}
.gs-mem.is-focus::before { animation-delay: 0.8s; }
@keyframes gs-ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.9); opacity: 0; } }

.gs-mem--past { width: 44px; height: 44px; }
.gs-mem--past img { left: 4px; top: 4px; width: 36px; height: 36px; border-color: #A3A9B3; filter: grayscale(1); }
.gs-mem--past .gs-mem__badge { left: 28px; top: 28px; width: 18px; height: 18px; background: #8A9099; border-width: 1.5px; }
.gs-pastlabel { padding: 3px 8px; border-radius: 8px; background: #fff; color: #5E6470; font-size: 11px; font-weight: 500; white-space: nowrap; }

/* Lena (last seen) */
.gs-lena { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff; }
.gs-lena img { position: absolute; left: 5px; top: 5px; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--gs-coral); object-fit: cover; }
.gs-lena::before, .gs-lena::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--gs-coral);
  opacity: 0;
  animation: gs-radar 3s var(--gs-ease) infinite;
}
.gs-lena::after { animation-delay: 1.5s; }
@keyframes gs-radar { 0% { transform: scale(0.85); opacity: 0.32; } 100% { transform: scale(2.1); opacity: 0; } }
.gs-last { padding: 0 11px; height: 27px; display: flex; align-items: center; border-radius: 8px; background: var(--gs-coral); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }

/* You */
.gs-du { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--gs-blue); border: 4px solid #fff; box-sizing: border-box; }
.gs-du::before { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--gs-blue); opacity: 0; animation: gs-acc 2.8s var(--gs-ease) infinite; box-sizing: border-box; }
@keyframes gs-acc { 0% { transform: scale(0.7); opacity: 0.45; } 100% { transform: scale(1.7); opacity: 0; } }
.gs-origin { fill: #fff; stroke: #A9B4E3; stroke-width: 3.5; opacity: 0; transition: opacity 0.4s var(--gs-ease); }
.gs--busy .gs-origin { opacity: 1; }

/* --- Header scrim, status bar, missing card --- */
.gs-scrim { position: absolute; left: 0; top: 0; width: 100%; height: 230px; pointer-events: none; background: linear-gradient(to bottom, rgba(107, 79, 56, 0.5) 0%, rgba(107, 79, 56, 0.18) 55%, rgba(107, 79, 56, 0) 100%); }

.gs-status { position: absolute; left: 0; right: 0; top: 0; height: 50px; pointer-events: none; color: #fff; }
.gs-status__time { position: absolute; left: 34px; top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.gs-status__icons { position: absolute; right: 30px; top: 19px; display: flex; align-items: center; gap: 6px; }

.gs-card {
  position: absolute;
  left: 16px;
  top: 54px;
  width: 370px;
  height: 114px;
  border: 1px solid var(--gs-hair);
  border-radius: 16px;
  background: #fff;
}
.gs-card__photo { position: absolute; left: 13px; top: 13px; width: 72px; height: 88px; border-radius: 10px; object-fit: cover; }
.gs-card__info { position: absolute; left: 97px; top: 13px; right: 12px; }
.gs-card__tags { display: flex; align-items: center; gap: 8px; height: 21px; }
.gs-tag { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 6px; background: var(--gs-coral); color: #fff; font-size: 12px; font-weight: 600; }
.gs-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.gs-card__since { font-size: 12.5px; color: var(--gs-gray); }
.gs-card__name { margin-top: 4px; font-size: 22px; font-weight: 600; line-height: 26px; letter-spacing: -0.03em; }
.gs-card__desc { margin-top: 3px; font-size: 12.5px; line-height: 16px; color: var(--gs-gray); white-space: nowrap; }
.gs-card__last { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 16px; }
.gs-card__last .gs-i { color: var(--gs-coral); }

/* --- Bottom sheet --- */
.gs-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 423px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  transition: height 0.55s var(--gs-ease);
}
.gs--team .gs-sheet { height: 342px; }

.gs-handle { position: absolute; left: 50%; top: 9px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--gs-hair); }

/* Chips float above the sheet */
.gs-chip {
  position: absolute;
  top: -37px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 29px;
  padding: 0 11px;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.gs-chip--searched { left: 16px; }
.gs-chip--scale { right: 16px; font-weight: 500; }
.gs-dots { display: flex; }
.gs-dots i { width: 10px; height: 10px; margin-right: -4px; border-radius: 50%; border: 1.5px solid #fff; box-sizing: content-box; background: var(--c); }
.gs-chip--searched .gs-dots { margin-right: 4px; }
.gs-scalebar { display: block; height: 5px; border: 1.5px solid var(--gs-ink); border-top: 0; border-radius: 0 0 1px 1px; transition: width 0.6s var(--gs-ease); box-sizing: content-box; }
.gs-num { font-variant-numeric: tabular-nums; }
/* numbers blur out and back in when they change */
.gs-xfade { display: inline-grid; }
.gs-x { grid-area: 1 / 1; text-align: inherit; }
.gs-x--out { animation: gs-xo 0.34s ease forwards; }
.gs-x--in { animation: gs-xi 0.34s ease both; }
@keyframes gs-xo { to { opacity: 0; } }
@keyframes gs-xi { from { opacity: 0; } }

/* Tabs */
.gs-tabs { position: absolute; left: 16px; top: 22px; width: 370px; height: 34px; }
.gs-tab { position: absolute; top: 0; font-size: 20px; font-weight: 600; line-height: 26px; color: var(--gs-gray); transition: color 0.3s var(--gs-ease); }
.gs-tab.is-on { color: var(--gs-ink); }
.gs-tab__n { margin-left: 6px; font-size: 12px; vertical-align: 5px; }
.gs-tabs__line { position: absolute; left: 0; right: 0; top: 32px; height: 1px; background: var(--gs-hair); }
.gs-tabs__ink { position: absolute; left: 0; top: 31px; width: 60px; height: 2px; background: var(--gs-ink); transition: transform 0.45s var(--gs-ease), width 0.45s var(--gs-ease); }

/* Panels: the leaving one fades quickly, the entering one builds up piece by piece */
.gs-panel {
  position: absolute;
  left: 16px;
  top: 64px;
  width: 370px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s var(--gs-ease), visibility 0s 0.18s;
}
.gs-panel--routes { height: 260px; }
.gs-panel--team { height: 178px; }
.gs-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s var(--gs-ease) 0.08s, visibility 0s; }
.gs-panel.is-active .gs-seg,
.gs-panel.is-active .gs-route-box,
.gs-panel.is-active .gs-member { animation: gs-rise 0.55s var(--gs-ease) backwards; animation-delay: calc(0.14s + var(--k, 0) * 0.06s); }
@keyframes gs-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Mode segmented control */
.gs-seg { position: relative; display: flex; height: 60px; padding: 3px; border-radius: 12px; background: var(--gs-track); }
.gs-seg__thumb { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 4); border-radius: 10px; background: #fff; transform: translateX(calc(var(--i, 1) * 100%)); transition: transform 0.45s var(--gs-spring); }
.gs-mode { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--gs-gray); font-size: 12px; font-weight: 500; transition: color 0.3s; }
.gs-mode.is-on { color: var(--gs-ink); }
.gs-mode .gs-i { transition: transform 0.45s var(--gs-spring); }
.gs-mode.is-on .gs-i { transform: translateY(-1px) scale(1.08); }

/* Route boxes */
.gs-routes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gs-route-box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 16px 0 10px;
  border-radius: 12px;
  background: var(--gs-box);
  transition: background-color 0.35s var(--gs-ease), color 0.35s var(--gs-ease), transform 0.3s var(--gs-ease);
}
.gs-route-box:active { transform: scale(0.99); }
.gs-route-box__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #4C5470; transition: background-color 0.35s var(--gs-ease), color 0.35s var(--gs-ease); }
.gs-route-box__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gs-route-box__name { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.gs-route-box__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gs-gray); transition: color 0.35s; }
.gs-chipg { padding: 1px 6px; border-radius: 4px; background: #DFF4E7; color: #137A3F; font-weight: 600; transition: background-color 0.35s, color 0.35s; }
.gs-route-box__time { text-align: right; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gs-route-box.is-sel { background: var(--gs-blue); color: #fff; }
.gs-route-box.is-sel .gs-route-box__badge { background: #fff; color: var(--gs-blue); }
.gs-route-box.is-sel .gs-route-box__meta { color: rgba(255, 255, 255, 0.8); }
.gs-route-box.is-sel .gs-chipg { background: rgba(255, 255, 255, 0.2); color: #fff; }
.gs--busy .gs-seg, .gs--busy .gs-route-box:not(.is-sel) { opacity: 0.5; pointer-events: none; }
.gs-seg, .gs-route-box { transition-property: background-color, color, transform, opacity; }

/* Team rows */
.gs-team { height: 100%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.gs-team::-webkit-scrollbar { display: none; }
.gs-member {
  position: relative;
  flex: none;
  display: block;
  width: 100%;
  height: 60px;
  border-radius: 12px;
  background: var(--gs-box);
  transition: background-color 0.3s var(--gs-ease), opacity 0.3s, transform 0.5s var(--gs-spring);
}
.gs-member:active { transform: scale(0.99); }
.gs-member.is-focus { background: #E6EAF4; }
.gs-member__av { position: absolute; left: 12px; top: 10px; width: 40px; height: 40px; border-radius: 50%; outline: 2.5px solid var(--c); object-fit: cover; }
.gs-member__av--you { display: grid; place-items: center; background: var(--gs-blue); color: #fff; }
.gs-member__name { position: absolute; left: 64px; top: 11px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.gs-member__place { position: absolute; left: 64px; top: 31px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gs-gray); }
.gs-member__tile { position: absolute; left: 248px; top: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--c); }
.gs-member__tile::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: var(--c); opacity: 0.14; }
.gs-member__tile .gs-i { position: relative; }
.gs-member__km { position: absolute; right: 16px; top: 11px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gs-member__km small { font-size: 12px; font-weight: 400; color: var(--gs-gray); }
.gs-member--past .gs-member__av { filter: grayscale(1); outline-color: #B4BAC4; }
.gs-member--past .gs-member__av, .gs-member--past .gs-member__name, .gs-member--past .gs-member__tile, .gs-member--past .gs-member__km { opacity: 0.65; }

/* Main button */
.gs-cta {
  position: absolute;
  left: 16px;
  bottom: 39px;
  width: 370px;
  height: 52px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--gs-ink);
  color: #fff;
  text-align: center;
  transition: transform 0.3s var(--gs-spring), background-color 0.3s;
}
.gs-cta:active { transform: scale(0.985); }
.gs-cta__fill { position: absolute; inset: 0; width: 100%; background: var(--gs-blue); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.gs-cta__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.gs-cta__label.is-out { animation: gs-out 0.25s var(--gs-ease) forwards; }
.gs-cta__label.is-in { animation: gs-swap 0.4s var(--gs-ease) both; }
@keyframes gs-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes gs-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gs-home { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--gs-ink); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gs *, .gs *::before, .gs *::after { animation: none !important; }
  .gs-cam, .gs-sheet, .gs-panel, .gs-seg__thumb, .gs-tabs__ink { transition-duration: 0.01s !important; }
}