/* 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: auto minmax(0, 1fr);
  gap: .1rem .65rem;
  align-items: baseline;
  min-height: 2.75rem;
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.suggest .sg-kind {
  grid-row: span 2;
  min-width: 3.6rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.suggest .sg-place .sg-kind { color: var(--teal-ink); }
.suggest .sg-school .sg-kind { color: var(--blue); }
.suggest .sg-name { min-width: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.suggest .sg-meta { grid-column: 2; font-size: .85rem; color: var(--muted); }
.suggest .sg-item:hover,
.suggest .sg-item[aria-selected="true"] { background: var(--surface-2); }

/* 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; }