/* v140 Círculo (família): map pill, member markers, sheet, menu entry and profile photo.
 * Loaded after the brand sheet; uses the Youpi tokens when present and falls back to the older ones. */
:root {
  --circle-accent: var(--l360-blue-strong, var(--navy, #0847a6));
  --circle-button: var(--l360-blue, var(--navy, #0847a6));
  --circle-on-button: var(--l360-on-primary, #fff);
  --circle-accent-soft: var(--l360-blue-soft, #eaf1fb);
  --circle-live: var(--l360-live, #12b76a);
  --circle-live-ink: var(--l360-live-strong, #067647);
  --circle-live-soft: var(--l360-live-soft, #e7f8ef);
  --circle-warn-ink: var(--l360-warning-strong, #b54708);
  --circle-warn-soft: var(--l360-warning-soft, #fff4e0);
  --circle-danger: var(--l360-danger, #c4261b);
  --circle-surface: var(--paper, #fff);
  --circle-raised: var(--cream, #f4f6fb);
  --circle-ink: var(--ink, #0f1a2e);
  --circle-muted: var(--muted, #56637a);
  --circle-line: var(--line, rgba(28, 52, 110, .13));
  --circle-shadow: 0 1px 2px rgba(15, 26, 46, .08), 0 6px 20px rgba(15, 26, 46, .12);
  --circle-avatar-l: 90%;
  --circle-avatar-ink-l: 28%;
}
:root[data-theme=dark] {
  --circle-accent: var(--l360-link, var(--night-link, #95c3ff));
  --circle-button: var(--l360-button, #2a57e6);
  --circle-on-button: #fff;
  --circle-accent-soft: var(--l360-selected, var(--night-selected, #203f59));
  --circle-live: #34d399;
  --circle-live-ink: var(--l360-live-text, #5fe3a1);
  --circle-live-soft: #133a2c;
  --circle-warn-ink: #fbbf6a;
  --circle-warn-soft: #3a2a12;
  --circle-danger: #d9483b;
  --circle-raised: var(--l360-raised, var(--night-raised, #1c3643));
  --circle-shadow: 0 1px 2px #0007, 0 6px 20px #0006;
  --circle-avatar-l: 30%;
  --circle-avatar-ink-l: 88%;
}

/* ---------- Avatars ---------- */
.circle-avatar {
  --circle-size: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--circle-size);
  width: var(--circle-size);
  height: var(--circle-size);
  overflow: hidden;
  border-radius: 50%;
  background: hsl(var(--circle-hue, 215) 62% var(--circle-avatar-l));
  color: hsl(var(--circle-hue, 215) 58% var(--circle-avatar-ink-l));
  font: 700 calc(var(--circle-size) * .36)/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: -.01em;
  user-select: none;
}
.circle-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.circle-avatar-sm { --circle-size: 28px; }
.circle-avatar-md { --circle-size: 40px; }
.circle-avatar-lg { --circle-size: 64px; }
.circle-avatar-xl { --circle-size: 160px; }
.circle-avatar-map { --circle-size: 40px; }
.circle-avatar[data-presence="live"], .circle-avatar[data-presence="background"] { box-shadow: 0 0 0 2px var(--circle-surface), 0 0 0 4px var(--circle-live); }
.circle-avatar:is([data-presence="closed"], [data-presence="paused"], [data-presence="waiting"]) img { filter: grayscale(1); opacity: .6; }
.circle-avatar:is([data-presence="closed"], [data-presence="paused"], [data-presence="waiting"]) > span { opacity: .65; }

/* ---------- Map entry point (pill) ---------- */
html body .map-panel .circle-pill {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: max(var(--shell-gap, 20px), env(safe-area-inset-right, 0px));
  display: flex;
  align-items: stretch;
  max-width: min(360px, calc(100% - 32px));
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: var(--circle-surface);
  color: var(--circle-ink);
  box-shadow: 0 0 0 1px var(--circle-line), var(--circle-shadow);
}
.circle-pill:empty { display: none !important; }
.circle-pill button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  font: 700 12.5px/1 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.circle-pill button > .ui-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--circle-accent); }
.circle-pill .circle-pill-open { min-width: 0; overflow: hidden; }
.circle-pill .circle-pill-open:has(.circle-stack) { padding-left: 9px; }
.circle-pill-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.circle-pill-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-pill-text[data-live] { color: var(--circle-live-ink); }
.circle-pill-text[data-live="blocked"] { color: var(--circle-warn-ink); }
.circle-pill-text[data-live="blocked"] .circle-live-dot { background: var(--circle-warn-ink); animation: none; }
.circle-pill-with { color: var(--circle-ink); font-weight: 600; }
.circle-pill-short { display: none; }
.circle-pill .circle-pill-toggle { justify-content: center; width: 44px; padding: 0; border-left: 1px solid var(--circle-line); border-radius: 0 22px 22px 0; color: var(--circle-accent); }
.circle-pill .circle-pill-toggle svg { width: 18px; height: 18px; }
.circle-pill[data-state="live"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--circle-live) 45%, var(--circle-line)), var(--circle-shadow); }
@media (hover: hover) {
  .circle-pill button:hover { background: var(--circle-raised); }
}
.circle-pill button:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
.circle-stack { display: inline-flex; align-items: center; }
.circle-stack .circle-avatar { box-shadow: 0 0 0 2px var(--circle-surface); }
.circle-stack .circle-avatar + .circle-avatar { margin-left: -9px; }
.circle-stack .circle-avatar:is([data-presence="live"], [data-presence="background"]) { box-shadow: 0 0 0 2px var(--circle-surface), 0 0 0 3.5px var(--circle-live); }
.circle-more { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-left: -6px; padding: 0 5px; border-radius: 14px; background: var(--circle-raised); box-shadow: 0 0 0 2px var(--circle-surface); color: var(--circle-muted); font-size: 11px; }
.circle-live-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--circle-live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--circle-live) 60%, transparent); animation: circle-live 2.4s ease-out infinite; }
@keyframes circle-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--circle-live) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .circle-live-dot { animation: none; } }
body.reduce-motion .circle-live-dot { animation: none; }

/* Desktop/tablet: the top-right corner is free (zoom and GPS live in the bottom-right column). */
@media (min-width: 1024px) {
  html body .map-panel .circle-pill { max-width: min(440px, calc(100% - 460px)); }
  .circle-pill .circle-pill-with { display: inline; }
}
@media (max-width: 1023px) {
  .circle-pill .circle-pill-with { display: none; }
}
/* Phones: the planner covers the top of the map, so the pill joins the control column above zoom. */
@media (max-width: 600px) {
  html body.map-shell .map-panel .circle-pill {
    top: auto;
    bottom: calc(var(--v138-ctrl-base, 138px) + 3 * var(--v138-ctrl, 44px) + 2 * var(--v138-ctrl-gap, 8px) + 2px);
    right: max(var(--shell-gap, 12px), env(safe-area-inset-right, 0px));
    max-width: calc(100% - 24px);
  }
  .circle-pill:not([data-state="live"]):not([data-state="paused"]) .circle-pill-text { display: none; }
  .circle-pill:not([data-state="live"]):not([data-state="paused"]) .circle-pill-open { justify-content: center; width: 44px; padding: 0; }
}
/* During a trip the bottom sheet owns the lower half; the top-left corner is free. */
html body.map-shell:is(.travel-active, .journey-navigation-active) .map-panel .circle-pill {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: auto;
  bottom: auto;
  left: max(12px, env(safe-area-inset-left, 0px));
  max-width: calc(100% - 180px);
}
@media (max-width: 600px) {
  html body.map-shell:is(.travel-active, .journey-navigation-active) .circle-pill-long { display: none; }
  html body.map-shell:is(.travel-active, .journey-navigation-active) .circle-pill-short { display: inline; }
}
/* A guest or someone without a circle does not need the entry point in the middle of a trip. */
html body.map-shell:is(.travel-active, .journey-navigation-active) .map-panel .circle-pill:not([data-state="live"]):not([data-state="paused"]) { display: none; }
/* Step aside like the other map controls whenever a sheet, dialog, menu or picker covers the map. */
html body.map-shell:is(.map-shell-arrivals-open, .map-shell-menu-open, .origin-picking) .map-panel .circle-pill,
html body.map-shell:has(dialog[open], #arrival-drawer:not([hidden]), #origin-map-picker:not([hidden])) .map-panel .circle-pill {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 600px) {
  html body.map-shell.map-shell-planner-open:not(.travel-active, .journey-navigation-active) .map-panel .circle-pill { visibility: hidden; pointer-events: none; }
}
body.origin-picking .map-panel .circle-pill { display: none; }

/* ---------- Member markers on the map ---------- */
.circle-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.circle-marker .circle-avatar-map {
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 26, 46, .35), 0 0 0 2px hsl(var(--circle-hue, 215) 60% 45%);
}
.circle-marker[data-presence="live"] .circle-avatar-map,
.circle-marker[data-presence="background"] .circle-avatar-map { box-shadow: 0 2px 8px rgba(15, 26, 46, .35), 0 0 0 3px var(--circle-live); }
.circle-marker.is-stale .circle-avatar-map { opacity: .62; filter: grayscale(.9); box-shadow: 0 1px 4px rgba(15, 26, 46, .3); }
.circle-marker-badge {
  position: absolute;
  right: 0;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--circle-button);
  color: #fff;
}
.circle-marker-badge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.circle-marker:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }

/* ---------- Sheet (bottom sheet on phones, side panel on desktop) ---------- */
dialog.circle-sheet {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 40px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--circle-line);
  border-radius: 24px;
  background: var(--circle-surface);
  color: var(--circle-ink);
  box-shadow: 0 24px 70px rgba(15, 26, 46, .28);
  font-family: 'DM Sans', system-ui, sans-serif;
}
dialog.circle-sheet[open] { display: flex; flex-direction: column; }
dialog.circle-sheet::backdrop { background: rgba(8, 15, 30, .42); }
@media (min-width: 1024px) {
  dialog.circle-sheet { inset: 20px 20px auto auto; margin: 0; max-height: calc(100dvh - 40px); }
  dialog.circle-sheet::backdrop { background: rgba(8, 15, 30, .22); }
}
@media (max-width: 600px) {
  dialog.circle-sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 90dvh;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
.circle-sheet-head { display: flex; align-items: center; gap: 10px; padding: 18px 14px 8px 20px; }
.circle-sheet-head > div { flex: 1; min-width: 0; }
.circle-sheet-head small { display: block; color: var(--circle-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.circle-sheet-head h2 { margin: 2px 0 0; overflow-wrap: anywhere; font: 700 21px/1.2 'Bricolage Grotesque', 'DM Sans', sans-serif; letter-spacing: -.02em; }
.circle-sheet-head h2:focus { outline: none; }
.circle-sheet-head h2:focus-visible { outline: none; } /* programmatic focus for screen readers; not an interactive target */
.circle-sheet-head .circle-icon-btn:first-child { margin-left: -8px; }
.circle-sheet-body { display: grid; align-content: start; gap: 16px; min-height: 0; overflow: auto; padding: 6px 20px 22px; overscroll-behavior: contain; }
.circle-lead { margin: 0; color: var(--circle-ink); font-size: 15px; line-height: 1.5; }
.circle-fineprint { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--circle-muted); font-size: 12.5px; line-height: 1.45; }
.circle-fineprint .ui-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
/* 44 px touch height without moving the text (negative block margins). */
.circle-fineprint a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; color: var(--circle-accent); font-weight: 700; }
.circle-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--circle-raised); color: var(--circle-muted); font-size: 13.5px; line-height: 1.45; }
.circle-status { margin: 0; color: var(--circle-muted); font-size: 13px; line-height: 1.4; }
.circle-status:empty { display: none; }
.circle-status[data-tone="error"] { color: var(--circle-danger); font-weight: 700; }

.circle-icon-btn { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--circle-raised); color: var(--circle-ink); cursor: pointer; }
.circle-icon-btn svg { width: 20px; height: 20px; }
.circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 700 14px/1.2 'DM Sans', system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.circle-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.circle-btn-primary { background: var(--circle-button); color: var(--circle-on-button); }
.circle-btn-secondary { border-color: var(--circle-line); background: var(--circle-raised); color: var(--circle-accent); }
.circle-btn-ghost { border-color: var(--circle-line); background: transparent; color: var(--circle-accent); }
.circle-btn-text { min-height: 44px; padding: 0 6px; background: transparent; color: var(--circle-accent); font-weight: 700; }
.circle-btn-danger { background: var(--circle-danger); color: #fff; }
.circle-btn:disabled { opacity: .6; cursor: default; }
:is(.circle-btn, .circle-icon-btn, .circle-row, .circle-switch button):focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
@media (hover: hover) {
  .circle-btn-primary:hover { filter: brightness(1.06); }
  :is(.circle-btn-secondary, .circle-btn-ghost, .circle-icon-btn):hover { background: var(--circle-accent-soft); }
  .circle-btn-text:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.circle-sheet-body > .circle-btn, .circle-form > .circle-btn-primary { width: 100%; }
/* The consent answer stays in reach on short phones while the explanation scrolls. */
.circle-sticky-actions { position: sticky; bottom: -22px; z-index: 1; display: grid; gap: 2px; margin: 0 -20px -22px; padding: 12px 20px 14px; background: var(--circle-surface); box-shadow: 0 -10px 18px -14px rgba(15, 26, 46, .35); }
.circle-sticky-actions .circle-btn-primary { width: 100%; }
.circle-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Content-sized: two short labels share a row, long ones stack instead of breaking into two lines (390 px). */
.circle-actions > .circle-btn { flex: 1 1 auto; }

/* Promise / consent list */
.circle-promise { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.circle-promise li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; }
.circle-promise li > .ui-icon { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--circle-accent-soft); color: var(--circle-accent); }
.circle-promise strong, .circle-callout strong, .circle-check strong, .circle-segment strong { display: block; font-size: 14px; }
.circle-promise small, .circle-callout small, .circle-check small, .circle-segment small { display: block; margin-top: 2px; color: var(--circle-muted); font-size: 12.5px; line-height: 1.45; }
.circle-callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 16px; background: var(--circle-warn-soft); }
.circle-callout > .ui-icon { width: 24px; height: 24px; color: var(--circle-warn-ink); }

/* Forms */
.circle-form { display: grid; gap: 14px; }
.circle-field { display: grid; gap: 6px; color: var(--circle-muted); font-size: 13px; font-weight: 700; }
.circle-field input:not([type="range"]) { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--circle-line); border-radius: 14px; background: var(--circle-surface); color: var(--circle-ink); font: 500 16px 'DM Sans', system-ui, sans-serif; }
.circle-field input[readonly] { background: var(--circle-raised); font-size: 13.5px; }
.circle-field input:focus-visible { outline: 3px solid color-mix(in srgb, var(--circle-accent) 40%, transparent); border-color: var(--circle-accent); }
.circle-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 44px; padding: 12px 14px; border: 1px solid var(--circle-line); border-radius: 16px; cursor: pointer; }
.circle-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--circle-button); }
.circle-check[hidden] { display: none; }
.circle-segment { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.circle-segment legend { margin-bottom: 8px; padding: 0; color: var(--circle-muted); font-size: 13px; font-weight: 700; }
.circle-segment label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--circle-line); border-radius: 16px; cursor: pointer; }
.circle-segment label:has(input:checked) { border-color: var(--circle-accent); background: var(--circle-accent-soft); }
.circle-segment input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--circle-button); }
.circle-me { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--circle-raised); }
.circle-me > span strong { display: block; font-size: 14px; }
.circle-me > span small { color: var(--circle-muted); font-size: 12.5px; }
.circle-me > .circle-btn { grid-column: 1 / -1; }
.circle-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.circle-share-row > * { flex: 1 1 110px; }

