/* Youpi P3a · Lugares, avisos de chegada e histórico de trajetos (arrival-places.mjs, route-history.mjs).
 * Loaded at the uppi:css:p3 anchor, BEFORE v140-circle.css: it reuses the --circle-* tokens (light/dark) and the
 * circle-btn/circle-field classes, and only styles its own ua-* classes (or wins with !important where it must hide). */
:root {
  --ua-accent: var(--circle-accent, #0847a6);
  --ua-route: #6d28d9;
  --ua-rec: #d92d20;
  --ua-soft: var(--circle-raised, #f4f6fb);
  --ua-line: var(--circle-line, rgba(28, 52, 110, .13));
  --ua-ink: var(--circle-ink, #0f1a2e);
  --ua-muted: var(--circle-muted, #56637a);
  --ua-surface: var(--circle-surface, #fff);
  --ua-shadow: 0 1px 2px rgba(15, 26, 46, .08), 0 8px 28px rgba(15, 26, 46, .16);
}
:root[data-theme=dark] {
  --ua-route: #b69cff;
  --ua-rec: #ff6b5e;
  --ua-shadow: 0 1px 2px #0007, 0 8px 28px #0008;
}

/* ---------- sheet "Lugares e trajetos" ---------- */
.ua-sheet { display: grid; gap: 22px; }
.ua-block { display: grid; gap: 12px; min-width: 0; }
.ua-block + .ua-block { padding-top: 20px; border-top: 1px solid var(--ua-line); }
.ua-block h3 { margin: 0; color: var(--ua-ink); font: 800 15px/1.3 'DM Sans', system-ui, sans-serif; }
.ua-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ua-block-head small { color: var(--ua-muted); font-size: 12.5px; font-weight: 700; }
.ua-block > .circle-btn { width: 100%; }
.ua-note { margin: 0; color: var(--ua-muted); font-size: 13px; line-height: 1.45; }
.ua-note[data-tone="error"] { color: var(--circle-danger, #c4261b); font-weight: 700; }

.ua-switch-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--ua-soft);
  color: var(--ua-ink);
  cursor: pointer;
}
.ua-switch-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ua-switch-row > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ua-switch-row strong { font-size: 14px; font-weight: 800; line-height: 1.3; }
.ua-switch-row small { color: var(--ua-muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.ua-switch-row:has(input:checked) { background: var(--circle-live-soft, #e7f8ef); }
.ua-switch-row:has(input:checked) small { color: var(--circle-live-ink, #067647); }
.ua-switch-row input:checked + .cx-switch { background: var(--circle-live, #12b76a); }
.ua-switch-row input:checked + .cx-switch::after { transform: translateX(16px); }
.ua-switch-row:has(input:focus-visible) { outline: 3px solid var(--ua-accent); outline-offset: 2px; }

.ua-places { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ua-place {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--ua-line);
  border-radius: 16px;
  background: var(--ua-surface);
  color: var(--ua-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ua-place-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--circle-accent-soft, #eaf1fb); color: var(--ua-accent); }
.ua-place-icon .ui-icon { width: 20px; height: 20px; }
.ua-place-icon[data-kind="school"] { background: color-mix(in srgb, #f79009 16%, var(--ua-surface)); color: #b54708; }
.ua-place-icon[data-kind="other"] { background: color-mix(in srgb, var(--ua-route) 14%, var(--ua-surface)); color: var(--ua-route); }
:root[data-theme=dark] .ua-place-icon[data-kind="school"] { color: #fdb022; }
.ua-place-copy { display: grid; gap: 2px; min-width: 0; }
.ua-place-copy strong { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.ua-place-copy small { overflow: hidden; color: var(--ua-muted); font-size: 12.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ua-place-copy .ua-place-detail { color: var(--ua-ink); font-weight: 600; opacity: .8; white-space: normal; }
.ua-place[data-empty="true"] .ua-place-copy small { color: var(--ua-accent); font-weight: 700; }
.ua-place-edit { color: var(--ua-accent); font-size: 13px; font-weight: 800; }
.ua-place:focus-visible, .ua-result:focus-visible, .ua-day:focus-visible, .ua-rec:focus-visible { outline: 3px solid var(--ua-accent); outline-offset: 2px; }
.ua-danger { color: var(--circle-danger, #c4261b) !important; }
:root[data-theme=dark] .ua-danger { color: #ff9b89 !important; }

/* ---------- place editor ---------- */
.ua-form { display: grid; gap: 18px; }
.ua-form > .circle-btn-text { justify-self: center; }
.ua-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ua-chips legend, .ua-where legend { margin-bottom: 8px; padding: 0; color: var(--ua-muted); font-size: 13px; font-weight: 700; }
.ua-chips label { position: relative; display: inline-flex; min-width: 0; }
.ua-chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ua-chips label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ua-line);
  border-radius: 22px;
  background: var(--ua-surface);
  color: var(--ua-ink);
  font-size: 14px;
  font-weight: 700;
}
.ua-chips label > span .ui-icon { width: 18px; height: 18px; color: var(--ua-accent); }
.ua-chips input:checked + span { border-color: var(--ua-accent); background: var(--circle-accent-soft, #eaf1fb); color: var(--ua-accent); }
.ua-chips input:focus-visible + span { outline: 3px solid var(--ua-accent); outline-offset: 2px; }
.ua-where { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ua-where-current { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--ua-soft); color: var(--ua-ink); font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.ua-where-current .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--ua-route); }
.ua-where-current[data-empty="true"] { color: var(--ua-muted); font-weight: 600; }
.ua-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.ua-search .circle-btn { min-height: 48px; }
.ua-results { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ua-result {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--ua-line);
  border-radius: 12px;
  background: var(--ua-surface);
  color: var(--ua-ink);
  font: 600 13.5px/1.35 'DM Sans', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.ua-result .ui-icon { width: 18px; height: 18px; color: var(--ua-route); }
.ua-where-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ua-where-actions .circle-btn { min-width: 0; padding-inline: 10px; }
@media (hover: hover) {
  .ua-place:hover, .ua-result:hover { border-color: var(--ua-accent); background: var(--circle-accent-soft, #eaf1fb); }
}

/* ---------- member sheet / circle overview ---------- */
.ua-member[data-state="off"] .cx-card-icon { color: var(--ua-muted); }
.ua-overview .cx-card-head p, .ua-member .cx-card-head p { overflow-wrap: anywhere; }

/* ---------- menu entry and Casa ↔ Trabalho row ---------- */
.ua-menu-entry .favorite-summary-icon .ui-icon { width: 20px; height: 20px; }
.ua-commute-card .ua-commute-icon .ui-icon { width: 20px; height: 20px; color: var(--ua-route); }

/* ---------- "Marcar no mapa" ---------- */
#ua-pick[hidden] { display: none; }
.ua-pick-pin { position: fixed; z-index: 2290; width: 42px; height: 50px; transform: translate(-50%, -100%); color: var(--ua-route); filter: drop-shadow(0 3px 3px #102d3f55); pointer-events: none; }
.ua-pick-pin svg { width: 42px; height: 50px; fill: var(--ua-surface); stroke: currentColor; stroke-width: 2.5; }
.ua-pick-card {
  position: fixed;
  z-index: 2300;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: grid;
  gap: 8px;
  width: min(430px, calc(100% - 24px));
  padding: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--ua-line);
  border-radius: 20px;
  background: var(--ua-surface);
  color: var(--ua-ink);
  box-shadow: var(--ua-shadow);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.ua-pick-card strong { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ua-pick-card p { margin: 0; color: var(--ua-muted); font-size: 13px; line-height: 1.45; }
.ua-pick-card > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; margin-top: 4px; }
html body.map-shell.ua-picking :is(.map-shell-top, .control-panel, .map-shell-navigation, .map-shell-brand, .map-legend, #ua-rec, .traffic-button, .recenter-button, .maplibregl-ctrl-top-right, .uppi-map-layers, .travel-gps-button),
html body.map-shell.ua-picking .map-panel .circle-pill { display: none !important; }

/* ---------- "Gravando trajetos" ---------- */
.ua-rec {
  position: fixed;
  z-index: 604;
  left: max(var(--shell-gap, 20px), env(safe-area-inset-left, 0px));
  bottom: calc(var(--shell-bottom, 114px) + 52px);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ua-rec[hidden] { display: none; }
.ua-rec-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--ua-line); border-radius: 17px; background: var(--ua-surface); color: var(--ua-ink); box-shadow: var(--ua-shadow); font: 700 12.5px/1 'DM Sans', system-ui, sans-serif; white-space: nowrap; }
.ua-rec i, .ua-rec-row i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--ua-rec); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ua-rec) 55%, transparent); animation: ua-rec 2.2s ease-out infinite; }
@keyframes ua-rec { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ua-rec) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .ua-rec i, .ua-rec-row i { animation: none; } }
body.reduce-motion :is(.ua-rec, .ua-rec-row) i { animation: none; }
@media (min-width: 901px) {
  .ua-rec { bottom: calc(var(--shell-footer, 24px) + 70px); }
}
html body.map-shell:is(.map-shell-planner-open, .map-shell-arrivals-open, .map-shell-menu-open, .origin-picking, .ua-picking, .ua-history-open, .gps-precision-guide, .travel-active, .journey-navigation-active, .map-list-mode) .ua-rec,
html body.map-shell:has(dialog[open], #arrival-drawer:not([hidden]), #origin-map-picker:not([hidden])) .ua-rec,
html body:not([data-map-shell-view="transport"]).map-shell[data-map-shell-view] .ua-rec { display: none !important; }
.ua-rec-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--ua-soft);
  color: var(--ua-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  text-align: left;
}
.ua-rec-row > span { display: grid; gap: 1px; min-width: 0; }
.ua-rec-row strong { font-size: 13.5px; font-weight: 700; }
.ua-rec-row small { color: var(--ua-muted); font-size: 12px; }
body.journey-guide-compact #journey-guide .ua-rec-row { display: none; }

/* ---------- "Meu histórico" (panel over the map) ---------- */
.ua-history {
  position: fixed;
  z-index: 1800;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  left: max(var(--shell-gap, 20px), env(safe-area-inset-left, 0px));
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(380px, calc(100vw - 2 * var(--shell-gap, 20px)));
  max-height: calc(100dvh - var(--shell-bottom, 114px) - env(safe-area-inset-top, 0px) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid var(--ua-line);
  border-radius: 22px;
  background: var(--ua-surface);
  color: var(--ua-ink);
  box-shadow: var(--ua-shadow);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.ua-history[hidden] { display: none; }
.ua-history-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 8px; }
.ua-history-head small { color: var(--ua-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ua-history-head h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; }
.ua-history-head h2:focus { outline: none; }
.ua-history-head h2:focus-visible { outline: 3px solid var(--ua-accent); outline-offset: 2px; border-radius: 4px; }
.ua-days { display: flex; gap: 8px; margin: 0 -18px; padding: 2px 18px 4px; overflow-x: auto; scrollbar-width: none; }
.ua-days::-webkit-scrollbar { display: none; }
.ua-day { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--ua-line); border-radius: 22px; background: var(--ua-surface); color: var(--ua-ink); font: 700 13.5px 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.ua-day[aria-pressed="true"] { border-color: var(--ua-route); background: color-mix(in srgb, var(--ua-route) 14%, var(--ua-surface)); color: var(--ua-route); }
.ua-history-body { min-height: 48px; }
.ua-day-stats { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; margin: 0; }
.ua-day-stats > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: 10px; border-radius: 14px; background: var(--ua-soft); }
.ua-day-stats dt { color: var(--ua-muted); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.ua-day-stats dd { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-history-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ua-history-actions .circle-btn { min-width: 0; padding-inline: 8px; font-size: 13.5px; }
.ua-history-actions .circle-btn:first-child { grid-column: 1 / -1; }
.ua-history-actions .circle-btn[disabled] { opacity: .45; cursor: default; }
.ua-pause, .ua-play { position: relative; display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; }
.ua-pause { border-inline: 3.5px solid currentColor; box-sizing: border-box; }
.ua-pause::after { content: ''; position: absolute; inset: 0 2px; background: transparent; }
.ua-play { width: 0; height: 0; flex-basis: 0; border-block: 6px solid transparent; border-left: 10px solid currentColor; }
.ua-confirm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--circle-danger, #c4261b) 9%, var(--ua-surface)); }
.ua-confirm p { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 700; }
.ua-history-note { margin: 0; color: var(--ua-muted); font-size: 12.5px; line-height: 1.45; }
html body.map-shell.ua-history-open :is(.map-shell-top, .control-panel, .map-legend, .traffic-button, .maplibregl-ctrl-top-right, .uppi-map-layers),
html body.map-shell.ua-history-open .map-panel .circle-pill { display: none !important; }
@media (max-width: 600px) {
  .ua-history {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(var(--shell-bottom, 114px) + 4px);
    width: auto;
    max-height: min(56dvh, calc(100dvh - var(--shell-bottom, 114px) - env(safe-area-inset-top, 0px) - 70px));
    padding: 16px;
    border-radius: 20px;
  }
  .ua-days { margin-inline: -16px; padding-inline: 16px; }
  html body.map-shell.ua-history-open :is(.map-shell-brand, .recenter-button, .travel-gps-button, .maplibregl-ctrl-bottom-right, .map-shell-dock-toggle) { visibility: hidden !important; }
}
@media (max-width: 359px) {
  .ua-day-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ua-day-stats > div:last-child { grid-column: 1 / -1; }
  .ua-where-actions { grid-template-columns: minmax(0, 1fr); }
}