/* Slide a chat row left to reveal Delete. */
.swipe-row {
  position:relative;
  overflow:hidden;
  touch-action:pan-y
}

.swipe-row {
  border-bottom:1px solid var(--line)
}

/* The row narrows to uncover Delete, so the face and the name never slide off the screen. */
.swipe-row>.person-row {
  position:relative;
  z-index:1;
  border-bottom:0;
  width:calc(100% - var(--swipe,0px));
  transition:width .18s ease
}

.swipe-row.open>.person-row {
  width:calc(100% - 92px)
}

.swipe-row.dragging>.person-row {
  width:calc(100% - var(--swipe,0px));
  transition:none
}

.swipe-delete {
  position:absolute;
  top:0;
  right:0;
  bottom:1px;
  width:92px;
  border:0;
  background:#b3382b;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer
}

/* Reactions on a message. */
.reaction-row {
  display:flex;
  gap:8px;
  justify-content:center;
  margin:4px 0 18px
}

.reaction-pick {
  width:50px;
  height:50px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel2);
  font-size:28px;
  line-height:1;
  cursor:pointer
}

.msg-reaction {
  font-size:15px;
  line-height:1;
  margin-top:-8px;
  padding:3px 6px;
  border-radius:12px;
  background:var(--panel2);
  border:1px solid var(--line)
}





.album-heading,.chat-list-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.album-create {
  display:flex;
  gap:7px;
  max-width:230px
}

.album-create input {
  flex:1 1 auto;
  width:auto;
  min-width:0;
  height:44px;
  padding:0 11px
}

.album-create button {
  flex:0 0 auto;
  width:auto;
  min-height:44px;
  padding:0 13px
}

.album-list {
  display:flex;
  gap:8px;
  margin:0 0 18px;
  overflow-x:auto
}

.album-list>span {
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ice);
  font-size:13px
}

.album-list small {
  color:var(--muted)
}

.photo-album-label {
  display:grid;
  gap:4px;
  margin-top:7px;
  color:var(--muted);
  font-size:11px
}

.photo-album-label select {
  width:100%;
  min-height:36px;
  padding:0 8px;
  font-size:13px
}

.album-sharing {
  margin:0 14px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel)
}

.album-sharing summary {
  min-height:44px;
  padding:12px 14px;
  color:var(--ice);
  cursor:pointer
}

.album-sharing summary span {
  color:var(--muted)
}

.album-share-list {
  padding:0 14px 6px
}

.album-share-list label {
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:start;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--line)
}

.album-share-list input {
  width:20px;
  height:20px;
  margin:1px 0 0
}

.album-share-list span,.album-share-list small {
  display:block
}

.album-share-list small {
  margin-top:2px;
  color:var(--muted)
}

.privacy-presets {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0 18px
}

.privacy-presets button {
  min-height:82px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--text);
  text-align:left
}

.privacy-presets button.active {
  border-color:var(--cyan);
  background:#0f3543;
  box-shadow:inset 0 0 0 1px #53dff544
}

.privacy-presets strong,.privacy-presets small {
  display:block
}

.privacy-presets small {
  margin-top:5px;
  color:var(--muted);
  line-height:1.25
}

.moderation-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:13px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  color:var(--text);
  text-align:left
}

.moderation-row span,.moderation-row small {
  display:block
}

.moderation-row small {
  margin-top:3px;
  color:var(--muted)
}

.moderation-row i,.severity {
  padding:4px 7px;
  border-radius:999px;
  background:#203541;
  color:var(--muted);
  font-size:11px;
  font-style:normal;
  text-transform:uppercase
}

.moderation-row.urgent i,.severity.urgent {
  background:#8b2d2d;
  color:#fff
}

.moderation-detail blockquote {
  margin:12px 0;
  padding:12px;
  border-left:3px solid var(--cyan);
  background:var(--panel2)
}

.moderation-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px
}

.composer-reply {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 14px;
  border-top:1px solid var(--line);
  background:#102633;
  color:var(--muted);
  font-size:13px
}

