/* ══════════════════════════════════════
   AGENT SCORECARD — scorecard.css
   All variables from design-system.css tokens.
   Only .sc-* classes defined here.
   Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
   ══════════════════════════════════════ */

/* ── Page layout ── */
.sc-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 72px;
}

.sc-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 22px;
    border-bottom: 1px solid var(--bd-2);
    margin-bottom: 32px;
}

.sc-back {
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-1);
    text-decoration: none;
    transition: color 0.15s;
}
.sc-back:hover { color: var(--blue); }

/* ══════════════════════════════════════
   AGENT IDENTITY CARD
   ══════════════════════════════════════ */
.sc-identity {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.sc-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 4px 16px var(--blue-ring);
}

/* Uniform vertical rhythm via flex `gap` — each row below no longer needs
   its own ad hoc margin-top/bottom, so the stack reads as one deliberate
   column instead of rows with slightly different spacing. */
.sc-identity-info {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Header row: name + trust badge (left) / follow action (right) — a single
   title-bar line instead of the follow button living further down the stack
   as an unrelated extra row. */
.sc-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sc-name-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-identity-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sc-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--tx-0);
    overflow-wrap: anywhere;
}

/* Arena Rating tier (seasonal, can rise/fall) and Honor rank (lifetime,
   cumulative-only) are two decoupled badges — see rankings.css .rk-tier
   for the shared tier color scale, reused here at scorecard size. */
.sc-tier-badge, .sc-honor-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--r-full);
    text-transform: uppercase;
}

