@layer components {

    /* section-card, kv-row, kv-label, kv-value, section-label, section-body → shared.css */

    /* ── Competitor card header ──────────────────────── */
    .comp-card-header      { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
    .comp-card-name        { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
    .comp-card-domain      { font-size: var(--text-xs); color: var(--text-muted); }
    .comp-card-desc        { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: 4px; }
    .comp-card-positioning { font-size: var(--text-sm); color: var(--text); line-height: 1.55; margin-bottom: 8px; }

    /* ── Edge / Gap intel blocks ─────────────────────── */
    .comp-intel { display: flex; flex-direction: column; gap: 4px; }
    .comp-intel-block {
        padding: 5px 10px;
        border-left: 2px solid;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .comp-intel-block--pos { border-left-color: hsl(var(--success) / 0.5); background: hsl(var(--success) / 0.04); }
    .comp-intel-block--neg { border-left-color: hsl(var(--danger)  / 0.4); background: hsl(var(--danger)  / 0.03); }
    .comp-intel-block__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
    .comp-intel-block--pos .comp-intel-block__label { color: hsl(var(--success)); }
    .comp-intel-block--neg .comp-intel-block__label { color: hsl(var(--danger)); }
    .comp-intel-block__text { font-size: var(--text-sm); color: var(--text); line-height: 1.5; }

    /* ── Competitive matrix ──────────────────────────── */
    .comp-matrix-dim          { padding: 8px 0; border-bottom: 1px solid hsl(var(--line) / 0.3); }
    .comp-matrix-dim:last-child { border-bottom: none; padding-bottom: 0; }
    .comp-matrix-dim__label   { margin-bottom: 6px; }
    .comp-matrix-row          { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
    .comp-matrix-row--brand   { background: hsl(var(--accent) / 0.06); border-radius: var(--radius-sm); padding: 3px 6px; margin: 2px -6px; }
    .comp-matrix-name         { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); flex: 0 0 100px; }
    .comp-matrix-row--brand .comp-matrix-name { color: hsl(var(--accent)); }
    .comp-matrix-value        { font-size: var(--text-xs); color: var(--text); flex: 1; }

}