.composer-reply span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.composer-reply button {
  min-width:36px;
  min-height:36px;
  border:0;
  background:none;
  color:var(--ice);
  font-size:24px
}

.reply-preview {
  display:block;
  max-width:100%;
  margin-bottom:7px;
  padding:5px 8px;
  overflow:hidden;
  border-left:2px solid currentColor;
  opacity:.65;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.reply-action {
  width:100%;
  margin-bottom:14px
}

.chat-list-head .text-button {
  min-height:44px
}

.muted-chat {
  display:inline-block;
  margin-left:7px;
  color:var(--muted);
  font-size:10px;
  font-style:normal;
  font-weight:500;
  text-transform:uppercase
}







.policy-body {
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  background:radial-gradient(circle at 50% -20%,#174356 0,#081722 52%,#050d14 100%);
  color:var(--text)
}

.policy-page {
  width:min(680px,calc(100% - 32px));
  margin:auto;
  padding:34px 0 70px;
  line-height:1.65
}

.policy-wordmark {
  color:var(--ice);
  font-size:22px;
  font-weight:700;
  text-decoration:none
}

.policy-wordmark span {
  color:var(--green)
}

.policy-page h1 {
  margin:34px 0 0;
  font-size:clamp(36px,10vw,56px)
}

.policy-page h2 {
  margin:30px 0 4px;
  color:var(--ice);
  font-size:19px
}

.policy-page p {
  margin:8px 0;
  color:#c2d0da
}

.policy-date {
  color:var(--muted)!important;
  font-size:13px
}

.policy-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:26px 0
}

.policy-links a,.policy-back {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--cyan)
}

.login-policies {
  justify-content:center;
  margin:12px 0
}

.settings-section .policy-links a,.login-policies a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.login-policies {
  justify-content:center;
  margin:10px 0 0;
  font-size:12px
}

@media (max-width:420px) {
  .privacy-presets {
    grid-template-columns:1fr
  }
  .privacy-presets button {
    min-height:62px
  }
  .album-heading {
    align-items:flex-start;
    flex-direction:column
  }
  .album-create {
    width:100%;
    max-width:none
  }
}

/* Older chat pages load on demand; the newest page comes with the state. */
.message-stream .load-earlier {
  align-self:center;
  margin:0 0 6px;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  font-size:12px;
  color:var(--muted)
}

/* Invite call-to-action inside empty states. */
.invite-inline {
  margin-top:10px
}

.invite-left {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:12px
}

.direction-empty .invite-inline {
  margin-top:14px;
  pointer-events:auto
}

/* Toasts on the radar view never sit on the radar: they drop in from under the header instead. */
body.nearby-view #toast {
  top:calc(96px + env(safe-area-inset-top))
}
/* On the grid (the default Nearby) there is no compass to protect, and up top the toast sat on the intention
   chips for seven seconds (heuristics 8, 2026-09-26): it rises from just above the tab bar instead. */
body.nearby-view.grid-mode #toast {
  top:auto;
  bottom:calc(74px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px)
}
body.nearby-view.grid-mode #toast.show { transform:translate(-50%,0) }

/* The introduce form makes its labels block; the unlock row is a row. */
.intro-inline .album-option {
  display:flex;
  align-items:flex-start
}

/* One line for the two sharing pills on a phone: the labels shrink before they wrap. */
@media (max-width:420px) {
  .photo-bar .photo-toggle,.photo-bar .photo-status {
    font-size:11px;
    padding:0 8px
  }
}

/* A shared location: one card, two map apps. */
.bubble.location {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:210px
}

.bubble.location .location-title {
  font-weight:600
}

.bubble.location .location-title small {
  font-weight:400;
  opacity:.7
}

.bubble.location .location-coords {
  font-size:12px;
  opacity:.75;
  font-variant-numeric:tabular-nums
}

.bubble.location .location-apps {
  display:flex;
  gap:8px;
  margin-top:2px
}

