/* Homepage chart layout (extracted from index.html in Phase 1). */
@keyframes shrink-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Isolate D3 charts to prevent whole-page layout thrashing during UI interactions */
#chart, #lap-heatmap-chart, #sector-chart, #stint-chart, #position-changes-chart,
#deltachart, #elevationchart, #speedchart, #throttlechart,
#brakechart, #driveractionchart, #acc_xchart, #acc_ychart, #acc_zchart,
#gearchart, #drschart, #rpchart, #driveraheadchart,
#distancetodriveraheadchart, #gaptodriveraheadchart {
    contain: layout style paint;
}

#tel-chart-container {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 2600px;
}

#stint-analysis-section,
#sector-chart-section,
#race-trace-section,
#tyre-strategy-section {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

#position-changes-section {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
}

/* Prevent mobile page-level horizontal overflow; table keeps its own x-scroll */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/*
 * Pro tip section: server-rendered visible, but hidden pre-paint when the
 * user previously dismissed it. The inline script in index.html adds the
 * root class during parse (replaces the old document.write anti-CLS hack);
 * this rule wins over the Tailwind `flex` class via the id selector.
 */
.ti-protip-dismissed #pro-tip-section {
    display: none;
}

/*
 * Full-bleed charts: break the chart sections out of the centered page
 * container so they consume the entire viewport width. --sbw is the reserved
 * vertical-scrollbar width (set from JS) so the right edge is never clipped by
 * the `overflow-x: hidden` rule above.
 */
.chart-full-bleed {
    width: calc(100vw - var(--sbw, 0px));
    max-width: calc(100vw - var(--sbw, 0px));
    margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
    margin-right: calc(50% - 50vw + var(--sbw, 0px));
}

.tabs > .tab-content {
    min-width: 0;
}

.pdf-page-shell {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
}

.pdf-page-container {
    position: relative;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top, rgba(15, 23, 42, 0.08), transparent 58%),
        white;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.pdf-page-container canvas {
    display: block;
}

.pdf-page-container[data-dark-mode="true"] {
    border-color: rgba(34, 197, 94, 0.18);
    background:
        radial-gradient(circle at top, rgba(34, 197, 94, 0.1), transparent 48%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.94));
    box-shadow: 0 22px 44px rgba(2, 6, 23, 0.46);
}

.pdf-page-container[data-dark-mode="true"] [data-pdf-page-canvas="true"] {
    background: #020617;
}

.textLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    opacity: 1;
    forced-color-adjust: none;
    transform-origin: 0 0;
}

.textLayer :is(span, br) {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
}

.textLayer .highlight {
    margin: -1px;
    padding: 1px;
    border-radius: 0.125rem;
}

.pdf-page-container[data-dark-mode="true"] .textLayer .highlight {
    background: rgba(34, 197, 94, 0.18);
}

#pdfViewer[data-pdf-dark-mode="true"] {
    color-scheme: dark;
}

#docs-tab-panel:fullscreen {
    background: hsl(var(--b1));
}

#docs-tab-panel ::selection {
    background: rgba(34, 197, 94, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0s !important;
        animation: none !important;
    }
}