/* Reference-led analytics composition within the FomoHub workbench. */
body[data-active-page='stats'] #main-content { max-width: 94rem; padding-bottom: 4rem; }
.stats-page { width: 100%; min-width: 0; }
.stats-page [hidden] { display: none !important; }
.stats-page :is(button, a, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stats-exchange-logo { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; object-fit: contain; }
.stats-venue-label { display: inline-flex; min-width: 0; align-items: center; gap: .5rem; }
.venue-header { display: flex; align-items: center; margin-bottom: 1.5rem; }
.venue-heading { display: flex; align-items: center; gap: .125rem; min-width: 0; }
#venue-identity { margin: 0; min-width: 0; color: var(--text-primary); font: 650 clamp(1.375rem, 4vw, 1.75rem)/1.25 var(--font-sans); letter-spacing: -.025em; }
#venue-identity .stats-exchange-logo { width: 1.75rem; height: 1.75rem; }
#venue-referral { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: .125rem .25rem; color: inherit; text-decoration: none; transition: color 140ms cubic-bezier(.16, 1, .3, 1); }
#venue-referral:hover, #venue-referral:focus-visible, #venue-referral:active { color: var(--accent-hover); }
#venue-referral:focus-visible { outline-color: var(--accent-hover); }
#venue-website { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 44px; min-width: 44px; min-height: 44px; padding-left: .25rem; color: var(--text-secondary); text-decoration: none; }
#venue-website:hover { color: var(--accent); }
#exchanges-metrics-table tr[data-venue-dashboard-row] { cursor: pointer; }
#exchanges-metrics-table tr[data-venue-dashboard-row]:is(:hover, :focus-within) { background: var(--bg-hover); }
.exchange-metrics-dashboard { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; }
.exchange-metrics-dashboard:hover { color: var(--accent); }
.stats-status { font-family: var(--font-mono); font-size: .75rem; line-height: 1.5; }
.stats-status:not(.is-error):not(.is-stale) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stats-status.is-error, .stats-status.is-stale { margin: -.5rem 0 1rem; padding: .5rem .75rem; border: 1px solid var(--border-primary); background: var(--bg-secondary); }
.stats-status.is-error { color: var(--negative); }
.stats-status.is-stale { color: var(--warning); }
.stats-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.stats-chart-panel:not(.stats-summary-panel):not(.stats-total-panel) { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1rem; border: 1px solid var(--border-primary); background: var(--bg-secondary); }
.stats-summary-panel, .stats-summary-panel:hover, .stats-total-panel, .stats-total-panel:hover { border: 1px solid var(--border-primary); }
.stats-total-panel { overflow: visible; }
.stats-summary-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.stats-summary-header h2 { margin: 0; }
.stats-summary-header .ex-card-change:empty { display: none; }
.stats-summary-panel .stats-chart-empty { padding: .5rem; font-size: .75rem; }
.stats-summary-panel .ex-card-chart { height: 104px; }
.stats-chart-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.stats-chart-heading { display: flex; min-width: 0; align-items: center; gap: .125rem; }
.stats-chart-header h2:not(.ex-card-label) { margin: 0; color: var(--text-secondary); font: 550 .875rem/1.35 var(--font-sans); }
.stats-chart-header .ex-card-label { margin: 0; }
.stats-chart-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .625rem 1rem; margin: .125rem 0 1rem; }
.stats-chart-value { color: var(--text-primary); font: 500 clamp(1.5rem, 4vw, 2rem)/1.15 var(--font-mono); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.stats-chart-change { font: 500 .75rem var(--font-mono); }
.stats-chart-change.is-positive { color: var(--positive); }
.stats-chart-change.is-negative { color: var(--negative); }
.stats-chart-change:empty { display: none; }
.stats-periods.timeframe-pills { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); height: auto; min-width: 0; }
.stats-periods .pill { display: flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; min-height: 44px; padding-inline: .625rem; }
.stats-volume-changes { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .75rem 0 0; color: var(--text-secondary); font: 400 .75rem var(--font-sans); }
.stats-volume-changes > span { display: inline-flex; align-items: baseline; gap: .25rem; }
.stats-volume-changes strong { font: 550 .75rem var(--font-mono); font-variant-numeric: tabular-nums; }
.stats-volume-changes .is-positive { color: var(--positive); }
.stats-volume-changes .is-negative { color: var(--negative); }
.stats-volume-changes .is-stale { opacity: .6; cursor: help; }
.stats-volume-panel .stats-chart-header { align-items: flex-start; row-gap: .75rem; margin-bottom: 1rem; }
.stats-volume-panel .stats-chart-heading { flex-direction: column; align-items: flex-start; gap: 0; }
.stats-volume-panel .stats-periods { width: 100%; margin: 0; }
.stats-chart-frame { position: relative; width: 100%; min-width: 0; height: 13rem; flex: 1 1 auto; }
.stats-volume-panel .stats-chart-frame { height: 17rem; }
.stats-chart-frame canvas { width: 100% !important; height: 100% !important; }
.stats-volume-tooltip-value { color: var(--text-primary); font: 750 1.375rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-activity-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.stats-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--text-secondary); font: 400 .875rem/1.6 var(--font-mono); margin: 0; }
.venue-opportunity { margin-top: 0; border-color: var(--border-primary); }
.venue-opportunity h2 { margin: 0; line-height: 1.35; }
.venue-opportunity .bs-best-identity { align-content: stretch; justify-items: stretch; gap: 0; padding: 0; border-right: 0; }
.venue-opportunity .bs-best-label { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .625rem 1rem; border-bottom: 1px solid var(--border-primary); }
.venue-opportunity .bs-best-identity > strong { padding: .625rem 1rem 0; }
.venue-opportunity .bs-best-pair { padding: .5rem 1rem .875rem; }
.venue-opportunity :is(.is-positive, .is-long) { color: var(--positive); }
.venue-opportunity :is(.is-negative, .is-short) { color: var(--negative); }
.venue-opportunity-empty { margin: 0; padding: .75rem 1rem; color: var(--text-secondary); font: 400 .8125rem/1.5 var(--font-mono); }
.venue-opportunity:not(.has-opportunity) { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
.venue-opportunity:not(.has-opportunity) .venue-opportunity-identity { grid-area: auto; border-right: 0; }
.venue-opportunity .bs-leg { color: var(--text-secondary); }
.venue-opportunity .bs-leg > :is(span, a) { overflow-wrap: anywhere; }
.venue-opportunity .bs-exchange-referral-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.venue-opportunity-metrics { border-top-color: var(--border-primary); }
.venue-opportunity-metrics > div { grid-template-rows: minmax(2.5rem, auto) 1fr; align-content: stretch; align-items: stretch; justify-items: stretch; row-gap: 0; padding: 0; border-right-color: var(--border-primary); }
.venue-opportunity-metrics > div > dt { display: flex; align-items: center; justify-content: center; padding: .625rem 1rem; border-bottom: 1px solid var(--border-primary); }
.venue-opportunity-metrics > div > dd { align-self: center; padding: .625rem 1rem; }
.venue-opportunity-metrics > .bs-best-funding-metric { border-right: 0; border-bottom: 1px solid var(--border-primary); }
.venue-opportunity-metrics > .bs-best-live-apr { grid-column: auto; border-right: 1px solid var(--border-primary); }
.venue-opportunity-apr-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: inherit; font: inherit; text-decoration: none; }
.venue-opportunity-metrics > .venue-opportunity-week { grid-column: auto; border-right: 0; }
.venue-opportunity-metrics .bs-best-funding-venue > :is(span, a):not(.bs-best-funding-interval) { overflow: hidden; text-overflow: ellipsis; }
.venue-opportunity-metrics .bs-best-funding-interval { font-size: .75rem; }
.venue-opportunity .bs-best-action { border-top-color: var(--border-primary); border-left-color: var(--border-primary); }
.venue-opportunity-open { min-width: 44px; justify-content: center; }
.venue-markets { min-width: 0; margin-top: 0; }
.venue-markets-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.venue-market-search-field { flex: 1 1 12rem; width: 100%; min-width: 0; max-width: 21rem; height: 44px; }
.venue-market-search-field input { flex: 1 1 auto; width: 100%; min-width: 0; font-size: 16px; }
.venue-market-search-field input:focus-visible { outline: none; }
.venue-market-scroll { width: 100%; max-height: min(52rem, 75vh); border: 1px solid var(--border-primary); background: var(--bg-secondary); overflow: auto; overscroll-behavior-x: contain; }
.venue-market-table { width: 100%; min-width: 60rem; border-collapse: separate; border-spacing: 0; }
.venue-market-table :is(th, td) { padding: .375rem .25rem; border-right: 1px solid var(--border-subtle); text-align: center; white-space: nowrap; }
.venue-market-table :is(th, td):last-child { border-right: 0; }
.venue-market-table thead th { position: sticky; top: 0; z-index: 2; padding-block: .25rem; background: var(--bg-tertiary); }
.venue-market-table th:first-child { width: 6rem; position: sticky; left: 0; z-index: 1; white-space: normal; }
.venue-market-table thead th:first-child { z-index: 3; }
.venue-market-table tbody tr { cursor: default; }
.venue-market-table tbody tr[data-referral] { cursor: pointer; }
.venue-market-table tbody tr[data-referral]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.venue-market-table tbody :is(th, td) { height: 3.75rem; border-bottom: 1px solid var(--border-subtle); }
.venue-market-table tbody th { background: var(--bg-secondary); color: var(--text-primary); font: 750 .875rem/1.4 var(--font-sans); letter-spacing: normal; text-transform: none; user-select: text; }
.venue-market-table tbody td { color: var(--text-primary); font: 600 .8125rem/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.venue-market-table thead button { display: inline-grid; grid-template-columns: 8px minmax(0, 1fr) 8px; align-items: center; column-gap: .25rem; width: 100%; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: center; text-transform: inherit; cursor: pointer; }
.venue-market-table thead button > [data-stats-copy] { grid-column: 2; grid-row: 1; min-width: 0; white-space: normal; line-height: 1.3; }
.venue-market-table thead .sort-arrow { grid-column: 3; grid-row: 1; justify-self: center; margin-left: 0; }
.venue-market-table thead button:hover, .venue-market-table thead button.is-active { color: var(--text-primary); }
.venue-market-table [data-stats-copy^='table'] { text-transform: none; }
.venue-market-table tbody tr:is(:hover, :focus-within) :is(th, td) { background: var(--bg-hover); }
.venue-market-table td.is-positive { color: var(--positive); }
.venue-market-table td.is-negative { color: var(--negative); }
.venue-market-table td.is-stale { color: var(--text-secondary); }
.venue-market-base { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; max-width: 4rem; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
.venue-market-base-link:hover { color: var(--accent); }
.venue-market-table :is(th, td):nth-child(6) { width: 7rem; }
.venue-market-table :is(th, td):nth-child(7) { width: 6rem; }
.venue-market-status { margin: 0; padding: 2rem 1rem; color: var(--text-secondary); text-align: center; font: 400 .875rem/1.5 var(--font-mono); }
.venue-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
    #stats-page { --markets-metric: clamp(2.1rem, 7vw, 2.5rem); }
}
@media (max-width: 767.98px) {
    /* Phone: search spans the gutter, columns hug their values so Volume and Open Interest show before swiping. */
    .venue-market-search-field { max-width: none; }
    .venue-market-table { width: auto; min-width: 0; }
    .venue-market-table thead th { white-space: normal; }
    .venue-market-table th:first-child { width: 5rem; }
    .venue-market-table thead th:not(:first-child) { min-width: 6.5rem; }
    .venue-market-base { max-width: 4.5rem; overflow-wrap: break-word; }
}
@media (min-width: 768px) {
    .venue-opportunity.has-opportunity .bs-best-identity { border-right: 1px solid var(--border-primary); }
    .venue-opportunity .bs-exchange-referral-link { min-width: 0; min-height: 0; }
    .venue-market-table { table-layout: fixed; }
    .venue-market-search-field { flex: 0 1 auto; width: auto; height: 38px; }
    .venue-market-search-field input { flex: 0 1 auto; width: 140px; font-size: .8125rem; }
    .venue-market-table :is(th, td) { padding-inline: .625rem; }
    .venue-market-table tbody :is(th, td) { height: 4.5rem; }
    .venue-market-table th:first-child { width: auto; }
    .venue-market-base { max-width: none; }
    .venue-market-table :is(th, td):nth-child(6) { width: auto; }
    .venue-market-table :is(th, td):nth-child(7) { width: auto; }
    .venue-header { margin-bottom: 1.75rem; }
    .venue-opportunity-metrics { grid-template-columns: minmax(15rem, 2fr) minmax(8rem, 1fr) minmax(12rem, 1.3fr); }
    .venue-opportunity-metrics > .bs-best-funding-metric { border-right: 1px solid var(--border-primary); border-bottom: 0; }
    .stats-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* stats.js sets --activity-columns so rows split the cards evenly; the last row stretches. */
    .stats-activity-grid { display: flex; flex-wrap: wrap; }
    .stats-activity-grid > .stats-activity-card { flex: 1 1 calc((100% - (var(--activity-columns, 6) - 1) * 1rem) / var(--activity-columns, 6)); min-width: 0; }
    .stats-volume-panel { grid-column: 1 / -1; }
    .stats-chart-panel:not(.stats-summary-panel):not(.stats-total-panel) { padding: 1.25rem; }
    .stats-volume-panel .stats-periods { width: auto; margin: 0; }
    .stats-volume-panel .stats-chart-frame { height: 23rem; }
}
@media (min-width: 1024px) {
    .stats-charts { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
    .stats-volume-panel { grid-column: 1; grid-row: 1 / span 2; }
    .stats-oi-panel { grid-column: 2; grid-row: 1; }
    .stats-markets-panel { grid-column: 2; grid-row: 2; }
    /* One or two activity cards (stats.js) sit under Markets; Total Volume grows to the column. */
    .stats-charts.has-compact-activity .stats-volume-panel { grid-row: 1 / span 3; }
    .stats-charts.has-compact-activity .stats-volume-panel .stats-chart-frame { height: auto; min-height: 23rem; }
    .stats-charts > .stats-activity.is-compact { grid-column: 2; grid-row: 3; }
    .stats-activity.is-compact > .market-stats-divider { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stats-page * { scroll-behavior: auto; } }