/* Race Insights dashboard preview (loaded only on race-insights.html).
   A dark, product-style panel so it reads like the real thing. All data shown on it is sample data and is labelled as such. */

.dash { margin-top: var(--s12); }
.dist-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }

.dash-card { background: #0a2a43; color: #eaf4fb; border-radius: 18px; padding: var(--s6); border: 1px solid #1b4a70; }
.dash-card h3 { font-size: 0.95rem; letter-spacing: 0.02em; margin: 0 0 var(--s4); color: #bcd6e8; font-weight: 700; text-transform: uppercase; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid #1b4a70; margin-bottom: var(--s4); }
.dash-race { margin: 0; font: 800 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.dash-sub { margin: var(--s1) 0 0; color: #f1cf8a; font-weight: 700; font-size: 0.85rem; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.kpi { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--s4); border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(188, 214, 232, 0.2); }
.kpi-l { color: #bcd6e8; font-size: 0.82rem; font-weight: 700; }
.kpi-v { font: 800 1.9rem/1.05 var(--font-display); letter-spacing: -0.03em; }
.kpi-d { color: #bcd6e8; font-size: 0.85rem; }
.kpi-d.up { color: #7fe0b5; font-weight: 700; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } }

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.dash-grid .wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }
.panel { padding: var(--s4); border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(188, 214, 232, 0.16); }
.panel-note { margin: var(--s3) 0 0; color: #bcd6e8; font-size: 0.85rem; }

.bars2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.bars2 li { display: grid; grid-template-columns: 8.5rem 1fr 3.4rem; gap: var(--s3); align-items: center; font-size: 0.92rem; }
.wide .bars2 li { grid-template-columns: 5rem 1fr 3rem; }
.bars2 span { color: #dcebf5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars2 i { display: block; height: 0.85rem; width: var(--w); border-radius: 4px; background: #4a8fb8; transform-origin: left; animation: dgrow 600ms ease both; }
.bars2 i.hl { background: #6fd3ee; }
.bars2 b { text-align: right; font-variant-numeric: tabular-nums; }
@keyframes dgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 480px) { .bars2 li { grid-template-columns: 6.2rem 1fr 3rem; } }

.curve { width: 100%; height: auto; display: block; }
.curve .grid { stroke: rgba(188, 214, 232, 0.2); stroke-width: 1; }
.curve .area { fill: rgba(111, 211, 238, 0.18); }
.curve .ln { fill: none; stroke: #6fd3ee; stroke-width: 2.5; stroke-linejoin: round; }
.curve .dot { fill: #0a2a43; stroke: #6fd3ee; stroke-width: 2; }
.curve .tick { fill: #bcd6e8; font-size: 11px; }

.insights { margin-top: var(--s4); padding: var(--s4) var(--s6); border-radius: 12px; background: rgba(241, 207, 138, 0.1); border: 1px solid rgba(241, 207, 138, 0.4); }
.insights h3 { color: #f1cf8a; }
.insights ul { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s2); }
.dash-foot { margin-top: var(--s4); }

@media (prefers-reduced-motion: reduce) { .bars2 i { animation: none; } }