/* ── Browse X locations ─────────────────────────────────────────────────
   The results reuse the Where view's .geo-nearby-* vocabulary, so what is
   left is the filter form and the metadata disclosure. */
/* Internal scroll region, like .geo-body and .quiz-body: .panel-inner clips
   its overflow and mobile locks page scroll, so without this the filters run
   off the bottom and the chips and pager are unreachable. On a 390x664 phone
   the form alone is 548 px against a 521 px viewport, so this scrolls on every
   handset, not just the small ones. */
.places-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 4px 12px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.places-body::-webkit-scrollbar { width: 8px; }
.places-body::-webkit-scrollbar-track { background: transparent; }
.places-body::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
.places-body::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.places-filters { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .8rem; }
.places-hint { margin: 0 0 .2rem; font-size: .82rem; opacity: .75; }
.pf-field { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.pf-field > label {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* The selects are .movie-history-field children, so only the width is ours. */
.pf-select, .pf-num { width: 100%; }
.pf-num {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(13, 8, 2, 0.6);
  border: 1px solid var(--gold-dim);
  color: var(--text);
  outline: none;
}
.pf-num:focus { border-color: var(--gold-lt); }
.pf-num::placeholder { color: var(--text-dim); opacity: 0.8; }
.pf-coords { border: 1px solid rgba(212,160,23,.25); border-radius: 8px;
             padding: .45rem .6rem; margin: 0; }
.pf-coords legend { font-family: var(--sans); font-size: .68rem; letter-spacing: .08em;
                    text-transform: uppercase; color: var(--text-dim);
                    opacity: .9; padding: 0 .3rem; }
.pf-pair { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.pf-pair .pf-num { width: 6.5rem; }
.pf-here {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-lt);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pf-here:hover { border-color: var(--gold-lt); }
.pf-note { display: block; font-size: .75rem; opacity: .6; margin-top: .25rem; }
.pf-actions { display: flex; gap: .5rem; margin-top: .2rem; }
/* Same pairing as the movie browser's filters: filled primary, outlined reset. */
.pf-apply, .pf-reset {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pf-apply {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.pf-apply:hover { background: var(--gold-lt); border-color: var(--gold-lt); }
.pf-reset {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--text-dim);
}
.pf-reset:hover { color: var(--gold-lt); border-color: var(--gold-lt); }
.places-status { font-size: .82rem; opacity: .8; margin: .4rem 0; }

/* Refining the answer in hand: the type picker and the free-text field. */
.places-refine { display: flex; flex-direction: column; gap: .5rem; }
.places-refine[hidden] { display: none; }
.places-textfield { gap: .25rem; }
.places-textfield .input {
  /* .input is the chat composer's size; this one sits among 0.68rem labels. */
  flex: 0 1 auto;
  width: 100%;
  font-size: 0.9rem;
  padding: 7px 12px;
}
/* The type-ahead cancel button Safari and Chrome add to type=search. */
.places-textfield .input::-webkit-search-cancel-button { filter: invert(0.7) sepia(1) hue-rotate(5deg); }

/* Results. One card per place, reusing the movie vault's .bm-grid/.bm-card so
   the two result lists read as one thing; what is left here is the places
   content inside a card. The Where view keeps its chips — there a chip *is*
   the point, here you asked for these and they arrive open. */
.bp-card p { margin: 0; }
.bp-card .bm-title { line-height: 1.3; }
.bp-card .geo-nearby-meta { opacity: 0.8; }
.bp-card .bp-coords {
  font-family: var(--sans);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gold);
  opacity: 0.9;
}
.bp-card .geo-nearby-links { gap: 6px 14px; }
.bp-card .places-meta { margin-top: 2px; }

.places-meta { margin-top: .5rem; font-size: .8rem; }
.places-meta > summary { cursor: pointer; opacity: .8; }
.places-meta-row { margin: .25rem 0 0; line-height: 1.35; word-break: break-word; }
.places-meta-key { opacity: .7; }
/* A metadata value that is a URL. These run long — a Commons FilePath can be
   200 characters — so it has to break mid-string rather than widen the card. */
.places-meta-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim);
  overflow-wrap: anywhere;
}
.places-meta-link:hover,
.places-meta-link:focus-visible { color: var(--gold-lt); border-bottom-color: var(--gold); }