/* Earn on Stablecoins: page-specific pieces on top of ai-analysis.css + top-models.css + debit-cards.css */

.peg-switch + .region-switch { margin-left: 12px; }
.mode-switch { display: flex; width: max-content; margin: 0 auto 12px; }
/* DeFi has no regions or lock terms; exchanges have no safety chips */
body:not(.mode-defi) #safeChips, .mode-defi #termChips, .mode-defi .region-switch { display: none; }
.b-fee.term small { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.region-switch .flag { width: 18px; vertical-align: -2px; margin-right: 4px; }

/* Leaderboard: rank | exchange & coin | real APR | headline | term | $10k a year */
.board-head, .b-row { grid-template-columns: 36px minmax(220px, 1.7fr) minmax(0, 1.3fr) 130px 100px 110px; gap: 10px; }
.board-head .sort-btn[data-sort="head"], .board-head .sort-btn[data-sort="term"], .board-head .sort-btn[data-sort="year"] { justify-self: center; }
.budget-input { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; background: rgba(var(--fg), 0.05); border: 1px solid rgba(var(--fg), 0.12); color: var(--primary); font-weight: 700; }
.budget-input:focus-within { border-color: var(--primary); }
.budget-input input { width: 110px; background: transparent; border: none; outline: none; color: var(--text-main); font-family: inherit; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Countries the product is closed to: red, struck through, faded flag */
.tag.excl { border-color: rgba(230, 103, 103, 0.5); color: #e66767; }
.tag.excl s { text-decoration-thickness: 1.5px; }
.tag.excl .flag { opacity: 0.5; filter: grayscale(0.6); }
.unsure-ico { color: #ffbe3d; font-size: 0.8rem; margin-left: 2px; cursor: help; }
.budget-note { font-size: 0.78rem; color: var(--text-muted); }
.coin-name { margin-left: 6px; font-weight: 700; color: var(--accent); }
.b-fill.apr { background: var(--lane-2); }
.b-row .b-val { font-variant-numeric: tabular-nums; }
.head-apr { font-size: 0.9rem; font-weight: 700; color: #ff8080; text-decoration-thickness: 2px; }
.b-fee.head small { white-space: normal; max-width: 130px; line-height: 1.2; }

/* Headline vs real: two bars per product */
.teasers { display: flex; flex-direction: column; gap: 4px; }
.t-row { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 14px; align-items: center; padding: 8px 6px; border-bottom: 1px solid rgba(var(--fg), 0.04); color: inherit; text-decoration: none; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease; }
.teasers.in .t-row { opacity: 1; transform: none; }
.t-row:hover { background: rgba(var(--fg), 0.025); }
.t-name { display: flex; align-items: center; flex-wrap: wrap; font-weight: 600; }
.t-name small { flex-basis: 100%; margin-top: 2px; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.t-bars { display: flex; flex-direction: column; gap: 4px; }
.t-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 16px; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.t-fill { height: 100%; width: 0; border-radius: 4px; transition: width 0.9s cubic-bezier(.2, .9, .3, 1); }
.teasers.in .t-fill { width: var(--w); }
.t-fill.head { background: var(--lane-7); opacity: 0.75; }
.t-fill.real { background: var(--lane-2); }

@media (max-width: 768px) {
    .peg-switch + .region-switch { margin-left: 0; margin-top: 10px; }
    .board-head, .b-row { grid-template-columns: 26px 1fr 1fr 1fr; }
    .b-row { min-height: 120px; grid-template-areas: "rank name name name" "rank apr apr apr" "rank head term year"; }
    .b-bar.apr-bar { grid-area: apr; }
    .b-fee.head { grid-area: head; }
    .b-fee.term { grid-area: term; }
    .b-fee.year { grid-area: year; }
    .b-fee.head small { display: none; }
    .t-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .t-row, .t-fill { transition: none !important; }
}

/* Bright skin */
:root[data-theme="light"] .head-apr { color: #dc2626; }