/* Precision Labs — "Find your protocol" finder.
   Loaded only on page-find-your-protocol.php.

   Everything visual here is assembled from base.css's kit — .pl-card, .pl-panel,
   .pl-info, .pl-btn, .pl-chip, .pl-grid, .pl-h2/h3/h4, .pl-lead, .pl-eyebrow.
   Nothing in that kit is redefined; this file adds only the arrangement the
   finder needs, and every colour is a var(--pl-*). Corners stay square.

   The namespace is .pl-pf, not .pl-finder: shop.css already owns .pl-finder for
   the dark "Not sure which of these?" card in the shop sidebar, and reusing that
   name would restyle it from a page it never appears on. */

/* ── head ───────────────────────────────────────── */

.pl-pf__head { max-width: 760px; }
.pl-pf__h { margin-top: 10px; }
.pl-pf__lead { margin-top: 14px; }

.pl-pf__ruo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pl-bd);
  color: var(--pl-muted);
}

/* ── progress ───────────────────────────────────── */

.pl-pf__progress { margin-top: 34px; }

.pl-pf__count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pl-navy);
}

.pl-pf__dots {
  margin-top: 12px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* The 2px navy top rule is the homepage three-step row's device, reused so the
   two "how this works" surfaces read as one system. */
.pl-pf__dot {
  border-top: 2px solid var(--pl-bd);
  padding-top: 10px;
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--pl-faint);
}
.pl-pf__dot.is-done,
.pl-pf__dot.is-on { border-top-color: var(--pl-navy); }
.pl-pf__dot.is-on { color: var(--pl-ink); }
.pl-pf__dot.is-done { color: var(--pl-muted); }

.pl-pf__dotn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}
.pl-pf__dotl {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ── the form ───────────────────────────────────── */

.pl-pf__form { margin-top: 26px; }

.pl-pf__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* A fieldset given `display` by an author rule outranks the UA's [hidden] rule
   and would stay on screen for ever, so the attribute is re-honoured here. The
   same trap as .pl-searchpanel[hidden] in layout.css. */
.pl-pf__step[hidden] { display: none; }

/* Focus is moved here when finder.js switches step; the ring would otherwise
   trace the full-width fieldset, which reads as an error state. */
.pl-pf__step:focus { outline: none; }
.pl-pf__step:focus-visible { outline: none; }

.pl-pf__legend { padding: 0; text-wrap: balance; }

.pl-pf__help {
  margin-top: 10px;
  max-width: 720px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pl-muted);
  text-wrap: pretty;
}

.pl-pf__err {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--pl-info-bg);
  border: 1px solid var(--pl-info-bd);
  color: var(--pl-navy);
  font-size: 13.5px;
  font-weight: 600;
}
.pl-pf__err[hidden] { display: none; }

/* ── options ────────────────────────────────────── */

/* min() keeps the track from demanding 280px inside a 339px phone gutter, which
   is what forces a grid to overflow rather than wrap. */
.pl-pf__opts {
  margin-top: 20px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.pl-pf__opt {
  position: relative; /* anchors the .pl-sr radio inside its own card */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 16px 18px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd-strong);
  cursor: pointer;
  transition: border-color .16s;
}
.pl-pf__opt:hover { border-color: var(--pl-navy); }

/* Two selectors on purpose: :has() paints the selection with no script at all,
   .is-on is what the server prints and what finder.js toggles. The padding drops
   by 1px so the heavier border does not resize the card. */
.pl-pf__opt:has(input:checked),
.pl-pf__opt.is-on {
  border: 2px solid var(--pl-navy);
  padding: 15px 17px;
}

/* The radio itself is carried by base.css's .pl-sr — present, focusable and
   submitted, but out of the visual layer. Everything below draws it.

   The state selectors are adjacent-sibling, not :has(): a focus ring is not a
   nicety, and an outline that only appears where :has() is supported is the
   kind of gap nobody notices until a keyboard user is lost on the page. */
.pl-pf__mark {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd-strong);
}
.pl-pf__opt:hover .pl-pf__mark { border-color: var(--pl-navy); }

.pl-pf__radio:checked + .pl-pf__mark { border-color: var(--pl-navy); }
.pl-pf__radio:checked + .pl-pf__mark::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  background: var(--pl-navy);
}

