/* ============================================================
   Atlas of Lives  |  3D globe page
   Extends the heritage-postal design system in styles.css:
   navy ground, parchment land, crimson pins, brass detail.
   ============================================================ */

/* A display value on a component silently beats the browser's
   [hidden] { display: none }. This has bitten the detail card and the
   filter chips already; close the whole class of bug once. */
[hidden] { display: none !important; }

.atlas-body {
  background: var(--navy-deep);
  color: var(--cream);
  overflow: hidden;                 /* the globe owns the viewport */
}

/* The header keeps its parchment ground here too. A navy header put
   navy brand text and dark nav links on a dark band; consistency with
   the tribute page is both more readable and better branding. */
.atlas-body .site-nav a[aria-current="page"] {
  color: var(--crimson); font-weight: 600;
}
.atlas-body .site-nav a[aria-current="page"]::after { width: 100%; }

/* ---------- Layout ---------- */
.atlas {
  position: fixed;
  inset: 0;
  top: 0;
  display: grid;
  grid-template-columns: minmax(320px, 27vw) 1fr;
  background:
    radial-gradient(1200px 800px at 72% 40%, rgba(34, 51, 84, 0.55), transparent 70%),
    var(--navy-deep);
}

/* ---------- Side panel ---------- */
.atlas-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(var(--header-h, 76px) + 1.4rem) 1.5rem 1.2rem;
  border-right: 1px solid rgba(195, 154, 80, 0.18);
  background: linear-gradient(180deg, rgba(13, 21, 38, 0.94), rgba(22, 35, 63, 0.9));
  overflow: hidden;
}

.atlas-intro { flex-shrink: 0; }

.atlas-eyebrow {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass);
}
.atlas-eyebrow .eyebrow-line {
  width: 26px; height: 1px; background: var(--brass); display: inline-block;
}

.atlas-title {
  font-size: clamp(1.9rem, 3.1vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.6rem;
  color: var(--cream);
}

.atlas-lede {
  margin: 0 0 1.3rem; font-size: 0.94rem; line-height: 1.6;
  color: rgba(252, 248, 239, 0.66);
}

/* ---------- World / Toronto switch ---------- */
.atlas-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem;
  flex-shrink: 0; margin-bottom: 0.9rem;
  padding: 0.25rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(195, 154, 80, 0.2);
}
.atlas-mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem;
  padding: 0.55rem 0.6rem; min-height: 40px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  color: rgba(252, 248, 239, 0.72); background: transparent; border: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.atlas-mode:hover { color: var(--cream); background: rgba(255, 255, 255, 0.07); }
.atlas-mode.is-on {
  color: var(--navy-deep); background: var(--brass-light); font-weight: 700;
}
.atlas-mode.is-loading { opacity: 0.6; cursor: progress; }

