/* Keep the selected person above the thumb navigation on a typical phone. */
@media(min-width:361px) and (max-width:699px) {


}

/* GaydarLove: personal circles and optional reciprocal discovery. */
.wordmark {
  font-size:29px;
  letter-spacing:-1.4px
}

.wordmark span {
  font-size:23px
}

.login-top .eyebrow {
  font-size:8px;
  letter-spacing:1px
}

.login-top {
  gap:14px
}


.discovery-filters {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:12px;
  min-height:36px
}



.filters-chip {
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid #486072;
  border-radius:18px;
  min-height:36px;
  padding:7px 11px;
  font-size:11px;
  white-space:nowrap;
  color:#c5d6e2
}

.filters-chip.enabled {
  background:#b7deef;
  color:#112634;
  border-color:#b7deef
}


.discovery-filters>small {
  font-size:9px;
  line-height:1.5;
  color:var(--muted)
}

.avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.avatar:has(img):before {
  display:none
}

.avatar img.obscured {
  filter:blur(14px);
  transform:scale(1.3);
  opacity:.5
}






.avatar-editor {
  display:flex;
  align-items:center;
  gap:18px
}

.editor-avatar {
  width:84px;
  height:84px;
  font-size:24px;
  box-shadow:0 0 0 5px #b7deef09
}

.avatar-editor>div:last-child {
  flex:1
}

.upload-button {
  font-size:13px;
  min-height:44px;
  padding:10px 14px;
  cursor:pointer;
  width:max-content
}

.upload-button:focus-within {
  outline:2px solid var(--ice)
}

#photo-upload:focus-visible+.upload-button {
  outline:2px solid var(--ice)
}

#photo-status {
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin-top:9px
}





.avatar-options {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px 8px;
  padding:10px 2px
}

.avatar-choice {
  display:flex;
  align-items:center;
  flex-direction:column;
  position:relative;
  cursor:pointer;
  gap:8px;
  min-width:0
}

.avatar-choice>input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}

.avatar-choice>.avatar {
  width:48px;
  height:48px;
  transition:box-shadow .15s
}

.avatar-choice>span:last-child:not(.avatar) {
  font-size:10px;
  color:var(--muted)
}

.avatar-choice input:checked+.avatar {
  outline:2px solid var(--ice);
  outline-offset:3px
}

.avatar-choice input:checked~span:last-child {
  color:var(--ice)
}

.avatar-choice input:focus-visible+.avatar {
  outline:2px dashed white;
  outline-offset:5px
}

.avatar-picker {
  margin-top:12px
}

.avatar-picker summary {
  cursor:pointer;
  color:var(--ice);
  font-size:12px;
  min-height:44px;
  padding:14px 0
}

.avatar-picker[open] summary {
  margin-bottom:10px
}

.profile-top .hero-avatar {
  width:106px;
  height:106px
}



.me-section .avatar-field {
  margin-top:26px
}

.me-section fieldset {
  margin-top:25px
}

@media(min-width:361px) and (max-width:699px) {


}