.pl-pf__radio:focus-visible + .pl-pf__mark {
  outline: 2px solid var(--pl-navy);
  outline-offset: 3px;
}

.pl-pf__opt-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.pl-pf__opt-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--pl-ink);
  overflow-wrap: anywhere;
}
.pl-pf__opt-icon { display: flex; flex: none; color: var(--pl-navy); }

.pl-pf__opt-hint {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pl-muted);
  text-wrap: pretty;
}

.pl-pf__opt-meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-faint);
}

/* ── step navigation ────────────────────────────── */

.pl-pf__nav {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pl-pf__next { margin-left: auto; }

/* ── results ────────────────────────────────────── */

.pl-pf__results { margin-top: 30px; }

.pl-pf__summary {
  padding: 18px 20px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
}

.pl-pf__sumlist {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.pl-pf__sumitem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.pl-pf__sumk {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-faint);
}
.pl-pf__sumv {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pl-ink);
  overflow-wrap: anywhere;
}
.pl-pf__restart { margin-top: 14px; }

.pl-pf__rhead { margin-top: 34px; }
.pl-pf__rh { text-wrap: balance; }
.pl-pf__why {
  margin-top: 10px;
  max-width: 760px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pl-muted);
  text-wrap: pretty;
}
.pl-pf__why--note { color: var(--pl-navy); font-weight: 600; }

.pl-pf__grid { margin-top: 22px; }

/* ── "order as one box" ─────────────────────────── */

.pl-pf__box {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid var(--pl-navy);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 30px;
  align-items: start;
}
.pl-pf__box-copy { display: grid; gap: 10px; align-content: start; }
.pl-pf__box-grid { grid-template-columns: minmax(0, 1fr); }

.pl-pf__more { margin-top: 22px; }

/* ── disclaimer ─────────────────────────────────── */

.pl-pf__note {
  margin-top: 34px;
  display: grid;
  gap: 10px;
  padding: 22px 24px;
}
.pl-pf__note p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pl-t3);
  text-wrap: pretty;
}
.pl-pf__note .pl-eyebrow { font-size: 12px; }

/* ── empty states ───────────────────────────────── */

.pl-pf__empty { margin-top: 30px; display: grid; gap: 12px; }
.pl-pf__empty-cta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* ── responsive ─────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1199px) {
  /* base.css keeps .pl-grid--3 at three tracks here, which squeezes a product
     card to about 240px — narrower than the shop's own two-up column. */
  .pl-pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-pf__box { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 1199px) {
  /* Touch, not width, is what makes a small target small — the same reasoning
     mobile.css applies up to this breakpoint. */
  .pl-pf__opt { min-height: 56px; }
  .pl-pf__change,
  .pl-pf__restart,
  .pl-pf__back,
  .pl-pf__more .pl-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  .pl-pf__dots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
  .pl-pf__dotl { font-size: 13px; }

  .pl-pf__opts { grid-template-columns: minmax(0, 1fr); }
  .pl-pf__opt { padding: 14px 15px; }
  .pl-pf__opt:has(input:checked),
  .pl-pf__opt.is-on { padding: 13px 14px; }
  .pl-pf__opt-name { font-size: 16px; }
  .pl-pf__opt-hint { font-size: 13px; }

  /* The primary action goes full width and sits under Back, so the thumb lands
     on it without covering the answer it just chose. */
  .pl-pf__nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pl-pf__next {
    margin-left: 0;
    width: 100%;
    min-height: 44px;
  }
  .pl-pf__back { justify-content: center; }

  .pl-pf__box { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pl-pf__summary { padding: 16px 16px; }
  .pl-pf__sumlist { gap: 12px 20px; }
  .pl-pf__note { padding: 18px 16px; }

  /* Nothing in this file may fall under the 12px floor the mobile audit holds
     the rest of the theme to. Enumerated rather than blanket-set so a new rule
     shows up in the audit instead of being swallowed by a catch-all. */
  .pl-pf__count,
  .pl-pf__dotn,
  .pl-pf__opt-meta,
  .pl-pf__sumk,
  .pl-pf__note .pl-eyebrow,
  .pl-pf__ruo { font-size: 12px; }

  .pl-pf__help,
  .pl-pf__why,
  .pl-pf__err,
  .pl-pf__note p,
  .pl-pf__sumv { font-size: 13.5px; }
}