/* Sharing banner (the in-sheet version of the map indicator) */
.circle-banner { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--circle-live-soft); }
.circle-banner strong { display: block; color: var(--circle-live-ink); font-size: 14px; overflow-wrap: anywhere; }
.circle-banner small { display: block; margin-top: 2px; color: var(--circle-muted); font-size: 12.5px; line-height: 1.4; }
.circle-banner .circle-btn { min-width: 96px; background: var(--circle-surface); }
.circle-banner[data-sharing="paused"] { background: var(--circle-raised); }
.circle-banner[data-sharing="paused"] strong { color: var(--circle-ink); }
.circle-banner[data-sharing="paused"] .circle-live-dot { background: var(--circle-muted); animation: none; }
.circle-banner[data-sharing="paused"] .circle-btn { background: var(--circle-button); }
.circle-banner[data-gps="denied"] { background: var(--circle-warn-soft); }
.circle-banner[data-gps="denied"] strong { color: var(--circle-warn-ink); }

/* Member list */
.circle-list { display: grid; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.circle-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .circle-row:hover { background: var(--circle-raised); } }
.circle-row > .ui-icon { width: 16px; height: 16px; color: var(--circle-muted); }
.circle-row-main { min-width: 0; }
.circle-row-main strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.circle-row-main em { color: var(--circle-muted); font-style: normal; font-weight: 500; }
.circle-row-main small { display: block; margin-top: 2px; overflow: hidden; color: var(--circle-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.circle-row-state { display: grid; justify-items: end; gap: 2px; max-width: 132px; text-align: right; }
.circle-row-state b { font-size: 12.5px; }
.circle-row-state small { color: var(--circle-muted); font-size: 12px; }
.circle-row-state[data-presence="live"] b { color: var(--circle-live-ink); }
.circle-row-state:is([data-presence="closed"], [data-presence="paused"], [data-presence="waiting"]) b { color: var(--circle-muted); font-weight: 600; }
.circle-switch { display: flex; gap: 6px; overflow-x: auto; }
.circle-switch button { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--circle-line); border-radius: 20px; background: transparent; color: var(--circle-ink); font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.circle-switch button[aria-pressed="true"] { border-color: var(--circle-accent); background: var(--circle-accent-soft); color: var(--circle-accent); }

.circle-events h3 { margin: 0 0 6px; color: var(--circle-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.circle-events ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.circle-events li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--circle-line); font-size: 13.5px; }
.circle-events time { flex: none; color: var(--circle-muted); font-size: 12px; }
.circle-foot { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--circle-line); }
.circle-foot p { display: flex; gap: 8px; margin: 0; color: var(--circle-muted); font-size: 12.5px; line-height: 1.45; }
.circle-foot p .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.circle-foot > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }

