/* Privacy tools (2026-09-30): Close / Rough / Vague, Take back all my photos, Public mode. */

/* Distance steps: the Discovery switch's look, with the band under each name. */
.distance-steps button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:13px }
.distance-steps button small { font-size:11px; font-weight:500; opacity:.8 }
.distance-steps button:disabled { opacity:.4 }
.distance-explain { margin-top:10px }

/* Take back all my photos, offered on the Block and Report sheets. */
.take-back-offer { margin:12px 0 4px; text-align:center }
.take-back-offer .connection-note { margin:0 0 4px }
.take-back-offer .text-button { min-height:44px }
.take-back-lead { color:var(--ink); font-size:15px }

/* Public mode: the header control is the help circle's twin, placed just before it. */
.public-toggle {
  flex:0 0 auto; position:relative;
  width:28px; height:28px; margin-left:2px; padding:0;
  display:inline-grid; place-items:center;
  border-radius:50%; border:1px solid #2c4252; background:#12222e; color:var(--ice); cursor:pointer
}
.public-toggle::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); z-index:1 }   /* 44 pt tall, like the help circle; never sideways into a neighbour */
.public-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.public-toggle[aria-pressed="true"] { background:var(--ice); color:#10202b; border-color:var(--ice) }
.public-toggle .public-chip {
  position:absolute; left:50%; top:calc(100% + 3px); transform:translateX(-50%);
  padding:1px 6px; border-radius:8px; background:var(--ice); color:#10202b;
  font-size:10px; font-weight:700; line-height:14px; letter-spacing:.02em; white-space:nowrap; pointer-events:none; z-index:3
}
.header-discovery[hidden] + .public-toggle { margin-left:auto }   /* off Nearby it sits beside the help circle, at the right */
.app-header .wordmark { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }

/* Every photo on this screen is blurred; the body silhouettes and drawn avatars are illustrations and stay clear.
   clip-path keeps the blur inside the photo's own box, so it never smears into the card around it. */
body.gdl-public img:not(.body-tile):not([src*="/static/avatars/"]):not([src*="logo-wordmark"]):not([src$=".svg"]) {
  filter:blur(16px) saturate(.7);
  clip-path:inset(0);
  transition:filter .2s ease
}
body.gdl-public .wordmark img { filter:none }

/* Under 360 px (iPhone SE 1st gen) the header has no room: the wordmark was squeezed to 14 px. Public mode stays on
   the Privacy page and on a long press of the wordmark. */
@media (max-width:359px){ .app-header .public-toggle{display:none} }