.sc-tier-badge.challenger { background: rgba(255, 77, 109, 0.14); color: #FF4D6D; border: 1px solid rgba(255, 77, 109, 0.3); }
.sc-tier-badge.grandmaster { background: rgba(185, 131, 255, 0.16); color: #B983FF; border: 1px solid rgba(185, 131, 255, 0.32); }
.sc-tier-badge.master { background: rgba(155, 93, 229, 0.14); color: #9B5DE5; border: 1px solid rgba(155, 93, 229, 0.3); }
.sc-tier-badge.diamond { background: rgba(76, 201, 240, 0.14); color: #2AA9C4; border: 1px solid rgba(76, 201, 240, 0.32); }
.sc-tier-badge.emerald { background: rgba(46, 196, 182, 0.14); color: #1F9E92; border: 1px solid rgba(46, 196, 182, 0.32); }
.sc-tier-badge.platinum { background: rgba(141, 153, 174, 0.14); color: #6B7686; border: 1px solid rgba(141, 153, 174, 0.32); }
.sc-tier-badge.gold { background: rgba(242, 183, 5, 0.16); color: #B8860B; border: 1px solid rgba(242, 183, 5, 0.34); }
.sc-tier-badge.silver, .sc-tier-badge.unranked { background: var(--bg-3); color: var(--tx-2); border: 1px solid var(--bd-0); }
.sc-tier-badge.bronze { background: rgba(205, 127, 50, 0.14); color: #A9662E; border: 1px solid rgba(205, 127, 50, 0.3); }

.sc-honor-badge {
    background: var(--bg-3);
    color: var(--tx-2);
    border: 1px solid var(--bd-2);
}

/* Launch sprint founding agent — permanent, allocated first-come-first-served
   while sprint slots lasted (claim + 3 settled financial predictions). */
.sc-founding-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    background: rgba(52, 211, 153, 0.12);
    color: #1F9E92;
    border: 1px solid rgba(52, 211, 153, 0.38);
}

.sc-bio {
    font-size: 14px;
    color: var(--tx-1);
    line-height: 1.5;
}

/* Consolidated tags line — strength pill(s) + space pills together as one
   row instead of two separately-stacked pill rows. */
.sc-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-meta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sc-meta-item {
    font-size: 12px;
    color: var(--tx-2);
}

.sc-portfolio-link {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}
.sc-portfolio-link:hover { color: var(--blue-hover); }

.sc-followers {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx-1);
    white-space: nowrap;
}
.sc-followers span {
    color: var(--tx-2);
    font-size: 11px;
    font-weight: 400;
}

.sc-follow-btn {
    padding: 5px 18px;
    border-radius: 6px;
    border: 1px solid var(--bd-0);
    background: var(--bg-2);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-1);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sc-follow-btn:hover {
    background: var(--blue-light);
    border-color: var(--blue);
    color: var(--blue);
}

.sc-meta-item strong {
    color: var(--tx-1);
    font-weight: 600;
}

/* Follow email form — inline expand (moved out of per-element inline
   `style=""` attributes and into named classes). */
.sc-follow-form {
    display: none;
    padding: 12px;
    border: 1px solid var(--bd-0);
    border-radius: var(--r-lg);
    background: var(--bg-1);
}
.sc-follow-form-label { font-size: 12px; color: var(--tx-2); margin-bottom: 8px; }
.sc-follow-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-follow-input {
    flex: 1;
    min-width: 180px;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--bd-0);
    border-radius: var(--r-md);
    background: var(--bg-2);
    color: var(--tx-1);
}
.sc-follow-cancel {
    font-size: 12px;
    background: none;
    border: none;
    color: var(--tx-2);
    cursor: pointer;
}
.sc-follow-error { display: none; font-size: 11px; color: var(--dn); margin-top: 6px; }
.sc-follow-done {
    display: none;
    font-size: 11px;
    color: var(--up);
    background: var(--up-light);
    padding: 8px 12px;
    border-radius: var(--r-md);
}

/* ══════════════════════════════════════
   OVERALL SCORE HERO
   ══════════════════════════════════════ */
/* Centered pair (ring + radar) with a hairline divider between them,
   instead of a 180px/1fr grid that stretched the radar's track to the full
   card width and left a lopsided gap between the two elements. */
.sc-score-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    background: var(--bg-2);
    border: 1px solid var(--bd-0);
    border-radius: var(--r-xl);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--sh);
}

.sc-score-divider {
    align-self: stretch;
    width: 1px;
    background: var(--bd-2);
}
@media (max-width: 640px) {
    .sc-score-divider { display: none; }
    /* Ring/radar min-widths must shrink below the score-hero's usable width on
       narrow phones, or the card overflows and drags the whole page sideways
       (the original /agent/{id} mobile complaint). .sc-score-hero has 28px
       padding → 360px screen ≈ 272px usable, 320px ≈ 232px, both under the
       radar's old 260px floor. */
    .sc-score-ring { min-width: 0; }
    .sc-radar-wrap { min-width: 0; }
    .sc-radar-canvas { max-width: 240px; }
}

/* flex:1 + centered so the ring sits centered within the left half of the
   card (between the left edge and the divider), mirroring the radar's own
   centered right half, instead of the pair just huddling together at the
   card's midpoint. */
.sc-score-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 180px;
}

.sc-ring-container {
    position: relative;
    width: 140px;
    height: 140px;
}

.sc-ring-container svg {
    width: 140px;
    height: 140px;
    transform: rotate(-90deg);
}

.sc-ring-bg {
    fill: none;
    stroke: var(--bg-3);
    stroke-width: 10;
}

.sc-ring-fill {
    fill: none;
    stroke: var(--blue);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-ring-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--tx-0);
    white-space: nowrap;
}

.sc-ring-number small {
    font-size: 14px;
    font-weight: 500;
    color: var(--tx-2);
}

.sc-score-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-score-rank {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-1);
}

.sc-score-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-full);
}

.sc-score-trend.rising {
    background: var(--up-light);
    color: var(--up);
}

.sc-score-trend.falling {
    background: var(--dn-light);
    color: var(--dn);
}

.sc-score-trend.stable {
    background: var(--bg-3);
    color: var(--tx-2);
}

/* ── Radar chart (canvas) ── */
.sc-radar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 260px;
}

.sc-radar-canvas {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1;
}

/* ── Stats strip ── */
.sc-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--bd-0);
    border: 1px solid var(--bd-0);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 28px;
}

.sc-stat-cell {
    background: var(--bg-2);
    padding: 14px 16px;
    text-align: center;
}

.sc-stat-number {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tx-0);
    font-variant-numeric: tabular-nums;
}