/* Member sheet */
.circle-member-hero { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; }
.circle-member-hero strong { display: block; font-size: 17px; }
.circle-member-hero strong[data-presence="live"] { color: var(--circle-live-ink); }
.circle-member-hero small { display: block; margin-top: 3px; color: var(--circle-muted); font-size: 13px; line-height: 1.4; }
.circle-address { display: flex !important; align-items: flex-start; gap: 4px; }
.circle-address .ui-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
.circle-member-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.circle-member-actions > .circle-btn { flex: 1 1 auto; }
/* "Como chegar" comes first in the markup too (QA desktop v140): with `order` the Tab order jumped around. */
.circle-member-actions > [data-circle-route] { flex-basis: 100%; }

/* Photo */
.circle-photo { display: grid; justify-items: center; gap: 12px; }
.circle-photo-frame { display: grid; place-items: center; width: 220px; height: 220px; overflow: hidden; border-radius: 50%; background: var(--circle-raised); }
.circle-photo[data-has-image="false"] .circle-photo-frame { width: 160px; height: 160px; }
.circle-photo-frame canvas { width: 220px; height: 220px; touch-action: none; cursor: grab; }
.circle-photo-frame canvas:active { cursor: grabbing; }
.circle-photo-frame canvas:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: -3px; }
.circle-zoom { width: min(260px, 100%); }
.circle-zoom input { width: 100%; min-height: 44px; accent-color: var(--circle-button); }

