/* Youpi P2 · per-person precision ("Quem vê você e como") and the Mapa do Círculo. Loaded at <!-- uppi:css:p2 -->, BEFORE
 * v140-circle.css / v141-circle.css / wave1-ui.css: rules that change their elements carry `html body` (or the map-mode
 * body class) to win. Reuses the --circle-* tokens (light and dark). */
:root { --circle-ring-violet: #7a5af8; --cmap-radius: 20px; }
:root[data-theme=dark] { --circle-ring-violet: #b692f6; }
html body :is(.circle-marker, .circle-dot, .cmap-card-avatar)[data-ring="violet"] { --ring: var(--circle-ring-violet); }
html body .cmap-card-avatar[data-ring="blue"] { --ring: var(--circle-ring-blue); }
html body .cmap-card-avatar[data-ring="teal"] { --ring: var(--circle-ring-teal); }
html body .cmap-card-avatar[data-ring="indigo"] { --ring: var(--circle-ring-indigo); }
html body .cmap-card-avatar[data-ring="coral"] { --ring: var(--circle-ring-coral); }
html body .cmap-card-avatar[data-ring="pink"] { --ring: var(--circle-ring-pink); }
html body .cmap-card-avatar[data-ring="amber"] { --ring: var(--circle-ring-amber); }

/* ---------- Shared small pieces ---------- */
.live-row-text { display: grid; gap: 2px; min-width: 0; }
.live-row-text strong { font-size: 14px; line-height: 1.3; color: var(--circle-ink); }
.live-row-text small { color: var(--circle-muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.live-seg {
  display: grid; grid-template-columns: repeat(var(--live-count, 4), minmax(0, 1fr)); gap: 2px; padding: 3px;
  border: 1px solid var(--circle-line); border-radius: 14px; background: var(--circle-surface);
}
.live-seg[data-count="5"] { --live-count: 5; }
.live-seg button {
  min-width: 0; min-height: 44px; padding: 0 4px; border: 0; border-radius: 11px; background: transparent; color: var(--circle-muted);
  font: 700 13px/1.1 'DM Sans', system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
.live-seg button[aria-pressed="true"] { background: var(--circle-button); color: var(--circle-on-button); box-shadow: 0 1px 3px rgba(15, 26, 46, .18); }
.live-seg button[aria-pressed="true"]:not([data-level="exact"]):not([data-level="off"]) { background: var(--circle-friends-ink); color: #fff; }
:root[data-theme=dark] .live-seg button[aria-pressed="true"]:not([data-level="exact"]):not([data-level="off"]) { color: #2b0e07; }
.live-seg button[aria-pressed="true"][data-level="off"] { background: var(--circle-raised); color: var(--circle-ink); box-shadow: inset 0 0 0 1px var(--circle-line); }
.live-seg button:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 1px; }
.live-seg button:disabled { cursor: progress; opacity: .7; }
@media (hover: hover) { .live-seg button:not([aria-pressed="true"]):hover { background: var(--circle-raised); color: var(--circle-ink); } }

/* ---------- Círculo sheet: "Ver no mapa", "Seu cartão" rows, member sheet ---------- */
html body .live-map-cta {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--circle-accent) 30%, var(--circle-line)); border-radius: 18px;
  background: linear-gradient(135deg, var(--circle-accent-soft), var(--circle-surface) 80%); color: var(--circle-ink); text-align: left; cursor: pointer;
}
html body .live-map-cta > .ui-icon { width: 20px; height: 20px; color: var(--circle-muted); }
.live-map-cta-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--circle-button); color: var(--circle-on-button); }
.live-map-cta-icon .ui-icon { width: 22px; height: 22px; }
html body .live-map-cta .live-row-text strong { font-size: 15px; }
.live-map-cta:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
@media (hover: hover) { html body .live-map-cta:hover { border-color: var(--circle-accent); } }

.live-photo-row, .live-seen-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.live-photo-preview .circle-avatar { box-shadow: 0 0 0 2px var(--circle-surface), 0 0 0 4px var(--circle-accent); }
.live-seen-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--circle-accent-soft); color: var(--circle-accent); }
.live-seen-row[data-approx="true"] .live-seen-icon { background: var(--circle-friends-soft); color: var(--circle-friends-ink); }
.live-seen-icon .ui-icon { width: 20px; height: 20px; }
html body .circle-you .live-row-action { width: auto; min-height: 44px; padding: 0 12px; gap: 6px; font-size: 13.5px; }
html body .circle-you .live-row-action .ui-icon { width: 17px; height: 17px; }
html body .circle-you { gap: 14px; }
html body .circle-you > .live-seen-row { padding-top: 14px; border-top: 1px solid var(--circle-line); }
html body .circle-you > .circle-status-picker { padding-top: 14px; border-top: 1px solid var(--circle-line); }
@media (max-width: 359px) {
  .live-photo-row, .live-seen-row { grid-template-columns: auto minmax(0, 1fr); }
  html body .circle-you .live-row-action { grid-column: 1 / -1; width: 100%; }
}

