/* Rapyder Case Study Portal — the SEO & readability panel.

   Its own stylesheet, enqueued by Seo\Analysis alongside the script that
   draws the panel. That way the styles arrive on every surface the panel
   does — the board, the front-end form and the approver's standalone edit
   page — and on none where Yoast is unavailable and the panel never renders.

   Every token carries a fallback. On the form it inherits form.css; on the
   approver's standalone page, which defines its own smaller set and never
   loads form.css, --soft and --radius simply do not exist. Custom properties
   resolve at use time, so the fallbacks make this stylesheet independent of
   load order and of which page it lands on. */

.rcsp-seo{margin:4px 0 14px}

.rcsp-seo-off,.rcsp-seo-none,.rcsp-seo-warn{font-size:13.5px;color:var(--dim,#666);
  background:var(--soft,#f4f5f7);border-radius:10px;padding:13px 16px;margin:0 0 12px}
.rcsp-seo-warn{background:#fff8ec;color:#8a6d2f;border-left:3px solid #d08700;
  border-radius:0 10px 10px 0}
.rcsp-seo-off{background:#fdecec;color:var(--primary,#C40000)}

/* --- the two scores ---------------------------------------------------- */
.rcsp-seo-dials{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.rcsp-seo-dial{flex:1 1 150px;background:#fff;border:1px solid var(--line,#e3e3e3);
  border-left-width:4px;border-radius:10px;padding:12px 16px}
.rcsp-seo-dial b{display:block;font-size:26px;line-height:1.1;font-weight:700}
.rcsp-seo-dial span{display:block;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--dim,#666);font-weight:700;margin-top:2px}
.rcsp-seo-dial em{font-style:normal;font-size:12.5px;color:var(--dim,#666)}
.rcsp-seo-dial.good{border-left-color:#1d6f2f}
.rcsp-seo-dial.good b{color:#1d6f2f}
.rcsp-seo-dial.ok{border-left-color:#d08700}
.rcsp-seo-dial.ok b{color:#a8500a}
.rcsp-seo-dial.bad{border-left-color:var(--primary,#C40000)}
.rcsp-seo-dial.bad b{color:var(--primary,#C40000)}
.rcsp-seo-dial.na{border-left-color:#d1d5db}
.rcsp-seo-dial.na b{color:#9ca3af}

/* --- the two checklists ------------------------------------------------ */
.rcsp-seo-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rcsp-seo-cols h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dim,#666);margin:0 0 8px;font-weight:700}
.rcsp-seo-group{font-size:12px;font-weight:700;color:#374151;margin:12px 0 5px;
  display:flex;align-items:center;gap:7px}
.rcsp-seo-group span{background:var(--soft,#f4f5f7);border-radius:20px;padding:1px 8px;
  font-size:11px;color:var(--dim,#666)}
.rcsp-seo-cols ul{list-style:none;margin:0;padding:0}
.rcsp-seo-cols li{display:flex;gap:9px;align-items:flex-start;
  font-size:13.5px;line-height:1.5;padding:5px 0;color:#374151}
.rcsp-seo-cols li i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px}
.rcsp-seo-cols li.good i{background:#1d6f2f}
.rcsp-seo-cols li.ok i{background:#d08700}
.rcsp-seo-cols li.bad i{background:var(--primary,#C40000)}
.rcsp-seo-cols li.na i{background:#d1d5db}

.rcsp-seo-foot{font-size:12px;color:var(--dim,#666);margin:16px 0 0;
  padding-top:12px;border-top:1px solid var(--line,#e3e3e3);line-height:1.55}

/* --- the chip that rides with the progress bar ------------------------- */
.rcsp-seo-badge{font-size:12px;font-weight:700;border-radius:20px;
  padding:3px 11px;white-space:nowrap;margin-left:auto}
.rcsp-seo-badge.good{background:#e7f4ea;color:#1d6f2f}
.rcsp-seo-badge.ok{background:#fff3e0;color:#a8500a}
.rcsp-seo-badge.bad{background:#fdecec;color:var(--primary,#C40000)}
.rcsp-seo-badge.na{background:var(--soft,#f4f5f7);color:var(--dim,#666)}

@media(max-width:720px){
  .rcsp-seo-cols{grid-template-columns:1fr;gap:6px}
  .rcsp-seo-badge{margin-left:0}
}