/* ---------- Menu entry (Seu Youpi / Menu) ---------- */
html body.map-shell #mobile-nav .circle-menu-entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 12px;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px 10px 12px;
}
html body.map-shell #mobile-nav .circle-menu-entry::after { content: ''; width: 8px; height: 8px; justify-self: center; border-top: 2px solid var(--shell-accent, var(--circle-accent)); border-right: 2px solid var(--shell-accent, var(--circle-accent)); transform: rotate(45deg); }
html body.map-shell #mobile-nav .circle-menu-entry > span { display: grid; gap: 2px; }
html body.map-shell #mobile-nav .circle-menu-entry strong { font-size: 14px; font-weight: 700; }
html body.map-shell #mobile-nav .circle-menu-entry small { color: var(--circle-muted); font-size: 12px; }
html body.map-shell #mobile-nav .circle-menu-entry[data-sharing="live"] small { color: var(--circle-live-ink); }
body:not(.map-shell) #mobile-nav .circle-menu-entry small { display: none; }

/* ---------- Profile photo on the account avatars ---------- */
:is(#account-avatar, #profile-avatar).has-photo { overflow: hidden; padding: 0; }
:is(#account-avatar, #profile-avatar).has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
#profile-avatar.has-photo { transform: none; border-radius: 50%; }
.profile-header { position: relative; }
.profile-photo-edit {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0 0 -10px -54px;
  align-self: flex-end;
  padding: 0;
  border: 2px solid var(--circle-surface);
  border-radius: 50%;
  background: var(--circle-button);
  color: var(--circle-on-button);
  box-shadow: var(--circle-shadow);
  cursor: pointer;
}
.profile-photo-edit svg { width: 19px; height: 19px; }
.profile-photo-edit[hidden] { display: none; }
.profile-photo-edit:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }

/* ---------- QA mobile v140 (320–430 px) ---------- */
/* 320 px: "Compartilhando com …" broke mid-word beside the button; the button moves under the text instead. */
@media (max-width: 359px) {
  .circle-banner { grid-template-columns: 10px minmax(0, 1fr); row-gap: 10px; }
  .circle-banner strong { overflow-wrap: break-word; }
  .circle-banner > .circle-btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  /* The list already says "Aguardando"; the long explanation stays in the member sheet. */
  .circle-row-state[data-presence="waiting"] small { display: none; }
  /* During a trip the pill is only the sharing indicator: no faces, so "Ao vivo" is never cut ("● A…" at 320/360). */
  html body.map-shell:is(.travel-active, .journey-navigation-active) .circle-pill .circle-stack { display: none; }
  html body.map-shell:is(.travel-active, .journey-navigation-active) .circle-pill .circle-pill-open { padding-left: 14px; }
  /* Profile photo: a 30 px badge on the avatar corner (44 px touch area) instead of a 44 px disc over the initials. */
  .profile-photo-edit { align-self: flex-start; margin: 30px -8px -16px -46px; border: 0; background: transparent; box-shadow: none; }
  .profile-photo-edit::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--circle-button); box-shadow: 0 0 0 2px var(--circle-surface), 0 2px 6px rgba(15, 26, 46, .25); }
  .profile-photo-edit svg { position: relative; width: 16px; height: 16px; }
}

