/* ============================================================
   Product finder. Ported from the mockup's `.cfg` (styles/am.css,
   additive-manufacturing.html #families): the sticky filter panel beside the
   result list, the count above both, the fixed compare bar and the side-by-side
   grid.

   Deltas from the mockup, all deliberate (see render.php for the reasoning):
     · the chips are checkbox + label pairs, not buttons, so the pill look lives
       on the LABEL and the checked state comes from :checked rather than from a
       class a script maintains;
     · the panel is a <form> with a submit that only JavaScript hides, so the
       .vt-finder__apply button is styled even though most readers never see it;
     · no flagship tint on the first row — nothing in the data says which engine
       is the flagship.

   Responds through container queries, like every block here: the canvas is
   narrow and a viewport media query lies to it (BLOCKS.md, the section
   skeleton).
   ============================================================ */
.vt-finder {
  /* the block spans its column — a section's stack is align-items: flex-start
     (BLOCKS.md trap 9) */
  width: 100%;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px 40px;
  align-items: start;
}

.vt-finder--nopanel { grid-template-columns: 1fr; }

.vt-finder__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.vt-finder__count {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--color-text);
  margin: 0;
}

.vt-finder__hint {
  font-size: 12px;
  color: var(--color-text-subtle);
  margin: 0;
}

/* ---- the filter panel ---- */

.vt-finder__filters {
  position: sticky;
  top: calc(96px + var(--wp-admin--admin-bar--height, 0px));   /* + the logged-in toolbar, which pushes the fixed header down */
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.vt-finder__facet {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* a fieldset will not shrink below its content without this */
}

.vt-finder__facet-label {
  font-size: max(11px, var(--fs-floor, 0px));
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-bold);
  color: var(--color-text-subtle);
  margin: 0;
  padding: 0 0 12px;
}

/* ---- the visitor's sort control, where the "Sorted by …" line used to be ----
   ONE select: its option already says which way round the list goes, so a
   second direction control would state the same thing twice. */
.vt-finder__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vt-finder__sort-label {
  font-size: 12px;
  color: var(--color-text-subtle);
}
.vt-finder__sort select {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg, #fff);
  color: var(--color-text);
  max-width: 100%;
}

/* the two halves of a min–max filter, with their dash between them */
.vt-finder__rangepair {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vt-finder__rangepair > .vt-finder__rangefield { flex: 1 1 0; min-width: 0; }
.vt-finder__rangesep { color: var(--color-text-subtle); }

/* ---- a RANGE filter: one number the visitor types ----
   "I need this much — which systems can do it?". The unit sits OUTSIDE the input
   because it belongs to the specification, not to the value: the same rule the
   Spec values grid follows, and it keeps the field holding a bare number. */
.vt-finder__rangefield {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg, #fff);
  overflow: hidden;
}
.vt-finder__rangefield:focus-within {
  border-color: var(--color-accent, #5f4a8b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #5f4a8b) 18%, transparent);
}
.vt-finder__number {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
}
.vt-finder__number:focus { outline: none; }
.vt-finder__number::placeholder { color: var(--color-text-subtle); opacity: 1; }
/* The unit reads as a CHIP, the same purple the selected filter chips use
   (Yoann, 2026-08-27) — it is a label on the value, not a disabled field, and
   the grey box it used to be read as the latter. */
.vt-finder__unit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 11px;
  background: var(--color-dark-purple);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: #fff;
  white-space: nowrap;
}
/* what the family can actually do — so the box is never a guess in the dark */
.vt-finder__facet-hint {
  margin: 6px 0 0;
  font-size: max(11.5px, var(--fs-floor, 0px));
  line-height: 1.4;
  color: var(--color-text-subtle);
}

.vt-finder__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.vt-finder__chip { display: inline-flex; }

/* The input stays in the layout and stays focusable — it is only invisible.
   Anything that removes it from the accessibility tree (display: none) takes
   the checkbox's own semantics with it. */
.vt-finder__chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vt-finder__chip label {
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition:
    background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}

.vt-finder__chip label:hover {
  border-color: var(--color-light-purple);
  color: var(--color-dark-purple);
}

.vt-finder__chip input:checked + label {
  background: var(--color-dark-purple);
  border-color: var(--color-dark-purple);
  color: #fff;
}

.vt-finder__chip input:focus-visible + label { box-shadow: var(--focus-ring); }

.vt-finder__apply {
  font: inherit;
  cursor: pointer;
  align-self: flex-start;
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-dark-purple);
  background: var(--color-dark-purple);
  color: #fff;
}

