/* ============================================================
   ContentSERP V2 — PAGES (R2 SERP Intelligence workspace)
   ============================================================ */

/* ── Analyzer control panel ─────────────────────────── */
.cs-analyzer { display: flex; flex-direction: column; gap: var(--cs-space-4); }
.cs-analyzer__fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--cs-space-3); }
.cs-analyzer__actions { display: flex; align-items: center; gap: var(--cs-space-3); flex-wrap: wrap; }
.cs-analyzer__cost { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); }

/* ── Result header / metadata ───────────────────────── */
.cs-result-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-3);
    padding: var(--cs-space-3) var(--cs-space-4);
    background: var(--cs-surface-muted);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
}
.cs-result-header__keyword { font-weight: 700; font-size: var(--cs-font-size-lg); overflow-wrap: anywhere; }
.cs-result-header__meta { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); color: var(--cs-text-secondary); font-size: var(--cs-font-size-sm); }
.cs-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.cs-reuse-note { display: flex; gap: var(--cs-space-2); align-items: center; padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-sm); background: var(--cs-info-soft); color: #075985; font-size: var(--cs-font-size-sm); }

/* ── Overview ───────────────────────────────────────── */
.cs-overview { display: flex; flex-direction: column; gap: var(--cs-space-4); }
.cs-kv { display: flex; flex-wrap: wrap; gap: var(--cs-space-2) var(--cs-space-4); padding: var(--cs-space-2) 0; border-bottom: 1px solid var(--cs-border); }
.cs-kv__label { flex: 0 0 150px; min-width: 0; font-size: var(--cs-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-text-muted); padding-top: 2px; overflow-wrap: anywhere; }
.cs-kv__value { flex: 1 1 260px; min-width: 0; font-size: var(--cs-font-size-md); overflow-wrap: anywhere; }
.cs-intent-badge { font-weight: 800; font-size: var(--cs-font-size-lg); color: var(--cs-text); }
.cs-winning-callout { background: var(--cs-primary-soft); border: 1px solid #c7d2fe; border-radius: var(--cs-radius-md); padding: var(--cs-space-4); }

/* ── Competitors ────────────────────────────────────── */
.cs-benchmark-strip { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); padding: var(--cs-space-3) var(--cs-space-4); background: var(--cs-surface-muted); border-radius: var(--cs-radius-md); border: 1px solid var(--cs-border); }
.cs-benchmark-item { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.cs-benchmark-item__value { font-weight: 800; font-size: var(--cs-font-size-lg); }
.cs-benchmark-item__label { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cs-methodology { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); margin-top: var(--cs-space-2); overflow-wrap: anywhere; }

/* ── Gap cards ──────────────────────────────────────── */
.cs-gap-list { display: flex; flex-direction: column; gap: var(--cs-space-3); }
.cs-gap-card { border: 1px solid var(--cs-border); border-left: 3px solid var(--cs-border-strong); border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-4); background: var(--cs-surface); }
.cs-gap-card--high { border-left-color: var(--cs-danger); }
.cs-gap-card--medium { border-left-color: var(--cs-warning); }
.cs-gap-card--low { border-left-color: var(--cs-border-strong); }
.cs-gap-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); font-weight: 700; font-size: var(--cs-font-size-md); overflow-wrap: anywhere; }
.cs-gap-card__body { margin-top: var(--cs-space-2); display: flex; flex-direction: column; gap: var(--cs-space-1); font-size: var(--cs-font-size-sm); color: var(--cs-text-secondary); overflow-wrap: anywhere; }
.cs-gap-card__evidence { color: var(--cs-text); }
.cs-gap-score { font-weight: 800; }

/* ── Brief blueprint ────────────────────────────────── */
.cs-brief-target { display: flex; gap: var(--cs-space-4); flex-wrap: wrap; }
.cs-brief-outline ol { margin: var(--cs-space-2) 0 0 var(--cs-space-5); padding: 0; overflow-wrap: anywhere; }
.cs-brief-outline li { margin-bottom: var(--cs-space-2); }
.cs-brief-section { margin-bottom: var(--cs-space-3); }