/* Review v140 (privacy, SPEC principle 1): while the position is shared, a live dot stays on the "Mapa" tab (and on the
 * folded-dock button), so the sharing state is visible in Comunidade, Bate-papo and Perfil too, where the map pill is
 * hidden. The words ("Compartilhando sua localização com …") come from circle.mjs (aria-describedby + title). */
body.map-shell.circle-sharing-live .map-shell-dock > button.map-shell-home { position: relative; }
body.map-shell.circle-sharing-live .map-shell-dock > button.map-shell-home::after,
body.map-shell.circle-sharing-live.map-shell-dock-collapsed .map-shell-dock-toggle::after {
  content: ''; position: absolute; top: 6px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--circle-live); box-shadow: 0 0 0 2px var(--circle-surface); pointer-events: none;
}
body.map-shell.circle-sharing-live.map-shell-dock-collapsed .map-shell-dock-toggle::after { top: 4px; left: auto; right: 6px; }
.circle-pill-text[data-live="elsewhere"] { color: var(--circle-muted); }

/* ---------- QA desktop v140 (768–1920 px) ---------- */
/* Dark avatars: initials at 88 % on a 30 % disc fell to 3.9–4.4:1 on yellow/green hues ("TC"); 26 %/90 % keeps every hue >= 5:1. */
:root[data-theme=dark] { --circle-avatar-l: 26%; --circle-avatar-ink-l: 90%; }
/* Dark danger: #d9483b was 3.99:1 as error text and 4.4:1 under white button text. Text uses the brand's light red,
 * the confirm button the brand's strong red (white 5.77:1). */