.live-person { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--circle-raised); }
.live-person h3 { margin: 0; color: var(--circle-ink); font-size: 14px; }
.live-person small { color: var(--circle-muted); font-size: 12.5px; line-height: 1.45; }

/* "Quem vê você e como" */
.live-precision .live-group { display: grid; gap: 10px; }
.live-precision .live-group h3 { margin: 0; color: var(--circle-ink); font-size: 15px; }
.live-group-note { margin: -4px 0 0; color: var(--circle-muted); font-size: 12.5px; }
.live-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.live-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--circle-line); border-radius: 18px; background: var(--circle-surface); }
.live-row-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.live-friends { padding: 14px; border-radius: 18px; background: var(--circle-raised); }
.live-switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.live-switch {
  position: relative; width: 56px; min-width: 56px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; cursor: pointer;
}
.live-switch i { position: absolute; inset: 8px 2px; border-radius: 14px; background: color-mix(in srgb, var(--circle-muted) 40%, transparent); transition: background .2s; }
.live-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 26, 46, .35); transition: transform .2s; }
.live-switch[aria-checked="true"] i { background: var(--circle-live); }
.live-switch[aria-checked="true"] i::after { transform: translateX(24px); }
.live-switch:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
.live-switch:disabled { cursor: progress; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .live-switch i, .live-switch i::after { transition: none; } }

@media (max-width: 359px) {
  /* 5 choices (friends) at 320 px: each still >= 44 px wide. */
  .live-friends, .live-person { padding: 10px; }
  .live-row { padding: 10px; }
  .live-seg { gap: 0; padding: 2px; }
  .live-seg button { font-size: 12.5px; }
}
.live-nocircle { display: grid; gap: 10px; margin-bottom: 4px; padding: 14px; border-radius: 18px; background: var(--circle-raised); }
.live-nocircle h3 { margin: 0; font-size: 15px; color: var(--circle-ink); }
.live-nocircle p { margin: 0; color: var(--circle-muted); font-size: 13px; line-height: 1.45; }
.live-nocircle-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
html body .live-nocircle .circle-btn { min-height: 44px; }

/* Pill popover: "Ver no mapa" spans the whole row. */
html body .map-panel .circle-pill .circle-pill-pop .circle-pill-map { grid-column: 1 / -1; }
html body .map-panel .circle-pill .circle-pill-pop .circle-pill-map .ui-icon { width: 17px; height: 17px; }

/* MapLibre places markers with `position: absolute` + a transform (maplibre-gl.css, loaded first). v140-circle.css gives
 * .circle-marker `position: relative` at the same specificity, loaded later: every Círculo marker then also took its place
 * in the normal flow and was pushed down by the ones before it (48 px each), off its coordinates. */
html body .maplibregl-marker.circle-marker { position: absolute; }
/* The Encontros pin (v140-circle-extras.css) had the same problem and was drawn ~48 px below its place for each Círculo
 * marker before it; on its coordinates it may sit on my own location dot, so it stays above it. */
html body .maplibregl-marker.cx-meet-pin { position: absolute; z-index: 2; }

