/*
 * PinForge Interactive — Answer Finder, live mode.
 *
 * The static card's own styles ship inline with each block, so a post without
 * this plugin still reads well. Everything here applies only after pfx.js has
 * hydrated a finder (.pfx-live). Colours come from the --pfx-* variables
 * PinForge writes on each block from the site's colour theme.
 *
 * Every button state declares its own colour and background: themes such as
 * GeneratePress style `button:focus` / `a:hover` at higher specificity than a
 * single class, which would otherwise turn a tapped option white-on-white.
 */

.pfx [hidden] { display: none !important; }
.pfx-finder.pfx-live .pfx-static { display: none !important; }
.pfx-finder.pfx-live.pfx-started .pfx-start { display: none !important; }

.pfx-finder .pfx-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.pfx-finder .pfx-meta { font-size: 13px; color: var(--pfx-panel-muted); }

.pfx-finder .pfx-btn { font-family: inherit; cursor: pointer; border: 0; margin: 0; line-height: 1.2; text-decoration: none; -webkit-tap-highlight-color: transparent; }

.pfx-finder .pfx-btn-cta,
.pfx-finder .pfx-btn-cta:hover,
.pfx-finder .pfx-btn-cta:focus,
.pfx-finder .pfx-btn-cta:active,
.pfx-finder .pfx-btn-cta:visited {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  background: var(--pfx-cta); color: var(--pfx-cta-text);
  font-size: 16px; font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55);
}
.pfx-finder .pfx-btn-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pfx-finder .pfx-btn-cta:focus-visible { outline: 3px solid var(--pfx-ink); outline-offset: 2px; }
.pfx-finder .pfx-head .pfx-btn-cta:focus-visible { outline-color: var(--pfx-panel-text); }

.pfx-finder .pfx-btn-link,
.pfx-finder .pfx-btn-link:hover,
.pfx-finder .pfx-btn-link:focus,
.pfx-finder .pfx-btn-link:active {
  background: transparent; color: var(--pfx-accent);
  font-size: 14px; font-weight: 700; padding: 6px 4px; text-decoration: underline;
  box-shadow: none;
}
.pfx-finder .pfx-btn-link:focus-visible { outline: 2px solid var(--pfx-accent); outline-offset: 2px; }

.pfx-finder .pfx-app { padding: 18px 24px 22px; }
.pfx-finder .pfx-app:empty { display: none; }

.pfx-finder .pfx-q-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pfx-finder .pfx-count { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--pfx-muted); }
.pfx-finder .pfx-progress { height: 6px; border-radius: 999px; background: var(--pfx-surface); border: 1px solid var(--pfx-border); overflow: hidden; margin-bottom: 14px; }
.pfx-finder .pfx-progress-fill { height: 100%; background: var(--pfx-accent); transition: width .3s ease; }
.pfx-finder .pfx-q-text { margin: 0 0 14px 0; font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--pfx-ink); outline: none; }

.pfx-finder .pfx-opts { display: grid; gap: 10px; }
.pfx-finder .pfx-opt,
.pfx-finder .pfx-opt:hover,
.pfx-finder .pfx-opt:focus,
.pfx-finder .pfx-opt:active {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 12px 16px; border-radius: 14px; text-align: left;
  background: var(--pfx-card); color: var(--pfx-ink); border: 2px solid var(--pfx-border);
  font-size: 16px; font-weight: 700; box-shadow: none;
}
.pfx-finder .pfx-opt:hover { border-color: var(--pfx-accent); background: var(--pfx-surface); }
.pfx-finder .pfx-opt:focus-visible { outline: 3px solid var(--pfx-accent); outline-offset: 2px; }
.pfx-finder .pfx-opt-icon { font-size: 20px; line-height: 1; }
.pfx-finder .pfx-opt-label { flex: 1; }

.pfx-finder .pfx-result { display: flex; flex-direction: column; gap: 6px; }
.pfx-finder .pfx-result-label { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pfx-good); }
.pfx-finder .pfx-result-title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--pfx-ink); outline: none; }
.pfx-finder .pfx-result-figure { margin: 0; font-size: 26px; font-weight: 900; color: var(--pfx-good); font-variant-numeric: tabular-nums; }
.pfx-finder .pfx-result-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pfx-ink); }
.pfx-finder .pfx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }

.pfx-finder .pfx-q,
.pfx-finder .pfx-result { animation: pfx-in .25s ease-out both; }
@keyframes pfx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The heading a result sent the reader to, briefly highlighted on arrival. */
.pfx-target-flash { animation: pfx-flash 2.6s ease-out; border-radius: 6px; }
@keyframes pfx-flash { 0% { background-color: rgba(245, 184, 61, .45); } 100% { background-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .pfx-finder .pfx-q,
  .pfx-finder .pfx-result,
  .pfx-target-flash { animation: none; }
  .pfx-finder .pfx-progress-fill { transition: none; }
  .pfx-finder .pfx-btn-cta:hover { transform: none; }
}