/* Compact bearing/depth stacks and small radar contacts. */
.app-header {
  height:59px;
  padding:12px 18px
}

.app-header .wordmark {
  font-size:26px;
  letter-spacing:-1.4px
}

.app-header .wordmark span {
  font-size:20px
}


main {
  padding:4px 18px calc(78px + env(safe-area-inset-bottom))
}


.discovery-filters {
  margin-block:8px
}

.direction-stage {
  margin-top:10px
}



.profile-arc {
  margin-inline:-8px
}

.arc-profile {
  width:60px
}

.arc-profile .avatar {
  width:52px;
  height:52px;
  margin-bottom:3px;
  border-width:1px
}

.arc-new {
  position:absolute;
  left:50%;
  top:-7px;
  z-index:3;
  transform:translateX(-50%);
  padding:2px 6px;
  border-radius:999px;
  background:#a5eeff;
  color:#071c2a;
  border:1px solid #d9f9ff;
  font:700 8px/1.2 ui-monospace,monospace;
  letter-spacing:.7px;
  text-transform:uppercase;
  pointer-events:none
}



.arc-profile:focus-visible,.arc-profile:hover {
  z-index:100!important
}

.compass-field {
  width:min(100%,300px);
  margin:0 auto
}

.distance-dot>span,.distance-dot.in-view>span {
  border:0;
  box-shadow:0 0 4px #d6ffdb50
}

.distance-dot:not(.in-view)>span {
  opacity:.38
}

.distance-dot.in-view>span {
  opacity:1;
  background:#f1fff3;
  box-shadow:0 0 4px #d6ffdb90
}

.distance-dot.in-view::before {
  content:'';
  position:absolute;
  width:8px;
  height:8px;
  border:1px solid #ccffda65;
  border-radius:2px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}



.distance-dot.selected>span {
  outline-offset:3px
}



.bottom-nav {
  min-height:62px
}


.app-header {
  height:44px;
  padding:7px 14px
}

.app-header .wordmark {
  font-size:22px
}

.app-header .wordmark span {
  font-size:16px
}


.discover {
  position:relative
}

.discovery-filters {
  position:absolute;
  top:0;
  left:0;
  margin:0;
  z-index:1
}




.segmented {
  padding:2px
}

.segmented button {
  min-height:28px;
  padding:6px 11px;
  font-size:10px
}

.direction-stage {
  margin-top:4px
}


.profile-arc,.compass-field {
  width:min(100%,340px);
  margin-inline:auto
}

.distance-dot.in-view::before {
  display:none
}

.distance-dot.selected>span {
  outline:none
}

.distance-dot.in-view>span {
  background:#f1fff3;
  box-shadow:0 0 3px #d6ffdb90
}


.distance-dot:not(.in-view)>span {
  opacity:.3
}

/* Front hemisphere only; turn to bring rear contacts into view. */
.compass-field {
  aspect-ratio:2/1;
  border-radius:999px 999px 0 0;
  overflow:hidden;
  border-bottom:1px solid #67f79745
}

.dot-field {
  height:200%;
  border-radius:50%
}

.compass-field .corner-compass {
  top:100%
}

.compass-caption {
  display:none
}

.compass-field {
  background:#04110c;
  box-shadow:inset 0 0 24px #24e56c18,0 0 15px #27d96909
}

.compass-field::after {
  content:'';
  position:absolute;
  left:50%;
  top:100%;
  width:190%;
  aspect-ratio:1;
  border:1px solid #6eff9860;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.1);
  animation:tracker-pulse 3.2s linear infinite;
  animation-delay:var(--scan-delay);
  pointer-events:none;
  z-index:0
}

.dot-field {
  z-index:1;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#86ff9e05 3px 4px)
}