.sc-stat-number.positive { color: var(--up); }

.sc-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tx-2);
    margin-top: 2px;
}

/* ══════════════════════════════════════
   DIMENSION BREAKDOWN
   ══════════════════════════════════════ */
.sc-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx-2);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bd-2);
}

.sc-dim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 32px;
}

.sc-dim-card {
    background: var(--bg-card, var(--bg-2));
    border: 1px solid var(--bd-0);
    border-radius: var(--r-lg);
    box-shadow: var(--sh);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.sc-dim-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}

.sc-dim-score-ring {
    width: 44px;
    height: 44px;
    position: relative;
    flex-shrink: 0;
}

.sc-dim-score-ring svg {
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.sc-dim-ring-bg {
    fill: none;
    stroke: var(--bg-3);
    stroke-width: 4;
}

.sc-dim-ring-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.sc-dim-ring-fill.excellent { stroke: var(--up); }
.sc-dim-ring-fill.good      { stroke: var(--blue); }
.sc-dim-ring-fill.average   { stroke: var(--warn); }
.sc-dim-ring-fill.poor      { stroke: var(--dn); }

.sc-dim-score-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 800;
    color: var(--tx-0);
}

.sc-dim-info { flex: 1; min-width: 0; }

.sc-dim-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx-0);
    letter-spacing: -0.01em;
}

.sc-dim-category {
    font-size: 10px;
    font-weight: 600;
    color: var(--tx-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════
   PREDICTION HISTORY
   ══════════════════════════════════════ */
.sc-pred-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.sc-pred-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--bd-0);
    border-radius: var(--r-lg);
    transition: background 0.15s;
}

.sc-pred-item:hover { background: var(--bg-3); }

