/* Fleet: a lede that reads as a paragraph, then one board panel with one row per vehicle.
   Every state here is a class or an inline opacity written by section.js from the playhead,
   so nothing loops and scrolling up reverses exactly. No @keyframes in this file. */

/* --- Lede captions: left column, same band the board later occupies --- */
:where([data-section="fleet"]) .fcaps{position:absolute;left:clamp(20px,2.5vw,40px);top:clamp(196px,21vh,286px);width:min(560px,38vw);z-index:5;pointer-events:none;text-align:left;display:grid;gap:clamp(10px,1.35vh,18px);opacity:0;transition:opacity .45s ease;font-family:'Instrument Sans',sans-serif}
/* scrim: guarantees the lede stays legible over the depot facade behind it */
:where([data-section="fleet"]) .fcaps::before{content:"";position:absolute;inset:-58px -72px -54px -44px;z-index:-1;pointer-events:none;background:radial-gradient(120% 72% at 8% 50%,rgba(8,11,15,.84) 0%,rgba(8,11,15,.62) 40%,rgba(8,11,15,.26) 62%,rgba(8,11,15,0) 84%)}
:where([data-section="fleet"]) .fcaps p{position:relative;margin:0;max-width:none;padding-left:clamp(16px,1.3vw,22px);font-size:clamp(1.55rem,2.1vw,2.45rem);font-weight:600;line-height:1.14;letter-spacing:-.032em;color:#b3bec7;opacity:0;transform:translateY(14px);text-shadow:0 1px 3px rgba(6,9,13,.92),0 2px 16px rgba(6,9,13,.85),0 0 40px rgba(6,9,13,.7);transition:opacity .55s ease,color .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
:where([data-section="fleet"]) .fcaps p::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .5s ease,background .5s ease}
/* past lines stay on screen so the three sentences build into one paragraph */
:where([data-section="fleet"]) .fcaps p.is-past{opacity:1;transform:none;color:#b3bec7}
:where([data-section="fleet"]) .fcaps p.is-past::before{opacity:.3;background:#b3bec7}
:where([data-section="fleet"]) .fcaps p.is-on{opacity:1;transform:none;color:var(--text)}
:where([data-section="fleet"]) .fcaps p.is-on::before{opacity:1}

/* --- Board panel. left + width are a contract with the camera framing: do not
       override either one in any min-width:701px media query. --- */
:where([data-section="fleet"]) .fdash{position:absolute;left:clamp(20px,2.5vw,40px);top:50%;transform:translateY(-50%);z-index:4;width:clamp(408px,33vw,528px);max-height:calc(100dvh - 210px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(150,170,184,.22);border-radius:16px;background:linear-gradient(180deg,rgba(23,30,38,.975) 0%,rgba(15,20,26,.985) 100%);box-shadow:0 28px 70px rgba(0,0,0,.52),0 2px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px) saturate(1.08);backdrop-filter:blur(10px) saturate(1.08);opacity:0;transition:opacity .3s ease;pointer-events:auto;font-family:'Instrument Sans',sans-serif;color:#e5ebee}
:where([data-section="fleet"]) .fdash[aria-hidden="true"]{pointer-events:none}
:where([data-section="fleet"]) .fdash::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--accent) 0%,rgba(63,214,143,.35) 38%,rgba(63,214,143,0) 72%)}

