/* ════════════════════════════════════════════════════════════════════════
   css/pricing-find.css, the price list filter on /pricing (P.07)
   service.tnaado.ca · linked ONLY from /pricing, loaded after
   css/reference-pricing.css.

   A SEPARATE SHEET ON PURPOSE. Ten agents are in this repo at once and
   css/reference-pricing.css is being written by another pass. Everything
   here is additive: new class names only, no selector in this file exists
   in that one, and nothing here overrides css/chrome.css.

   THE MOTION IS READER-STARTED, NOT SCROLL-DRIVEN. css/firm-pages.css
   records Ethan's ruling, "no scroll animations, not what I asked for",
   so there is no observer, no scrub and no reveal in this file. The only
   thing that moves is what moves because someone typed.

   TOKENS ONLY. --plate, --hair-ink, --dim-ink, --bone, --red-ink, --mono,
   --sans, --ease all come from css/reference.css. No invented values.
   ════════════════════════════════════════════════════════════════════════ */

.pfind {
  display: grid;
  grid-template-columns: minmax(0, 21rem) auto;
  justify-content: start;
  align-items: center;
  gap: .5rem 1.1rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.9rem);
}
.pfind[hidden] { display: none; }

/* The label is the section's promise, said once and then kept. */
.pfind__l {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim-ink);
}

.pfind__i {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: .72rem .9rem;
  background: var(--plate);
  border: 1px solid var(--hair-ink);
  border-radius: 2px;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.2;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.pfind__i::placeholder { color: var(--dim-ink); }
.pfind__i:hover { border-color: var(--dim-ink); }
.pfind__i:focus-visible {
  outline: 2px solid var(--red-ink);
  outline-offset: 2px;
  border-color: var(--red-ink);
}

/* The readout. It occupies its row whether or not it has text, so the
   tables below do not jump up and down as the count changes. */
.pfind__n {
  grid-column: 2;
  justify-self: end;
  margin: 0;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--dim-ink);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.pfind.is-on .pfind__n { opacity: 1; transform: none; }

/* THE FILTERED LIST. Rows are hidden with the `hidden` attribute by
   js/pricing-find.js, never removed, so what is left is the same table,
   shorter. The surviving rows settle rather than snap; there is no stagger
   and no per-row delay, because forty rows animating individually is a
   list that has stopped being readable. */
#list .pfind ~ .scroller tbody tr {
  transition: background-color .18s var(--ease);
}
#list .pfind.is-on ~ .scroller {
  animation: pfind-settle .22s var(--ease) both;
}

@keyframes pfind-settle {
  from { opacity: .45; transform: translateY(-2px); }
  to   { opacity: 1;   transform: none; }
}

@media (max-width: 560px) {
  .pfind { grid-template-columns: 1fr; }
  .pfind__i, .pfind__n { grid-column: 1; }
  .pfind__n { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .pfind__i,
  .pfind__n,
  #list .pfind ~ .scroller tbody tr { transition: none; }
  .pfind__n { transform: none; }
  #list .pfind.is-on ~ .scroller { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE CROSS-REFERENCE ROW under each answer in P.01.

   WHAT IT REPLACED. Every answer used to be followed by a sentence whose
   whole job was to say where the same fact lives elsewhere, "The tier and
   what it holds are set out under build tiers. How the builds themselves
   work is on websites." Eight of those in a row is the texture Ethan
   called ranting: a fact, then a sentence about the fact's filing.

   The links all survive. Only the sentences around them are gone.
   ════════════════════════════════════════════════════════════════════════ */

.qa__see {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .85rem;
  margin: .7rem 0 0;
  font-size: .8125rem;
}
.qa__see > span {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim-ink);
}
.qa__see a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-ink);
  padding-bottom: .1em;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
@media (hover: hover) {
  .qa__see a:hover { color: var(--red); border-color: var(--red-ink); }
}
.qa__see a:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .qa__see a { transition: none; } }