.bubble.location .location-apps a {
  flex:1;
  text-align:center;
  padding:8px 10px;
  border-radius:12px;
  background:#0f1e2a;
  color:var(--ice);
  text-decoration:none;
  font-size:13px;
  font-weight:600
}



/* Delete stays hidden until the row is slid or held; it was showing through the transparent row. */
.swipe-delete {
  visibility:hidden
}

.swipe-row.open .swipe-delete,
.swipe-row.dragging .swipe-delete {
  visibility:visible
}

/* Chat header: a little air above his picture, a lighter back arrow. */
.conversation-header {
  padding-top:10px
}

.conversation-header .icon-button[data-chat-back] {
  font-size:19px;
  width:32px
}

/* The sharing sheet, off the chat header. */
.chat-share svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7
}

.chat-share.active {
  color:var(--ice)
}

.share-line {
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
  font-size:14px;
  color:var(--ink)
}

.share-line.muted {
  color:var(--muted)
}

.share-line small {
  color:var(--muted)
}

.reveal-option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:48px;
  margin:7px 0;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#10212c;
  cursor:pointer
}

.reveal-option:has(input:checked) {
  border-color:var(--ice);
  background:#17313d
}

.reveal-option input {
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:1px 0 0;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--panel2);
  display:grid;
  place-content:center;
  cursor:pointer
}

.reveal-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
}

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

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

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

.reveal-option>span {
  min-width:0;
  line-height:20px
}

.reveal-option strong,
.reveal-option small {
  display:block
}

.reveal-option small {
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45
}

.meetup-choice {
  width:100%;
  margin:6px 0 2px;
  text-align:left
}

button.share-line {
  width:100%;
  justify-content:flex-start;
  min-height:44px;
  border-radius:14px
}

dialog h3 {
  margin:18px 0 6px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted)
}

/* Activity. */
.activity-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:0 0 16px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#0c1822
}

.activity-tabs button {
  min-height:44px;
  border-radius:12px;
  color:var(--muted);
  font-weight:700
}

.activity-tabs button[aria-selected="true"] {
  color:var(--ink);
  background:#1b3040;
  box-shadow:0 1px 10px #0005
}

.activity-tabs i {
  display:inline-grid;
  min-width:20px;
  height:20px;
  margin-left:4px;
  padding:0 5px;
  place-items:center;
  border-radius:10px;
  background:var(--ice);
  color:#07131d;
  font-size:11px;
  font-style:normal
}

.activity-row.fresh strong::after {
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  margin-left:8px;
  border-radius:50%;
  background:var(--ice);
  vertical-align:middle
}

.activity-row.targeted {
  outline:2px solid var(--ice);
  outline-offset:-2px;
  animation:activity-target 1.1s ease-out
}

