/* analysis.php page styles — flyttad från inline <style> 2026-08-31 */
/* ═══════ Weekend Tracker ═══════ */
.wk-tracker { display:flex; align-items:center; justify-content:center; gap:0; }
.wk-step { display:flex; flex-direction:column; align-items:center; gap:8px; }
.wk-dot {
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:0.78rem; font-weight:700; font-family:var(--font-data);
    transition:all var(--dur-med) var(--ease-out);
}
.wk-dot-done {
    background:linear-gradient(135deg, var(--f1-green), #00a854); color:#000;
    box-shadow:0 0 20px rgba(0,210,106,0.2);
}
.wk-dot-active {
    border:2px solid var(--f1-orange); color:var(--f1-orange);
    animation:wkPulse 2s ease-in-out infinite;
    box-shadow:0 0 24px rgba(255,135,0,0.12);
}
.wk-dot-pending { background:var(--bg-elevated); border:1px solid var(--border-medium); color:var(--text-dim); }
@keyframes wkPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,135,0,0.35)} 50%{box-shadow:0 0 0 12px rgba(255,135,0,0)} }
.wk-line { width:56px; height:2px; background:var(--border-subtle); margin-bottom:28px; flex-shrink:0; }
.wk-line-done { background:var(--f1-green); box-shadow:0 0 6px rgba(0,210,106,0.15); }
.wk-label { font-size:0.78rem; color:var(--text-muted); font-family:var(--font-data); font-weight:700; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
/* Sprint weekends: compact layout for 5 sessions */
.wk-sprint .wk-dot { width:34px; height:34px; font-size:0.7rem; }
.wk-sprint .wk-line { width:36px; margin-bottom:22px; }
.wk-sprint .wk-label { font-size:0.72rem; letter-spacing:0.5px; }
@media(max-width:480px) {
    .wk-sprint .wk-dot { width:28px; height:28px; font-size:0.65rem; }
    .wk-sprint .wk-line { width:20px; margin-bottom:18px; }
    .wk-sprint .wk-label { font-size:0.65rem; letter-spacing:0; }
}

/* ═══════ Section Spacing ═══════ */
.tab-panel > .card,
.tab-panel > .pred-grid-2,
.page-content > .card,
.page-content > .pred-grid-2 { margin-bottom:24px; }
.tab-panel > .card:last-child,
.tab-panel > .pred-grid-2:last-child,
.page-content > .card:last-child,
.page-content > .pred-grid-2:last-child { margin-bottom:0; }

/* ═══════ 2-Column Grid ═══════ */
.pred-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ═══════ Results Grid (Sprint + Race side by side) ═══════ */
.ana-results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; align-items:start; }
.ana-results-grid .data-table { display:table; width:100%; }
@media (max-width:768px) {
    .ana-results-grid .data-table { display:block; }
}

