/* Autocomplete and location search (October 2026). Loaded only on the home page and the college and high school
   list pages. Colors come from the site's tokens, so light and dark themes follow site.css. */

.suggest-host { position: relative; }

.suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .3rem);
  z-index: 20;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}
.suggest[hidden] { display: none; }

.suggest .sg-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem;
  min-height: 2.75rem;
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.suggest .sg-item + .sg-item { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
/* A small label above the name (it used to sit in its own column and squeeze the name in narrow boxes). */
.suggest .sg-kind {
  justify-self: start;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.suggest .sg-place .sg-kind { color: var(--teal-ink); background: var(--teal-50); }
.suggest .sg-school .sg-kind { color: var(--blue); background: var(--blue-50); }
.suggest .sg-name { min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: break-word; }
.suggest .sg-meta { font-size: .86rem; line-height: 1.35; color: var(--muted); }
.suggest .sg-item:hover,
.suggest .sg-item[aria-selected="true"] { background: var(--surface-2); }
.suggest .sg-item:hover .sg-kind, .suggest .sg-item[aria-selected="true"] .sg-kind { background: var(--bg); }
/* Never narrower than a comfortable reading width, even under a narrow sidebar field. */
.suggest { min-width: min(26rem, calc(100vw - 2rem)); right: auto; }
@media (max-width: 47.99rem) { .suggest { min-width: 0; right: 0; } }

/* The name/city box in the phone toolbar takes the room the field had before. */
.mq-host { flex: 1 1 auto; min-width: 0; }
.mq-host .mq { width: 100%; }
/* The list spans the toolbar (its sticky box is the nearest positioned parent), not just the input. */
.mtoolbar .suggest-host { position: static; }
.mtoolbar .suggest { left: 1rem; right: 1rem; }

/* "Near a place" in the filter panel. */
.near-field .near-row { margin-top: .1rem; }
.near-msg { margin: .3rem 0 0; }

/* The home page: "Use my location" under the search box. */
.near-home { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .85rem 0 0; }

/* Without JavaScript the location button cannot work, so it is not shown. */
html:not(.js) [data-near-me] { display: none; }