@media(max-width:360px) {
  .wordmark {
    font-size:25px
  }

  .login-top .eyebrow {
    font-size:7px;
    letter-spacing:.5px
  }

  .avatar-options {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .discovery-filters>small {
    font-size:8px
  }

}

.sr-only {
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important
}

.avatar-editor:has(#photo-upload:focus-visible) .upload-button {
  outline:2px solid var(--ice);
  outline-offset:3px
}

/* Swipe the scene: the upper profile arc and lower compass share one heading. */
.direction-stage {
  touch-action:pan-y pinch-zoom;
  user-select:none;
  -webkit-user-select:none;
  margin-top:14px;
  cursor:grab
}

.direction-stage:active {
  cursor:grabbing
}





.profile-arc {
  position:relative;
  height:167px;
  overflow:hidden;
  margin:0 -7px
}



.arc-profile {
  position:absolute;
  transform:translate(-50%,0) scale(var(--profile-scale));
  width:70px;
  text-align:center;
  padding:0;
  transform-origin:top center;
  touch-action:pan-y pinch-zoom
}

.arc-profile .avatar {
  width:65px;
  height:65px;
  margin:0 auto 8px;
  border:2px solid #71899a;
  box-shadow:0 5px 15px #0004
}

.arc-profile.active .avatar {
  border-color:var(--ice);
  box-shadow:0 0 0 4px #b7deef15
}



.direction-empty {
  text-align:center;
  padding:54px 15px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}

.direction-empty span {
  font-size:11px
}



.compass-field {
  display:flex;
  align-items:center;
  height:160px;
  gap:9px;
  position:relative;
  border-bottom:1px solid #34495570
}

.dot-field {
  position:relative;
  width:calc(100% - 78px);
  height:156px
}

.dot-rings {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#3f5b6d60;
  stroke-width:1
}

.dot-rings .view-cone {
  fill:#b7deef09;
  stroke:#b7deef19;
  stroke-dasharray:3 5
}

.dot-origin {
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#e0f4fe;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px #b7deef13
}

/* 44pt, not 32: the ticket assumed the target was already right and only the mark was too small.
   It was both (GAYDA-004, 2026-09-21). */
.distance-dot {
  position:absolute;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  padding:0;
  z-index:1
}

.distance-dot>span {
  display:block;
  width:var(--dot-size);
  height:var(--dot-size);
  margin:auto;
  background:#68869a;
  border:1px solid #8eacbf;
  border-radius:50%;
  box-shadow:0 2px 5px #0003
}

.distance-dot.in-view>span {
  background:#bddbeb;
  border-color:#e3f3fb
}

.distance-dot.selected {
  z-index:2
}

.distance-dot.selected>span {
  background:#e3bf98;
  border-color:#f0d7bc;
  outline:1px solid #d6a77c;
  outline-offset:3px
}

.corner-compass {
  position:relative;
  width:70px;
  height:70px;
  flex:none;
  margin-right:1px
}

.compass-rose {
  position:absolute;
  inset:0
}

.compass-rose svg {
  width:100%;
  height:100%;
  fill:none;
  stroke:#5c7b8e;
  stroke-width:1
}

.compass-rose svg>path {
  opacity:.55
}

.compass-rose .rose-north {
  fill:#b7deef;
  stroke:none;
  opacity:.8
}

.compass-rose span {
  position:absolute;
  background:var(--bg);
  font:9px ui-monospace,monospace;
  padding:2px;
  color:#b6cbd8
}

.rose-n {
  top:-4px;
  left:50%;
  transform:translateX(-50%);
  color:var(--ice)!important
}

.rose-e {
  right:-3px;
  top:50%;
  transform:translateY(-50%)
}

.rose-s {
  bottom:-4px;
  left:50%;
  transform:translateX(-50%)
}

.rose-w {
  left:-3px;
  top:50%;
  transform:translateY(-50%)
}

.compass-needle {
  position:absolute;
  left:50%;
  top:-13px;
  transform:translateX(-50%);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:7px solid var(--copper)
}

.compass-center {
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  background:var(--ice);
  border-radius:50%;
  transform:translate(-50%,-50%)
}

.compass-caption {
  position:absolute;
  top:84px;
  width:100%;
  text-align:center;
  font:10px ui-monospace,monospace;
  color:var(--ice)
}










.profile-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin:15px -13px 0
}

.grid-profile {
  position:relative;
  display:flex;
  align-items:flex-start;
  aspect-ratio:1/1.1;
  overflow:hidden;
  border-radius:9px;
  background:#263b49;
  text-align:left;
  padding:0;
  border:1px solid #365061
}

.grid-profile>.grid-image {
  width:100%;
  height:auto;
  aspect-ratio:1;
  border:0;
  border-radius:0;
  font-size:30px
}

/* Sprite-sheet images position themselves; object-fit:cover would recentre and rescale the whole sheet. */
.grid-profile>.grid-image>img:not(.photo-tile):not(.photo-sheet):not(.body-tile) {
  object-fit:cover
}

