/* Top Models: page-specific pieces on top of ai-analysis.css */

.kpi-text { font-size: 1.25rem; line-height: 1.3; padding: 6px 0 4px; }
.kpi-text small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--text-dim); }

/* Leaderboard */
.board-head, .b-row { display: grid; grid-template-columns: 36px minmax(170px, 1.1fr) 1fr 1fr 1fr; gap: 14px; align-items: center; }
.board-head { padding: 0 6px 10px; border-bottom: 1px solid var(--card-border); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.sort-btn {
    justify-self: start;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 3px 12px;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    transition: all 0.2s ease;
}
.sort-btn:hover { color: var(--text-main); }
.sort-btn.on { color: #0f111a; background: var(--primary); border-color: var(--primary); font-weight: 600; }
.board { position: relative; }
.b-row { position: absolute; left: 0; right: 0; min-height: 56px; padding: 8px 6px; border-bottom: 1px solid rgba(var(--fg), 0.04); transition: transform 0.6s cubic-bezier(.2, .9, .3, 1), opacity 0.4s ease; }
.b-row:hover { background: rgba(var(--fg), 0.025); }
.b-rank { font-size: 1.1rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.b-row.medal-1 .b-rank { color: #ffd34d; }
.b-row.medal-2 .b-rank { color: #d6dbe4; }
.b-row.medal-3 .b-rank { color: #e0a370; }
.b-name { min-width: 0; line-height: 1.25; }
.b-provider { font-size: 0.95rem; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-model { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-model em { font-style: normal; color: var(--text-muted); }
.b-bar { position: relative; height: 22px; display: flex; align-items: center; }
.b-fill { height: 14px; border-radius: 0 4px 4px 0; width: 0; transition: width 0.9s cubic-bezier(.2, .9, .3, 1); }
.b-fill.iq { background: var(--frontier); }
.b-fill.spd { background: var(--lane-0); }
.b-fill.task { background: var(--lane-6); }
.axis-chips { margin-bottom: 8px; }
.b-val { margin-left: 8px; font-size: 0.85rem; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-val small { color: var(--text-muted); font-weight: 400; }

/* Scatter */
.quad-label { fill: var(--text-muted); font-size: 11px; font-family: 'Figtree', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.median-line { stroke: rgba(var(--fg), 0.18); stroke-dasharray: 4 4; }
.p-label { font-size: 12px; font-family: 'Figtree', sans-serif; fill: var(--text-main); font-weight: 600; opacity: 0; transition: opacity 0.6s ease; }
.p-label.dim { fill: var(--text-dim); font-weight: 400; }
.in .p-label { opacity: 1; }
.pareto-line { stroke: var(--frontier); stroke-width: 2; fill: none; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.8s ease-in-out 0.6s; }
.in .pareto-line { stroke-dashoffset: 0; }

/* Takeaways */
.takeaways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.take {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 18px 20px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.takeaways.in .take { opacity: 1; transform: none; }
.take-kicker { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.take-big { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 6px; }
.take p { font-size: 0.9rem; color: var(--text-dim); }
.take p strong { color: var(--text-main); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .b-row, .b-fill, .p-label, .pareto-line, .take { transition: none !important; }
}

@media (max-width: 900px) {
    .takeaways { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .board-head, .b-row { grid-template-columns: 26px 1fr 1fr 1fr; gap: 6px; }
    .board-head > span:nth-child(2) { display: none; }
    .sort-btn { padding: 3px 7px; letter-spacing: 0.5px; font-size: 0.62rem; }
    .b-row { min-height: 74px; grid-template-areas: "rank name name name" "rank iq spd task"; align-content: center; row-gap: 2px; }
    .b-bar.task-bar { grid-area: task; }
    .b-val { font-size: 0.78rem; margin-left: 5px; }
    .b-rank { grid-area: rank; }
    .b-name { grid-area: name; }
    .b-bar.iq-bar { grid-area: iq; }
    .b-bar.spd-bar { grid-area: spd; }
    .board-head { grid-template-columns: 26px 1fr 1fr 1fr; }
    .takeaways { grid-template-columns: 1fr; }
    .kpi-text { font-size: 1.05rem; }
}

/* Usage / market penetration */
.sub-title { font-size: 1.15rem; font-weight: 400; color: var(--text-main); margin: 22px 0 10px; }
.usage-chips { margin-bottom: 14px; }
.usage-chips .f-chip small { color: var(--text-muted); }
.usage-source { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 14px; min-height: 1.4em; }
.usage-source a { color: var(--accent); }
.usage-source strong { color: var(--text-main); font-weight: 600; }
.u-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; height: 34px; }
.u-name { font-size: 0.9rem; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-track { display: flex; align-items: center; min-width: 0; }
.u-fill { height: 16px; border-radius: 0 4px 4px 0; background: var(--lane-0); width: 0; transition: width 0.8s cubic-bezier(.2, .9, .3, 1); flex: none; }
.u-row.lead .u-fill { background: var(--frontier); }
.u-val { margin-left: 8px; font-size: 0.85rem; color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-val small { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.u-row.none .u-val { color: var(--text-muted); font-weight: 400; }
.matrix-wrap { overflow-x: auto; padding: 0; }
.matrix { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.matrix th { font-weight: 400; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); padding: 12px 10px; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--card-border); }
.matrix th small { display: block; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 0.7rem; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.matrix td { padding: 9px 10px; text-align: center; border-bottom: 1px solid rgba(var(--fg), 0.04); color: var(--ink); font-variant-numeric: tabular-nums; }
.matrix td.miss { color: var(--text-muted); }
.matrix td.comb { font-weight: 700; border-left: 1px solid var(--card-border); }
.matrix th.comb { color: var(--primary); border-left: 1px solid var(--card-border); }
@media (max-width: 768px) {
    .u-row { grid-template-columns: 90px 1fr; gap: 8px; }
    .u-name { font-size: 0.8rem; }
}

/* Subscription price tags under each provider */
.b-plans { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.plan { font-size: 0.68rem; line-height: 1; padding: 3px 6px; border-radius: 8px; border: 1px solid rgba(247, 147, 26, 0.35); color: var(--text-dim); white-space: nowrap; }
.plan b { color: var(--ink); font-weight: 600; }
.plan.free { border-color: rgba(38, 230, 164, 0.4); color: var(--green); }

/* Top / secondary model switch */
.tier-chips { align-items: center; margin-bottom: 12px; }
.tier-chips .f-chip small { color: var(--text-muted); }
.tier-note { font-size: 0.78rem; color: var(--text-muted); }
.chip-sep { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-left: 10px; }
.no-level { font-size: 0.68rem; color: var(--orange); border: 1px dashed rgba(255, 170, 0, 0.5); border-radius: 6px; padding: 0 5px; margin-left: 4px; }

/* Best per category (LLM Stats) */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cat {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px 18px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.cats.in .cat { opacity: 1; transform: none; }
.cat-head { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.cat-head small { margin-left: auto; letter-spacing: 0; text-transform: none; color: var(--text-muted); font-size: 0.72rem; }
.cat-win { display: block; text-decoration: none; margin-bottom: 10px; }
.cat-win .cat-model { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.cat-win .cat-prov { font-size: 0.82rem; color: var(--text-dim); margin-top: 2px; }
.cat-win:hover .cat-model { color: var(--accent); }
.cat-run { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-main); text-decoration: none; padding: 3px 0; border-top: 1px solid rgba(var(--fg), 0.05); }
.cat-run:hover { color: var(--accent); }
.cat-run b { color: var(--text-muted); font-weight: 600; width: 1.2em; }
.cat-run small { margin-left: auto; color: var(--text-muted); }
.cats-credit { font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; }
.cats-credit a { color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) { .cat { transition: none !important; } }

/* LMArena human-preference table */
.arena th[data-sort-arena] { cursor: pointer; }
.arena th[data-sort-arena]:hover, .arena th.sorted { color: var(--primary); }
.arena td { text-align: left; vertical-align: top; min-width: 150px; }
.arena .elo { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.arena .elo small { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-left: 3px; }
.arena .elo-model { font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; }
.arena .elo-bar { height: 3px; border-radius: 2px; background: var(--lane-0); margin-top: 5px; width: 0; transition: width 0.8s cubic-bezier(.2, .9, .3, 1); }
.arena td.lead .elo { color: var(--primary); }
.arena td.lead .elo-bar { background: var(--frontier); }

/* Epoch Capabilities Index second opinion */
.eci .rank-cmp { font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eci .up { color: var(--green); }
.eci .down { color: var(--red); }
.eci .same { color: var(--text-muted); }

/* Bright skin */
:root[data-theme="light"] .b-row.medal-1 .b-rank { color: #a67c00; }
:root[data-theme="light"] .b-row.medal-2 .b-rank { color: #7d8594; }
:root[data-theme="light"] .b-row.medal-3 .b-rank { color: #b46a2e; }
:root[data-theme="light"] .take,
:root[data-theme="light"] .cat { box-shadow: 0 1px 3px rgba(20, 24, 40, 0.06); }
:root[data-theme="light"] .plan.free { border-color: rgba(4, 120, 87, 0.4); }
:root[data-theme="light"] .no-level { border-color: rgba(180, 83, 9, 0.5); }