@keyframes activity-target {
  0% { box-shadow:0 0 0 0 #8fe9ff88 }
  100% { box-shadow:0 0 0 16px #8fe9ff00 }
}

.activity-cta {
  font-size:12px;
  color:var(--ice);
  border:1px solid var(--line);
  border-radius:12px;
  padding:4px 10px
}

.activity-seen {
  margin-left:auto;
  color:var(--muted);
  font-size:12px
}

.activity-seen.seen {
  color:var(--ice)
}

.social-confirmation {
  position:fixed;
  left:50%;
  top:42%;
  z-index:30000;
  display:grid;
  min-width:132px;
  padding:18px 22px;
  place-items:center;
  border:1px solid #8fe9ff88;
  border-radius:24px;
  background:#07131ded;
  color:#f5fbff;
  box-shadow:0 16px 60px #000b,0 0 30px #42d8f433;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  transition:opacity .18s,transform .28s cubic-bezier(.2,.9,.2,1.35);
  pointer-events:none
}

.social-confirmation.show {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)
}

.social-confirmation span {
  font-size:38px;
  line-height:1
}

.social-confirmation strong {
  margin-top:9px;
  font-size:14px
}

.social-confirmation.tap span {
  animation:social-tap .48s cubic-bezier(.2,.9,.3,1.3) both
}

.social-confirmation.woof span {
  animation:social-woof .58s ease-out both
}

.social-confirmation.wink span {
  animation:social-wink .6s ease-out both
}

@keyframes social-tap {
  0% { transform:scale(.55) rotate(-12deg) }
  65% { transform:scale(1.2) rotate(7deg) }
  100% { transform:scale(1) rotate(0) }
}

@keyframes social-woof {
  0% { transform:translateY(8px) rotate(-10deg) }
  45% { transform:translateY(-4px) rotate(8deg) }
  100% { transform:translateY(0) rotate(0) }
}

@keyframes social-wink {
  0% { transform:scale(.7) rotate(-7deg); opacity:.45 }
  50% { transform:scale(1.15) rotate(7deg); opacity:1 }
  100% { transform:scale(1) rotate(0); opacity:1 }
}

@media (prefers-reduced-motion:reduce) {
  .activity-row.targeted {
    animation:none
  }

  .social-confirmation {
    transform:translate(-50%,-50%);
    transition:opacity .12s
  }

  .social-confirmation.tap span,
  .social-confirmation.woof span,
  .social-confirmation.wink span {
    animation:none
  }
}

/* Mutual reveal: private by default, with one calm yellow state for a completed link. */
.is-private-silhouette { position:relative; filter: saturate(.55) brightness(.78); }
.is-private-silhouette::after {
  content:'⌑';
  position:absolute;
  right:6px;
  bottom:5px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid rgba(255,228,92,.9);
  border-radius:50%;
  color:#ffe45c;
  background:#101923;
  font-size:19px;
  line-height:1;
  z-index:3;
}
.linked-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:4px 11px;
  border:1px solid rgba(255,228,92,.95);
  border-radius:999px;
  color:#161a18;
  background:#ffe45c;
  font-weight:800;
  letter-spacing:.02em;
}
.linked-badge i { font-style:normal; font-size:13px; }

.profile-reveal-card,
.profile-linked-card {
  display:grid;
  gap:9px;
  margin:18px 0;
  padding:16px;
  border:1px solid rgba(57,223,255,.22);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(32,53,68,.96),rgba(20,32,43,.96));
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

