/* ═══════════════════════════════════════════════════════════════
   CHANNEL SCORE RING — animated SVG ring button
   Circumference of r=32 circle = 2π×32 ≈ 201
   Usage: .ch-score-ring-btn.ch-score-ring-btn--{success|warning|danger}
   JS: animateScoreRing() in coach.js reads data-score attr to fill arc
   ═══════════════════════════════════════════════════════════════ */
.ch-score-ring-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 150ms ease, transform 200ms ease;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;
}
.ch-score-ring-btn:hover {
    background: rgba(79, 70, 229, 0.05);
    transform: translateY(-2px);
}
.ch-score-ring {
    position: relative;
    width: 72px;
    height: 72px;
}
.ch-score-ring__svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg); /* arc starts at 12 o'clock */
    display: block;
}
.ch-score-ring__arc {
    /* fill/stroke/dasharray set via SVG attributes — ensures they work without CSS */
    /* stroke-dashoffset starts at 201 (empty) via SVG attr; JS animates to final value */
    transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Color variants — CSS overrides SVG attr so JS can swap color class */
.ch-score-ring__arc--success { stroke: #059669; }
.ch-score-ring__arc--warning { stroke: #f97316; }
.ch-score-ring__arc--danger  { stroke: #dc2626; }
/* Inner center overlay — score number */
.ch-score-ring__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    pointer-events: none;
}
.ch-score-ring__num {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-gray-900, #0f172a);
    line-height: 1;
}
.ch-score-ring__denom {
    font-size: 0.625rem;
    color: var(--color-gray-400, #94a3b8);
    margin-top: 1px;
    font-weight: 500;
}
/* Tier label below the ring */
.ch-score-ring__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gray-700, #374151);
    white-space: nowrap;
    margin-top: 2px;
}
/* CTA "View Report →" */
.ch-score-ring__cta {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-primary, #4f46e5);
    display: flex;
    align-items: center;
    gap: 3px;
    transition: gap 150ms ease;
}
.ch-score-ring-btn:hover .ch-score-ring__cta {
    gap: 6px;
}
.ch-score-ring__cta i {
    font-size: 0.6rem;
    transition: transform 150ms ease;
}
.ch-score-ring-btn:hover .ch-score-ring__cta i {
    transform: translateX(2px);
}
/* Color-coded label tint per score tier */
.ch-score-ring-btn--success .ch-score-ring__label { color: #059669; }
.ch-score-ring-btn--warning .ch-score-ring__label { color: #f97316; }
.ch-score-ring-btn--danger  .ch-score-ring__label { color: #dc2626; }
/* Mobile: slightly smaller ring */
@media (max-width: 767px) {
    .ch-score-ring,
    .ch-score-ring__svg { width: 60px; height: 60px; }
    .ch-score-ring__num  { font-size: 1.125rem; }
}

/* ── Horizontal variant — ring LEFT, text column RIGHT ──────────────────
   Used in the studio hero card where vertical height must be minimised.
   The ring sits flush with the avatar block height (~60px).
   ─────────────────────────────────────────────────────────────────────── */
.ch-score-ring-btn--horizontal {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 6px 10px;
}
.ch-score-ring-btn--horizontal:hover {
    transform: none; /* no Y-translate — it sits inline in a flex row */
    background: rgba(79, 70, 229, 0.05);
}
/* Smaller ring in horizontal mode — matches avatar height */
.ch-score-ring-btn--horizontal .ch-score-ring,
.ch-score-ring-btn--horizontal .ch-score-ring__svg {
    width: 60px;
    height: 60px;
}
.ch-score-ring-btn--horizontal .ch-score-ring__num {
    font-size: 1.125rem;
}
/* Text column beside the ring */
.ch-score-ring__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* "CHANNEL SCORE" eyebrow — tells users what the feature is */
.ch-score-ring__eyebrow {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-400, #94a3b8);
    font-family: var(--font-body, 'Inter', sans-serif);
    line-height: 1;
}
/* In horizontal mode, label sits inside the text column (not below ring) */
.ch-score-ring-btn--horizontal .ch-score-ring__label {
    margin-top: 0;
    font-size: var(--font-size-sm, 0.875rem);
}
/* CTA is slightly smaller in horizontal mode */
.ch-score-ring-btn--horizontal .ch-score-ring__cta {
    font-size: 0.625rem;
}

/* ── Hero variant — prominent score display in the channel hero card ───
   90px ring on desktop, 60px on mobile. Subtle indigo pill background.
   Ring left, text column right — eyebrow + tier label + view-details CTA.
   ─────────────────────────────────────────────────────────────────────── */
.ch-score-ring-btn--hero {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.05);
    border: 1.5px solid rgba(79, 70, 229, 0.18);
    flex-shrink: 0;
}
.ch-score-ring-btn--hero:hover {
    transform: translateY(-1px);
    background: rgba(79, 70, 229, 0.09);
    border-color: rgba(79, 70, 229, 0.32);
}
.ch-score-ring-btn--hero .ch-score-ring,
.ch-score-ring-btn--hero .ch-score-ring__svg {
    width: 90px;
    height: 90px;
}
.ch-score-ring-btn--hero .ch-score-ring__num {
    font-size: 2rem;
}
.ch-score-ring-btn--hero .ch-score-ring__denom {
    font-size: 0.75rem;
    margin-top: 2px;
}
.ch-score-ring-btn--hero .ch-score-ring__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    color: var(--color-gray-500, #64748b);
}
.ch-score-ring-btn--hero .ch-score-ring__label {
    margin-top: 2px;
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
}
.ch-score-ring-btn--hero.ch-score-ring-btn--success .ch-score-ring__label { color: #059669; }
.ch-score-ring-btn--hero.ch-score-ring-btn--warning .ch-score-ring__label { color: #f97316; }
.ch-score-ring-btn--hero.ch-score-ring-btn--danger  .ch-score-ring__label { color: #dc2626; }
.ch-score-ring-btn--hero .ch-score-ring__cta {
    font-size: 0.75rem;
    margin-top: 4px;
}
@media (max-width: 767px) {
    .ch-score-ring-btn--hero {
        padding: 8px 10px;
        gap: 10px;
    }
    .ch-score-ring-btn--hero .ch-score-ring,
    .ch-score-ring-btn--hero .ch-score-ring__svg { width: 60px; height: 60px; }
    .ch-score-ring-btn--hero .ch-score-ring__num  { font-size: 1.375rem; }
    .ch-score-ring-btn--hero .ch-score-ring__denom { font-size: 0.625rem; }
    .ch-score-ring-btn--hero .ch-score-ring__label { font-size: 0.9375rem; }
    .ch-score-ring-btn--hero .ch-score-ring__eyebrow { font-size: 0.5625rem; }
    .ch-score-ring-btn--hero .ch-score-ring__cta { font-size: 0.6875rem; }
}

/* ── Mini variant — lives inside the DNA tags row ───────────────────────
   44px ring + "Channel Score" eyebrow + tier label, no CTA.
   Right border acts as a visual separator before the badge pills.
   ─────────────────────────────────────────────────────────────────────── */
.ch-score-ring-btn--mini {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 4px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}
.ch-score-ring-btn--mini:hover {
    transform: none;
    background: rgba(79, 70, 229, 0.05);
}
.ch-score-ring-btn--mini .ch-score-ring,
.ch-score-ring-btn--mini .ch-score-ring__svg {
    width: 44px;
    height: 44px;
}
.ch-score-ring-btn--mini .ch-score-ring__num {
    font-size: 0.875rem;
}
.ch-score-ring-btn--mini .ch-score-ring__denom {
    font-size: 0.5rem;
}
.ch-score-ring-btn--mini .ch-score-ring__label {
    margin-top: 0;
    font-size: 0.75rem;
    white-space: nowrap;
}
.ch-score-ring-btn--mini .ch-score-ring__eyebrow {
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
}