/* =============================================================================
   Analytics page — UI redesign (matches Portfolio / History)
   Scoped to #analyticsSection.
   ============================================================================= */

#analyticsSection { max-width: 1280px; padding: 28px 28px 56px; }
#analyticsSection .page-section-header { align-items: flex-end; margin-bottom: 20px; }
#analyticsSection .page-section-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 6px; }
#analyticsSection .page-section-subtitle { font-size: 0.8125rem; }
#analyticsSection .btn-export {
    height: 38px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: 10px;
    background: transparent; color: var(--text-primary); font-size: 0.8125rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 8px;
}
#analyticsSection .btn-export:hover { border-color: #3A424C; background: var(--bg-tertiary); }

/* KPI cards — same as History */
#analyticsSection .kpi-grid { gap: 12px; margin-bottom: 20px; }
#analyticsSection .kpi-card { border: 1px solid var(--bg-tertiary); border-radius: 14px; padding: 18px; }
#analyticsSection .kpi-label { font-size: 0.75rem; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
#analyticsSection .kpi-value { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.5px; margin: 6px 0 4px; }
#analyticsSection .kpi-value.blue, #analyticsSection .kpi-value.muted { color: var(--text-primary); }
#analyticsSection .kpi-value.yellow { color: var(--accent); }
#analyticsSection .kpi-sub { font-size: 0.75rem; color: var(--text-secondary); }

/* Layout */
.an-grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }
/* Heatmap and distribution share one height; any extra space in the
   distribution card goes above the confidence buckets */
.an-grid-main > .an-card:last-child > .an-divider { margin-top: auto; }
.an-grid-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.an-card {
    min-width: 0; background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: 16px;
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.an-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-card-title-row { display: flex; align-items: center; gap: 8px; }
.an-card-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.an-card-sub { margin: 4px 0 0; font-size: 0.75rem; color: var(--text-secondary); }
.an-card > .an-card-title-row + .an-card-sub { margin-top: -10px; }
.an-legend { display: flex; gap: 14px; font-size: 0.75rem; color: var(--text-secondary); }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i, .an-tile-label i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.an-empty { grid-column: 1 / -1; text-align: center; color: var(--text-tertiary); font-size: 0.75rem; padding: 24px 8px; }
.an-dim { color: var(--text-tertiary); }
.an-strong { color: var(--text-primary); font-size: 0.875rem; font-weight: 600; }
.an-divider { height: 1px; background: var(--border-color); margin: 6px 0 2px; }
.an-disclaimer { margin: 20px 0 0; font-size: 0.6875rem; color: var(--text-secondary); line-height: 1.5; }
.an-disclaimer a { color: var(--accent); }

/* Heatmap */
.an-heatmap {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px;
    /* Rows grow to fill the card when the distribution card beside it is taller */
    flex: 1 1 auto; grid-auto-rows: minmax(40px, 1fr); align-content: stretch;
}
/* Fewer coins (Starter top 30): wider cells so the rows that fill the card
   stay close to square instead of tall and narrow */
.an-heatmap.an-heatmap--few { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: minmax(52px, 1fr); }
.an-cell {
    height: auto; min-height: 40px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; cursor: default; transition: transform 0.12s;
}
.an-cell:hover { transform: scale(1.06); }
.an-cell-sym { font-size: 0.6875rem; font-weight: 600; color: var(--text-primary); }
.an-cell-sig { font-size: 0.6875rem; }
.an-cell--buy .an-cell-sig { color: var(--green); }
.an-cell--sell .an-cell-sig { color: var(--red); }
.an-cell--hold .an-cell-sig { color: var(--accent); }

/* Distribution */
.an-stack { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--border-color); }
.an-stack > div { height: 100%; transition: width 0.3s; }
.an-stack-buy { background: var(--green); }
.an-stack-hold { background: var(--accent); }
.an-stack-sell { background: var(--red); }
.an-dist { display: flex; flex-direction: column; gap: 8px; }
.an-dist-row { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.an-dist-num { font-size: 0.75rem; color: var(--text-secondary); }
.an-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.an-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-sizing: border-box; }
.an-pill--buy { background: rgba(14, 203, 129, 0.12); color: var(--green); }
.an-pill--sell { background: rgba(246, 70, 93, 0.12); color: var(--red); }
.an-pill--hold { background: rgba(240, 185, 11, 0.10); color: var(--accent); }
.an-pill--hold .an-dot { background: transparent; border: 1.5px solid currentColor; }
.an-buckets { display: flex; flex-direction: column; gap: 12px; }
.an-bucket-top { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-primary); margin-bottom: 6px; }
.an-bucket-top .mono { color: var(--text-secondary); }
.an-bar { display: block; height: 6px; border-radius: 3px; background: var(--border-color); overflow: hidden; }
.an-bar > div, .an-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }

