/* v141 Círculo social: família + amigos no mesmo mapa (anel por círculo, halo tracejado = posição aproximada, selo de
 * status), tipo do círculo na criação, "seu cartão" (precisão + status) e chips de status. Loaded after v140-circle.css;
 * reuses its --circle-* tokens (light/dark). */
:root {
  --circle-ring-blue: #2150e0;
  --circle-ring-teal: #0e9384;
  --circle-ring-indigo: #6941c6;
  --circle-ring-coral: #e8462a;
  --circle-ring-pink: #c11574;
  --circle-ring-amber: #b54708;
  --circle-st-available: #067647;
  --circle-st-studying: #2150e0;
  --circle-st-working: #475467;
  --circle-st-training: #b54708;
  --circle-st-out: #c11574;
  --circle-st-dnd: #c4261b;
  --circle-friends-soft: var(--l360-coral-soft, #fff0eb);
  --circle-friends-ink: var(--l360-coral-strong, #c4381f);
}
:root[data-theme=dark] {
  --circle-ring-blue: #7c9cff;
  --circle-ring-teal: #2ed3b7;
  --circle-ring-indigo: #a48afb;
  --circle-ring-coral: #ff8566;
  --circle-ring-pink: #f670c7;
  --circle-ring-amber: #fdb022;
  --circle-st-available: #34d399;
  --circle-st-studying: #7c9cff;
  --circle-st-working: #98a2b3;
  --circle-st-training: #fdb022;
  --circle-st-out: #f670c7;
  --circle-st-dnd: #ff7a6b;
  --circle-friends-soft: #3a2019;
  --circle-friends-ink: #ff9a82;
}
:is(.circle-marker, .circle-dot)[data-ring="blue"] { --ring: var(--circle-ring-blue); }
:is(.circle-marker, .circle-dot)[data-ring="teal"] { --ring: var(--circle-ring-teal); }
:is(.circle-marker, .circle-dot)[data-ring="indigo"] { --ring: var(--circle-ring-indigo); }
:is(.circle-marker, .circle-dot)[data-ring="coral"] { --ring: var(--circle-ring-coral); }
:is(.circle-marker, .circle-dot)[data-ring="pink"] { --ring: var(--circle-ring-pink); }
:is(.circle-marker, .circle-dot)[data-ring="amber"] { --ring: var(--circle-ring-amber); }
:is(.circle-chip, .circle-chip-mini, .circle-marker-status)[data-status="available"] { --st: var(--circle-st-available); }
:is(.circle-chip, .circle-chip-mini, .circle-marker-status)[data-status="studying"] { --st: var(--circle-st-studying); }
:is(.circle-chip, .circle-chip-mini, .circle-marker-status)[data-status="working"] { --st: var(--circle-st-working); }
:is(.circle-chip, .circle-chip-mini, .circle-marker-status)[data-status="training"] { --st: var(--circle-st-training); }
:is(.circle-chip, .circle-chip-mini, .circle-marker-status)[data-status="out"] { --st: var(--circle-st-out); }
:is(.circle-chip, .circle-chip-mini, .circle-marker-status)[data-status="dnd"] { --st: var(--circle-st-dnd); }

/* ---------- Map: ring = circle, dashed halo = approximate (~500 m), one small badge at most ---------- */
.circle-marker[data-ring] .circle-avatar-map { box-shadow: 0 2px 8px rgba(15, 26, 46, .35), 0 0 0 3px var(--ring); }
.circle-marker[data-ring].is-stale .circle-avatar-map { box-shadow: 0 1px 4px rgba(15, 26, 46, .3), 0 0 0 2px color-mix(in srgb, var(--ring) 55%, transparent); }
.circle-marker.is-approx::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 2px dashed var(--ring, var(--circle-accent));
  border-radius: 50%;
  background: color-mix(in srgb, var(--ring, var(--circle-accent)) 12%, transparent);
  pointer-events: none;
}
.circle-marker.is-approx.is-stale::before { opacity: .55; }
.circle-marker-status {
  position: absolute;
  right: 0;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--st, var(--circle-st-working));
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 26, 46, .3);
}
.circle-marker-status .circle-status-icon { width: 11px; height: 11px; }
/* Dark: the status tones are light, so the glyph turns dark (>= 6:1 on every tone). */
:root[data-theme=dark] .circle-marker-status { color: #0b1220; }

/* ---------- Circle picker (legend): coloured dot + name, "Novo" ---------- */
/* A scroll container gets no automatic minimum size: in the overflowing sheet grid its row collapsed to 0 px. */
.circle-switch { flex: none; min-height: 44px; scrollbar-width: none; }
.circle-switch::-webkit-scrollbar { display: none; }
.circle-switch button { display: inline-flex; align-items: center; min-height: 44px; }
.circle-dot { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--ring, var(--circle-accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring, var(--circle-accent)) 22%, transparent); }
.circle-switch .circle-switch-new { gap: 4px; padding: 0 12px 0 10px; border-style: dashed; color: var(--circle-accent); }
.circle-switch-new .ui-icon { width: 16px; height: 16px; }