/* ---------- Mapa do Círculo ---------- */
.cmap[hidden] { display: none !important; }
.cmap { position: absolute; inset: 0; z-index: 12; pointer-events: none; font-family: 'DM Sans', system-ui, sans-serif; }
.cmap-stack { display: contents; }
.cmap-bar, .cmap-card { pointer-events: auto; }
/* Everything about buses leaves the screen; my own position stays. */
html body.circle-map-mode :is(.map-shell-top, .control-panel, #traffic-button, .map-legend, #circle-pill, .maplibregl-popup) { display: none !important; }
html body.circle-map-mode .map-panel .maplibregl-marker:not(.circle-marker):not(.map-pin.user) { display: none !important; }
html body.circle-map-mode .map-panel { visibility: visible; }

.cmap-bar {
  position: absolute; top: calc(var(--shell-safe-top, 0px) + 12px); left: 12px; right: 12px; max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--circle-line); border-radius: var(--cmap-radius);
  background: var(--circle-surface); color: var(--circle-ink); box-shadow: var(--circle-shadow);
}
.cmap-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.cmap-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--circle-accent-soft); color: var(--circle-accent); }
.cmap-icon .ui-icon { width: 22px; height: 22px; }
.cmap-title { min-width: 0; }
.cmap-title h2 { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 800; color: var(--circle-ink); }
.cmap-title h2:focus { outline: none; }
.cmap-title small { display: block; margin-top: 2px; color: var(--circle-muted); font-size: 12.5px; line-height: 1.35; }
html body .cmap .cmap-fit {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--circle-line); border-radius: 50%;
  background: var(--circle-surface); color: var(--circle-accent); cursor: pointer;
}
.cmap-fit .ui-icon { width: 20px; height: 20px; }
.cmap-sharing { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--circle-muted); font-size: 12.5px; line-height: 1.35; }
.cmap-sharing[data-live="true"] { color: var(--circle-live-ink); font-weight: 600; }
.cmap-sharing[data-live="false"] .circle-live-dot { background: var(--circle-muted); animation: none; }
.cmap-people {
  display: flex; gap: 8px; margin: 0 -12px; padding: 2px 12px 2px; overflow-x: auto; list-style: none;
  scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cmap-people::-webkit-scrollbar { display: none; }
.cmap-people:empty { display: none; }
.cmap-people > li { flex: none; scroll-snap-align: start; }
html body .cmap .cmap-person {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 5px 14px 5px 5px; border: 1px solid var(--circle-line); border-radius: 26px;
  background: var(--circle-surface); color: var(--circle-ink); text-align: left; white-space: nowrap; cursor: pointer;
}
.cmap-person > span:last-child { display: grid; gap: 1px; }
.cmap-person strong { font-size: 13.5px; line-height: 1.2; }
.cmap-person small { color: var(--circle-muted); font-size: 11.5px; line-height: 1.2; }
.cmap-person[data-stale="true"] .circle-avatar { opacity: .62; filter: grayscale(.9); }
.cmap-person:focus-visible, .cmap-note-action:focus-visible, .cmap-back:focus-visible, .cmap-fit:focus-visible { outline: 3px solid var(--circle-accent); outline-offset: 2px; }
.cmap-note { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 14px; border: 1px dashed var(--circle-line); border-radius: 26px; color: var(--circle-muted); font-size: 12.5px; white-space: nowrap; }
html body .cmap .cmap-note-action { background: var(--circle-accent-soft); border-style: solid; border-color: transparent; color: var(--circle-accent); font-weight: 700; cursor: pointer; }
.cmap-note-action .ui-icon { width: 17px; height: 17px; }
.cmap-empty { margin: 0; color: var(--circle-muted); font-size: 13px; line-height: 1.45; }
html body .cmap .cmap-back {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 16px;
  background: var(--circle-button); color: var(--circle-on-button); font: 700 15px/1.2 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.cmap-back .ui-icon { width: 20px; height: 20px; }
@media (hover: hover) { html body .cmap .cmap-person:hover, html body .cmap .cmap-fit:hover { background: var(--circle-raised); } }

/* Person card: over the bottom of the map on phones (the map controls step aside while it is open). */
.cmap-card {
  position: absolute; left: 12px; right: 12px; bottom: var(--shell-bottom, 114px); max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-height: 58vh; overflow: hidden auto; padding: 14px; border: 1px solid var(--circle-line); border-radius: var(--cmap-radius);
  background: var(--circle-surface); color: var(--circle-ink); box-shadow: var(--circle-shadow);
}
html body.circle-map-card-open :is(.recenter-button, .maplibregl-ctrl-top-right, .map-shell-dock-toggle) { visibility: hidden; pointer-events: none; }
.cmap-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
html body .cmap-card-avatar .circle-avatar { --circle-size: 52px; box-shadow: 0 0 0 3px var(--circle-surface), 0 0 0 6px var(--ring, var(--circle-accent)); }
.cmap-card-avatar { padding: 6px; }
.cmap-card-head h3 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.cmap-card-head h3:focus { outline: none; }
.cmap-card-head small { display: block; margin-top: 3px; color: var(--circle-muted); font-size: 13px; }
.cmap-card-head small b { color: var(--circle-live-ink); }
/* Facts: when, precision, distance as chips; the place on its own line. */
.cmap-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cmap-facts > div { display: flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 14px; background: var(--circle-raised); }
.cmap-facts dd { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--circle-ink); font-size: 12.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cmap-facts [data-fact="when"] { background: var(--circle-live-soft); }
.cmap-facts [data-fact="when"] dd { color: var(--circle-live-ink); }
.cmap-facts [data-fact="when"][data-stale="true"] { background: var(--circle-raised); }
.cmap-facts [data-fact="when"][data-stale="true"] dd { color: var(--circle-muted); }
.cmap-facts [data-fact="precision"][data-approx="true"] { background: var(--circle-friends-soft); }
.cmap-facts [data-fact="precision"][data-approx="true"] dd { color: var(--circle-friends-ink); }
.cmap-facts [data-fact="place"] { flex-basis: 100%; padding: 0 2px; background: transparent; }
.cmap-facts [data-fact="place"] dd { color: var(--circle-muted); font-weight: 600; }
.cmap-facts [data-fact="place"] .ui-icon { flex: none; width: 15px; height: 15px; }
.cmap-approx-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--circle-friends-soft); color: var(--circle-friends-ink); font-size: 13px; line-height: 1.4; }
.cmap-approx-note .ui-icon { flex: none; width: 18px; height: 18px; }
.cmap-card-actions { display: flex; gap: 8px; }
html body .cmap-card-actions .circle-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; text-decoration: none; white-space: nowrap; }
html body .cmap-card-actions .circle-btn .ui-icon { flex: none; }
html body .cmap-card-actions .cmap-card-more { flex: 0 0 44px; width: 44px; padding: 0; }
@media (max-width: 359px) {
  html body .cmap-card-actions .circle-btn:not(.cmap-card-more) { padding: 0 8px; font-size: 13.5px; }
  html body .cmap-card-actions .circle-btn:not(.cmap-card-more) .ui-icon { display: none; }
  html body .cmap .cmap-back { padding: 0 10px; font-size: 14px; }
  .cmap-bar { padding: 10px; gap: 8px; }
  .cmap-people { margin: 0 -10px; padding: 2px 10px; }
}