.grid-overlay {
  position:absolute;
  inset:auto 0 0;
  padding:24px 8px 8px;
  background:linear-gradient(transparent,#07111de8);
  z-index:1
}

.grid-name {
  display:block;
  font-size:11px;
  color:white;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 4px #000
}

.grid-new {
  display:inline-block;
  margin-bottom:3px;
  padding:2px 5px;
  border-radius:999px;
  background:#a5eeff;
  color:#071c2a;
  font:700 8px/1.2 ui-monospace,monospace;
  letter-spacing:.7px;
  text-transform:uppercase;
  box-shadow:0 1px 5px #00101880
}

.grid-meta {
  display:block;
  font-size:8px;
  color:#d3e0e9;
  line-height:1.5;
  margin-top:3px;
  margin-right:34px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.grid-mutual {
  position:absolute;
  top:8px;
  right:8px;
  border:1px solid #26404d;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d0eaf7;
  box-shadow:0 1px 4px #0008
}


.avatar>.photo-tile {
  position:absolute;
  width:200%;
  height:200%;
  max-width:none;
  object-fit:fill
}

.photo-tile.tile-0 {
  left:0;
  top:0
}

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

.photo-tile.tile-2 {
  left:0;
  top:-100%
}

.photo-tile.tile-3 {
  left:-100%;
  top:-100%
}

.grid-profile:focus-visible {
  outline-offset:1px;
  z-index:3
}

@media(max-width:360px) {
  .profile-arc {
    height:159px
  }

  .arc-profile {
    width:60px
  }

  .arc-profile .avatar {
    width:55px;
    height:55px
  }



  .grid-name {
    font-size:10px
  }

  .profile-grid {
    margin-inline:-10px
  }

  .compass-field {
    height:150px
  }

  .dot-field {
    height:146px
  }
}




.direction-stage img {
  -webkit-user-drag:none;
  pointer-events:none
}

/* A round, centered radar with a quieter distance scale. */
.compass-field {
  display:block;
  width:min(100%,260px);
  height:auto;
  aspect-ratio:1;
  margin:5px auto 0;
  border:0;
  border-radius:50%;
  isolation:isolate
}

.dot-field {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  border-radius:50%;
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%)
}

.compass-field .corner-compass {
  position:absolute;
  width:64px;
  height:64px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  pointer-events:none;
  z-index:3;
  background:var(--bg);
  border-radius:50%
}

.compass-field .dot-origin {
  display:none
}

.compass-caption {
  top:74px
}

.compass-needle {
  top:-10px
}

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






@media(max-width:360px) {
  .compass-field {
    width:240px;
    height:auto
  }

  .dot-field {
    height:100%
  }
}

/* Phosphor radar: pale contacts, bright green for an open conversation. */
.compass-field {
  background:radial-gradient(circle,#0b2619 0%,#071b12 62%,#06130e 100%);
  box-shadow:inset 0 0 32px #34ff7920,0 0 25px #41ec7610;
  border:1px solid #67f79745
}

.dot-field {
  background:repeating-radial-gradient(circle at center,transparent 0 10px,#6eff8c08 11px 12px);
  overflow:hidden
}

.dot-rings {
  stroke:#65ee8750;
  filter:drop-shadow(0 0 2px #52ff7444)
}

.dot-rings .view-cone {
  fill:#68ff8720;
  stroke:#7aff9b60;
  stroke-dasharray:none
}

.distance-dot>span,.distance-dot.in-view>span {
  background:#d3ded4;
  border-color:#effff1;
  box-shadow:0 0 5px #e4ffe380,0 0 12px #b7ffc540
}


.distance-dot.selected>span {
  outline-color:#eaffee;
  outline-offset:4px
}


.compass-field .corner-compass {
  background:#0a1e14;
  box-shadow:0 0 20px #58ff7820
}

.compass-rose svg {
  stroke:#67dd8c
}

.compass-rose .rose-north {
  fill:#9dffb4
}

.compass-rose span {
  background:#0a1e14;
  color:#b0eec0
}

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

.compass-center {
  background:#aaffb4;
  box-shadow:0 0 9px #65ff8a
}

.compass-caption {
  color:#aaffb4
}

.compass-needle {
  border-top-color:#9dffb4
}

.arc-profile.active .avatar {
  border-color:#a3ffc0;
  box-shadow:0 0 16px #53ff7740
}


.avatar>img.body-tile {
  position:absolute;
  width:300%;
  height:300%;
  max-width:none;
  object-fit:fill
}

.me-section>h1,.chats-section>h1 {
  margin-bottom:24px
}

.login-copy {
  margin-top:48px
}

.login-top {
  margin-bottom:24px
}

.avatar>img.body-0 {
  left:0%;
  top:0%
}

.avatar>img.body-1 {
  left:-100%;
  top:0%
}

.avatar>img.body-2 {
  left:-200%;
  top:0%
}

.avatar>img.body-3 {
  left:0%;
  top:-100%
}

.avatar>img.body-4 {
  left:-100%;
  top:-100%
}

.avatar>img.body-5 {
  left:-200%;
  top:-100%
}

.avatar>img.body-6 {
  left:0%;
  top:-200%
}

.avatar>img.body-7 {
  left:-100%;
  top:-200%
}

.avatar>img.body-8 {
  left:-200%;
  top:-200%
}