/* ── Questions / terms / features ───────────────────── */
.cs-question-group { margin-bottom: var(--cs-space-3); }
.cs-question-list { display: flex; flex-direction: column; gap: var(--cs-space-1); }
.cs-question-item { display: flex; gap: var(--cs-space-2); align-items: flex-start; font-size: var(--cs-font-size-sm); overflow-wrap: anywhere; }
.cs-term-chip { display: inline-flex; flex-direction: column; gap: 1px; background: var(--cs-surface-muted); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); padding: var(--cs-space-2) var(--cs-space-3); font-size: var(--cs-font-size-xs); margin: 2px 4px 2px 0; max-width: 100%; }
.cs-term-chip__name { font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-term-chip__meta { color: var(--cs-text-muted); overflow-wrap: anywhere; }
.cs-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--cs-space-3); }
.cs-feature-item { display: flex; flex-direction: column; gap: 2px; background: var(--cs-surface-muted); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); padding: var(--cs-space-3); }
.cs-feature-item__name { font-weight: 600; font-size: var(--cs-font-size-sm); overflow-wrap: anywhere; }
.cs-feature-item__count { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); }

/* ── Tab panel ──────────────────────────────────────── */
.cs-tabpanel { min-width: 0; }

/* ── Evidence & Sources (P2 R2-remediation — F3) ────── */
.cs-evidence { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: var(--cs-space-4); background: var(--cs-surface); }
.cs-evidence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-evidence-item { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--cs-font-size-sm); overflow-wrap: anywhere; }
.cs-evidence-item span { color: var(--cs-text); }
.cs-evidence-source { color: var(--cs-primary); font-size: var(--cs-font-size-xs); overflow-wrap: anywhere; }

/* ── R3 feature pages ─────────────────────────────── */
.cs-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--cs-space-2) var(--cs-space-4); margin-bottom: var(--cs-space-4); }
.cs-article-actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); margin-bottom: var(--cs-space-4); }

/* ── Article Detail SEO Metadata section (P3) ──────── */
.cs-seo-meta { margin-bottom: var(--cs-space-4); }
.cs-seo-meta .cs-kv-grid { margin-bottom: 0; }
.cs-section-heading { margin: 0 0 var(--cs-space-2); font-size: var(--cs-font-size-lg); font-weight: 700; color: var(--cs-text); }
.cs-seo-meta .cs-kv__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cs-space-2); }

.cs-article-preview { overflow-wrap: anywhere; line-height: 1.65; font-size: var(--cs-font-size-md); }
.cs-article-preview h1, .cs-article-preview h2, .cs-article-preview h3 { margin: 1.2em 0 0.5em; }
.cs-article-preview img { max-width: 100%; height: auto; }
.cs-article-preview a { color: var(--cs-primary); }
.cs-review-draft { max-height: 55vh; overflow-y: auto; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: var(--cs-space-4); background: var(--cs-surface-muted); }

/* ── WordPress publish panel (R3 closure) ──────────── */
.cs-publish-panel { margin-top: var(--cs-space-4); padding-top: var(--cs-space-3); border-top: 1px solid var(--cs-border); }
.cs-publish-panel .cs-analyzer__actions { margin-top: var(--cs-space-2); }
.cs-publish-link { margin-top: 4px; }
.cs-publish-link a { color: var(--cs-primary); overflow-wrap: anywhere; }

/* ── Atomize / social content (R4) ─────────────────── */
.cs-atomize-panel { margin-top: var(--cs-space-3); }
.cs-atomize-blocks { display: flex; flex-direction: column; gap: var(--cs-space-3); }
.cs-atomize-block { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-4); background: var(--cs-surface); }
.cs-atomize-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-2); margin-bottom: var(--cs-space-2); }
.cs-atomize-block__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
.cs-atomize-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--cs-font-size-sm); line-height: 1.6; color: var(--cs-text); }

/* Article generation two-mode options (20 / 25 credits) + image-prompts result */
.cs-gen-modes { margin: 0 0 var(--cs-space-2); padding: 0; border: none; display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-gen-modes__legend { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-text-secondary); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--cs-space-1); }
.cs-gen-mode { display: flex; align-items: center; gap: var(--cs-space-2); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); background: var(--cs-surface); cursor: pointer; }
.cs-gen-mode--selected { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-gen-mode input[type="radio"] { accent-color: var(--cs-primary); flex: 0 0 auto; }
.cs-gen-mode__label { font-size: var(--cs-font-size-md); font-weight: 600; color: var(--cs-text); }
.cs-gen-mode__cost { margin-left: auto; font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-text-secondary); background: var(--cs-surface-muted); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); padding: 2px var(--cs-space-2); }
.cs-gen-mode--selected .cs-gen-mode__cost { color: var(--cs-primary); border-color: var(--cs-primary); }

