/* Crypto Cards: page-specific pieces on top of ai-analysis.css + top-models.css */

/* Country picker: a pill like the live switch, opening a searchable list */
.country-pick { position: relative; display: inline-block; vertical-align: top; }
/* The header's fade-in leaves it a stacking context below the sticky section nav (z 900), so lift it while the list is open */
header:has(.country-pick.open) { position: relative; z-index: 950; }
.country-pick + .kind-switch { margin-left: 12px; }
.era-switch.country-btn {
    align-items: center; gap: 14px; cursor: pointer; font-family: inherit; color: inherit;
    padding: 5px 16px 5px 5px; transition: border-color 0.2s ease, background 0.2s ease;
}
.country-btn:hover, .country-pick.open .country-btn { border-color: var(--primary); background: rgba(247, 147, 26, 0.1); }
.country-cur {
    display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border-radius: 34px;
    background: var(--primary); color: #0f111a; font-size: 1.05rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.country-cur .flag { width: 22px; margin: 0; border-radius: 3px; vertical-align: -3px; }
.country-caret { color: var(--primary); font-size: 0.9rem; transition: transform 0.25s ease; }
.country-pick.open .country-caret { transform: rotate(180deg); }
.country-pop {
    position: absolute; z-index: 1000; top: calc(100% - 8px); left: 0; width: 300px; padding: 8px;
    background: #171a26; border: 1px solid rgba(247, 147, 26, 0.35); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); text-align: left; animation: popIn 0.16s ease;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } }
.country-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: rgba(var(--fg), 0.05); border: 1px solid rgba(var(--fg), 0.08); }
.country-search:focus-within { border-color: rgba(247, 147, 26, 0.6); }
.country-search i { color: var(--text-muted); font-size: 0.85rem; }
.country-search input { flex: 1; min-width: 0; padding: 10px 0; background: transparent; border: none; outline: none; color: var(--text-main); font-family: inherit; font-size: 0.95rem; }
.country-search input::placeholder { color: var(--text-muted); }
.country-list { list-style: none; margin: 6px 0 0; padding: 0 2px 0 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--fg), 0.15) transparent; }
.country-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.92rem; color: var(--text-dim); }
.country-list li[hidden] { display: none; }
/* Anywhere / EU / US stick to the top of the scrolling list */
.country-list li.pinned { position: sticky; z-index: 1; height: 38px; padding-top: 0; padding-bottom: 0; background: #171a26; color: var(--text-main); font-weight: 600; border-radius: 0; }
.country-list li.pinned:nth-child(1) { top: 0; }
.country-list li.pinned:nth-child(2) { top: 38px; }
.country-list li.pinned:nth-child(3) { top: 76px; box-shadow: 0 1px 0 rgba(var(--fg), 0.1); margin-bottom: 4px; }
.country-list li.pinned:hover, .country-list li.pinned.active { background: #2a2420; }
.country-list li.pinned .flag { width: 22px; }
.country-list li .flag { width: 20px; margin: 0; border-radius: 2px; flex: none; }
.country-list li .bi-globe2 { width: 20px; text-align: center; color: var(--primary); }
.country-list li span { flex: 1; }
.country-list li .bi-check2 { color: var(--primary); visibility: hidden; }
.country-list li[aria-selected="true"] { color: var(--text-main); font-weight: 600; }
.country-list li[aria-selected="true"] .bi-check2 { visibility: visible; }
.country-list li:hover, .country-list li.active { background: rgba(247, 147, 26, 0.12); color: var(--text-main); }

/* Filters above the board */
.card-chips { align-items: center; margin-bottom: 12px; }
.card-chips + .card-chips { margin-top: -4px; }
.card-chips .f-chip small { color: var(--text-muted); }

/* Leaderboard: rank | card | trust | followers | reviews | fees */
/* minmax(0, 1fr) so the header buttons can't widen their column and shift it away from the rows */
.board-head, .b-row { grid-template-columns: 36px minmax(200px, 1.6fr) repeat(3, minmax(0, 1fr)) 92px 112px 112px; gap: 10px; }
.board-head .sort-btn { font-size: 0.68rem; letter-spacing: 0.5px; white-space: nowrap; padding: 3px 8px; gap: 4px; }
.board-head .sort-btn[data-sort="scale"], .board-head .sort-btn[data-sort="mem"], .board-head .sort-btn[data-sort="tx"] { justify-self: center; }
.b-scale { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.b-scale small { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.scale { font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.scale.massive { background: rgba(124, 140, 255, 0.28); color: #b9c2ff; }
.scale.large { background: rgba(124, 140, 255, 0.16); color: #9ea9f5; }
.scale.mid { background: rgba(124, 140, 255, 0.08); color: #8a93c9; }
.scale.small { background: rgba(var(--fg), 0.05); color: var(--text-dim); }
.scale.tiny { background: rgba(var(--fg), 0.03); color: var(--text-muted); }
.scale.unk { color: var(--text-muted); font-weight: 400; }
.b-unsure { margin: 3px 0 1px; font-size: 0.72rem; color: #ffbe3d; }
.b-unsure[hidden] { display: none; }
.kpi-card { display: inline-flex; align-items: center; }
.kpi-card .logo { width: 24px; height: 24px; border-radius: 6px; margin-right: 8px; }
.b-fee { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-variant-numeric: tabular-nums; }
.b-fee small { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.fee { font-size: 0.85rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; }
.fee.free { background: rgba(46, 204, 113, 0.22); color: #4be08c; }
.fee.low { background: rgba(46, 204, 113, 0.1); color: #8fdcae; }
.fee.mid { background: rgba(255, 170, 0, 0.14); color: #ffbe3d; }
.fee.high { background: rgba(230, 103, 103, 0.16); color: #ff8080; }
.fee.unk { color: var(--text-muted); font-weight: 400; }
.board.no-anim .b-row { transition: none; }
a.b-row { color: inherit; text-decoration: none; cursor: pointer; }
.b-row.dead { opacity: 0.55; }
.b-provider { display: flex; align-items: center; gap: 2px; }
.b-provider .guard { color: #4be08c; font-size: 0.85rem; margin-left: 6px; }
.b-provider .guard + .guard { margin-left: 4px; }
.b-provider .go { font-size: 0.7rem; color: var(--text-muted); margin-left: 6px; opacity: 0; transition: opacity 0.2s ease; }
.b-row:hover .go { opacity: 1; color: var(--accent); }
.logo { width: 18px; height: 18px; border-radius: 4px; flex: none; margin-right: 8px; background: rgba(var(--fg), 0.06); object-fit: contain; }
.flag { width: 14px; height: auto; border-radius: 2px; vertical-align: -1px; margin-right: 3px; }
.era-switch .flag { width: 18px; vertical-align: -2px; margin-right: 2px; }
.b-fill.trust { background: var(--frontier); }
.trust-cell { min-width: 0; }
.age-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.68rem; line-height: 1; padding: 3px 7px; border-radius: 9px; white-space: nowrap; color: var(--text-dim); border: 1px solid rgba(var(--fg), 0.12); }
.age-pill.long { color: #26e6a4; border-color: rgba(38, 230, 164, 0.45); background: rgba(38, 230, 164, 0.1); font-weight: 600; }
.age-pill.unknown { color: var(--text-muted); border-style: dashed; }
.b-fill.pop { background: var(--lane-0); }
.b-fill.tp { background: var(--lane-6); }
.b-val .star { color: #ffd34d; }

/* Tags under each card (same shape as the price tags on Top Models) */
.tag { font-size: 0.68rem; line-height: 1; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--card-border); color: var(--text-dim); white-space: nowrap; }
.tag.kind { border-color: rgba(0, 204, 255, 0.35); color: var(--accent); }
.tag.good { border-color: rgba(38, 230, 164, 0.4); color: #26e6a4; }
.tag.mid { border-color: rgba(255, 170, 0, 0.45); color: #ffaa00; }
.tag.bad { border-color: rgba(230, 103, 103, 0.5); color: #e66767; }
.tag.aff { border-color: rgba(247, 147, 26, 0.5); color: var(--primary); }
.tag b { color: var(--ink); font-weight: 600; }

/* Tooltip details */
.viz-tip { max-width: 360px; }
.viz-tip .tip-k { color: var(--text-muted); }
.viz-tip .tip-sep { border-top: 1px solid rgba(var(--fg), 0.08); margin: 6px 0; }
.viz-tip .tip-verdict { color: var(--text-main); font-style: italic; }

/* Best picks reuse .cats; a disabled pick when nothing matches */
.cat-none { font-size: 0.85rem; color: var(--text-muted); }
.cat-win .cat-model { display: flex; align-items: center; }

/* Scatter legend dots by regulation */
.scatter-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }

@media (max-width: 768px) {
    .country-pick + .kind-switch { margin-left: 0; }
    .country-cur { font-size: 0.78rem; letter-spacing: 0.5px; padding: 9px 14px; }
    .country-pop { left: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 32px)); animation: none; }
    .board-head, .b-row { grid-template-columns: 26px 1fr 1fr 1fr; }
    /* Seven sort buttons don't fit the row grid on a phone: wrap them as a centred chip row */
    .board-head { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .board-head > span { display: none; }
    .b-row { min-height: 120px; grid-template-areas: "rank name name name" "rank iq spd task" "rank scale mem tx"; }
    .b-scale { grid-area: scale; }
    .b-scale small { display: none; }
    .scale { font-size: 0.72rem; padding: 1px 6px; }
    .b-fee.mem { grid-area: mem; }
    .b-fee.tx { grid-area: tx; }
    .b-fee small { display: none; }
    .fee { font-size: 0.75rem; padding: 1px 6px; }
    .trust-cell { grid-area: iq; }
    .b-bar.pop-bar { grid-area: spd; }
    .b-bar.tp-bar { grid-area: task; }
}
.viz-tip .tip-bad { color: #e66767; }
.viz-tip .tip-warn { color: #ffaa00; }

/* Bright skin */
:root[data-theme="light"] .country-pop { background: #fff; border-color: rgba(208, 112, 10, 0.35); box-shadow: 0 18px 50px rgba(20, 24, 40, 0.18); }
:root[data-theme="light"] .country-list li.pinned { background: #fff; }
:root[data-theme="light"] .country-list li.pinned:hover,
:root[data-theme="light"] .country-list li.pinned.active { background: #fdf1e3; }
:root[data-theme="light"] .scale.massive { background: rgba(84, 100, 230, 0.2); color: #3442b8; }
:root[data-theme="light"] .scale.large { background: rgba(84, 100, 230, 0.12); color: #4452c2; }
:root[data-theme="light"] .scale.mid { background: rgba(84, 100, 230, 0.07); color: #5a65b0; }
:root[data-theme="light"] .b-unsure { color: #b45309; }
:root[data-theme="light"] .fee.free { background: rgba(16, 185, 129, 0.16); color: #047857; }
:root[data-theme="light"] .fee.low { background: rgba(16, 185, 129, 0.08); color: #0f7a55; }
:root[data-theme="light"] .fee.mid { background: rgba(245, 158, 11, 0.16); color: #b45309; }
:root[data-theme="light"] .fee.high { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
:root[data-theme="light"] .b-provider .guard { color: #059669; }
:root[data-theme="light"] .age-pill.long { color: #047857; border-color: rgba(4, 120, 87, 0.4); background: rgba(16, 185, 129, 0.1); }
:root[data-theme="light"] .b-val .star { color: #b88a00; }
:root[data-theme="light"] .tag.kind { border-color: rgba(2, 119, 181, 0.4); }
:root[data-theme="light"] .tag.good { border-color: rgba(4, 120, 87, 0.4); color: #047857; }
:root[data-theme="light"] .tag.mid { border-color: rgba(180, 83, 9, 0.45); color: #b45309; }
:root[data-theme="light"] .tag.bad { border-color: rgba(220, 38, 38, 0.45); color: #dc2626; }
:root[data-theme="light"] .viz-tip .tip-bad { color: #dc2626; }
:root[data-theme="light"] .viz-tip .tip-warn { color: #b45309; }