@layer components {

    /* ── Experiment card ─────────────────────────────── */
    .experiment-card {
        background: hsl(var(--surface-raised));
        border: 1px solid hsl(var(--line));
        border-bottom: 3px solid hsl(var(--line));
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        flex-shrink: 0;
        margin-bottom: 12px;
        --ch-bar: hsl(var(--accent));
    }

    /* ── Channel modifiers ───────────────────────────── */
    .experiment-card--instagram-organic  { border-bottom-color: var(--ch-instagram); background: hsl(var(--ch-instagram-n) / 0.04); --ch-bar: var(--ch-instagram); }
    .experiment-card--youtube-organic    { border-bottom-color: var(--ch-youtube);   background: hsl(var(--ch-youtube-n)   / 0.04); --ch-bar: var(--ch-youtube); }
    .experiment-card--meta-ads           { border-bottom-color: var(--ch-meta);      background: hsl(var(--ch-meta-n)      / 0.04); --ch-bar: var(--ch-meta); }
    .experiment-card--google-search-ads  { border-bottom-color: var(--ch-google);    background: hsl(var(--ch-google-n)    / 0.04); --ch-bar: var(--ch-google); }
    .experiment-card--google-display-ads { border-bottom-color: var(--ch-display);   background: hsl(var(--ch-display-n)   / 0.04); --ch-bar: var(--ch-display); }
    .experiment-card--seo-google-search  { border-bottom-color: var(--ch-seo);       background: hsl(var(--ch-seo-n)       / 0.04); --ch-bar: var(--ch-seo); }
    .experiment-card--geo-ai-engines     { border-bottom-color: var(--ch-geo);       background: hsl(var(--ch-geo-n)       / 0.04); --ch-bar: var(--ch-geo); }

    /* ── Channel badge variants (full slug) ──────────── */
    .vl-badge--ch-instagram-organic  { color: var(--ch-instagram); border-color: hsl(var(--ch-instagram-n) / 0.3); background: hsl(var(--ch-instagram-n) / 0.15); }
    .vl-badge--ch-youtube-organic    { color: var(--ch-youtube);   border-color: hsl(var(--ch-youtube-n)   / 0.3); background: hsl(var(--ch-youtube-n)   / 0.15); }
    .vl-badge--ch-meta-ads           { color: var(--ch-meta);      border-color: hsl(var(--ch-meta-n)      / 0.3); background: hsl(var(--ch-meta-n)      / 0.15); }
    .vl-badge--ch-google-search-ads  { color: var(--ch-google);    border-color: hsl(var(--ch-google-n)    / 0.3); background: hsl(var(--ch-google-n)    / 0.15); }
    .vl-badge--ch-google-display-ads { color: var(--ch-display);   border-color: hsl(var(--ch-display-n)   / 0.3); background: hsl(var(--ch-display-n)   / 0.15); }
    .vl-badge--ch-seo-google-search  { color: var(--ch-seo);       border-color: hsl(var(--ch-seo-n)       / 0.3); background: hsl(var(--ch-seo-n)       / 0.15); }
    .vl-badge--ch-geo-ai-engines     { color: var(--ch-geo);       border-color: hsl(var(--ch-geo-n)       / 0.3); background: hsl(var(--ch-geo-n)       / 0.15); }

    /* ── Card header ─────────────────────────────────── */
    .experiment-card__header {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-bottom: 1px solid hsl(var(--line) / 0.5);
        background: hsl(var(--surface-raised) / 0.6);
    }
    .experiment-card__num  { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); flex-shrink: 0; min-width: 18px; }
    .experiment-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .experiment-card__date { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

    /* ── Variant body wrapper ───────────────────────── */
    .experiment-card__body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 6px 8px 8px;
    }

    /* ── Variant rows ────────────────────────────────── */
    .experiment-card__variant {
        position: relative;
        overflow: hidden;
        background: hsl(var(--surface-raised) / 0.3);
        border: 1px solid hsl(var(--line));
        border-radius: var(--radius-md);
        transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    }
    .experiment-card__variant:hover { border-color: var(--text-muted); }
    .experiment-card__variant--winner:hover { border-color: hsl(var(--success) / 0.55); }
    .experiment-card__variant--winner {
        background: hsl(var(--success) / 0.04);
        border-color: hsl(var(--success) / 0.3);
    }
    .experiment-card__variant--winner::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 2px;
        background: hsl(var(--success) / 0.5);
    }

    .experiment-card__variant-top {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        flex-wrap: wrap;
    }
    .experiment-card__variant-name { font-size: var(--text-sm); font-weight: 600; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .exp-date { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; margin-left: auto; }

    .experiment-card__variant-desc {
        padding: 0 10px 3px 10px;
        font-size: var(--text-xs);
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Two-column data section (KPIs left, intent right) */
    .experiment-card__data {
        display: flex;
        align-items: stretch;
        border-top: 1px solid hsl(var(--line) / 0.25);
    }

    /* ── KPI left column ─────────────────────────────── */
    .experiment-card__metrics-row {
        flex: 1;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start;
        align-content: start;
        gap: 4px 0;
        padding: 6px 10px;
    }
    .exp-kpi           { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
    .exp-kpi__label    { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); flex-shrink: 0; }
    .exp-kpi__value    { font-size: var(--text-sm); font-weight: 700; color: var(--text); }

    /* winner-badge, overall-score-badge → shared.css */

    /* ── Intent right column — 3 stacked rows ───────── */
    .experiment-card__data .intent-scores {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        flex: 0 0 138px;
        padding: 6px 10px;
        border-top: none;
        border-left: 1px solid hsl(var(--line) / 0.25);
        background: transparent;
    }
    .experiment-card__data .intent-scores .intent-tile       { display: flex; align-items: baseline; gap: 4px; background: transparent; padding: 0; }
    .experiment-card__data .intent-scores .intent-tile__head { display: flex; align-items: baseline; gap: 3px; }
    .experiment-card__data .intent-scores .intent-tile__value { display: inline; margin-bottom: 0; font-size: var(--text-xs); margin-left: auto; }
    .experiment-card__data .intent-scores .intent-tile__bar   { display: none; }

}