.cs-gen-prompts { margin-top: var(--cs-space-4); display: flex; flex-direction: column; gap: var(--cs-space-3); }
.cs-gen-prompts__title { font-size: var(--cs-font-size-lg); font-weight: 700; color: var(--cs-text); margin: 0; }
.cs-gen-prompt { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-4); background: var(--cs-surface); }
.cs-gen-prompt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-2); margin-bottom: var(--cs-space-2); }
.cs-gen-prompt__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
.cs-gen-prompt__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--cs-font-size-sm); line-height: 1.6; color: var(--cs-text); }


.cs-check-row { display: flex; gap: var(--cs-space-2); padding: var(--cs-space-2) 0; border-bottom: 1px solid var(--cs-border); align-items: flex-start; }
.cs-check-row:last-child { border-bottom: none; }
.cs-check-row__icon { flex: 0 0 20px; font-weight: 700; }
.cs-check-row__body { flex: 1; min-width: 0; }
.cs-check-row__label { font-size: var(--cs-font-size-sm); overflow-wrap: anywhere; }
.cs-check-row__value { color: var(--cs-text-secondary); font-size: var(--cs-font-size-xs); }
.cs-check-row__fix { color: var(--cs-danger); font-size: var(--cs-font-size-xs); margin-top: 2px; }

.cs-seo-summary { display: flex; gap: var(--cs-space-4); align-items: center; flex-wrap: wrap; }
.cs-seo-summary__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.cs-seo-summary__grade { display: flex; }
.cs-recommendation { font-size: var(--cs-font-size-md); line-height: 1.6; overflow-wrap: anywhere; }
.cs-h2-list { margin: 0; padding-left: var(--cs-space-5); overflow-wrap: anywhere; }
.cs-order-list { margin: 0; padding-left: var(--cs-space-5); overflow-wrap: anywhere; }
.cs-link-rules { margin: 0; padding-left: var(--cs-space-5); overflow-wrap: anywhere; }

.cs-cluster-list { display: flex; flex-direction: column; gap: var(--cs-space-3); }
.cs-cluster-card { border: 1px solid var(--cs-border); border-left: 3px solid var(--cs-primary); border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-4); background: var(--cs-surface); }
.cs-cluster-card__title { font-weight: 700; font-size: var(--cs-font-size-md); overflow-wrap: anywhere; }
.cs-cluster-card__order { color: var(--cs-text-muted); font-weight: 600; font-size: var(--cs-font-size-xs); }
.cs-cluster-card__title-lg { font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; }

/* ── Responsive: competitor table → cards ≤768 ──────── */
@media (max-width: 768px) {
    .cs-analyzer__fields { grid-template-columns: 1fr; }
    .cs-kv__label { flex-basis: 100%; }
    .cs-table--cards thead { display: none; }
    .cs-table--cards, .cs-table--cards tbody, .cs-table--cards tr, .cs-table--cards td { display: block; width: 100%; }
    .cs-table--cards tr { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); padding: var(--cs-space-2); margin-bottom: var(--cs-space-2); background: var(--cs-surface); }
    .cs-table--cards td { border: none; padding: 4px 8px; text-align: left !important; }
    .cs-table--cards td::before { content: attr(data-label); display: block; font-size: var(--cs-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-text-muted); }
}


/* ── Dashboard (R8) ─────────────────────────────────── */
.cs-dash-metric { padding: var(--cs-space-4); }
.cs-dash-metric__label { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.cs-dash-metric__value { font-size: var(--cs-font-size-2xl); font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cs-dash-metric__caption { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); margin-top: 2px; }

.cs-dash-actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); align-items: center; }

.cs-dash-list { display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-dash-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3);
    padding: var(--cs-space-3) var(--cs-space-4);
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md);
    background: var(--cs-surface);
    min-width: 0;
}
.cs-dash-item__main { min-width: 0; }
.cs-dash-item__title-row { display: flex; align-items: center; gap: var(--cs-space-2); flex-wrap: wrap; min-width: 0; }
.cs-dash-item__title {
    font-weight: 700; font-size: var(--cs-font-size-md); color: var(--cs-text);
    overflow-wrap: anywhere; display: inline-block; max-width: 100%;
}
.cs-dash-item__title:hover { color: var(--cs-primary); text-decoration: none; }
.cs-dash-item__meta { font-size: var(--cs-font-size-xs); color: var(--cs-text-muted); margin-top: 2px; overflow-wrap: anywhere; }

@media (max-width: 768px) {
    .cs-dash-item { align-items: flex-start; flex-direction: column; }
    .cs-dash-actions { width: 100%; }
    .cs-dash-actions .cs-btn { flex: 1 1 auto; justify-content: center; }
}