/* Exposure */
.an-expo-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.an-tile { flex: 1 1 90px; padding: 12px; border-radius: 10px; background: var(--bg-tertiary); }
.an-tile-label { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--text-secondary); }
.an-tile-label i { width: 6px; height: 6px; border-radius: 50%; }
.an-tile-val { font-size: 1.0625rem; font-weight: 600; margin-top: 6px; color: var(--text-primary); }
.an-expo-bars { display: flex; flex-direction: column; gap: 2px; }
.an-expo-row {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 76px; gap: 12px; align-items: center;
    min-height: 34px; padding: 0 4px; border-radius: 8px;
}
.an-expo-row:hover { background: rgba(255, 255, 255, 0.025); }
.an-expo-sym { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.an-expo-pct { font-size: 0.75rem; color: var(--text-secondary); text-align: right; }
.an-expo-sig { font-size: 0.6875rem; font-weight: 600; text-align: right; white-space: nowrap; }
.an-risk { padding-top: 16px; border-top: 1px solid var(--border-color); }
.an-risk-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); }
.an-risk-bar { position: relative; height: 6px; border-radius: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--green), var(--accent) 50%, var(--red)); }
.an-risk-needle { position: absolute; top: -4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-secondary); }
.an-risk-labels { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 8px; }

/* Strongest signals */
.an-top-scroll { overflow-x: auto; flex: 1 1 auto; display: flex; flex-direction: column; }
.an-top { min-width: 460px; flex: 1 1 auto; display: flex; flex-direction: column; }
/* Rows share any extra height so the list fills the card (no gap at the bottom)
   when the exposure card beside it is taller */
#topSignalsTable { flex: 1 1 auto; display: flex; flex-direction: column; }
#topSignalsTable > .an-top-row { flex: 1 1 auto; }
.an-top-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px; align-items: center; min-height: 52px; padding: 0 4px; border-bottom: 1px solid rgba(43, 49, 57, 0.5);
}
.an-top-row:not(.an-top-head):hover { background: rgba(255, 255, 255, 0.025); }
#topSignalsTable .an-top-row:last-child { border-bottom: 0; }
.an-top-head { min-height: 0; padding-bottom: 10px; font-size: 0.75rem; color: var(--text-secondary); border-bottom-color: var(--border-color); }
.an-top-head span:last-child, .an-top-exp { text-align: right; }
.an-top-asset { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.an-coin { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; background: var(--border-color); color: var(--text-primary); overflow: hidden; }
.an-top-conf { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-primary); }
.an-mini-bar { width: 48px; height: 3px; border-radius: 2px; background: var(--border-color); overflow: hidden; display: block; flex-shrink: 0; }
.an-mini-bar > span { display: block; height: 100%; }
.an-top-conf--buy .an-mini-bar > span { background: var(--green); }
.an-top-conf--sell .an-mini-bar > span { background: var(--red); }
.an-top-conf--hold .an-mini-bar > span { background: var(--accent); }
.an-top-cycle { font-size: 0.75rem; color: var(--text-secondary); }
.an-top-exp { font-size: 0.8125rem; }
.an-top-exp.positive { color: var(--green); }
.an-top-exp.negative { color: var(--red); }

@media (max-width: 1100px) {
    .an-grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .an-grid-bottom { grid-template-columns: minmax(0, 1fr); }
    #analyticsSection .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    #analyticsSection { padding: 20px 16px 40px; }
    .an-card { padding: 16px; }
    .an-heatmap { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
    .an-heatmap.an-heatmap--few { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* Apple HIG: every button and link can be tapped in a 44 × 44px area */
.btn-export { min-height: 44px; }

/* Analytics couldn't load: one message with Retry */
.an-load-error {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px;
    padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(247, 90, 109, 0.35); background: rgba(247, 90, 109, 0.06);
}
.an-load-error[hidden] { display: none; }
.an-load-error-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.an-load-error-retry {
    flex-shrink: 0; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #474D57;
    background: transparent; color: var(--text-primary); font: 600 0.875rem Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer;
}
.an-load-error-retry:hover { border-color: var(--text-secondary); }

/* PDF export: the error sits under its button (Analytics and History) */
.export-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.export-error { font-size: 0.75rem; color: var(--red); }
.export-error[hidden] { display: none; }
@media (max-width: 640px) { .export-wrap { align-items: stretch; width: 100%; } }

/* Heatmap cells are buttons (tap / keyboard); the picked cell's details show below */
button.an-cell { border: 0; font: inherit; color: inherit; cursor: pointer; }
.an-cell.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.an-cell-detail { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-tertiary); font-size: 0.75rem; color: #B7BDC6; }
.an-cell-detail[hidden] { display: none; }