@layer components {

    /* Shares section-card, kv-row, kv-label, kv-value from competitors.css */

    /* ── Visibility badge ────────────────────────────── */
    .seo-vis-badge             { font-size: var(--text-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--radius-pill); border: 1px solid; margin-left: 6px; vertical-align: middle; }
    .seo-vis-badge--high       { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); background: hsl(var(--success) / 0.08); }
    .seo-vis-badge--medium     { color: hsl(var(--accent)); border-color: hsl(var(--accent) / 0.3); background: hsl(var(--accent) / 0.08); }
    .seo-vis-badge--low        { color: hsl(var(--danger)); border-color: hsl(var(--danger) / 0.3); background: hsl(var(--danger) / 0.08); }

    /* ── Cluster competitor indicator ────────────────── */
    .seo-cluster-comp { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }

    /* ── Top pages ───────────────────────────────────── */
    .seo-page-row      { align-items: flex-start; gap: 10px; }
    .seo-page-rank     { min-width: 24px; padding-top: 1px; }
    .seo-page          { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .seo-page__top     { display: flex; align-items: baseline; gap: 8px; }
    .seo-page__title   { font-size: var(--text-sm); font-weight: 500; color: var(--text); flex: 1; min-width: 0; }
    .seo-page__stat    { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

    /* ── Keyword tags ────────────────────────────────── */
    .seo-kw-group  { display: flex; flex-wrap: wrap; gap: 3px; }
    .seo-kw-tag    { font-size: var(--text-xs); color: var(--text-muted); border: 1px solid hsl(var(--line) / 0.5); border-radius: var(--radius-pill); padding: 0 6px; line-height: 1.6; }

    /* ── Keyword clusters ────────────────────────────── */
    .seo-cluster-dot          { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; align-self: center; }
    .seo-cluster-dot--visible { color: hsl(var(--success)); }
    .seo-cluster-intent       { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; margin-left: 4px; }
    .seo-cluster-vol          { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; margin-left: auto; }

    /* ── Content gaps ────────────────────────────────── */
    /* section-body--muted → shared.css */
    .seo-gap-row   { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid hsl(var(--line) / 0.3); }
    .seo-gap-row:last-child { border-bottom: none; }
    .seo-gap-arrow { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
    .seo-gap-text  { font-size: var(--text-sm); color: var(--text); }

}