/* Markers: bigger photo in a ring, first name and time under it; the halo is the real radius (map layer). */
html body.circle-map-mode .circle-marker { width: 56px; height: 56px; }
html body.circle-map-mode .circle-marker .circle-avatar-map { --circle-size: 48px; }
html body.circle-map-mode .circle-marker.is-approx::before { display: none; }
.circle-marker-label { display: none; }
html body.circle-map-mode .circle-marker-label {
  position: absolute; top: calc(100% - 2px); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 0;
  padding: 2px 8px 3px; border-radius: 10px; background: var(--circle-surface); color: var(--circle-ink); box-shadow: 0 1px 4px rgba(15, 26, 46, .28);
  white-space: nowrap; pointer-events: none;
}
.circle-marker-label b { font-size: 12px; line-height: 1.2; font-weight: 800; }
.circle-marker-label small { color: var(--circle-muted); font-size: 10.5px; line-height: 1.15; }
html body.circle-map-mode .circle-marker.is-stale .circle-marker-label { opacity: .8; }

/* Tablet and desktop: one column on the left (the bus panel's place), the list vertical, the card under it. */
@media (min-width: 901px) {
  .cmap-stack {
    position: absolute; top: calc(var(--shell-safe-top, 0px) + 20px); left: max(var(--shell-gap, 20px), env(safe-area-inset-left, 0px)); bottom: calc(var(--shell-footer, 24px) + 56px);
    display: flex; flex-direction: column; gap: 12px; width: 372px; pointer-events: none;
  }
  .cmap-bar { position: static; max-width: none; margin: 0; min-height: 0; overflow: auto; }
  .cmap-bar > .cmap-back { order: -1; }
  .cmap-head { order: -2; }
  .cmap-people { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  html body .cmap .cmap-person, .cmap-note { width: 100%; border-radius: 16px; }
  .cmap-person > span:last-child { min-width: 0; }
  .cmap-person strong, .cmap-person small { overflow: hidden; text-overflow: ellipsis; }
  .cmap-card { position: static; flex: none; max-height: none; margin: 0; }
  html body.circle-map-card-open .cmap-bar .cmap-people, html body.circle-map-card-open .cmap-bar .cmap-empty { display: none; }
  html body.circle-map-card-open :is(.recenter-button, .maplibregl-ctrl-top-right, .map-shell-dock-toggle) { visibility: visible; pointer-events: auto; }
}
@media (max-width: 900px) {
  /* The card sits right above the dock; while it is open, the dock's own row is its only neighbour. */
  html body.circle-map-mode.map-shell-dock-collapsed .cmap-card { bottom: calc(var(--shell-footer, 24px) + 8px); }
}