.dot-rings {
  stroke:#4fec7b48;
  filter:drop-shadow(0 0 2px #3fff6f30)
}

.dot-rings .view-cone {
  fill:#59ff7910;
  stroke:#69ff8c25
}

.distance-dot.in-view>span {
  background:#b6ffcc;
  box-shadow:0 0 4px #71ff9c90
}


@keyframes tracker-pulse {
  0% {
    transform:translate(-50%,-50%) scale(.05);
    opacity:0
  }

  12% {
    opacity:.7
  }

  100% {
    transform:translate(-50%,-50%) scale(1);
    opacity:0
  }
}

@media(prefers-reduced-motion:reduce) {
  .compass-field::after {
    animation:none;
    display:none
  }
}

.direction-stage {
  overflow-anchor:none
}


.profile-arc {
  flex:none
}


.arc-profile:focus-visible {
  opacity:1!important
}

.app-header {
  height:44px;
  gap:10px;
  padding:0 14px
}

.app-header .wordmark {
  font-size:21px;
  white-space:nowrap
}

.header-discovery {
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto
}

.header-discovery[hidden] {
  display:none
}


.header-discovery .segmented button {
  min-height:30px;
  padding:6px 9px
}

.discover>.discovery-filters {
  position:relative;
  margin:0 0 4px
}

.direction-stage {
  margin:0
}

.me-section>button[data-online-toggle] {
  margin-bottom:22px
}

@media(max-width:360px) {
  .app-header {
    padding-inline:12px;
    gap:6px
  }

  .app-header .wordmark {
    font-size:19px
  }

  .header-discovery {
    gap:7px
  }

  .header-discovery .segmented button {
    padding-inline:7px;
    font-size:9px
  }
}

/* The visible circle, not its surrounding rectangle, owns the pointer. */
.profile-arc .arc-profile {
  pointer-events:none
}

.arc-profile .bubble-hit {
  display:block;
  width:var(--bubble-size);
  height:var(--bubble-size);
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  clip-path:circle(50%);
  pointer-events:auto;
  touch-action:pan-y pinch-zoom
}

.arc-profile .bubble-hit .avatar {
  display:block;
  margin:0;
  pointer-events:none
}

.arc-profile .bubble-hit:focus-visible {
  outline:none;
  box-shadow:inset 0 0 0 3px #c7f6ff
}

.profile-arc .arc-profile:has(.bubble-hit:hover),.profile-arc .arc-profile:has(.bubble-hit:focus-visible) {
  z-index:10000!important
}

.profile-arc .stack-behind .bubble-hit {
  pointer-events:none
}


.map-toggle {
  margin-left:auto;
  min-height:40px;
  padding:8px 12px;
  border-radius:20px;
  color:#8bb9ca;
  font-size:11px
}

.map-toggle[aria-pressed=true] {
  color:#b9f0ff;
  background:#1b455766
}

.radar-map-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:200%;
  /* Clip to the cyan outer ring (r=116 of the 240 viewBox), not the layer's own edge. */
  clip-path:circle(48.333% at 50% 50%);
  overflow:hidden;
  pointer-events:none
}

.radar-map {
  width:100%;
  height:100%;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}

.map-road {
  stroke:#8fc4d6;
  stroke-width:.55;
  opacity:.85
}

.map-coast {
  stroke:#a4e4ed;
  stroke-width:.7;
  opacity:.85
}

.map-water {
  stroke:#46a5c9;
  stroke-width:.45;
  opacity:.6
}

.compass-field .map-credit {
  position:absolute;
  bottom:2px;
  left:5px;
  z-index:6;
  font-size:9px;
  color:#b6d7e4;
  background:#07121ccc;
  padding:3px 5px;
  line-height:16px;
  min-height:24px;
  display:flex;
  align-items:center
}

.map-credit[hidden] {
  display:none
}

/* Midnight / cyan instrument, grounded on the navigation horizon. */
:root {
  --bg:#07121c;
  --panel:#101f2b;
  --panel2:#172a38;
  --ice:#a4eaff;
  --line:#203c4d
}

.app-shell {
  background:radial-gradient(ellipse at 50% 80%,#0a2433 0%,#07121c 65%);
  border-color:#142936
}

.app-header {
  background:#07121c;
  border-bottom:1px solid #233e4d55
}

.app-header .wordmark {
  font-weight:650;
  letter-spacing:-1.1px
}

.wordmark span {
  color:#39dfff
}

.header-discovery .segmented {
  border:1px solid #34515e70;
  background:#0c1c28;
  border-radius:20px;
  padding:2px
}

.header-discovery .segmented button {
  border-radius:16px
}

.header-discovery .segmented button[aria-pressed=true] {
  background:#183748;
  color:#c6f3ff
}


main:has(.direction-stage) {
  padding:0 18px
}

.discover:has(.direction-stage) {
  height:calc(100dvh - 44px - env(safe-area-inset-top) - var(--nav-h,calc(69px + env(safe-area-inset-bottom))));
  display:flex;
  flex-direction:column
}

.discover>.discovery-filters {
  height:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  margin:0;
  flex:none
}


.direction-stage {
  flex:1;
  min-height:0;
  position:relative
}

.profile-arc,.compass-field {
  width:min(100%,460px)
}

.profile-arc {
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)
}

