/* Three tabs, no sub-tabs (index.html). Plan is one page in work order with a
 * bar of section links; Drivers shows roster and availability together. */

/* ---- Plan: section links ---- */
.plan-jump {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 var(--s3, 12px);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
    scrollbar-width: none;
    /* Covers the strip between it and the ticker, where rows showed through. */
    box-shadow: 0 -8px 0 var(--bg);
}
.plan-jump::-webkit-scrollbar { display: none; }
/* The race ticker is fixed over the top of the window (not in split view,
   where the pane scrolls on its own below the header). */
body.has-race-ticker:not(.split-on) .plan-jump { top: 36px; }

.plan-jump a {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 7px;
    color: var(--text-2);
    font-size: var(--fs-small, 13px);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.plan-jump a:hover { color: var(--text-hi, var(--text)); background: rgba(var(--accent-rgb), .12); }
.plan-jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Land below the sticky bar (and the ticker), not under it. */
.plan-sec, #savedData, #sub3 { scroll-margin-top: 64px; }
body.has-race-ticker:not(.split-on) .plan-sec,
body.has-race-ticker:not(.split-on) #savedData,
body.has-race-ticker:not(.split-on) #sub3 { scroll-margin-top: 100px; }

/* A section heading reads as one: brighter and a size up from the
   sub-headings (Final stint, Fuel saving...) inside it. */
.plan-sec > .section:first-child h2 {
    font-size: var(--fs-body);
    color: var(--text);
}
.plan-sec + .plan-sec > .section:first-child { margin-top: var(--s6, 32px); }

/* ---- Drivers: roster and availability side by side ---- */
@media (min-width: 1100px) {
    #tab2.active {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 0 var(--s4, 16px);
        align-items: start;
    }
    /* Half a screen: number boxes sized to their two digits, not the column. */
    #tab2 #rosterTable .rs-num { width: 72px; }
    #tab2 #rosterTable .rs-lap { width: 104px; }
}
.drv-col > .section:first-child { margin-top: var(--s2, 8px); }

/* Plan sections are tabs now (plan-tabs.js): one on screen at a time. */
#tab0 .plan-sec[hidden] { display: none; }
#tab0 .plan-sec + .plan-sec > .section:first-child { margin-top: 0; }
.plan-jump a { text-decoration: none; }
.plan-jump a.is-on {
    color: var(--text-hi, var(--text));
    box-shadow: inset 0 -2px 0 var(--accent);
}
.rm-picks { margin: 0 0 var(--s3, 12px); }
.tire-min-btn { margin: 0 0 0 6px; min-height: 28px; padding: 2px 10px; font-size: var(--fs-small, 12px); }

/* Drivers / Plan / Race stay in view with the section bar and the ticker.
   --tabs-h is measured by plan-tabs.js; the ticker is fixed, 28px. */
body { --tk-h: 0px; --tabs-h: 46px; }
body.has-race-ticker:not(.split-on):not(.is-embed) { --tk-h: 28px; }
html body #sections {
    position: sticky;
    top: var(--tk-h);
    z-index: calc(var(--z-sticky, 30) + 1);
    background: var(--v2-page, var(--bg));
}
html body #app #tab0 .plan-jump { top: calc(var(--tk-h) + var(--tabs-h)); }
#app .plan-sec, #app #savedData, #app #sub3 { scroll-margin-top: calc(var(--tk-h) + var(--tabs-h) + 64px); }