/* ============================================================================
 * 1018 SHARED·FINDFILTER — the ruled find-and-filter bar
 * ============================================================================
 * Baked off ONCE as shared chrome and RULED 2026-08-16 — Andrew: "A for the search.
 * B for the filters." Built from workbench/shared/_bakeoffs/find-filter-bar.html,
 * the mount `[data-opt="settled"]` — the one the page labels "✓ SETTLED — A's search,
 * B's filters". Sets A, B and C on that page are EVIDENCE, not the design: only the
 * settled mount was built, and its values are copied, not re-derived.
 *
 *   .ff-find — A's search: a RAISED PILL. It is a thing you tap into and type, so it
 *              reads as an input — --surface-card fill, --radius-pill, --shadow-card.
 *   .ff-sels — B's filters: PLAIN TEAL TEXT WITH A CARET. They change what you are
 *              looking at, they do not take input, so no fill, no shadow, no box.
 *              Two different jobs, two different weights.
 *
 * ⚠️ TWO DISCLOSED DEVIATIONS FROM THE MOUNT, both floors the mock predates (the same
 * two 440 SHARED·TOOLTOPBAR disclosed, same reason, no KEPT-REF marker either):
 *   · TEXT ROLES — the mount sets 15px; --text-body was re-anchored 15→16 as the platform
 *     body floor (D-463), so the bar's type ships at roles, not raw steps.
 *   · COLOUR — the mount's --text-tertiary placeholder is RETIRED for text (D-740: it IS
 *     --ink-400, non-text only) → --text-secondary. The mount's --accent filter text reads
 *     3.41:1 on the bare page ground, under the 4.5:1 floor → --accent-hover (teal-700,
 *     clears it) — still teal, so D-776's "the one that turns, turns down and goes teal"
 *     holds. Measured, not judged: check 56-contrast-audit refuses the pair (new debt).
 *
 * This bar is CHROME (the bake-off page's own words): every surface that needs
 * find-and-filter inherits it rather than drawing its own. The collection reader
 * takes ONLY the filters (Andrew, same day: five items, no need for search) — the
 * renderer's `search:false`, a declared variant, not a per-surface redraw.
 *
 * Card CSS is SELF-CONTAINED (D-470/D-475): every element the card renders is styled
 * under the card's own root class, zero reliance on page or user-agent defaults —
 * including the input, whose height/family/appearance are declared here so app.css's
 * global input rules cannot reshape it. Tokens only, 4px grid (D-511). Prefix: ff.
 * ============================================================================ */

/* The bar root — and the anchor a filter's popover hangs from. */
.ff { position: relative; }

/* ── A's search — the raised pill ──────────────────────────────────────────── */
.ff-find {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--dim-44);
  padding: 0 var(--space-16);
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
  margin: 0 0 var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-body);
  cursor: text;
}
/* Activation = the teal encircle, 103 HOME·SEARCH's own treatment (D-440), doubling
 * as the G6 focus ring. DESIGNED, not captured: the kept mount's search is a static
 * div and has no focus path of its own — a real input needs one. The ring sits on
 * the PILL (the thing you see), never on the naked input inside it. */
.ff-find:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ff-find-icon { width: var(--size-18); height: var(--size-18); flex: none; color: var(--text-secondary); }
.ff-find-icon svg { width: 100%; height: 100%; display: block; }
/* The real input. --text-body (16) — the D-463 platform body floor the mock's 15px
 * predates, and incidentally what keeps iOS from focus-zooming the field. Self-contained:
 * family, size, height, chrome and cancel-button are all declared here. */
.ff-find-input {
  flex: 1;
  min-width: 0;
  min-height: var(--dim-44);
  margin: 0;
  padding: 0;
  border: 0;
  background: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.ff-find-input::-webkit-search-cancel-button,
.ff-find-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ff-find-input::placeholder { color: var(--text-secondary); opacity: 1; }

/* ── B's filters — plain teal text with a caret ────────────────────────────── */
.ff-sels { display: flex; gap: var(--space-20); margin: 0 0 var(--space-16); padding: 0 var(--space-4); }
.ff-sel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 0;
  background: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-600);
  color: var(--accent-hover);
  cursor: pointer;
}
/* The VISUAL stays the ruled text line; the HIT area is the D-463 44px floor — a
 * transparent halo, no layout, the same technique actions.css's own chevron uses. */
.ff-sel::before { content: ""; position: absolute; inset: calc((var(--tap-target) - 100%) / 2) var(--space-4); }
.ff-sel-label {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-600);
  color: var(--accent-hover);
}
.ff-sel-icon {
  width: var(--size-14);
  height: var(--size-14);
  flex: none;
  transition: transform var(--duration-200) var(--ease-standard);
}
/* CAPTURED — the kept mount's own rule, byte-for-byte in effect: the caret turns
 * DOWN when its filter is open. */
.ff-sel[aria-expanded="true"] .ff-sel-icon { transform: rotate(90deg); }
/* G6 floor (D-422): press/focus feedback, actions.css's own treatment. */
.ff-sel:active { opacity: 0.72; }
.ff-sel:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* D-450 — reduce-motion: the state still changes, instantly; nothing tweens. */
@media (prefers-reduced-motion: reduce) {
  .ff-sel-icon { transition: none; }
}