/* The Oyster Atlas — search by market name. Fogday Studios, fogday.com
   Uses the page tokens from index.html (--panel, --ink, --muted, --line, --accent, --font). */

.oa-search { display: flex; flex-direction: column; }  /* card look and position: index.html */

.oa-search-label {
  display: block; margin: 0 0 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}

.oa-field {
  display: flex; align-items: center; gap: 8px;
  width: 270px; max-width: 100%; height: 35px; padding: 0 12px;  /* +20px wide; 44px → 35px tall (−20%) */
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.oa-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.oa-field svg { flex: none; color: var(--muted); }

.oa-input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; color: var(--ink);
  font: 400 .9rem/1 var(--font); /* same size as the legend list */
}
.oa-input::placeholder { color: var(--muted); }
.oa-input:focus { outline: none; }
.oa-input::-webkit-search-cancel-button { display: none; }
.oa-input:disabled { opacity: .5; }

.oa-clear {
  width: 40px; height: 40px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.oa-clear:hover { color: var(--accent); }
.oa-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.oa-clear[hidden] { display: none; }

.oa-status { margin: 8px 2px 4px; font-size: .8rem; color: var(--muted); }
.oa-status:empty { display: none; }

.oa-results {
  list-style: none; margin: 0; padding: 0; font-size: .9rem; /* same size as the legend list */
  max-height: calc(5 * 40px); overflow-y: auto; overscroll-behavior: contain;  /* 5 rows visible, scroll for more */
  -webkit-overflow-scrolling: touch;
}
.oa-results:empty { display: none; }
.oa-search.oa-collapsed .oa-results,
.oa-search.oa-collapsed .oa-status { display: none; }  /* minimized: just the magnifying glass */

/* Minimized: the bar shrinks to a magnifying-glass button, with the oyster's details above it */
.oa-field { transition: width .18s ease; cursor: text; }
.oa-search.oa-collapsed .oa-field { width: 35px; padding: 0; justify-content: center; cursor: pointer; }
.oa-search.oa-collapsed .oa-input { flex: 0 0 0; width: 0; padding: 0; opacity: 0; }
.oa-search.oa-collapsed .oa-detail { order: -1; margin: 0 2px 10px; }

.oa-result {
  display: flex; align-items: center; gap: 8px;
  box-sizing: border-box; height: 40px; padding: 0 8px; border-radius: 6px; cursor: pointer;  /* fixed row height so exactly 5 fit */
}
.oa-result:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.oa-result[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* Laid out like the legend: species-colored dot, market name, species name at far right */
.oa-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
}
.oa-name mark { background: transparent; color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
.oa-result .dot { background: var(--c); }
.oa-species { margin-left: auto; padding-left: 12px; font-style: italic; color: var(--muted); white-space: nowrap; }

/* Popup for a picked oyster */
.oa-popup-wrap .mapboxgl-popup-content {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: 400 .9rem/1.35 var(--font);  /* no close button, so no extra right padding */
}
.oa-popup-wrap.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.oa-popup-wrap.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.oa-popup-wrap.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--panel); }
.oa-popup-wrap.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.oa-popup-wrap.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.oa-popup-wrap.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--panel); }
.oa-popup-wrap.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--panel); }
.oa-popup-wrap.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--panel); }
.oa-popup-wrap .mapboxgl-popup-close-button { color: var(--muted); font-size: 18px; }
.oa-popup-locale { color: var(--ink); }
.oa-popup-region { margin-top: 2px; color: var(--muted); }

/* Details of the chosen oyster: in their own card above the legend (index.html), or under the search bar if that card is missing */
.oa-detail { margin: 8px 2px 2px; font-size: .9rem; line-height: 1.35; }
.oa-detail[hidden] { display: none; }
.oa-detail-name { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }  /* the picked oyster, bold */
.oa-detail-name .dot { background: var(--c); }
.oa-detail-locale { margin-top: 2px; padding-left: 20px; color: var(--ink); }
.oa-detail-region { padding-left: 20px; color: var(--muted); }