/* AssistPPC — the feed check result panel.
   Its own file because it renders in two places: the marketing hero (with
   landing.css) and the feed source step in the app (with app.css alone). One
   copy, so the two can't drift — same reason templates/feed-check-result.php is
   the only renderer. Reads the tokens defined in app.css. */

/* ── Result panel ──────────────────────────────────────────────────────────── */
.fc-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-lg);transition:opacity .15s ease}
.fc-panel.is-busy{opacity:.5}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.fc-src{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--text-dim);
  word-break:break-all;min-width:0}
.fc-tag{flex:none;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:var(--surface-3);color:var(--text-dim)}
.fc-tag.ok{background:var(--success-soft);color:var(--success)}
.fc-tag.bad{background:var(--danger-soft);color:var(--danger)}
.fc-body{padding:16px}

.fc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.fc-stat{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.fc-stat.good{border-color:#b7e2ce;background:var(--success-soft)}
.fc-stat.warn{border-color:var(--warn-line);background:var(--warn-soft)}
.fc-stat .n{display:block;font-size:1.3rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums}
.fc-stat.good .n{color:var(--success)}
.fc-stat.warn .n{color:var(--warn)}
.fc-stat .k{display:block;margin-top:3px;font-size:.72rem;color:var(--text-dim);line-height:1.3}

/* Every one of these is a <p> inside .hero, and app.css sets `.hero p` at
   (0,1,1) — a bare class loses to it and the panel's labels render at body
   size. Scoped to .fc-panel so the cascade lands the right way round. */
.fc-panel .fc-k{margin:0 0 8px;font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-dim)}
.fc-panel .fc-sample-t{margin:-4px 0 8px;font-size:.82rem;font-weight:600;color:var(--text);line-height:1.4}
.fc-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.fc-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 11px;border:1px solid var(--warn-line);border-radius:8px;background:var(--warn-soft);
  font-size:.8rem;color:var(--text)}
.fc-list li b{flex:none;font-weight:800;color:var(--warn);font-variant-numeric:tabular-nums}
.fc-list.soft li{border-color:var(--border);background:var(--surface-2);color:var(--text-dim)}
.fc-list.soft li b{color:var(--text-dim)}
.fc-list li.fc-more{background:none;border-style:dashed;color:var(--text-dim);font-size:.74rem}
.fc-panel .fc-all-good{margin:0 0 16px;padding:10px 12px;border:1px solid #b7e2ce;border-radius:8px;
  background:var(--success-soft);color:var(--success);font-size:.82rem;font-weight:600}

.fc-maps{display:flex;flex-direction:column;gap:5px}
.fc-map{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1.3fr);gap:8px;align-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}
.fc-map .src,.fc-map .out{padding:5px 8px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fc-map .src{background:var(--surface-3);color:var(--text-dim)}
.fc-map .out{background:var(--primary-soft);color:var(--text)}
.fc-map .out b{font-weight:600;color:var(--primary-ink)}
.fc-map .ar{text-align:center;color:var(--border-strong)}

.fc-panel .fc-note{margin:14px 0 0;font-size:.72rem;line-height:1.5;color:var(--text-dim)}
.fc-panel .fc-err{margin:0 0 10px;font-size:.9rem;font-weight:600;color:var(--danger)}
.fc-panel .fc-err-help{margin:0;font-size:.8rem;line-height:1.6;color:var(--text-dim)}
.fc-panel .fc-err-help code{font-size:.74rem;background:var(--surface-3);border-radius:4px;padding:1px 5px}
.fc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.fc-foot-alt{font-size:.78rem;color:var(--text-dim)}

/* 520px, not 900px. This is the PANEL's own width, and the panel is not narrow
   on a narrow viewport — below 900px the hero stacks, which makes it wider. The
   only time it is genuinely tight is on a phone, and in the app's source step it
   sits in a 520px column whatever the viewport does. */
@media (max-width:520px){
  .fc-stats{grid-template-columns:1fr}
  .fc-stat{display:flex;align-items:baseline;gap:10px}
  .fc-stat .k{margin-top:0}
  .fc-map{grid-template-columns:1fr;gap:3px}
  .fc-map .ar{display:none}
}