/* seo-diagnostics/assets/css/seodiag.css — uses GhostStat tokens. */
.sd-h-info{font-size:.7em;vertical-align:middle;cursor:help}

/* summary chips */
.sd-chip{border:1px solid var(--line,#E9EDF3);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;
  font-weight:600;color:var(--ink-2,#3C4350);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sd-chip:hover{background:var(--bg,#F6F8FB)}
.sd-chip.active{border-color:var(--accent,#1FA463);color:var(--accent-2,#178A52);background:var(--accent-soft,#E7F5EC)}
.sd-chip-n{background:var(--bg,#F6F8FB);border-radius:999px;padding:0 7px;font-size:11px;font-weight:700}
.sd-chip.active .sd-chip-n{background:#fff}

/* diagnosis badges — one colour per failure type */
.sd-badge{display:inline-block;border-radius:6px;padding:3px 9px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.sd-ok{background:#1FA463}
.sd-intent_mismatch{background:#E0533D}
.sd-content_depth{background:#D97706}
.sd-expectation_break{background:#B45309}
.sd-serp_return{background:#DC2626}
.sd-trust_gap{background:#7C3AED}
.sd-conversion_blocker{background:#2563EB}
.sd-ux_friction{background:#DB2777}

/* confidence bar in the table */
.sd-conf{display:inline-block;width:60px;height:6px;background:var(--line,#E9EDF3);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:6px}
.sd-conf-bar{height:100%;background:var(--accent,#1FA463)}
.sd-conf-n{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px}
.sd-table .sd-url a{color:var(--accent-2,#178A52);text-decoration:none;word-break:break-all}
.sd-table .sd-url a:hover{text-decoration:underline}

/* detail */
.sd-url-lg{font-weight:700;word-break:break-all;color:var(--ink,#1A1D24)}
.sd-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sd-metric{border:1px solid var(--line,#E9EDF3);border-radius:8px;padding:10px}
.sd-metric-lbl{font-size:11.5px;color:var(--muted,#8C95A1);font-weight:600;margin-bottom:3px}
.sd-metric-val{font-size:18px;font-weight:800;color:var(--ink,#1A1D24);font-variant-numeric:tabular-nums}
.sd-fixes{margin:0;padding-left:18px}
.sd-fixes li{margin-bottom:8px;font-size:13.5px;color:var(--ink-2,#3C4350)}

/* per-rule score bars */
.sd-rscore{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.sd-rscore-lbl{flex:0 0 130px;font-size:12.5px;color:var(--ink-2,#3C4350)}
.sd-rscore-bar{flex:1;height:8px;background:var(--line,#E9EDF3);border-radius:4px;overflow:hidden}
.sd-rscore-fill{height:100%}
.sd-rscore-n{flex:0 0 28px;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

/* trend dots */
.sd-trend{display:flex;flex-wrap:wrap;gap:5px}
.sd-trend-dot{width:12px;height:12px;border-radius:50%;display:inline-block;cursor:help}

/* zero horizontal scroll on mobile */
@media (max-width:640px){
  .sd-metrics{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .sd-rscore-lbl{flex-basis:96px}
}

/* keyword tie-in panel */
.sd-kw-card{border-left:3px solid var(--accent,#1FA463)}
.sd-kw-insight{font-size:14px;color:var(--ink-2,#3C4350);margin:2px 0 12px}
.sd-kw-head{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.sd-kw-stat{font-size:13px;color:var(--muted,#8C95A1)}
.sd-kw-stat b{font-size:18px;color:var(--ink,#1A1D24);font-variant-numeric:tabular-nums;margin-right:4px}
.sd-kw-table .sd-kw-term{font-weight:600;color:var(--ink-2,#3C4350)}