/* a `display` property beats the [hidden] UA rule — the resources list found
   this the hard way, and every hidden thing in this block needs the guard */
.vt-finder__apply[hidden],
.vt-finder__pick[hidden],
.vt-finder__bar[hidden],
.vt-finder__compare[hidden],
.vt-finder__empty[hidden],
.vt-finder__result[hidden] { display: none; }

.vt-finder__reset {
  align-self: flex-start;
  font-size: 13px;
  color: var(--color-dark-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vt-finder__reset:hover { color: var(--color-light-purple); }

/* ---- the results ---- */

.vt-finder__main { min-width: 0; }

.vt-finder__results {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* ---- the card edge: the BLOCK decides, the surfaces read ----
   The `Card border` toggle (inc/card-border.php) is on the block, so the edge
   travels down as an inherited custom property. It governs both surfaces the
   result owns — the card and the thumbnail frame inside it — because they are
   one row to the eye and one decision to an editor. The filter panel and the
   comparison table keep their own edges: those are chrome around the list, not
   the cards in it. The bare state is stated at surface level too, since the
   :hover below sets the token ON the card and a value set on an element beats
   one inherited from its ancestor whatever the specificity. */
.vt-finder { --vt-card-edge: var(--color-border); }
.vt-finder.vt-cards-bare,
.vt-finder.vt-cards-bare .vt-finder__result,
.vt-finder.vt-cards-bare .vt-finder__result:hover,
.vt-finder.vt-cards-bare .vt-finder__thumb { --vt-card-edge: transparent; }

.vt-finder__result {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--vt-card-edge, var(--color-border));
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.vt-finder__result:hover {
  --vt-card-edge: rgba(160, 104, 177, 0.4);
  box-shadow: 0 10px 24px rgba(46, 32, 59, 0.08);
}

/* no thumbnail, no column */
.vt-finder__result:not(:has(.vt-finder__thumb)) { grid-template-columns: 1fr auto; }

.vt-finder__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-light-purple-10);
  border: 1px solid var(--vt-card-edge, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-finder__thumb img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.vt-finder__body { display: block; min-width: 0; }

.vt-finder__row1 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.vt-finder__name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 19px;
  margin: 0;
}

.vt-finder__name a {
  color: var(--color-dark-purple);
  text-decoration: none;
}

.vt-finder__name a:hover { text-decoration: underline; }

.vt-finder__metric {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* vt_status, badged — the SAME pill as the lineup table's, deliberately:
   `.vt-lineup__badge` and this are the same fact in two blocks, and a reader who
   meets "END OF LIFE" on the compare table and a different shape on the finder
   reads them as two different claims. Values, not names: dark purple for
   coming-soon (white on light purple measures 4.11:1, and 10.5px bold is not
   large text), a quiet outline for end-of-life — a retired model should be
   findable, not shouted. */
.vt-finder__badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: max(10.5px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vt-finder__badge--coming-soon { background: var(--color-dark-purple); color: #ffffff; }
.vt-finder__badge--legacy {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Over a dark section the subtle fill and the border token both vanish into the
   backdrop — the same substitution the lineup badge makes. */
.vt-section.is-dark .vt-finder__badge--legacy {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  color: var(--vt-fg-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent);
}

.vt-finder__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 0;
}

.vt-finder__attr { display: inline-flex; gap: 6px; }
/* An explicit `display` beats the UA's [hidden] rule, so it has to be undone by
   hand — every sortable column is in the markup and hidden until the list is
   ordered by it. */
.vt-finder__attr[hidden] { display: none; }

.vt-finder__attr dt {
  color: var(--color-text-subtle);
  font-weight: var(--fw-bold);
  font-size: max(10px, var(--fs-floor, 0px));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
}

.vt-finder__attr dd { margin: 0; }

/* Spec figures, like the product cards' rows: 14px on handheld screens
   (launch list B29, 2026-09-30; breakpoint = the --fs-floor token's). */
@media screen and (max-width: 820px) {
  .vt-finder__metric,
  .vt-finder__attrs { font-size: 14px; }
}

.vt-finder__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.vt-finder__pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
}

.vt-finder__pick input { accent-color: var(--color-light-purple); }
.vt-finder__pick label { cursor: pointer; }

.vt-finder__more {
  font-size: 12.5px;
  color: var(--color-dark-purple);
}

.vt-finder__empty {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ---- the compare bar ---- */

.vt-finder__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 28px;
  background: rgba(20, 14, 32, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vt-finder__bar-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.vt-finder__bar-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  margin: 0;
  padding: 0;
}

.vt-finder__bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #fff;
  padding: 6px 8px 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.vt-finder__bar-chip button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}

.vt-finder__bar-chip button:hover { color: #fff; }

.vt-finder__bar-cta {
  font: inherit;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand, var(--color-light-purple));
  color: #fff;
}

.vt-finder__bar-cta:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- the side-by-side view ---- */

.vt-finder__compare { margin-top: 40px; }

.vt-finder__compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.vt-finder__compare-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 22px;
  color: var(--color-text);
  margin: 0;
}

.vt-finder__compare-close {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.vt-finder__compare-close:hover {
  border-color: var(--color-light-purple);
  color: var(--color-dark-purple);
}

.vt-finder__compare-grid {
  display: grid;
  grid-template-columns: 160px repeat(var(--cols, 2), 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.vt-finder__compare-head-cell {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 15px;
  color: var(--color-dark-purple);
  padding: 16px 18px;
  background: var(--color-light-purple-10);
  border-bottom: 1px solid var(--color-border);
}

.vt-finder__compare-label {
  font-size: 13px;
  color: var(--color-text-subtle);
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg-subtle);
}

.vt-finder__compare-cell {
  font-size: 14px;
  color: var(--color-text);
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-divider);
}

/* ---- facet wrapper: a panel section when wide, a bottom sheet when narrow ----
   Wide is the DEFAULT and needs no script: the <dialog> is forced to
   `display: contents` so the wrapper and the dialog both vanish from the layout
   and the fieldset flows into the panel exactly as it always did. The pill, the
   sheet header and the done button are hidden. Nothing here depends on JS, so a
   visitor without it gets the full stacked panel at every width. */
.vt-finder__facetwrap { display: contents; }
.vt-finder__sheet {
  display: contents;
  position: static;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.vt-finder__sheet-head,
.vt-finder__sheet-done,
.vt-finder__pill { display: none; }

/* ---- narrow ---- */

@container (max-width: 820px) {
  .vt-finder { grid-template-columns: 1fr; }
  .vt-finder__filters { position: static; }
}

/* ---- the bottom sheet ----
   Only once the script has said the block is narrow (`is-sheeted`): the class is
   what keeps a no-JS visitor out of a state where the filters are behind a
   button that cannot open. */
.vt-finder.is-sheeted .vt-finder__filters {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}
.vt-finder.is-sheeted .vt-finder__facetwrap { display: inline-flex; }
.vt-finder.is-sheeted .vt-finder__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
/* the chevron, so a pill reads as something that opens */
.vt-finder.is-sheeted .vt-finder__pill::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
/* a filter the visitor has narrowed wears the selected-chip purple, so the
   closed row still says which filters are doing something */
.vt-finder.is-sheeted .vt-finder__pill.is-set {
  background: var(--color-dark-purple);
  border-color: var(--color-dark-purple);
  color: #fff;
}
.vt-finder__pill-value:not(:empty)::before { content: "· "; }

/* The dialog becomes a dialog again. In the TOP LAYER, so `container-type` on
   .vt-finder cannot trap it the way it would trap position: fixed. */
.vt-finder.is-sheeted .vt-finder__sheet {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  overflow: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
}
.vt-finder.is-sheeted .vt-finder__sheet[open] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 22px;
}
.vt-finder.is-sheeted .vt-finder__sheet::backdrop { background: rgba(20, 16, 28, 0.45); }

.vt-finder.is-sheeted .vt-finder__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -20px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--color-divider);
}
.vt-finder__sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-text);
}
.vt-finder__sheet-close {
  font: inherit;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
}
.vt-finder.is-sheeted .vt-finder__sheet-done {
  display: block;
  font: inherit;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  font-weight: var(--fw-medium);
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-dark-purple);
  background: var(--color-dark-purple);
  color: #fff;
}
/* inside the sheet the facet is the whole content, so its own legend would just
   repeat the sheet's title */
.vt-finder.is-sheeted .vt-finder__sheet[open] .vt-finder__facet-label { display: none; }
.vt-finder.is-sheeted .vt-finder__sheet[open] .vt-finder__chips { gap: 10px; }

/* the apply button is the sheet's job now */
.vt-finder.is-sheeted .vt-finder__apply { display: none; }

@container (max-width: 560px) {
  .vt-finder__result,
  .vt-finder__result:not(:has(.vt-finder__thumb)) {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .vt-finder__action { align-items: flex-start; }
}