/* ==========================================================================
   PipeScope dynamic block styles.

   The frozen static site's CSS (style.css, copied verbatim) never had to style
   these classes — WordPress renders products through PHP blocks that did not
   exist in the static build. This file styles them using the same design
   tokens already defined in style.css, so cards/scores/tables/disclosure
   match the rest of the site instead of rendering as unstyled text.

   No content class, no page template, no post is touched by this file.
   ========================================================================== */

/* ---------- Content wrapper (single.html / page.html) ---------- */
.ps-article-body { padding-block: 2.5rem 3.5rem; }

/* ---------- Tri-state ---------- */
.ps-tri {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  border-radius: var(--r-pill);
  font-size: 0.85em;
  font-weight: 600;
}
.ps-tri--yes { background: var(--green-tint); color: var(--green); }
.ps-tri--no { background: var(--red-tint); color: var(--red); }
.ps-tri--unknown { background: var(--panel); color: var(--muted); }

/* ---------- Product card ---------- */
.ps-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 1.5rem;
  margin-block: 1.5rem;
}
.ps-card__badge {
  display: inline-block;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: var(--r-pill);
  margin-bottom: 0.75rem;
}
.ps-card__title { margin: 0 0 0.75rem; font-size: 1.35rem; }
.ps-card__img { max-width: 100%; height: auto; border-radius: var(--r); margin-bottom: 1rem; }
.ps-card__score {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.ps-card__score-num { font-size: 1.8rem; font-weight: 800; color: var(--navy); }
.ps-card__score-max { color: var(--muted); }
.ps-card__verdict { font-size: 1.06rem; margin: 0 0 0.75rem; }
.ps-card__angle { color: var(--slate); margin: 0 0 0.75rem; }
.ps-card__highlights { padding-left: 1.2em; margin: 0 0 0.75rem; }
.ps-card__highlights li { margin-bottom: 0.35em; }
.ps-card__limitation {
  background: var(--amber-tint);
  color: var(--amber);
  border-radius: var(--r-sm);
  padding: 0.6em 0.9em;
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}

/* ---------- Editorial score ---------- */
.ps-score {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-block: 1.5rem;
}
.ps-score__head { margin: 0 0 0.5rem; font-size: 1.2rem; }
.ps-score__total {
  font-size: 1.1rem;
  margin: 0 0 1rem;
}
.ps-score__total strong { font-size: 2rem; color: var(--blue); }
.ps-score__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ps-score__table th, .ps-score__table td {
  text-align: left;
  padding: 0.55em 0.7em;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ps-score__table thead th { color: var(--muted); font-weight: 600; font-size: 0.85em; }
.ps-score__disclaimer { color: var(--muted); font-size: 0.88rem; margin: 1rem 0 0; }

/* ---------- Quick picks ---------- */
.ps-picks { margin-block: 2rem; }
.ps-picks__head { margin: 0 0 1rem; }
.ps-picks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ps-picks__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: 1.25rem;
}
.ps-picks__item--top { border-color: var(--blue); box-shadow: var(--sh-md); }
.ps-picks__label {
  display: inline-block;
  background: var(--teal-tint);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--r-pill);
  margin: 0 0 0.6rem;
}
.ps-picks__title { margin: 0 0 0.5rem; font-size: 1.1rem; }
.ps-picks__reason { color: var(--slate); font-size: 0.95rem; margin: 0 0 0.75rem; }

/* ---------- Tables: comparison / spec / fit matrix ---------- */
.ps-compare, .ps-specs, .ps-fit {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--card);
}
.ps-compare caption, .ps-specs caption, .ps-fit caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 0.6rem;
  color: var(--navy);
}
.ps-compare th, .ps-compare td,
.ps-specs th, .ps-specs td,
.ps-fit th, .ps-fit td {
  text-align: left;
  padding: 0.65em 0.85em;
  border: 1px solid var(--border);
  vertical-align: top;
}
.ps-compare thead th, .ps-fit thead th {
  background: var(--panel);
  color: var(--navy);
  font-weight: 700;
}
.ps-specs th[scope="row"], .ps-compare th[scope="row"] { color: var(--navy); font-weight: 600; background: var(--panel-soft); }
.table-scroll { overflow-x: auto; margin-block: 1.5rem; border-radius: var(--r); }
.table-scroll--keep { -webkit-overflow-scrolling: touch; }

/* ---------- Pros / limitations ---------- */
.ps-proscons {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-block: 1.5rem;
}
.ps-proscons__col { padding: 1.1rem 1.25rem; border-radius: var(--r); }
.ps-proscons__col--pro { background: var(--green-tint); }
.ps-proscons__col--con { background: var(--red-tint); }
.ps-proscons__col h4 { margin: 0 0 0.6rem; }
.ps-proscons__col ul { margin: 0; padding-left: 1.2em; }
.ps-proscons__col li { margin-bottom: 0.4em; }

/* ---------- Provenance ---------- */
.ps-provenance {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
  font-size: 0.92rem;
}
.ps-provenance__item + .ps-provenance__item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ps-provenance__date { color: var(--muted); margin: 0.2rem 0 0.5rem; }
.ps-provenance__sources { margin: 0; padding-left: 1.2em; }
.ps-provenance__listing { color: var(--muted); font-style: italic; }

/* ---------- Related guides ---------- */
.ps-related { margin-block: 2rem; }
.ps-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.ps-related li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.75em 1em;
}
.ps-related__kicker { color: var(--teal); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Disclosure / funding status ---------- */
.ps-disclosure, .ps-funding {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  font-size: 0.95rem;
}
.ps-funding__head { margin: 0 0 0.5rem; font-size: 1.05rem; }

/* ---------- Methodology / author ---------- */
.ps-method { margin-block: 2rem; }
.ps-author {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-block: 2rem;
}
.ps-author h3 { margin: 0 0 0.3rem; }
.ps-author__role { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.6rem; }
.ps-author__bio { margin: 0; font-size: 0.95rem; }

/* ---------- CTA / buttons ---------- */
.ps-btn {
  display: inline-block;
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 700;
  padding: 0.7em 1.4em;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.ps-btn:hover { background: var(--blue-dark); color: var(--on-blue); }
.ps-btn--amazon { background: var(--amber); }
.ps-btn--amazon:hover { background: #8a3f07; }
.ps-cta { margin: 1rem 0; }
.ps-cta__note { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.4rem; }
.ps-cta--none { color: var(--muted); font-size: 0.92rem; font-style: italic; }
.ps-inline-cta {
  background: var(--teal-tint);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-block: 1.75rem;
}
.ps-inline-cta h3 { margin: 0 0 0.5rem; }

/* ---------- Errors (visible only to logged-in editors) ---------- */
.ps-block-error {
  background: var(--red-tint);
  color: var(--red);
  border-radius: var(--r-sm);
  padding: 0.75em 1em;
  margin-block: 1rem;
  font-size: 0.9rem;
}