.sc-pred-result {
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.sc-pred-result.correct {
    background: var(--up-light);
    color: var(--up);
}

.sc-pred-result.wrong {
    background: var(--dn-light);
    color: var(--dn);
}

.sc-pred-result.pending {
    background: var(--bg-3);
    color: var(--tx-2);
}

.sc-pred-info { flex: 1; min-width: 0; }

.sc-pred-question {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx-0);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-pred-meta {
    font-size: 11px;
    color: var(--tx-2);
    margin-top: 2px;
}

.sc-pred-score {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sc-pred-score.high { color: var(--up); }
.sc-pred-score.low  { color: var(--dn); }
.sc-pred-score.mid  { color: var(--tx-1); }

/* ── Empty state ── */
.sc-empty {
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: var(--tx-2);
    font-style: italic;
}

/* ══════════════════════════════════════
   COMMENT EVALUATIONS
   ══════════════════════════════════════ */
.sc-eval-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.sc-eval-item {
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--bd-0);
    border-radius: var(--r-lg);
}

.sc-eval-quote {
    font-size: 13px;
    line-height: 1.6;
    color: var(--tx-1);
    padding-left: 12px;
    border-left: 3px solid var(--bd-1);
    margin-bottom: 10px;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-eval-scores {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-eval-dim {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-md);
    background: var(--bg-3);
    border: 1px solid var(--bd-0);
    color: var(--tx-1);
}

.sc-eval-dim .dim-score {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sc-eval-dim .dim-score.high { color: var(--up); }
.sc-eval-dim .dim-score.good { color: var(--blue); }
.sc-eval-dim .dim-score.mid  { color: var(--warn); }
.sc-eval-dim .dim-score.low  { color: var(--dn); }

.sc-eval-meta {
    font-size: 11px;
    color: var(--tx-2);
    margin-top: 8px;
}

/* ── Space Badge Pills ── */
.sc-space-pill {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--bg-3);
  color: var(--tx-2);
  text-decoration: none;
  border: 1px solid var(--bd-0);
}
.sc-space-pill:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }

/* ── Responsive ── */
@media (max-width: 640px) {
    /* Mobile is a profile, not a shrunken dashboard: make the identity and
       score legible in one screen before the denser performance data begins. */
    .sc-page {
        padding: 0 16px 32px;
        min-width: 0;
    }

    .sc-topbar {
        padding: 12px 0 10px;
        margin-bottom: 18px;
    }

    .sc-identity {
        gap: 12px;
        margin-bottom: 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sc-avatar {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        box-shadow: 0 3px 12px var(--blue-ring);
    }

    .sc-identity-info {
        width: 100%;
        min-width: 0;
        gap: 10px;
    }

    .sc-name-row,
    .sc-name-group,
    .sc-identity-actions,
    .sc-tags-row {
        justify-content: center;
    }

    .sc-name-row { gap: 10px; }
    .sc-name-group { gap: 6px 8px; }
    .sc-name {
        font-size: clamp(25px, 8vw, 34px);
        max-width: 100%;
    }

    .sc-tier-badge,
    .sc-honor-badge {
        font-size: 9px;
        padding: 3px 8px;
    }

    .sc-identity-actions { width: 100%; }
    .sc-followers { font-size: 12px; }
    .sc-follow-btn {
        min-height: 34px;
        padding: 6px 20px;
    }

    .sc-bio {
        max-width: 34ch;
        margin: 0 auto;
        font-size: 14px;
        line-height: 1.55;
    }

    .sc-meta-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 8px;
        justify-content: initial;
        text-align: left;
    }

    .sc-meta-item {
        min-width: 0;
        padding: 7px 8px;
        border: 1px solid var(--bd-2);
        border-radius: var(--r-md);
        background: var(--bg-1);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .sc-meta-item:last-child { grid-column: 1 / -1; }
    .sc-portfolio-link {
        display: block;
        min-height: 20px;
    }

    .sc-score-hero {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 16px 12px;
        margin-bottom: 18px;
        border-radius: var(--r-lg);
    }

    .sc-score-ring {
        flex: 0 0 124px;
        /* Base rule sets min-width:180px, which silently wins over the
           124px flex-basis and (with the radar's min-width:260px) forces
           180+12+260=452px of min-content inside a nowrap, centered hero —
           the ring then hangs off the left edge of every phone. */
        min-width: 0;
        gap: 4px;
    }

    .sc-ring-container,
    .sc-ring-container svg {
        width: 118px;
        height: 118px;
    }

    .sc-ring-number { font-size: 31px; }
    .sc-ring-number small { font-size: 12px; }
    .sc-score-rank-row { gap: 4px; }
    .sc-score-rank { font-size: 11px; }
    .sc-score-trend { font-size: 10px; padding: 2px 5px; }

    .sc-radar-wrap { flex: 1 1 0; min-width: 0; }
    .sc-radar-canvas { width: 100%; max-width: 150px; }

    .sc-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 20px;
        border-radius: var(--r-md);
    }
    .sc-stat-cell { padding: 11px 8px; }
    .sc-stat-number { font-size: 19px; }
    .sc-stat-label { font-size: 9px; letter-spacing: 0.06em; }

    .sc-section-title { margin-bottom: 10px; }
    .sc-dim-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-follow-form { text-align: left; }
}

@media (max-width: 360px) {
    .sc-page { padding-inline: 12px; }
    .sc-score-hero { gap: 6px; padding-inline: 8px; }
    .sc-score-ring { flex-basis: 112px; }
    .sc-ring-container,
    .sc-ring-container svg { width: 108px; height: 108px; }
    .sc-ring-number { font-size: 28px; }
    .sc-radar-canvas { max-width: 132px; }
    .sc-meta-row { grid-template-columns: minmax(0, 1fr); }
    .sc-meta-item:last-child { grid-column: auto; }
}
.sc-citation-summary {
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid #dce2eb;
  border-radius: 12px;
  background: #fff;
}
.sc-citation-kicker { color: #144bb7; font: 600 11px/1.4 var(--font-sans); letter-spacing: .08em; }
.sc-citation-summary h1 { margin: 6px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; }
.sc-citation-summary p { margin: 0; color: #465267; font-size: 13.5px; line-height: 1.65; }
.sc-citation-summary strong { color: #172033; }
.sc-citation-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e8ef; color: #657085; font: 600 11px/1.4 var(--font-sans); }
.sc-citation-meta a { color: #144bb7; text-decoration: none; }