/* Find a plant (js/search.js): a field in the bar on every page. Colours come from the page's own tokens (home.css; the
   planner's garden.css names some of them differently), with the shop's light values where a page has none. */
.find {
  --f-card: var(--card, #FFFDF8); --f-page: var(--bg, var(--paper, #F7F3EB)); --f-ink: var(--ink, #1E241D);
  --f-muted: var(--muted, #5C6258); --f-line: var(--line, #E3DBCD); --f-edge: var(--line-strong, var(--line, #CEC3B0));
  --f-accent: var(--plum, var(--accent, #2F4B35)); --f-tint: var(--lilac-soft, var(--tint, #E7EEE1));
  --f-sans: var(--sans, system-ui, sans-serif); --f-serif: var(--serif, Georgia, serif);
  --f-shadow: var(--shadow, 0 1px 2px rgba(40, 30, 20, .06), 0 10px 28px rgba(40, 30, 20, .07));
  font-family: var(--f-sans); color: var(--f-ink);
}
.find svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.find-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.find-open, .find-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  padding: 0; border: 0; border-radius: var(--r, 4px); background: none; color: var(--f-muted); cursor: pointer; }
.find-open svg, .find-close svg { width: 20px; height: 20px; }
.find-open:hover, .find-close:hover { color: var(--f-ink); background: var(--f-tint); }
.find-open:focus-visible, .find-close:focus-visible, .find input:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
.find-box { margin: 0; }
.find-ico { position: absolute; width: 16px; height: 16px; color: var(--f-muted); pointer-events: none; }
.find input { width: 100%; min-width: 0; height: 36px; margin: 0; padding: 0 10px 0 32px; border: 1px solid var(--f-edge);
  border-radius: var(--r, 4px); background: var(--f-card); color: var(--f-ink); font: 400 14px/1 var(--f-sans);
  -webkit-appearance: none; appearance: none; }
.find input::placeholder { color: var(--f-muted); opacity: 1; }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* The results, under the field. */
.find-panel { position: absolute; z-index: 60; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--f-card); border: 1px solid var(--f-line); border-radius: var(--r, 4px); box-shadow: var(--f-shadow); text-align: left; }
.find-panel[hidden] { display: none; }
.find-list { list-style: none; margin: 0; padding: 4px 0; }
.find-list:empty { display: none; }
.find-list ul { list-style: none; margin: 0; padding: 0; }
.find-plant { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 5px 14px; color: var(--f-ink); text-decoration: none; }
.find-plant img { flex: none; width: 36px; height: 45px; object-fit: cover; border-radius: 3px; background: var(--f-tint); }
.find-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.find-name b { font-weight: 500; font-size: 15px; line-height: 1.25; }
.find-name i { font-family: var(--f-serif); font-size: 13.5px; line-height: 1.25; color: var(--f-muted); }
.find-name small { margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--f-muted); }
/* The chosen option: a tint and a rule down its edge, since the keyboard stays in the field. */
.find-list [aria-selected="true"] { background: var(--f-tint); box-shadow: inset 3px 0 0 var(--f-accent); }
.find-away:not(:first-child) { border-top: 1px solid var(--f-line); margin-top: 4px; padding-top: 4px; }
.find-away + li:not(.find-away) { border-top: 1px solid var(--f-line); margin-top: 4px; padding-top: 4px; }
.find-away .find-plant { min-height: 0; padding-bottom: 2px; }
.find-states { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 0 10px 8px 58px !important; }
.find-state { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: var(--r, 4px);
  font-size: 14px; color: var(--f-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.find-note { margin: 0; padding: 14px 16px; font-size: 14px; color: var(--f-muted); }
.find-note[hidden] { display: none; }

/* Wide bars: the field sits in the bar. */
@media (min-width: 1100px) {
  .find { position: relative; }
  .find-open, .find-close { display: none; }
  .find-box { position: relative; display: flex; align-items: center; width: 220px; }
  .find-ico { left: 10px; }
  .find-panel { top: calc(100% + 8px); right: 0; width: 380px; }
}

/* Narrower bars: a button that opens the field across the whole bar, with the results under it. The bar (sticky) is
   what the field is placed against, so .find itself stays unpositioned here. */
@media (max-width: 1099px) {
  .find-box { display: none; }
  .find.open .find-box { position: absolute; inset: 0; z-index: 61; display: flex; align-items: center; gap: 6px;
    padding: 0 max(var(--gutter, 16px), calc((100% - 640px) / 2)); background: var(--f-page); }
  .find.open .find-open { visibility: hidden; }
  .find.open .find-box > input { flex: 1; height: 44px; padding-left: 36px; font-size: 16px; }
  .find-ico { left: calc(max(var(--gutter, 16px), calc((100% - 640px) / 2)) + 12px); }
  .find-panel { top: 100%; left: max(0px, calc((100% - 640px) / 2)); right: max(0px, calc((100% - 640px) / 2));
    max-height: calc(100dvh - 72px); }
}
/* Phones: the results take the full width, and every target is a thumb's width tall. */
@media (max-width: 720px) {
  .find-panel { left: 0; right: 0; border-inline: 0; border-radius: 0; }
  .find-state { min-height: 44px; padding: 0 8px; font-size: 15px; }
  .find-states { padding-left: 54px !important; }
}