.compass-field {
  border:0;
  background:radial-gradient(ellipse at 50% 100%,#07344b60,#04131e88 70%);
  box-shadow:0 -12px 70px #0873a611;
  overflow:hidden;
  margin:0 auto
}

.compass-field::after {
  display:none
}

.dot-field {
  mask-image:none;
  -webkit-mask-image:none;
  background:none
}

.dot-field.contacts {
  background:linear-gradient(#3fbed909 1px,transparent 1px),linear-gradient(90deg,#3fbed909 1px,transparent 1px);
  background-size:32px 32px
}

.dot-rings {
  stroke:#3dcee342;
  stroke-width:.55;
  filter:none
}

.dot-rings .outer-ring {
  stroke:#147b9f90;
  stroke-width:1.2
}


.dot-rings .view-cone {
  fill:#20cce307;
  stroke:#40c4dd20
}

.radar-sweep {
  position:absolute;
  inset:1.6666667%;
  border-radius:50%;
  background:conic-gradient(from -35deg,transparent 0deg,#18b7e408 14deg,#18b7e455 32deg,#8afaffb0 34.7deg,transparent 35deg);
  transform:rotate(var(--scan-angle,0deg));
  will-change:transform;
  pointer-events:none
}

.distance-dot>span,.distance-dot.in-view>span {
  background:#71dced;
  border:0;
  opacity:calc(.45 + var(--echo,0)*.55);
  box-shadow:0 0 calc(3px + var(--echo,0)*9px) #20dcff,0 0 calc(var(--echo,0)*18px) #36dcff80;
  transform:scale(calc(1 + var(--echo,0)*.45))
}

.distance-dot:not(.in-view)>span {
  opacity:calc(.22 + var(--echo,0)*.65)
}


.compass-field .corner-compass {
  background:#071b27;
  box-shadow:0 0 22px #26b9e51a;
  width:48px;
  height:48px
}

.compass-rose svg {
  stroke:#68cbe0
}

.compass-rose .rose-north {
  fill:#a5f6ff
}

.compass-rose span {
  background:#071b27;
  color:#97d6e3
}

.rose-n {
  color:#c1f9ff!important
}

.compass-needle {
  border-top-color:#83edff
}

.compass-center {
  background:#9ffaff;
  box-shadow:0 0 10px #20dfff
}

.arc-profile .avatar {
  border-color:#4c839b;
  box-shadow:0 5px 20px #0005,0 0 0 3px #1a3b4a25
}

.arc-profile.active .avatar {
  border-color:#a5eeff;
  box-shadow:0 0 0 3px #3acfe418,0 0 23px #38d3f225
}



.bottom-nav {
  background:#07121cf5;
  border-top:1px solid #2d6a8050;
  backdrop-filter:blur(18px)
}

@media(prefers-reduced-motion:reduce) {
  .radar-sweep {
    display:none
  }

  .distance-dot>span {
    transform:none
  }
}

.stack-behind {
  pointer-events:none
}


.stack-behind .avatar {
  opacity:.65
}

.stack-count {
  position:absolute;
  right:1px;
  top:34px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#aadff0;
  color:#071c2a;
  border:2px solid #081b28;
  font:600 9px ui-monospace,monospace;
  box-shadow:0 2px 8px #0005;
  pointer-events:none
}

/* A true overlap becomes one tappable group while the radar dots keep every exact position visible. */
.arc-profile.is-cluster {
  z-index:9990!important
}

.arc-profile.is-cluster::before,
.arc-profile.is-cluster::after {
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:2px solid #78dff5aa;
  background:#102d3b;
  box-shadow:0 0 14px #42d8f455;
  transform:translate(-8px,-7px);
  pointer-events:none
}

.arc-profile.is-cluster::after {
  transform:translate(8px,-4px);
  opacity:.72
}

.arc-profile.is-cluster .bubble-hit {
  z-index:2;
  box-shadow:0 0 0 2px #9decff,0 0 22px #42d8f477
}

.arc-profile.is-cluster .stack-count {
  z-index:3;
  right:-5px;
  top:-6px;
  min-width:28px;
  height:28px;
  border-radius:14px;
  background:#bdf4ff;
  color:#05202c;
  font-size:12px;
  box-shadow:0 3px 14px #0009,0 0 16px #54ddf477
}

.cluster-list {
  margin-top:20px
}

.cluster-list .person-row {
  min-height:76px;
  text-align:left
}

.cluster-list .person-row>span:nth-child(2) {
  min-width:0;
  flex:1
}

.cluster-row-arrow {
  color:#8ec6d8;
  font-size:26px;
  line-height:1
}

.arc-profile {
  width:var(--bubble-size,100px);
  transform:translate(-50%,0)
}

.arc-profile .avatar {
  width:var(--bubble-size,100px);
  height:var(--bubble-size,100px);
  margin-bottom:6px
}



.stack-count {
  top:calc(var(--bubble-size,100px) - 24px);
  right:2px;
  min-width:24px;
  height:24px;
  font-size:11px
}

.direction-stage>.direction-empty {
  position:absolute;
  top:25%;
  left:0;
  right:0;
  padding:0 20px;
  text-align:center;
  color:#8babbc;
  font-size:13px;
  opacity:0;
  transition:opacity 200ms ease;
  pointer-events:none
}

.direction-stage>.direction-empty.is-visible {
  opacity:1
}


@media(prefers-reduced-motion:reduce) {
  .direction-stage>.direction-empty {
    transition:none
  }
}

.activity {
  display:block;
  font-size:10px;
  line-height:1.5;
  color:#a7b7c2;
  font-weight:400
}

.activity.is-online {
  color:#77e5b2
}

.grid-overlay .activity {
  margin-top:2px
}

.avatar>img.photo-sheet {
  position:absolute;
  width:408%;
  height:408%;
  max-width:none;
  object-fit:fill
}

.photo-sheet.sheet-0 {
  left:-1%;
  top:-1%
}

.photo-sheet.sheet-1 {
  left:-103%;
  top:-1%
}

.photo-sheet.sheet-2 {
  left:-205%;
  top:-1%
}

.photo-sheet.sheet-3 {
  left:-307%;
  top:-1%
}

.photo-sheet.sheet-4 {
  left:-1%;
  top:-103%
}

.photo-sheet.sheet-5 {
  left:-103%;
  top:-103%
}

.photo-sheet.sheet-6 {
  left:-205%;
  top:-103%
}

.photo-sheet.sheet-7 {
  left:-307%;
  top:-103%
}

.photo-sheet.sheet-8 {
  left:-1%;
  top:-205%
}

.photo-sheet.sheet-9 {
  left:-103%;
  top:-205%
}

.photo-sheet.sheet-10 {
  left:-205%;
  top:-205%
}

.photo-sheet.sheet-11 {
  left:-307%;
  top:-205%
}

.photo-sheet.sheet-12 {
  left:-1%;
  top:-307%
}

.photo-sheet.sheet-13 {
  left:-103%;
  top:-307%
}

.photo-sheet.sheet-14 {
  left:-205%;
  top:-307%
}

.photo-sheet.sheet-15 {
  left:-307%;
  top:-307%
}
/* Connections and account controls. */
.connection-note {
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin:14px 0 20px
}

.connection-note+form {
  margin-top:16px
}

dialog form>label {
  margin:17px 0 8px;
  font-size:13px
}

textarea,select {
  font:inherit;
  width:100%;
  color:var(--ink);
  background:#122330;
  border:1px solid #3c4e5d;
  border-radius:12px;
  padding:12px;
  font-size:16px
}

textarea {
  resize:vertical;
  min-height:95px
}

dialog form>.primary {
  margin-top:20px
}

.album-option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 0
}

.album-option input {
  /* Drawn by hand so iOS and desktop render the same 20px box; a native checkbox sat a few pixels off the text. */
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  margin:0;
  width:20px;
  height:20px;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--panel2);
  display:grid;
  place-content:center;
  cursor:pointer
}

.album-option input::before {
  content:'';
  width:10px;
  height:6px;
  border-left:2.5px solid #0f1e2a;
  border-bottom:2.5px solid #0f1e2a;
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0
}

.album-option input:checked {
  background:var(--ice);
  border-color:var(--ice)
}

.album-option input:checked::before {
  opacity:1
}

.album-option input:disabled {
  opacity:.55;
  cursor:default
}

.album-option>span {
  line-height:20px
}

.unlock-title {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:20px
}

.unlock-thumb {
  width:24px;
  height:24px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto
}

.unlock-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}

.album-option small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:5px;
  line-height:1.5
}




.filter-sheet-buttons {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:24px
}

.filter-sheet-buttons .primary {
  flex:1
}

/* Onboarding walkthrough. */
.onboard-card h3 {
  font-size:19px;
  margin:6px 0 12px
}

.onboard-card p {
  color:var(--muted);
  font-size:14px;
  line-height:1.6
}

.onboard-dots {
  display:flex;
  justify-content:center;
  gap:7px;
  margin:22px 0
}

.onboard-dots span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3c4e5d
}

.onboard-dots span.on {
  background:var(--ice)
}

.onboard-buttons {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.onboard-buttons .primary {
  flex:1
}

/* Safety copy. */
.safety-list {
  margin:14px 0 20px;
  padding-left:20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}

.safety-list li {
  margin-bottom:9px
}

.safety-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#16283580;
  border:1px solid #2c4252;
  border-radius:12px;
  padding:10px 14px;
  margin:0 0 10px;
  font-size:12px;
  color:#c5d6e2;
  line-height:1.5
}

.safety-note .text-button {
  flex:none;
  min-height:36px
}