:root[data-theme=dark] .circle-status[data-tone="error"] { color: #ff9b89; }
:root[data-theme=dark] .circle-btn-danger { background: var(--l360-danger, #c4261b); }
/* Destructive text actions no longer look like "Passar a criação" / "Concluir". */
:is(.circle-foot, .cx-meet-manage) :is([data-circle-confirm="delete"], [data-circle-confirm="leave"], [data-circle-confirm^="remove:"], [data-cx="meet-status"][data-status="cancelled"]) { color: var(--circle-danger); }
:root[data-theme=dark] :is(.circle-foot, .cx-meet-manage) :is([data-circle-confirm="delete"], [data-circle-confirm="leave"], [data-circle-confirm^="remove:"], [data-cx="meet-status"][data-status="cancelled"]) { color: #ff9b89; }
/* Profile photo button (desktop/tablet): a smaller disc on the avatar corner instead of a 44 px disc over the initials. */
@media (min-width: 601px) {
  /* 44 px hit area kept; the visible disc is 36 px. */
  .profile-photo-edit { margin: 0 0 -12px -42px; border: 0; background: transparent; box-shadow: none; }
  .profile-photo-edit::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--circle-button); box-shadow: 0 0 0 2px var(--circle-surface), 0 2px 6px rgba(15, 26, 46, .25); }
  .profile-photo-edit svg { position: relative; width: 17px; height: 17px; }
}
/* Radios/checkboxes inside cards (invite role, meet place, share consent): the browser's thin ring was the only focus cue
 * (near-invisible in dark). Same 3 px ring as the other controls, drawn on the whole card. */
:is(.circle-segment label, .circle-check):has(input:focus-visible) { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
:is(.circle-segment label, .circle-check) input:focus-visible { outline: none; }