@layer components {

    /* ── Canvas card base ────────────────────────────── */
    .canvas-card {
        background: hsl(var(--surface-raised) / 0.3);
        border: 1px solid hsl(var(--line));
        border-left: 3px solid hsl(var(--line));
        border-radius: var(--radius-md);
        overflow: hidden;
        flex-shrink: 0;
        --ch-bar: hsl(var(--accent));
    }
    .canvas-card--instagram { border-left-color: var(--ch-instagram); background: hsl(var(--ch-instagram-n) / 0.06); --ch-bar: var(--ch-instagram); }
    .canvas-card--youtube   { border-left-color: var(--ch-youtube);   background: hsl(var(--ch-youtube-n)   / 0.06); --ch-bar: var(--ch-youtube); }
    .canvas-card--seo       { border-left-color: var(--ch-seo);       background: hsl(var(--ch-seo-n)       / 0.06); --ch-bar: var(--ch-seo); }
    .canvas-card--meta      { border-left-color: var(--ch-meta);      background: hsl(var(--ch-meta-n)      / 0.06); --ch-bar: var(--ch-meta); }
    .canvas-card--google    { border-left-color: var(--ch-google);    background: hsl(var(--ch-google-n)    / 0.06); --ch-bar: var(--ch-google); }
    .canvas-card--display   { border-left-color: var(--ch-display);   background: hsl(var(--ch-display-n)   / 0.06); --ch-bar: var(--ch-display); }
    .canvas-card--geo       { border-left-color: var(--ch-geo);       background: hsl(var(--ch-geo-n)       / 0.06); --ch-bar: var(--ch-geo); }

    /* ── Content card ────────────────────────────────── */
    .content-card { margin-bottom: 5px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
    .content-card:hover { border-color: var(--text-muted); background: hsl(var(--surface-raised) / 0.5); }

    .content-card-top         { display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-wrap: wrap; }
    .content-card-rank        { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); min-width: 20px; flex-shrink: 0; }
    .content-card-rank--1     { color: var(--rank-gold); }
    .content-card-rank--2     { color: var(--rank-silver); }
    .content-card-rank--3     { color: var(--rank-bronze); }
    .content-card-experiment  { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; white-space: nowrap; }
    .content-card-score       { flex-shrink: 0; }
    .content-card-body        { padding: 0 10px 5px; }
    .content-card-headline    { font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .content-card-desc        { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .content-card-untested    { padding: 4px 10px 5px; font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }

    /* ── Intent score tiles (leaderboard + experiments alias) */
    .intent-scores-row,
    .intent-scores {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: hsl(var(--line));
        border-top: 1px solid hsl(var(--line));
    }
    .intent-tile                { background: hsl(var(--surface)); padding: 4px 6px; }
    .intent-tile__head          { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
    .intent-tile__label         { font-size: var(--text-xs); color: var(--text-muted); }
    .intent-tile__rank          { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
    .intent-tile__rank--leader  { color: var(--rank-gold); }
    .intent-tile__value         { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .intent-tile__bar           { height: 2px; background: hsl(var(--surface-raised) / 0.3); border-radius: var(--radius-pill); overflow: hidden; }
    .intent-tile__fill {
        height: 100%;
        background: var(--ch-bar, hsl(var(--accent)));
        border-radius: var(--radius-pill);
        transition: width var(--dur-slow) var(--ease);
        /* width set inline — data-driven, only permitted inline style */
    }

}