:where([data-section="fleet"]) .fdash__head{flex:none;padding:clamp(17px,1.45vw,23px) clamp(19px,1.6vw,26px) clamp(14px,1.2vw,18px);border-bottom:1px solid rgba(255,255,255,.085);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0))}
:where([data-section="fleet"]) .fdash__brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 11px}
:where([data-section="fleet"]) .fdash__src{font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7d8894}
/* static on purpose: a pulsing dot would be the one looping thing in the module */
:where([data-section="fleet"]) .fdash__live{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#7fd6ac}
:where([data-section="fleet"]) .fdash__live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(63,214,143,.16)}
:where([data-section="fleet"]) .fdash__head h2{margin:0;font-size:clamp(1.32rem,1.55vw,1.74rem);line-height:1.1;font-weight:620;letter-spacing:-.032em;color:#f4f6f5}
:where([data-section="fleet"]) .fdash__lead{margin:10px 0 0;max-width:34em;font-size:clamp(.78rem,.85vw,.86rem);line-height:1.5;color:#a9b6bd}
:where([data-section="fleet"]) .fdash__meta{margin:11px 0 0;font-size:.66rem;line-height:1.2;letter-spacing:.05em;color:#76828c;font-variant-numeric:tabular-nums}

/* overflow:hidden is deliberate: a scrollbar inside the board is a failure, the
   type ramps below are sized so five rows always fit instead. */
:where([data-section="fleet"]) .fleet-list{list-style:none;margin:0;padding:0;min-height:0;overflow:hidden}
:where([data-section="fleet"]) .fleet-row{--tone:#3fd68f;--tone-text:#9fe2c1;--wash:transparent;position:relative;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:0 clamp(12px,1.1vw,17px);padding:clamp(9px,1.05vh,14px) clamp(19px,1.6vw,26px) clamp(9px,1.05vh,14px) clamp(21px,1.75vw,28px);border-bottom:1px solid rgba(255,255,255,.055);background:linear-gradient(90deg,var(--wash) 0%,rgba(0,0,0,0) 46%);opacity:.15;transition:opacity .45s ease}
:where([data-section="fleet"]) .fleet-row::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--tone);opacity:.9}
:where([data-section="fleet"]) .fleet-row--ready::before{opacity:.42}
/* the rail overhangs by 1px to bridge each border, but not on the last row:
   that overhang would make the list scrollable by exactly 1px */
:where([data-section="fleet"]) .fleet-row:last-child{border-bottom:0}
:where([data-section="fleet"]) .fleet-row:last-child::before{bottom:0}
:where([data-section="fleet"]) .fleet-row.is-on{opacity:1}
:where([data-section="fleet"]) .fleet-row--urgent{--tone:#f06a5f;--tone-text:#ffb3aa;--wash:rgba(240,106,95,.10)}
:where([data-section="fleet"]) .fleet-row--due{--tone:#e8b04b;--tone-text:#f4cf8e;--wash:rgba(232,176,75,.085)}
:where([data-section="fleet"]) .fleet-row--booked{--tone:#8ab4e6;--tone-text:#c2dbf5;--wash:rgba(138,180,230,.075)}
:where([data-section="fleet"]) .fleet-row--ready{--tone:#3fd68f;--tone-text:#9fe2c1;--wash:transparent}
:where([data-section="fleet"]) .fleet-plate{display:inline-flex;align-items:stretch;height:clamp(23px,1.85vw,28px);border-radius:5px;overflow:hidden;border:1px solid rgba(0,0,0,.45);background:linear-gradient(180deg,#f7f7f3 0%,#dcdedb 100%);box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9);flex:none}
:where([data-section="fleet"]) .fleet-plate i{display:flex;align-items:flex-end;justify-content:center;width:clamp(12px,1vw,15px);padding-bottom:2px;background:linear-gradient(180deg,#274a9c 0%,#17316e 100%);font-style:normal;font-size:.44rem;font-weight:700;letter-spacing:.02em;color:#eef2ff}
:where([data-section="fleet"]) .fleet-plate b{display:flex;align-items:center;padding:0 clamp(7px,.6vw,10px);font-size:clamp(.84rem,.92vw,.98rem);font-weight:700;letter-spacing:.055em;color:#15181d;white-space:nowrap;font-variant-numeric:tabular-nums}
:where([data-section="fleet"]) .fleet-row__body{display:flex;flex-direction:column;min-width:0;gap:2px}
:where([data-section="fleet"]) .fleet-row__next{font-size:clamp(.86rem,.95vw,.95rem);line-height:1.25;font-weight:500;color:#e9eef0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where([data-section="fleet"]) .fleet-row--ready .fleet-row__next{color:#b9c6cb;font-weight:450}
:where([data-section="fleet"]) .fleet-row__model{font-size:.64rem;line-height:1.2;letter-spacing:.045em;text-transform:uppercase;color:#79858e}
:where([data-section="fleet"]) .fleet-row__when{font-size:.72rem;line-height:1.2;font-weight:600;color:var(--tone-text);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
:where([data-section="fleet"]) .fleet-row--ready .fleet-row__when{color:#8c979f;font-weight:500}

/* the pills land last, on .is-foot from section.js, once every row is in */
:where([data-section="fleet"]) .fdash__foot{display:flex;gap:9px;flex:none;padding:clamp(11px,1vh,14px) clamp(19px,1.6vw,26px) clamp(13px,1.2vh,17px);border-top:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.022);opacity:.16;transition:opacity .5s ease}
:where([data-section="fleet"]) .fdash.is-foot .fdash__foot{opacity:1}
:where([data-section="fleet"]) .fleet-foot__pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border:1px solid rgba(63,214,143,.34);border-radius:999px;background:rgba(63,214,143,.09);color:#a6e9c8;font-size:.7rem;font-weight:550;line-height:1;white-space:nowrap}
:where([data-section="fleet"]) .fleet-foot__pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
:where([data-section="fleet"]) .fleet-foot__pill--warn{border-color:rgba(232,176,75,.36);background:rgba(232,176,75,.10);color:#f2c882}

/* --- Outro --- */
:where([data-section="fleet"]) .stageline{position:absolute;z-index:3;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;font-family:'Instrument Sans',sans-serif}
:where([data-section="fleet"]) .stageline--outro{bottom:clamp(56px,9vh,112px);right:clamp(28px,4vw,72px);left:auto;text-align:right;width:min(360px,34vw);transform:translateY(14px)}
:where([data-section="fleet"]) .stageline.is-on{opacity:1;transform:none}
:where([data-section="fleet"]) .stageline p{margin:0}
:where([data-section="fleet"]) .stageline.is-on a{pointer-events:auto}
:where([data-section="fleet"]) .outro__kicker{margin:0 0 14px;margin-left:auto;font-size:clamp(1.05rem,1.35vw,1.45rem);font-weight:600;line-height:1.2;letter-spacing:-.028em;color:var(--text);text-shadow:0 2px 20px rgba(0,0,0,.62)}
:where([data-section="fleet"]) .outro__cta{margin:0}
:where([data-section="fleet"]) .stageline--outro .button{box-shadow:0 12px 32px rgba(0,0,0,.45)}
:where([data-section="fleet"]) a:focus-visible{outline:2px solid #abedcd;outline-offset:3px}
:where([data-section="fleet"]) .fleet-credits{display:inline-block;margin-top:12px;font-size:.64rem;color:#8e99a1;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){
:where([data-section="fleet"]) .fdash__head{padding:16px 18px 12px}
:where([data-section="fleet"]) .fdash__head h2{font-size:1.4rem}
:where([data-section="fleet"]) .fdash__lead{font-size:.78rem}
:where([data-section="fleet"]) .fleet-row{padding:11px 16px 11px 20px;gap:0 9px}
:where([data-section="fleet"]) .fleet-row__next{font-size:.82rem}
:where([data-section="fleet"]) .fleet-row__when{font-size:.66rem}
:where([data-section="fleet"]) .fdash__foot{padding:10px 18px 13px}
}

/* 1280x720 compaction: five rows plus header and pills inside 484px of panel */
@media(min-width:701px) and (max-height:860px){
:where([data-section="fleet"]) .fdash{top:calc(50% + 44px);max-height:calc(100dvh - 236px)}
:where([data-section="fleet"]) .fdash__head{padding:14px 18px 12px}
:where([data-section="fleet"]) .fdash__head h2{font-size:1.24rem}
:where([data-section="fleet"]) .fdash__lead{font-size:.75rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:where([data-section="fleet"]) .fdash__meta{display:none}
/* tight enough that the longest next-step string still fits on one line at 1280 */
:where([data-section="fleet"]) .fleet-row{padding:9px 16px 9px 20px;gap:0 9px}
:where([data-section="fleet"]) .fleet-plate b{font-size:.82rem;padding:0 7px}
:where([data-section="fleet"]) .fleet-row__next{font-size:.82rem}
:where([data-section="fleet"]) .fleet-row__when{font-size:.68rem}
:where([data-section="fleet"]) .fleet-plate{height:23px}
:where([data-section="fleet"]) .fdash__foot{padding:10px 18px 12px}
:where([data-section="fleet"]) .fcaps{top:188px;width:min(520px,44vw)}
:where([data-section="fleet"]) .fcaps p{font-size:clamp(1.25rem,2vw,1.7rem)}
:where([data-section="fleet"]) .outro__kicker{font-size:1rem;margin-bottom:11px}
}

@media(max-width:700px){
:where([data-section="fleet"]) .fcaps{left:14px;right:14px;top:212px;width:auto;gap:8px;bottom:auto}
:where([data-section="fleet"]) .fcaps p{font-size:1.08rem;line-height:1.22;padding-left:12px}
:where([data-section="fleet"]) .fcaps::before{inset:-20px -24px -18px -20px}
:where([data-section="fleet"]) .fdash{top:auto;bottom:104px;left:10px;right:10px;transform:none;width:auto;max-height:calc(100svh - 245px);border-radius:13px}
:where([data-section="fleet"]) .fdash__brand{margin-bottom:7px}
:where([data-section="fleet"]) .fdash__src{font-size:.54rem}
:where([data-section="fleet"]) .fdash__live{font-size:.52rem}
:where([data-section="fleet"]) .fdash__head{padding:11px 13px 9px}
:where([data-section="fleet"]) .fdash__head h2{font-size:1.1rem}
:where([data-section="fleet"]) .fdash__lead{font-size:.66rem}
:where([data-section="fleet"]) .fdash__meta{display:none}
:where([data-section="fleet"]) .fleet-row{padding:7px 13px 7px 15px;gap:0 9px}
:where([data-section="fleet"]) .fleet-plate{height:20px}
:where([data-section="fleet"]) .fleet-plate i{width:11px;font-size:.4rem}
:where([data-section="fleet"]) .fleet-plate b{font-size:.68rem;padding:0 6px}
:where([data-section="fleet"]) .fleet-row__next{font-size:.72rem}
:where([data-section="fleet"]) .fleet-row__model{font-size:.54rem}
:where([data-section="fleet"]) .fleet-row__when{font-size:.6rem}
:where([data-section="fleet"]) .fdash__foot{padding:8px 13px 10px;gap:6px}
:where([data-section="fleet"]) .fleet-foot__pill{height:22px;font-size:.58rem;padding:0 8px}
:where([data-section="fleet"]) .stageline--outro{top:112px;bottom:auto;left:auto;right:14px;width:auto;text-align:right}
:where([data-section="fleet"]) .stageline--outro .button{padding:6px 10px;min-height:28px;font-size:.66rem}
:where([data-section="fleet"]) .outro__kicker{display:none}
:where([data-section="fleet"]) .fleet-credits{display:none}
}

@media(max-width:700px) and (max-height:740px){
:where([data-section="fleet"]) .fdash{max-height:calc(100svh - 199px)}
:where([data-section="fleet"]) .fdash__head{padding:8px 11px 6px}
:where([data-section="fleet"]) .fdash__head h2{font-size:1rem}
:where([data-section="fleet"]) .fdash__lead,:where([data-section="fleet"]) .fdash__foot{display:none}
:where([data-section="fleet"]) .fleet-row{padding:5px 11px 5px 13px}
:where([data-section="fleet"]) .fleet-row__model{display:none}
:where([data-section="fleet"]) .stageline--outro{top:105px}
}

@media(max-height:600px) and (min-width:701px){
:where([data-section="fleet"]) .fdash{top:110px;bottom:86px;max-height:none;transform:none}
:where([data-section="fleet"]) .fdash__head{padding:10px 14px 8px}
:where([data-section="fleet"]) .fdash__head h2{font-size:1.1rem}
:where([data-section="fleet"]) .fdash__lead,:where([data-section="fleet"]) .fdash__foot{display:none}
:where([data-section="fleet"]) .fdash__meta,:where([data-section="fleet"]) .outro__kicker{display:none}
:where([data-section="fleet"]) .fleet-row{padding:7px 14px 7px 16px}
:where([data-section="fleet"]) .fleet-plate{height:21px}
:where([data-section="fleet"]) .fleet-row__model{display:none}
:where([data-section="fleet"]) .fcaps{top:150px;gap:7px}
:where([data-section="fleet"]) .fcaps p{font-size:1.15rem}
:where([data-section="fleet"]) .stageline--outro{bottom:92px}
}

@media(prefers-reduced-motion:reduce){
:where([data-section="fleet"]) .fcaps,:where([data-section="fleet"]) .fcaps p,:where([data-section="fleet"]) .fdash,:where([data-section="fleet"]) .fdash__foot,:where([data-section="fleet"]) .stageline,:where([data-section="fleet"]) .stageline--outro,:where([data-section="fleet"]) .fleet-plate,:where([data-section="fleet"]) .fleet-row{transition:none}
:where([data-section="fleet"]) .fcaps p,:where([data-section="fleet"]) .fleet-row,:where([data-section="fleet"]) .fdash__foot{transform:none}
}

html:not(.js) :where([data-section="fleet"]) .fcaps,html:not(.js) :where([data-section="fleet"]) .fdash,html:not(.js) :where([data-section="fleet"]) .stageline{display:none}