/* The card finder box (server/finder/widget.js, public/finder/finder.js) —
   ONE stylesheet for the home page, the try page and the dashboard. It styles
   only the box and its "More examples" button; the tiles and the examples
   (.occasion, .gallery-grid, .ex-tile) are the page's own, with site.css's
   rules. */
.finder { max-width: 640px; margin: 14px auto 26px; }
/* in "Für jeden Anlass die passende Karte": half the spacing (Karl 2026-10-22) */
#occasions .finder { margin: 7px auto 13px; }
.finder-row { display: flex; gap: 8px; }
.finder-input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  text-overflow: ellipsis;
}
/* the input and its suggestion list: the list overlays the page under the
   input (absolute) — nothing below moves */
.finder-field { position: relative; flex: 1; min-width: 0; display: flex; }
.finder-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; max-height: min(60vh, 360px); overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 34px rgba(90,50,60,0.12);
}
.finder-suggest[hidden] { display: none; }
.finder-option {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
  border-radius: 9px; cursor: pointer; color: var(--ink); font-size: 15.5px; line-height: 1.3;
}
.finder-option-ic { font-size: 20px; line-height: 1; flex: none; width: 1.4em; text-align: center; }
.finder-option:hover, .finder-option.is-active { background: var(--cream); color: var(--rose-2); }
.finder-input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; border-color: var(--gold-soft); }
.finder-send, .finder-btn {
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; border-radius: 12px;
  padding: 10px 16px; border: 1px solid var(--line); background: transparent; color: var(--rose-2);
}
.finder-send { background: var(--rose-2); border-color: var(--rose-2); color: #fff; flex: none; }
.finder-send:hover { background: var(--rose-1); }
.finder-send:disabled, .finder-btn:disabled { opacity: 0.6; cursor: default; }
.finder-send.is-busy:disabled { opacity: 0.85; cursor: progress; }
/* the Search button while the model answers: a small spinner after its word */
.finder-send.is-busy::after {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 8px; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: finder-spin 0.8s linear infinite;
}
@keyframes finder-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .finder-send.is-busy::after { animation-duration: 2.4s; } }
.finder-input[readonly] { background: var(--cream); color: var(--ink-soft); }
.finder-btn:hover { border-color: var(--gold); color: var(--gold); }
/* «Show all again»: in the row, right of Search, Search's outlined twin */
.finder-reset { flex: none; }
.finder-reset[hidden] { display: none; }
.finder-reply { margin-top: 12px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; }
.finder-text { margin: 0; line-height: 1.55; color: var(--ink); }

/* the "More examples (N)" button: its own row in the page's gallery grid,
   in site.css's .more-toggle look (the finder renders nothing else of its
   own — the tiles and the examples are the page's own markup and styles) */
.finder-more-btn { grid-column: 1 / -1; justify-self: center; }
/* an example tile whose markup is still on its way: a neutral block of a
   tile's size (no text), replaced when it arrives */
.finder-ph { aspect-ratio: 5 / 8; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; }

@media (max-width: 480px) {
  /* one row on a phone too: the input shrinks (its placeholder picks the
     variant that fits), «Show all again» is a compact ↺ named by its words */
  .finder-send, .finder-btn { padding: 10px 12px; }
  .finder-reset { min-width: 44px; padding: 10px 0; }
  .finder-reset .finder-reset-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .finder-reset::before { content: "↺"; font-size: 20px; line-height: 1; }
}