/* ─── Geo view ──────────────────────────────────────────── */
.geo-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
  /* Internal scroll region (like .movie-results): the panel clips overflow
     and mobile locks page scroll, so tall content — the AI description —
     must scroll inside the panel. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.geo-body::-webkit-scrollbar { width: 8px; }
.geo-body::-webkit-scrollbar-track { background: transparent; }
.geo-body::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
.geo-body::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* Children keep natural height — otherwise flex shrinks them to fit and the
   container never overflows/scrolls. */
.geo-body > * { flex: 0 0 auto; }
.geo-status {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.geo-status.error { color: #ffb3b3; }
.geo-coords { display: flex; flex-direction: column; gap: 10px; }
.geo-coords .coord {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  background: rgba(26, 16, 5, 0.5);
}
.geo-coords dt {
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.geo-coords dd {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--gold-lt);
}
.geo-btn {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.geo-btn:hover { color: var(--gold-lt); border-color: var(--gold); background: rgba(212, 160, 23, 0.12); }
.geo-btn:disabled { opacity: 0.5; cursor: progress; }
.geo-place {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  background: rgba(26, 16, 5, 0.5);
}
/* Hidden until a locate fills it. The display above outranks the UA
   [hidden] rule, so without this the empty bordered box shows on load. */
.geo-place[hidden] { display: none; }
.geo-address {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gold-lt);
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.geo-address:empty { display: none; }
.geo-desc {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
}
/* Radius slider for the nearby search. Same gold-on-dark conventions as
   .geo-btn; the track and thumb need per-engine rules, so the shared look
   is set once in the custom properties above and reused by both. */
.geo-radius { display: flex; flex-direction: column; gap: 6px; }
/* Hidden until a fix exists — without this the attribute loses to display. */
.geo-radius[hidden] { display: none; }
.geo-radius-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.geo-radius-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.geo-radius-value {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold-lt);
}
.geo-radius-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.geo-radius-input:disabled { opacity: 0.5; cursor: not-allowed; }
.geo-radius-input:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.geo-radius-input::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(212, 160, 23, 0.35);
}
.geo-radius-input::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: rgba(212, 160, 23, 0.35);
}
.geo-radius-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px; /* centres the thumb on the 2 px track */
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold-lt);
}
.geo-radius-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold-lt);
}
.geo-radius-note {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.geo-radius-note[hidden] { display: none; }

/* Retromap: the button, then the map with the SVG of marks laid exactly over
   it (same box, so viewBox fractions are image fractions). Pixel art scaled
   down or up stays pixel art: no smoothing. */
.geo-retromap { display: flex; flex-direction: column; gap: 10px; }
.geo-retromap[hidden] { display: none; }
.geo-retromap .geo-btn.is-open { color: var(--gold-lt); border-color: var(--gold); }
.geo-retromap-body { display: flex; flex-direction: column; gap: 8px; }
.geo-retromap-body[hidden] { display: none; }
.geo-retromap-status {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.geo-retromap-status.error { color: #ffb3b3; }
.geo-retromap-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--gold-dim);
  background: #000;
  line-height: 0;
}
.geo-retromap-frame[hidden] { display: none; }
.geo-retromap-img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.geo-retromap-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.geo-retromap-bullet {
  fill: #ffff55;
  stroke: #000;
  stroke-width: 3;
}
.geo-retromap-bullet.is-picked { fill: #ff55ff; stroke: #fff; }
.geo-retromap-balloon path { fill: #e03030; stroke: #fff; stroke-width: 4; }
.geo-retromap-balloon-eye { fill: #fff; }
.geo-retromap-pick {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text);
}
.geo-retromap-pick[hidden] { display: none; }
.geo-retromap-pick strong { color: var(--gold-lt); font-weight: normal; }
.geo-retromap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.62rem;
  color: var(--text-dim);
}
.geo-retromap-legend-item { display: flex; align-items: center; gap: 5px; }
.geo-retromap-legend-icon { width: 14px; height: 14px; image-rendering: pixelated; }
.geo-retromap-meta {
  font-family: var(--sans);
  font-size: 0.62rem;
  color: var(--text-dim);
}

/* Nearby cool places: a chip per place plus one shared detail panel.
   Follows the .geo-btn / .geo-place gold-on-dark conventions above. */
.geo-nearby { display: flex; flex-direction: column; gap: 10px; }
/* Same trap as .geo-place: hidden until the catalogue finds something. */
.geo-nearby[hidden] { display: none; }
.geo-nearby-title {
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
/* Reuses the .movie-history-field select (as the Car X profile picker does);
   only the row around it belongs here. */
.geo-nearby-filter { display: flex; align-items: center; gap: 10px; }
.geo-nearby-filter[hidden] { display: none; }
.geo-nearby-list { display: flex; flex-wrap: wrap; gap: 8px; }
.geo-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.geo-chip:hover { color: var(--gold-lt); border-color: var(--gold); background: rgba(212, 160, 23, 0.12); }
.geo-chip.is-open { color: var(--gold-lt); border-color: var(--gold); background: rgba(212, 160, 23, 0.18); }
.geo-chip-dist {
  font-size: 0.62rem;
  color: #e8d5a0;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.geo-chip.is-open .geo-chip-dist { color: var(--gold); }
.geo-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-chip-tag {
  font-size: 0.62rem;
  color: #e8d5a0;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.geo-chip.is-open .geo-chip-tag { color: var(--gold); }
.geo-nearby-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* While open it is an item of the wrapping chip list, so it takes a whole
     row of its own directly under the chip that was pressed. Harmless while
     parked outside the list, where it is the only thing on its line. */
  flex: 0 0 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  background: rgba(26, 16, 5, 0.5);
}
/* Shown only while a chip is open; closeNearbyDetail() sets hidden, which
   cannot win against the display above on its own. */
.geo-nearby-detail[hidden] { display: none; }
.geo-nearby-name {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gold-lt);
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.geo-nearby-meta {
  font-family: var(--sans);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e8d5a0;
}
.geo-nearby-desc {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: #e8d5a0;
  line-height: 1.65;
}
.geo-nearby-link {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  align-self: flex-start;
}
.geo-nearby-link:hover { color: var(--gold-lt); border-color: var(--gold); }
/* Wraps on narrow screens rather than pushing the panel sideways. */
.geo-nearby-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.geo-nearby-tags {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  opacity: 0.85;
}
.geo-nearby-instance {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-style: italic;
  color: #e8d5a0;
  line-height: 1.6;
}

/* Ten places to a page; borrows .browse-pager/.bp-btn, so only the spacing
   and the hidden trap the shared flex display needs are set here. */
.geo-nearby-pager { padding-top: 10px; }
.geo-nearby-pager[hidden] { display: none; }

.geo-attribution {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.7;
}
/* Wikidata and OpenStreetMap are credited as links, kept as quiet as the line
   they sit in — the source matters, the styling should not shout about it. */
.geo-attribution a,
.geo-attribution a:link,
.geo-attribution a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim);
}
.geo-attribution a:hover,
.geo-attribution a:focus-visible {
  color: var(--gold-lt);
  border-bottom-color: var(--gold);
}
/* The Where view's copy is the last flex child and floats down on its own;
   this one closes a block scroller, so it needs the rule drawn for it. */
.places-body > .geo-attribution {
  margin: 1rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(139, 105, 20, 0.3);
}