#toast.arrival {
  z-index:26000;
  color:#f2f7fb;   /* dark card, so the text must go light (unreadable after sign-in, John 2026-09-19) */
  border-color:rgba(255,228,92,.78);
  background:linear-gradient(110deg,rgba(14,29,40,.98),rgba(38,45,38,.98));
  box-shadow:0 0 0 1px rgba(255,228,92,.16),0 16px 48px rgba(0,0,0,.42),0 0 34px rgba(255,228,92,.14);
}
#toast.arrival.show { animation:arrival-toast .48s cubic-bezier(.18,.86,.24,1); }
#toast.arrival .toast-undo { color:#ffe45c; border-color:#ffe45c88; }
@keyframes arrival-toast {
  0% { opacity:0; transform:translate(-50%,18px) scale(.92); filter:brightness(1.8); }
  58% { opacity:1; transform:translate(-50%,-3px) scale(1.025); }
  100% { transform:translate(-50%,0) scale(1); filter:brightness(1); }
}
.profile-linked-card { border-color:rgba(255,228,92,.56); }
.profile-reveal-card.muted { border-color:rgba(160,177,191,.26); opacity:.86; }
.profile-reveal-card .eyebrow,
.profile-linked-card .eyebrow { color:#8fe7f7; font-size:.7rem; letter-spacing:.11em; }
.profile-reveal-card strong { font-size:1.08rem; }
.profile-reveal-card p,
.profile-linked-card p { margin:0; color:var(--muted); line-height:1.45; }
.profile-reveal-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:3px;
  color:var(--muted);
  font-size:.8rem;
}
.profile-reveal-line>div,
.reveal-chip-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.reveal-category-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:27px;
  padding:4px 9px;
  border:1px solid rgba(183,222,239,.25);
  border-radius:999px;
  color:#dcecf2;
  background:rgba(183,222,239,.1);
  font-size:.72rem;
  font-weight:700;
}
.reveal-category-mark {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(57,223,255,.65);
}
.category-cock .reveal-category-mark { background:#ffbb88; box-shadow:0 0 8px rgba(255,187,136,.55); }
.category-private .reveal-category-mark { background:#d3a9ff; box-shadow:0 0 8px rgba(211,169,255,.55); }
.locked-photo-summary {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  margin:12px 0 16px;
  padding:11px 13px;
  border:1px solid rgba(183,222,239,.18);
  border-radius:14px;
  background:rgba(15,25,35,.64);
}
.locked-photo-summary .lock { flex:0 0 auto; }
.locked-photo-summary span { display:grid; gap:2px; }
.locked-photo-summary strong { color:var(--ink); font-size:.86rem; }
.locked-photo-summary small { color:var(--muted); }
.privacy-by-default {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid rgba(57,223,255,.2);
  border-radius:14px;
  background:rgba(22,41,54,.72);
}
.privacy-by-default p { display:grid; gap:4px; margin:0; }
.privacy-by-default small { color:var(--muted); line-height:1.45; }
.mutual-reveal-sheet { padding:3px 0 18px; }











.reveal-signature {
  margin:7px 0 6px;
  color:var(--ink);
  font-size:1.08rem;
  font-weight:800;
  text-align:center;
}
.reveal-lead { margin:0 8px 14px; text-align:center; }

.reveal-choice,
.reveal-detail-choice {
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:58px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(33,50,63,.62);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.reveal-choice:hover,
.reveal-detail-choice:hover { border-color:rgba(57,223,255,.6); transform:translateY(-1px); }
.reveal-choice:has(input:checked),
.reveal-detail-choice:has(input:checked) { border-color:rgba(255,228,92,.9); background:rgba(255,228,92,.1); }
.reveal-choice input,
.reveal-detail-choice input { width:22px; height:22px; accent-color:#ffe45c; flex:0 0 auto; }
.reveal-choice span,
.reveal-detail-choice span { display:grid; gap:3px; }
.reveal-choice strong,
.reveal-detail-choice strong { font-size:.88rem; }
.reveal-choice small,
.reveal-detail-choice small { color:var(--muted); line-height:1.3; }





.reveal-offer-grid { display:grid; gap:12px; margin:7px 0 8px; padding:13px; border:1px solid rgba(255,228,92,.25); border-radius:15px; background:rgba(255,228,92,.06); }
.reveal-offer-grid>div { display:grid; gap:7px; }
.reveal-offer-grid .eyebrow { color:#ffe45c; font-size:.68rem; letter-spacing:.1em; }

.reveal-detail-choice { min-height:52px; }


.reveal-chat-bar { justify-content:center; }
.reveal-chat-link { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 13px; border-radius:12px; }
.reveal-conversation-gate .conversation-header { border-bottom:1px solid var(--line); }
.mutual-chat-gate { min-height:420px; }
.mutual-chat-gate .linked-badge { margin:4px auto 0; color:var(--ink); background:rgba(183,222,239,.12); border-color:rgba(183,222,239,.35); }
.mutual-chat-gate h2 { margin-bottom:0; }
.mutual-chat-gate p { max-width:320px; margin:0 auto 12px; text-align:center; }
.reveal-request-card { border-color:rgba(255,228,92,.35); }

@media (max-width:560px) {
  .profile-reveal-line { align-items:flex-start; flex-direction:column; }
  .profile-reveal-line>div { justify-content:flex-start; }


}

@media (prefers-reduced-motion:reduce) {
  .reveal-lock-half,
  .reveal-lock-core,
  .reveal-choice,
  .reveal-detail-choice { transition:none; }
  #toast.arrival.show { animation:none; }
  .reveal-choice:hover,
  .reveal-detail-choice:hover { transform:none; }
}

/* Radial hold menu: actions bloom around the finger, the hot one grows and names itself. */
#radial {
  position:fixed;
  inset:0;
  z-index:20000;   /* above hovered/focused bubbles (10000) and clusters (9990) */
  touch-action:none;
  background:radial-gradient(circle at 50% 50%,#0000 0%,#07121c66 100%);
  opacity:0;
  transition:opacity .16s
}

#radial.open {
  opacity:1
}

#radial.closing {
  opacity:0;
  pointer-events:none
}

.radial-ring {
  position:absolute;
  width:0;
  height:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid #5fd0e855;
  box-shadow:0 0 0 1px #0a1d2788,0 0 40px #39dfff22;
  transition:width .22s cubic-bezier(.2,.9,.3,1.2),height .22s cubic-bezier(.2,.9,.3,1.2)
}

#radial.open .radial-ring {
  width:168px;
  height:168px
}

.radial-item {
  position:absolute;
  width:54px;
  height:54px;
  margin:-27px 0 0 -27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:26px;
  line-height:1;
  background:#122330f2;
  border:1px solid #5fd0e880;
  box-shadow:0 8px 24px #0009;
  color:var(--ink);
  transform:translate(0,0) scale(.2);
  opacity:0;
  transition:transform .24s cubic-bezier(.2,.9,.3,1.25),opacity .16s,box-shadow .16s,border-color .16s;
  user-select:none;
  -webkit-user-select:none
}

#radial.open .radial-item {
  transform:translate(var(--tx),var(--ty)) scale(1);
  opacity:1
}

#radial.open .radial-item.hot {
  transform:translate(var(--tx),var(--ty)) scale(1.28);
  border-color:var(--cyan);
  box-shadow:0 0 0 4px #39dfff33,0 0 28px #39dfff88,0 8px 24px #0009;
  background:#173244
}