/* ---------- Create: two simple cards (Família / Amigos) ---------- */
.circle-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.circle-kinds legend { margin-bottom: 8px; padding: 0; color: var(--circle-muted); font-size: 13px; font-weight: 700; }
.circle-kinds label {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 44px;
  padding: 14px 14px 16px;
  border: 1px solid var(--circle-line);
  border-radius: 18px;
  background: var(--circle-surface);
  cursor: pointer;
}
/* The native radio covers the card (keyboard, screen readers); the visible mark is drawn in the corner. */
.circle-kinds input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.circle-kinds label::after { content: ''; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--circle-line); border-radius: 50%; background: var(--circle-surface); }
.circle-kinds label:has(input:checked) { border-color: var(--circle-accent); box-shadow: inset 0 0 0 1px var(--circle-accent); }
.circle-kinds label:has(input:checked)::after { border: 6px solid var(--circle-button); }
.circle-kinds label:has(input:focus-visible) { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
.circle-kind-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--circle-accent-soft); color: var(--circle-accent); }
.circle-kind-icon .ui-icon { width: 22px; height: 22px; }
.circle-kinds [data-kind="friends"] .circle-kind-icon { background: var(--circle-friends-soft); color: var(--circle-friends-ink); }
.circle-kinds strong { display: block; font-size: 15px; }
.circle-kinds small { display: block; margin-top: 3px; color: var(--circle-muted); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 359px) { .circle-kinds { grid-template-columns: minmax(0, 1fr); } }
.circle-note .ui-icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }

/* ---------- "Seu cartão": precision (one tap) + status (one tap) ---------- */
.circle-you { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--circle-raised); }
.circle-you-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.circle-you-text strong { display: block; font-size: 14px; }
.circle-you[data-precision="approx"] .circle-you-text strong { color: var(--circle-friends-ink); }
.circle-you-text small { display: block; margin-top: 2px; color: var(--circle-muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.circle-seg { display: inline-grid; grid-auto-flow: column; border-radius: 14px; background: var(--circle-surface); box-shadow: inset 0 0 0 1px var(--circle-line); }
.circle-seg button {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--circle-muted);
  font: 700 13px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
}
/* Pressed: an inner pill (the 3 px surface ring is the gap), so the 44 px hit area stays whole. */
.circle-seg button[aria-pressed="true"] { background: var(--circle-button); color: var(--circle-on-button); box-shadow: inset 0 0 0 3px var(--circle-surface); }
.circle-you[data-precision="approx"] .circle-seg [data-circle-precision="approx"][aria-pressed="true"] { background: var(--circle-friends-ink); }
/* Dark: the light coral needs dark text (white on #ff9a82 was ~2:1). */
:root[data-theme=dark] .circle-you[data-precision="approx"] .circle-seg [data-circle-precision="approx"][aria-pressed="true"] { color: #2b0e07; }
.circle-seg button:disabled { opacity: .6; cursor: default; }
.circle-status-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.circle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--circle-line);
  border-radius: 12px;
  background: var(--circle-surface);
  color: var(--circle-ink);
  font: 600 12px/1.15 'DM Sans', system-ui, sans-serif;
  letter-spacing: -.005em;
  text-align: center;
  cursor: pointer;
}
.circle-chip .circle-status-icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--st); }
.circle-chip[aria-pressed="true"] { border-color: var(--st); background: color-mix(in srgb, var(--st) 14%, var(--circle-surface)); font-weight: 800; box-shadow: inset 0 0 0 1px var(--st); }
.circle-you-note { color: var(--circle-muted); font-size: 12px; line-height: 1.4; }
:is(.circle-seg button, .circle-chip):focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
@media (hover: hover) {
  .circle-chip:hover { background: color-mix(in srgb, var(--st) 8%, var(--circle-surface)); }
  .circle-seg button:not([aria-pressed="true"]):hover { color: var(--circle-ink); }
}
@media (max-width: 359px) {
  .circle-status-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .circle-you-row { grid-template-columns: minmax(0, 1fr); }
  .circle-seg { justify-self: start; }
}

/* ---------- Status chip (list, member sheet) and approximate markers in the sheet ---------- */
.circle-chip-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--st) 14%, transparent);
  color: var(--circle-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: middle;
}
.circle-chip-mini > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-chip-mini .circle-status-icon { width: 12px; height: 12px; flex: 0 0 12px; color: var(--st); }
.circle-chip-hero { margin-top: 7px; }
.circle-member-hero .circle-approx-note { color: var(--circle-friends-ink); font-weight: 700; }
/* Same language as the map: a dashed ring = approximate position (~500 m). */
.circle-row.is-approx > .circle-avatar { outline: 2px dashed var(--circle-friends-ink); outline-offset: 5px; }
.circle-row .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ---------- Pill: "≈ 500 m" while the active circle sees only the region ---------- */
.circle-pill-approx { flex: none; padding: 3px 6px; border-radius: 8px; background: var(--circle-friends-soft); color: var(--circle-friends-ink); font-size: 11px; font-weight: 800; line-height: 1; }
/* Narrow phones (320–359 px): the words "Compartilhando ≈ 500 m" matter more than the faces. */
@media (max-width: 359px) {
  .circle-pill .circle-pill-open:has(.circle-pill-approx) .circle-stack { display: none; }
  .circle-pill .circle-pill-open:has(.circle-pill-approx) { padding-left: 14px; }
}