/* ---------- Search ---------- */
.atlas-search {
  position: relative; display: flex; align-items: center; flex-shrink: 0;
  margin-bottom: 0.85rem;
}
.atlas-search-icon {
  position: absolute; left: 0.95rem; display: grid; place-items: center;
  color: rgba(252, 248, 239, 0.62); pointer-events: none;
}
.atlas-search input {
  width: 100%; font-family: var(--font-sans); font-size: 0.92rem;
  padding: 0.72rem 2.4rem 0.72rem 2.6rem;
  color: var(--cream); background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(195, 154, 80, 0.24); border-radius: 999px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.atlas-search input::placeholder { color: rgba(252, 248, 239, 0.58); }
.atlas-search input::-webkit-search-cancel-button { display: none; }
.atlas-search input:focus {
  outline: none; border-color: var(--brass);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(195, 154, 80, 0.16);
}
.atlas-clear {
  position: absolute; right: 0.55rem; display: grid; place-items: center;
  width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
  color: rgba(252, 248, 239, 0.75); background: rgba(255, 255, 255, 0.1);
}
.atlas-clear:hover { background: var(--crimson); color: #fff; }

/* ---------- Field filters ---------- */
.atlas-filters {
  display: flex; flex-wrap: wrap; gap: 0.35rem; flex-shrink: 0;
  margin-bottom: 0.85rem;
}
.atlas-chip {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  padding: 0.42rem 0.72rem; min-height: 34px; border-radius: 999px; cursor: pointer;
  color: rgba(252, 248, 239, 0.72); background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.18s var(--ease);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.atlas-chip .swatch {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  opacity: 0.9; flex-shrink: 0;
}
.atlas-chip:hover { background: rgba(255, 255, 255, 0.13); color: var(--cream); }
.atlas-chip[aria-pressed="true"] {
  color: var(--navy-deep); background: var(--brass-light);
  border-color: var(--brass-light); font-weight: 700;
}

/* Toronto is the point of the atlas for this audience, so its filter
   reads as a primary control rather than one discipline among eight.
   These must sit AFTER the generic pressed rule: equal specificity,
   so source order decides which colour wins. */
.atlas-chip--toronto {
  color: var(--brass-light);
  background: rgba(195, 154, 80, 0.14);
  border-color: rgba(195, 154, 80, 0.5);
}
.atlas-chip--toronto:hover { background: rgba(195, 154, 80, 0.26); color: #fff; }
.atlas-chip--toronto[aria-pressed="true"] {
  color: #fff; background: var(--crimson);
  border-color: var(--crimson); font-weight: 700;
}

.atlas-count {
  flex-shrink: 0; margin: 0 0 0.5rem;
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(252, 248, 239, 0.62);
}

/* ---------- Result list ---------- */
.atlas-list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: 0 0.4rem 0.5rem 0;
  display: flex; flex-direction: column; gap: 0.3rem;
  scrollbar-width: thin; scrollbar-color: rgba(195, 154, 80, 0.4) transparent;
}
.atlas-list::-webkit-scrollbar { width: 7px; }
.atlas-list::-webkit-scrollbar-thumb {
  background: rgba(195, 154, 80, 0.35); border-radius: 999px;
}

.atlas-item {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: baseline;
  padding: 0.6rem 0.75rem; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: inherit; font-family: inherit;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.atlas-item:hover  { background: rgba(255, 255, 255, 0.07); }
.atlas-item:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.atlas-item[aria-current="true"] {
  background: rgba(160, 43, 34, 0.22); border-color: rgba(195, 154, 80, 0.45);
}
.atlas-item .pip {
  width: 9px; height: 9px; border-radius: 50%; align-self: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}
.atlas-item .who { min-width: 0; }
.atlas-item .nm {
  display: block; font-size: 0.99rem; line-height: 1.3; color: var(--cream);
}
.atlas-item .mt {
  display: block; font-family: var(--font-sans); font-size: 0.73rem;
  color: rgba(252, 248, 239, 0.64); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atlas-item.is-home .nm { color: var(--brass-light); font-weight: 600; }

.atlas-empty {
  padding: 1.6rem 0.75rem; text-align: center;
  font-size: 0.92rem; color: rgba(252, 248, 239, 0.66);
}

.atlas-credit {
  flex-shrink: 0; margin: 0.7rem 0 0; padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-sans); font-size: 0.7rem; line-height: 1.5;
  color: rgba(252, 248, 239, 0.6);
}

/* ---------- Globe stage ---------- */
.atlas-stage { position: relative; min-width: 0; overflow: hidden; }
.atlas-globe { position: absolute; inset: 0; }
.atlas-globe canvas { display: block; outline: none; }

/* ---------- Toronto street map (Leaflet) ---------- */
.atlas-map { position: absolute; inset: 0; z-index: 3; background: var(--navy-deep); }
.atlas-map .leaflet-container {
  width: 100%; height: 100%;
  background: var(--navy-deep);
  font-family: var(--font-sans);
}
/* Warm the basemap toward parchment so it sits with the rest of the
   palette. A hue rotation pushed it mauve; sepia keeps it archival. */
.atlas-map .leaflet-tile-pane {
  filter: sepia(0.34) saturate(0.78) brightness(1.02) contrast(0.96);
}

/* Keep the zoom control clear of the fixed site header */
.atlas-map .leaflet-top { top: calc(var(--header-h, 76px) + 0.6rem); }

.atlas-map .leaflet-control-attribution {
  background: rgba(13, 21, 38, 0.82); color: rgba(252, 248, 239, 0.72);
  font-size: 0.66rem; border-top-left-radius: 6px;
}
.atlas-map .leaflet-control-attribution a { color: var(--brass-light); }
.atlas-map .leaflet-control-zoom a {
  background: rgba(13, 21, 38, 0.9); color: var(--cream);
  border-color: rgba(195, 154, 80, 0.35);
}
.atlas-map .leaflet-control-zoom a:hover { background: var(--crimson); color: #fff; }

.plaque-pin { transition: fill 0.15s var(--ease), stroke 0.15s var(--ease); }
.plaque-pin:hover { cursor: pointer; }

.atlas-map .leaflet-popup-content-wrapper {
  background: var(--parchment); color: var(--ink);
  border-radius: 10px; box-shadow: var(--shadow-md);
}
.atlas-map .leaflet-popup-tip { background: var(--parchment); }
.atlas-map .leaflet-popup-content { margin: 0.7rem 0.9rem; font-family: var(--font-serif); }
.atlas-map .leaflet-popup-content b { font-size: 0.98rem; }

.atlas-loading {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 0.9rem; z-index: 5;
  font-family: var(--font-sans); font-size: 0.83rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(252, 248, 239, 0.55);
  background: var(--navy-deep);
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.atlas-loading.gone { opacity: 0; visibility: hidden; }
.atlas-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(195, 154, 80, 0.22); border-top-color: var(--brass);
  animation: atlasSpin 0.9s linear infinite;
}
@keyframes atlasSpin { to { transform: rotate(360deg); } }

.atlas-fallback {
  position: absolute; inset: 0; display: grid; place-content: center;
  padding: 2rem; text-align: center; color: rgba(252, 248, 239, 0.6);
}

/* ---------- Hover tooltip ---------- */
.atlas-tooltip {
  position: absolute; z-index: 8; pointer-events: none;
  padding: 0.45rem 0.7rem; border-radius: 8px;
  background: rgba(13, 21, 38, 0.94); border: 1px solid rgba(195, 154, 80, 0.4);
  font-family: var(--font-sans); font-size: 0.78rem; color: var(--cream);
  white-space: nowrap; box-shadow: var(--shadow-md);
  opacity: 0; transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 0.14s var(--ease);
}
.atlas-tooltip.on { opacity: 1; }
.atlas-tooltip b { display: block; font-weight: 600; }
.atlas-tooltip span {
  display: block; font-size: 0.7rem; color: rgba(252, 248, 239, 0.55);
}

/* ---------- Controls ---------- */
.atlas-controls {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 6;
  display: flex; gap: 0.45rem;
}
.atlas-ctrl {
  display: inline-flex; align-items: center; gap: 0.42rem; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600;
  padding: 0.6rem 0.95rem; min-height: 40px; border-radius: 999px;
  color: rgba(252, 248, 239, 0.8); background: rgba(13, 21, 38, 0.75);
  border: 1px solid rgba(195, 154, 80, 0.3);
  backdrop-filter: blur(8px);
  transition: all 0.18s var(--ease);
}
.atlas-ctrl:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }

.atlas-zoom { display: inline-flex; gap: 0.3rem; }
.atlas-ctrl--icon { padding: 0.6rem; width: 40px; justify-content: center; }

/* ---------- Detail card ---------- */
/* `display: flex` below would otherwise beat the browser's
   [hidden] { display: none }, leaving an empty card on first paint. */
.atlas-card[hidden],
.atlas-card-thumb[hidden] { display: none; }

.atlas-card {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 7;
  width: min(370px, calc(100% - 2.2rem)); max-height: min(62vh, 560px);
  display: flex; flex-direction: column;
  background: var(--parchment); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  animation: cardIn 0.42s var(--ease) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.atlas-card-close {
  position: absolute; top: 0.65rem; right: 0.65rem; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: none; border-radius: 50%; cursor: pointer;
  color: var(--ink-soft); background: rgba(36, 28, 18, 0.08);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.atlas-card-close:hover { background: var(--crimson); color: #fff; }

.atlas-card-body { overflow-y: auto; padding: 1.3rem 1.4rem 1.4rem; }

.atlas-card-thumb {
  margin: 0 0 0.9rem; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--parchment-2);
  aspect-ratio: 16 / 10;
}
.atlas-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.atlas-card-field {
  margin: 0 0 0.3rem; font-family: var(--font-sans); font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.atlas-card-name {
  margin: 0 0 0.25rem; font-size: 1.55rem; line-height: 1.15; font-weight: 600;
  padding-right: 1.6rem;
}
.atlas-card-meta {
  margin: 0 0 0.85rem; font-family: var(--font-sans); font-size: 0.79rem;
  color: var(--ink-faint);
}
.atlas-card-blurb {
  margin: 0 0 0.9rem; font-size: 0.98rem; line-height: 1.6; color: var(--ink);
}

.atlas-card-wiki {
  font-size: 0.9rem; line-height: 1.58; color: var(--ink-soft);
  padding-top: 0.85rem; border-top: 1px solid var(--line);
}
.atlas-card-wiki p { margin: 0; }
.atlas-card-wiki .src {
  display: block; margin-top: 0.5rem; font-family: var(--font-sans);
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.atlas-card-wiki .loading { color: var(--ink-faint); font-style: italic; }

.atlas-card-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
  color: var(--crimson); text-decoration: none;
}
.atlas-card-link:hover { color: var(--crimson-deep); text-decoration: underline; }

/* ---------- Accessibility ---------- */

/* One visible focus ring for every interactive element on the page.
   Keyboard users get it; mouse users do not. */
.atlas :where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 2px;
  border-radius: 6px;
}
.atlas-card :where(button, a):focus-visible { outline-color: var(--crimson); }

/* Touch devices get the full 44px target without bloating the desktop layout. */
@media (pointer: coarse) {
  .atlas-clear,
  .atlas-card-close { width: 44px; height: 44px; }
  .atlas-chip,
  .atlas-ctrl { min-height: 44px; }
  .atlas-item { padding-block: 0.75rem; }
  .atlas-search input { padding-right: 3rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .atlas { grid-template-columns: minmax(280px, 34vw) 1fr; }
  .atlas-card { width: min(320px, calc(100% - 2.2rem)); }
}

@media (max-width: 860px) {
  .atlas-body { overflow: auto; }
  /* minmax(0, 1fr), not 1fr. A grid item carries min-width: auto, so a 1fr
     track cannot shrink below its content's min-content width. The voices
     button holds a nowrap subtitle whose min-content is 352px, which jammed
     the single column open at 384px inside a 345px viewport and gave the
     whole page a horizontal scrollbar below 384px. */
  .atlas {
    position: static; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56vh auto; min-height: 100vh;
  }
  .atlas-panel, .atlas-stage { min-width: 0; }
  .atlas-stage { order: 1; min-height: 56vh; }
  .atlas-panel {
    order: 2; overflow: visible; border-right: none;
    border-top: 1px solid rgba(195, 154, 80, 0.2);
    padding: 1.4rem 1.25rem 2rem;
  }
  .atlas-list { max-height: 46vh; overflow-y: auto; }
  .atlas-card {
    right: 0.7rem; left: 0.7rem; bottom: 0.7rem;
    width: auto; max-height: 46vh;
  }
  .atlas-controls { left: 0.7rem; bottom: 0.7rem; }
}

/* Small phones (375px and down): the globe needs the height more than the copy does. */
@media (max-width: 420px) {
  .atlas { grid-template-rows: 46vh auto; }
  .atlas-stage { min-height: 46vh; }
  .atlas-title { font-size: 1.6rem; }
  .atlas-lede { font-size: 0.88rem; margin-bottom: 1rem; }
  .atlas-panel { padding: 1.1rem 1rem 1.75rem; }
  .atlas-controls { gap: 0.35rem; }
  .atlas-ctrl { padding: 0.6rem 0.7rem; font-size: 0.72rem; }
  .atlas-card { max-height: 52vh; }
  .atlas-card-name { font-size: 1.3rem; }
  .atlas-card-body { padding: 1.1rem 1.1rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-card { animation: none; }
  .atlas-spinner { animation-duration: 2.4s; }
}

/* ============================================================
   THE FIVE THAT SPEAK
   ------------------------------------------------------------
   Five of the 312 Heritage Toronto plaques answer questions.
   Five gold pins in a field of 312 is invisible unless it is
   deliberately made loud, so every surface that can carry the
   signal does: the panel, the list row, the marker, the card.
   ============================================================ */

/* ---------- Panel call to action ---------- */

.atlas-voices-hint {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; margin: 0 0 1rem; padding: 0.7rem 0.8rem;
  text-align: left; cursor: pointer;
  border-radius: 12px;
  border: 1px solid rgba(195, 154, 80, 0.42);
  background: linear-gradient(
    100deg,
    rgba(195, 154, 80, 0.20),
    rgba(195, 154, 80, 0.06) 62%
  );
  color: var(--brass-light);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.atlas-voices-hint:hover {
  border-color: rgba(226, 200, 140, 0.85);
  background: linear-gradient(
    100deg,
    rgba(195, 154, 80, 0.32),
    rgba(195, 154, 80, 0.10) 62%
  );
  transform: translateY(-1px);
}
.atlas-voices-icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(195, 154, 80, 0.22);
  color: var(--brass-light);
}
.atlas-voices-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.atlas-voices-text strong {
  font-family: var(--font-sans); font-size: 0.79rem; font-weight: 700;
  letter-spacing: 0.01em; color: var(--cream);
}
.atlas-voices-text em {
  font-style: normal; font-family: var(--font-sans);
  font-size: 0.69rem; letter-spacing: 0.03em;
  color: rgba(226, 200, 140, 0.82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Without this the nowrap list of five names sets a 352px min-content
     that the layout above cannot get under. */
  min-width: 0;
}
.atlas-voices-go { flex-shrink: 0; margin-left: auto; opacity: 0.7; }
.atlas-voices-hint:hover .atlas-voices-go { opacity: 1; }

/* ---------- Filter chip.  Must sit after the generic pressed rule:
     equal specificity, so source order decides the colour. ---------- */

.atlas-chip--voice {
  color: var(--brass-light);
  background: rgba(195, 154, 80, 0.16);
  border-color: rgba(195, 154, 80, 0.55);
}
.atlas-chip--voice:hover { background: rgba(195, 154, 80, 0.28); color: #fff; }
.atlas-chip--voice[aria-pressed="true"] {
  color: var(--navy-deep); background: var(--brass-light);
  border-color: var(--brass-light); font-weight: 700;
}

/* ---------- List row ---------- */

.atlas-item.has-voice .pip {
  box-shadow: 0 0 0 3px rgba(195, 154, 80, 0.28);
}
.voice-tag {
  display: inline-block; vertical-align: 1px;
  margin-left: 0.3rem; padding: 0.08rem 0.36rem;
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--brass-light);
}

/* ---------- Map marker ---------- */

.voice-marker { background: none; border: 0; }
.voice-marker-dot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brass-light);
  color: var(--navy-deep);
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(13, 21, 38, 0.45);
  z-index: 2;
}
.voice-marker-ring {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(226, 200, 140, 0.9);
  animation: voicePulse 2.4s var(--ease) infinite;
  z-index: 1;
}
@keyframes voicePulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}
.voice-marker.is-on .voice-marker-dot {
  background: var(--crimson); color: #fff;
  transform: translate(-50%, -50%) scale(1.15);
}

/* The label stays on screen. A tooltip you have to find by hovering is
   no use for a feature nobody knows is there. */
.leaflet-tooltip.voice-tip {
  padding: 0.24rem 0.55rem;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy-deep);
  background: var(--brass-light);
  border: 0; border-radius: 999px;
  box-shadow: 0 3px 12px rgba(13, 21, 38, 0.35);
  white-space: nowrap;
}
.leaflet-tooltip.voice-tip::before { border-right-color: var(--brass-light); }

/* ---------- Card call to action ---------- */

.atlas-ask {
  display: flex; align-items: center; gap: 0.62rem;
  width: 100%; margin: 0 0 0.7rem; padding: 0.72rem 0.85rem;
  text-align: left; cursor: pointer;
  border: 0; border-radius: 12px;
  background: var(--crimson); color: #fff;
  box-shadow: 0 6px 18px rgba(160, 43, 34, 0.3);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.atlas-ask:hover { background: var(--crimson-deep); transform: translateY(-1px); }
.atlas-ask > span {
  display: flex; flex-direction: column; gap: 0.08rem; min-width: 0;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700;
}
.atlas-ask em {
  font-style: normal; font-size: 0.69rem; font-weight: 500;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.78);
}
.atlas-ask-teaser {
  margin: 0 0 0.9rem;
  font-size: 0.83rem; line-height: 1.55; color: var(--ink-soft);
}

/* ============================================================
   THE CONVERSATION PANEL
   ============================================================ */

.voice-panel {
  position: absolute; z-index: 30;
  /* The stage runs under the fixed header, so the panel has to start
     below it or its own title bar is unreachable. */
  top: calc(var(--header-h, 62px) + 0.9rem);
  right: 0.9rem; bottom: 0.9rem;
  width: min(390px, calc(100% - 1.8rem));
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: rgba(13, 21, 38, 0.96);
  border: 1px solid rgba(226, 200, 140, 0.26);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  overflow: hidden;
  animation: voiceIn 0.34s var(--ease) both;
}
@keyframes voiceIn {
  from { opacity: 0; transform: translateX(18px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.voice-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0.62rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.voice-avatar {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brass-light); color: var(--navy-deep);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em;
}
.voice-id { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.voice-id strong {
  font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600;
  color: var(--cream); line-height: 1.2;
}
.voice-id em {
  font-style: normal; font-family: var(--font-sans);
  font-size: 0.68rem; letter-spacing: 0.03em;
  color: rgba(252, 248, 239, 0.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voice-sound, .voice-close {
  flex-shrink: 0; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  color: rgba(252, 248, 239, 0.66);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.18s var(--ease);
}
.voice-sound { margin-left: auto; }
.voice-sound:hover, .voice-close:hover { color: var(--cream); background: rgba(255, 255, 255, 0.16); }
.voice-sound[aria-pressed="true"] {
  color: var(--navy-deep); background: var(--brass-light); border-color: var(--brass-light);
}

.voice-grounding {
  flex-shrink: 0; margin: 0;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-sans); font-size: 0.68rem; line-height: 1.5;
  color: rgba(252, 248, 239, 0.52);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.voice-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 200, 140, 0.35) transparent;
}
.voice-msg { display: flex; gap: 0.5rem; align-items: flex-end; }
.voice-msg--you { justify-content: flex-end; }
.voice-msg-avatar {
  flex-shrink: 0; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(226, 200, 140, 0.2); color: var(--brass-light);
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700;
}
.voice-bubble {
  max-width: 84%;
  padding: 0.62rem 0.8rem;
  border-radius: 14px;
  font-size: 0.87rem; line-height: 1.62;
}
.voice-bubble p { margin: 0; }
.voice-bubble p + p { margin-top: 0.55rem; }
.voice-msg--them .voice-bubble {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 5px;
  color: rgba(252, 248, 239, 0.92);
}
.voice-msg--you .voice-bubble {
  background: var(--crimson); color: #fff;
  border-bottom-right-radius: 5px;
}
.voice-bubble.is-typing { display: flex; gap: 4px; align-items: center; padding: 0.8rem; }
.voice-bubble.is-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(226, 200, 140, 0.75);
  animation: voiceDot 1.3s ease-in-out infinite;
}
.voice-bubble.is-typing i:nth-child(2) { animation-delay: 0.18s; }
.voice-bubble.is-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes voiceDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
.voice-note {
  margin: 0.2rem 0 0;
  font-family: var(--font-sans); font-size: 0.76rem; line-height: 1.6;
  color: rgba(252, 248, 239, 0.58);
  padding: 0.6rem 0.7rem;
  border-left: 2px solid rgba(226, 200, 140, 0.5);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 0 8px 8px 0;
}

.voice-chips {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0 0.9rem 0.6rem;
}
.voice-chips:empty { display: none; }
.voice-chip {
  padding: 0.34rem 0.62rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600;
  color: rgba(226, 200, 140, 0.9);
  background: rgba(195, 154, 80, 0.12);
  border: 1px solid rgba(195, 154, 80, 0.35);
  transition: all 0.16s var(--ease);
}
.voice-chip:hover { background: rgba(195, 154, 80, 0.26); color: #fff; }

.voice-form {
  flex-shrink: 0; display: flex; gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.voice-form input {
  flex: 1 1 auto; min-width: 0;
  padding: 0.6rem 0.8rem; border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.86rem;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.voice-form input::placeholder { color: rgba(252, 248, 239, 0.4); }
.voice-form input:focus-visible {
  outline: 2px solid var(--brass-light); outline-offset: 1px;
}
.voice-form input:disabled { opacity: 0.5; cursor: not-allowed; }
.voice-send {
  flex-shrink: 0; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  color: #fff; background: var(--crimson); border: 0;
  transition: background 0.16s var(--ease);
}
.voice-send:hover { background: var(--crimson-deep); }
.voice-send:disabled { opacity: 0.45; cursor: not-allowed; }

.voice-foot {
  flex-shrink: 0; margin: 0;
  padding: 0 0.9rem 0.75rem;
  font-family: var(--font-sans); font-size: 0.64rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(252, 248, 239, 0.42);
}
.voice-panel.is-offline .voice-foot { color: rgba(226, 200, 140, 0.6); }

/* On a phone the stage is only about 46vh tall, so a panel confined to it
   leaves roughly three lines of conversation. It breaks out of the stage
   and takes the viewport instead. */
@media (max-width: 720px) {
  .voice-panel {
    position: fixed;
    top: calc(var(--header-h, 62px) + 0.5rem);
    right: 0.5rem; bottom: 0.5rem; left: 0.5rem; width: auto;
  }
  .voice-bubble { max-width: 88%; }
  .voice-grounding { font-size: 0.66rem; padding: 0.5rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-panel { animation: none; }
  .voice-marker-ring { animation: none; opacity: 0.55; }
  .voice-bubble.is-typing i { animation: none; opacity: 0.65; }
  .atlas-voices-hint:hover, .atlas-ask:hover { transform: none; }
}
.leaflet-tooltip.voice-tip.leaflet-tooltip-left::before { border-left-color: var(--brass-light); border-right-color: transparent; }
.leaflet-tooltip.voice-tip.is-hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   FACES ON THE VOICES
   ------------------------------------------------------------
   A plaque that answers shows the person who answers it. The
   portrait comes from the same resolver the chat panel uses, so
   the card and the conversation show the same face.
   ============================================================ */

/* The default card thumbnail is a 16:10 landscape band, which is right for
   a place and wrong for a person: it crops a standing portrait at the chin.
   A voice gets a taller frame, and the crop is pulled towards the top of
   the image, where heads are. */
.atlas-card-thumb--face {
  aspect-ratio: 4 / 5;
  max-height: 210px;
  width: auto;
  margin-inline: auto;
  border-radius: 12px;
}
.atlas-card-thumb--face img { object-position: 50% 18%; }

/* Avatars: the portrait fills the circle when it has loaded, the initials
   stay underneath until it does. */
.voice-avatar img,
.voice-msg-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
.voice-avatar { overflow: hidden; }
.voice-msg-avatar { overflow: hidden; }