.radial-label {
  position:absolute;
  transform:translate(-50%,0);
  padding:8px 14px;
  border-radius:999px;
  background:#0a1d27f0;
  border:1px solid #3c4e5d;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  transition:color .12s,border-color .12s
}

.radial-label.armed {
  color:#d7f4fb;
  border-color:#5fd0e8
}

@media(prefers-reduced-motion:reduce) {
  .radial-item,.radial-ring,#radial { transition-duration:.01s }
}

#radial.escaping .radial-item {
  opacity:.45;
  transform:translate(var(--tx),var(--ty)) scale(.9)
}



/* Swap or show (2026-09-22): one row per thing, three plain choices, and a line saying where it stands. */
.share-list { display:grid; gap:8px; margin:14px 0 12px; }
.share-row { border:1px solid rgba(143,211,255,.25); border-radius:14px; padding:10px 12px; background:rgba(10,24,36,.55); }
.share-row.offer { border-color:rgba(255,228,92,.9); background:rgba(255,228,92,.08); }
.share-row.done { border-color:rgba(111,255,164,.7); }
.share-row-head { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.share-row-head small { color:var(--muted,#9fb0bb); font-size:12px; }
.share-row.offer .share-row-head small { color:#ffe45c; }
.share-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.share-mode { min-height:44px; border-radius:22px; border:1px solid rgba(143,211,255,.35); background:transparent; color:inherit; font:inherit; font-size:14px; }
.share-mode.on { background:rgba(143,211,255,.22); border-color:rgba(143,211,255,.9); font-weight:600; }
.share-mode:disabled { opacity:.4; }

/* Ages I'm into and the quick type buttons (2026-09-23) */
.type-quick { display:flex; gap:14px; }
.age-range-field { margin-top:14px; }
.age-range-inputs { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin:8px 0 4px; }
.age-range-inputs input { min-height:44px; font-size:16px; }
.age-range-inputs input:disabled { opacity:.45; }
.intention-more summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--muted,#9fb0bb); }

/* Round-4 big-thumbs: Sign out sat hard against the tab bar and a low tap landed on Nearby. Give it a full-size
   target and clear room above the bar. */
.me-section .signout-row{display:block;min-height:48px;margin:12px 0 calc(40px + env(safe-area-inset-bottom));font-size:16px}