/* ═══════ PODIUM – Top 3 Hero ═══════ */
.pred-podium {
    display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:12px;
    padding:24px 20px; align-items:end;
}
.pred-podium-card {
    position:relative; border-radius:var(--radius-md); overflow:hidden;
    padding:22px 16px 18px; text-align:center; background:var(--bg-panel);
    border:1px solid var(--border-subtle);
    transition:all var(--dur-med) var(--ease-out);
}
.pred-podium-card::before {
    content:''; position:absolute; inset:0; opacity:0.07; pointer-events:none;
    background:linear-gradient(135deg, var(--team-color, transparent) 0%, transparent 60%);
}
.pred-podium-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,0.4);
    border-color:var(--border-medium);
}
.podium-1 { padding:30px 20px 22px; border-color:rgba(255,215,0,0.2); }
.podium-2 { border-color:rgba(192,192,192,0.12); }
.podium-3 { border-color:rgba(205,127,50,0.12); }
.podium-pos {
    font-family:var(--font-data); font-weight:800; line-height:1; margin-bottom:6px;
}
.podium-1 .podium-pos { font-size:2.8rem; color:#ffd700; text-shadow:0 0 30px rgba(255,215,0,0.25); }
.podium-2 .podium-pos { font-size:2rem; color:#c0c0c0; text-shadow:0 0 20px rgba(192,192,192,0.15); }
.podium-3 .podium-pos { font-size:2rem; color:#cd7f32; text-shadow:0 0 20px rgba(205,127,50,0.15); }
.podium-color-bar { width:36px; height:4px; border-radius:2px; margin:0 auto 10px; }
.podium-abbr { font-weight:800; color:var(--text-bright); letter-spacing:1px; }
.podium-1 .podium-abbr { font-size:1.8rem; }
.podium-2 .podium-abbr, .podium-3 .podium-abbr { font-size:1.4rem; }
.podium-name { font-size:0.78rem; color:var(--text-secondary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podium-team { font-size:0.78rem; color:var(--text-dim); font-family:var(--font-data); letter-spacing:0.5px; text-transform:uppercase; margin-top:1px; }
.podium-score { font-family:var(--font-data); font-weight:800; line-height:1; margin-top:14px; }
.podium-1 .podium-score { font-size:2rem; }
.podium-2 .podium-score, .podium-3 .podium-score { font-size:1.5rem; }
.podium-factor-bar {
    display:flex; height:10px; border-radius:5px; overflow:hidden;
    background:rgba(0,0,0,0.3); margin-top:14px; gap:1px;
}
.podium-conf {
    font-family:var(--font-data); font-size:0.78rem; font-weight:700;
    letter-spacing:0.5px; margin-top:10px; padding:2px 8px;
    border-radius:3px; display:inline-block;
}

/* ═══════ PREDICTION ROWS (P4+) ═══════ */
.pred-legend {
    display:flex; flex-wrap:wrap; gap:14px; padding:12px 20px;
    border-bottom:1px solid var(--border-subtle);
    font-size:0.78rem; font-family:var(--font-data); color:var(--text-muted);
}
.pred-legend-item { display:flex; align-items:center; gap:5px; }
.pred-legend-dot { width:10px; height:10px; border-radius:3px; }

.pred-row {
    display:grid; grid-template-columns:40px 4px 1fr 60px minmax(100px,220px) 54px;
    align-items:center; gap:12px; padding:11px 20px;
    border-bottom:1px solid var(--border-subtle);
    transition:all var(--dur-fast) var(--ease-out);
}
.pred-row:hover { background:var(--bg-elevated); }
.pred-row:last-child { border-bottom:none; }

.pred-pos {
    font-family:var(--font-data); font-weight:800; font-size:0.95rem; text-align:center;
    color:var(--text-secondary);
}
.pred-pos-top10 { color:var(--f1-green); }
.pred-driver { display:flex; flex-direction:column; gap:1px; min-width:0; }
.pred-driver-abbr { font-weight:700; font-size:0.9rem; color:var(--text-bright); }
.pred-driver-name { font-size:0.78rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pred-score {
    font-family:var(--font-data); font-weight:800; font-size:1.05rem; text-align:right;
    color:var(--text-bright);
}

.factor-bar {
    display:flex; height:14px; border-radius:4px; overflow:hidden;
    background:var(--bg-abyss); gap:1px;
}
.factor-seg {
    height:100%; min-width:2px;
    transition:all var(--dur-med) var(--ease-out);
    opacity:0.85;
}
.factor-seg:hover { opacity:1; }
.factor-seg:first-child { border-radius:4px 0 0 4px; }
.factor-seg:last-child { border-radius:0 4px 4px 0; }

.pred-conf {
    font-family:var(--font-data); font-size:0.78rem; font-weight:700; letter-spacing:0.5px;
    text-align:center; padding:3px 8px; border-radius:4px;
}
.pred-conf-high { background:rgba(0,210,106,0.12); color:var(--f1-green); border:1px solid rgba(0,210,106,0.12); }
.pred-conf-med { background:rgba(255,135,0,0.12); color:var(--f1-orange); border:1px solid rgba(255,135,0,0.12); }
.pred-conf-low { background:rgba(110,110,130,0.1); color:var(--text-muted); border:1px solid rgba(110,110,130,0.08); }

/* ═══════ Pace Tabs ═══════ */
.pace-tabs { display:flex; gap:4px; }
.pace-tab {
    background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:4px;
    color:var(--text-muted); font-family:var(--font-data); font-size:0.78rem; font-weight:600;
    padding:5px 14px; cursor:pointer; transition:all var(--dur-fast) var(--ease-out);
}
.pace-tab:hover { color:var(--text-bright); border-color:var(--border-medium); }
.pace-tab.active { background:var(--f1-cyan); color:#000; border-color:var(--f1-cyan); }
.pace-panel.hidden { display:none; }

/* ═══════ Weather ═══════ */
.wx-grid { display:flex; gap:10px; flex-wrap:wrap; }
.wx-card {
    flex:1; min-width:120px; background:var(--bg-panel); border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm); padding:14px; text-align:center;
    transition:all var(--dur-fast) var(--ease-out);
}
.wx-card:hover { border-color:var(--border-medium); background:var(--bg-elevated); }
.wx-day { font-family:var(--font-data); font-size:0.78rem; font-weight:700; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.wx-icon { font-size:1.8rem; margin-bottom:6px; }
.wx-temp { font-family:var(--font-data); font-weight:700; color:var(--text-bright); font-size:0.95rem; }
.wx-detail { font-size:0.78rem; color:var(--text-secondary); margin-top:4px; }
.wx-rain { color:var(--f1-cyan); font-weight:600; }

/* ═══════ Strategy ═══════ */
.strat-grid { display:flex; flex-wrap:wrap; gap:10px; }
.strat-compound {
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
    font-family:var(--font-data); font-size:0.78rem;
    transition:all var(--dur-fast) var(--ease-out);
}
.strat-compound:hover { border-color:var(--border-medium); background:var(--bg-elevated); }
.strat-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }

/* ═══════ Circuit History Position Cells ═══════ */
.ch-pos {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:28px; height:24px; border-radius:4px; font-weight:600;
    font-size:0.78rem; padding:0 5px;
}
.ch-pos-1 { background:rgba(255,215,0,0.15); color:#ffd700; font-weight:700; }
.ch-pos-2 { background:rgba(192,192,192,0.12); color:#c0c0c0; font-weight:700; }
.ch-pos-3 { background:rgba(205,127,50,0.12); color:#cd7f32; font-weight:700; }
.ch-pos-pts { background:rgba(0,210,106,0.08); color:var(--f1-green); }
.ch-pos-dnf { background:rgba(225,6,0,0.1); color:var(--f1-red); font-size:0.78rem; }
.ch-team-dot {
    display:inline-block; width:6px; height:6px; border-radius:50%;
    margin-right:3px; vertical-align:middle; flex-shrink:0;
}

/* ═══════ Responsive ═══════ */
@media (max-width:900px) {
    .pred-grid-2 { grid-template-columns:1fr; }
    .pred-podium { grid-template-columns:1fr 1fr 1fr; gap:8px; }
}
@media (max-width:768px) {
    .wk-tracker { gap:0; }
    .wk-line { width:24px; }
    .wk-dot { width:32px; height:32px; font-size:0.78rem; }
    .pred-podium { grid-template-columns:1fr; gap:10px; padding:16px; }
    .pred-podium-card { padding:16px !important; }
    .podium-1 .podium-pos { font-size:2rem; }
    .podium-2 .podium-pos, .podium-3 .podium-pos { font-size:1.6rem; }
    .podium-1 .podium-abbr { font-size:1.4rem; }
    .podium-2 .podium-abbr, .podium-3 .podium-abbr { font-size:1.2rem; }
    .podium-1 .podium-score { font-size:1.6rem; }
    .podium-2 .podium-score, .podium-3 .podium-score { font-size:1.3rem; }
    .pred-row { grid-template-columns:32px 3px 1fr 44px 54px; gap:6px; padding:9px 14px; }
    .pred-row .factor-bar { display:none; }
    .pred-driver-name { display:none; }
}
@media (max-width:480px) {
    .pace-tabs { flex-wrap:wrap; }
    .wk-line { width:14px; }
    .wk-dot { width:28px; height:28px; }
    .pred-podium { gap:8px; padding:12px; }
}

/* ═══════ Analysis page-specific ═══════ */
a.driver-link, span.driver-link { color:var(--text-primary); text-decoration:none; }
a.driver-link:hover { text-decoration:underline; color:var(--f1-red); }
.driver-card { cursor:pointer; transition:box-shadow 0.2s; overflow:hidden; }
.driver-card:hover { box-shadow:0 0 0 1px var(--border-medium); }
.driver-card.expanded { box-shadow:0 0 0 2px var(--f1-red); }
/* OBS: driver-expand togglas av JS via style.display — initial style="display:none" måste stå kvar i markup */
.driver-expand { margin-top:14px; padding-top:14px; border-top:1px solid var(--border-subtle); }
.driver-expand .data-table th { font-size:0.72rem; }
.driver-expand .data-table td { padding:4px 8px; }
.ana-placeholder {
    padding:40px 20px; text-align:center;
    background:var(--bg-panel); border:1px dashed var(--border-subtle);
    border-radius:var(--radius-md); color:var(--text-dim); font-size:0.85rem;
}

/* ═══════ Analysis Responsive ═══════ */
@media (max-width:900px) {
    .ana-grid-2 { grid-template-columns:1fr !important; }
}

/* ═══════ H2H Responsive ═══════ */
@media (max-width:540px) {
    #h2h-grid { grid-template-columns:1fr !important; }
}

/* ═══════ Track Tab ═══════ */
.trk-label { display:block; font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; font-weight:700; margin-bottom:4px; letter-spacing:0.04em; }
#panel-track .filter-select { font-size:0.85rem; padding:8px 32px 8px 12px; }
#panel-track .trk-sel { max-width:190px; }
#panel-track .trk-sel-sm { max-width:100px; }
#trackCanvasWrap { height:65vh; min-height:500px; max-height:850px; position:relative; background:var(--bg-panel); border-radius:var(--radius-sm); }
#trackCanvas { display:block; width:100%; height:100%; }
@media (max-width:768px) {
    #panel-track .trk-sel, #panel-track .trk-sel-sm { max-width:100%; width:100%; }
    #trackCanvasWrap { height:55vh; min-height:350px; }
}

/* ═══════ Speed Trace ═══════ */
#speedTraceWrap { height:300px; position:relative; background:var(--bg-panel); border-radius:var(--radius-sm); padding:16px 12px 8px; }
#speedTraceCanvas { display:block; width:100%; height:100%; }
@media (max-width:768px) {
    #speedTraceWrap { height:200px; padding:12px 8px 4px; }
}
.st-tooltip {
    position:fixed; pointer-events:none; z-index:1000;
    background:rgba(13,13,16,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
    padding:10px 14px; font-family:var(--font-data); font-size:0.78rem;
    color:var(--text-secondary); min-width:160px; transition:opacity 0.15s;
}
.st-tooltip-driver { font-weight:700; font-size:0.82rem; margin-bottom:4px; }
.st-tooltip-row { display:flex; justify-content:space-between; gap:12px; padding:1px 0; }
.st-tooltip-label { color:var(--text-muted); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.04em; }
.st-tooltip-val { font-weight:700; color:var(--text-primary); }
.st-tooltip-sep { border-top:1px solid var(--border-subtle); margin:6px 0; }
.st-compound { display:inline-block; padding:1px 5px; border-radius:3px; font-size:0.68rem; font-weight:700; }
/* ═══════ Debrief Tab ═══════ */
.debrief-header { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.debrief-toggle { font-size:13px; color:var(--text-secondary); cursor:pointer; }
.debrief-toggle input { margin-right:4px; }
.debrief-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.debrief-card { background:var(--card-bg,#1a1a2e); border:1px solid var(--border-color,#2a2a4a); border-radius:8px; padding:16px; }
.debrief-card--wide { grid-column:1/-1; }
.debrief-card h4 { margin:0 0 4px; font-size:15px; font-weight:600; }
.debrief-subtitle { font-size:12px; color:var(--text-secondary,#888); margin:0 0 12px; font-family:ui-monospace,monospace; }
@media(max-width:900px) { .debrief-grid{grid-template-columns:1fr;} .debrief-card--wide{grid-column:auto;} }

/* ═══════ Utilities (sidscope — flyttade från inline style="…" 2026-09) ═══════ */
.is-hidden { display:none; }
.text-dim { color:var(--text-dim); }
.text-secondary { color:var(--text-secondary); }
.fw-600 { font-weight:600; }
/* .fw-700 finns redan globalt i style.css */
.fs-72 { font-size:0.72rem; }
.fs-78 { font-size:0.78rem; }
.fs-82 { font-size:0.82rem; }
.fs-85 { font-size:0.85rem; }
.w-40 { width:40px; }
.w-44 { width:44px; }
.mb-10 { margin-bottom:10px; }

/* Accentkanter — färg per instans via style="--accent:…" */
.ana-accent-left { border-left:3px solid var(--accent, var(--f1-red)); }
.ana-accent-top { border-top:3px solid var(--accent, var(--f1-red)); }

/* Card-paddings */
.ana-body-compact { padding:14px 20px; }
.ana-body-md { padding:16px; }
.ana-body-sm { padding:12px 16px; }
.ana-body-xs { padding:12px; }

/* Toolbars & kontroller */
.ana-head-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ana-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ana-selects { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ana-sel { min-width:140px; }
.ana-check { display:flex; align-items:center; gap:4px; font-size:0.78rem; color:var(--text-secondary); cursor:pointer; user-select:none; }
.ana-check input { accent-color:var(--f1-orange); cursor:pointer; }

.ana-sprint-badge { color:var(--f1-orange); font-weight:600; }
.ana-phase-label { font-size:0.78rem; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; }

/* Form guide */
.ana-td-driver { font-weight:600; white-space:nowrap; }
.ana-form-cell { text-align:center; vertical-align:middle; line-height:1.3; }
.ana-form-sprint { font-size:0.68rem; color:var(--f1-orange); margin-top:1px; }
.ana-form-warn { font-size:0.6rem; color:var(--f1-red); margin-top:1px; }

/* Tabeller */
.ana-dn { margin-right:6px; color:var(--text-muted); font-size:0.82rem; }
.ana-td-team { color:var(--text-secondary); font-size:0.82rem; }
.ana-team-sub { color:var(--text-dim); font-size:0.78rem; margin-left:4px; }
.ana-color-chip { display:inline-block; width:4px; height:16px; border-radius:2px; vertical-align:middle; margin-right:6px; background:var(--tc); }
.ana-ko-badge { font-size:0.68rem; font-weight:700; color:var(--f1-red); background:rgba(225,6,0,0.1); padding:1px 5px; border-radius:3px; margin-left:6px; }

/* Compound-prickar — färg per instans via style="--cc:…" */
.ana-comp-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--cc); vertical-align:middle; margin-right:4px; flex-shrink:0; }
.ana-comp-dot--sm { width:8px; height:8px; }
.ana-comp-dot--lg { width:14px; height:14px; margin-right:0; }
.ana-comp-row { display:flex; gap:6px; flex-wrap:wrap; }
.ana-comp-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:4px; background:var(--bg-elevated); font-size:0.78rem; }

/* Laps completed-staplar — bredd/färg via style="--w:…;--tc:…" */
.ana-lapbar-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.ana-lapbar-abbr { width:40px; text-align:right; font-family:var(--font-data); font-size:0.82rem; }
.ana-lapbar-track { flex:1; height:14px; background:var(--bg-elevated); border-radius:2px; overflow:hidden; }
.ana-lapbar-fill { width:var(--w); height:100%; background:var(--tc); opacity:0.8; border-radius:2px; }
.ana-lapbar-count { width:32px; text-align:right; font-family:var(--font-data); font-size:0.82rem; color:var(--text-secondary); }

/* Chart-höjd per instans via style="--h:…px" */
.ana-chart-dyn { height:var(--h, 400px); position:relative; }

/* Strategy-fliken */
.ana-label-upper { color:var(--text-dim); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; }
.ana-sess-pill { display:inline-block; padding:3px 10px; border-radius:4px; font-size:0.78rem; font-weight:600; }
.ana-sess-pill--on { background:var(--f1-red); color:#fff; }
.ana-sess-pill--off { background:var(--bg-panel); color:var(--text-dim); border:1px solid var(--border-subtle); opacity:0.5; }
.ana-hint { font-size:0.72rem; color:var(--text-dim); }
.ana-tyre-card { background:var(--bg-panel); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:16px; transition:all var(--dur-fast) var(--ease-out); }
.ana-tyre-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ana-tyre-name { font-weight:700; color:var(--text-bright); font-size:0.95rem; }
.ana-sess-tags { margin-top:8px; display:flex; gap:4px; flex-wrap:wrap; }
.ana-sess-tag { font-size:0.68rem; padding:1px 6px; border-radius:3px; background:rgba(255,255,255,0.06); color:var(--text-dim); }

/* Driver cards */
.ana-team-strip { height:3px; background:var(--tc); }
.ana-driver-body { padding:14px 18px; }
.ana-driver-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.ana-driver-name { font-weight:700; font-size:1rem; }
.ana-driver-pos { font-size:1.3rem; font-weight:700; color:var(--f1-red); }
.ana-sub { font-size:0.78rem; color:var(--text-muted); }
.ana-stat-box { background:var(--bg-panel); padding:8px 10px; border-radius:4px; }
.ana-stat-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; }
.ana-stat-val { font-family:var(--font-data); font-weight:700; }
.ana-stat-sub { font-size:0.75rem; color:var(--text-muted); }
.ana-minibar { height:3px; background:var(--bg-elevated); margin-top:5px; border-radius:2px; overflow:hidden; }
.ana-minibar-fill { width:var(--w); height:100%; background:var(--tc); }
.ana-vs-row { background:var(--bg-panel); padding:6px 10px; border-radius:4px; display:flex; justify-content:space-between; font-size:0.82rem; margin-bottom:10px; }
.ana-fps-row { display:flex; gap:4px; }
.ana-fps-chip { padding:2px 8px; font-size:0.72rem; border-radius:3px; }
.ana-fps-chip--on { background:var(--bg-accent); color:var(--text-primary); }
.ana-fps-chip--off { background:var(--bg-elevated); color:var(--text-muted); }
.ana-expand-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }

/* Head-to-head */
.ana-h2h-head { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; margin-bottom:16px; }
.ana-h2h-abbr { font-weight:800; font-size:1.1rem; }
.ana-h2h-vs { display:flex; align-items:center; color:var(--text-dim); font-weight:700; font-size:0.82rem; }
.ana-h2h-metric { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.ana-h2h-mlabel { text-align:center; min-width:70px; }
.ana-h2h-bar { display:flex; height:3px; border-radius:2px; overflow:hidden; margin-top:4px; }
.ana-h2h-seg { flex:var(--f, 50); background:rgba(255,255,255,0.08); }
.ana-h2h-seg--win { background:var(--f1-green); }

/* Track-fliken */
.ana-trk-controls { padding:20px 20px 12px; }
.ana-trk-row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; }
.ana-trk-vs { color:var(--text-muted); font-weight:700; font-size:0.82rem; padding-bottom:10px; }
.ana-trk-btn { padding:8px 20px; }
.ana-canvas-card { padding:0; margin-top:12px; overflow:hidden; }
/* OBS: #trackLegend + #speedTraceCard togglas av JS via style.display — initial style="display:none" står kvar i markup */
#trackLegend { padding:16px 20px; border-top:1px solid var(--border-subtle); }
.ana-st-toolbar { display:flex; align-items:center; gap:8px; padding:8px 16px 0; justify-content:flex-end; }

/* ═══════ Teaser Gate ═══════ */
.analysis-teaser-gate { position:relative; }
.analysis-teaser-gate ~ .tab-panel { filter:blur(6px); pointer-events:none; user-select:none; max-height:400px; overflow:hidden; }
.analysis-teaser-gate__overlay { text-align:center; padding:48px 24px; margin:24px 0; background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; }
.analysis-teaser-gate__overlay h2 { color:var(--text-bright); margin-bottom:8px; }
.analysis-teaser-gate__overlay p { color:var(--text-secondary); margin-bottom:16px; max-width:400px; margin-left:auto; margin-right:auto; }