/* Flight readouts. The itinerary line carries flight time and distance between the airports;
   instruments give altitude and ground speed a scale as well as a larger numeral. */
html[data-layout] .workspace .route-codes{grid-template-columns:auto minmax(92px,1fr) auto;align-items:center;gap:16px}
html[data-layout] .workspace .route-codes>.airport-block:last-child{text-align:right}
html[data-layout] .workspace .route-center{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;min-width:0;padding:0}
html[data-layout] .workspace .route-time{font:600 17px/1.1 var(--sans);letter-spacing:-.35px;color:var(--text);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
html[data-layout] .workspace .route-distance{font:500 12px/1.2 var(--sans);letter-spacing:.01em;color:var(--muted);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}

.flight-line{position:relative;height:16px;--progress:.5;--line-accent:var(--lime)}
.flight-line:before,.flight-line:after{content:'';position:absolute;top:50%;z-index:1;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-sizing:border-box}
.flight-line:before{left:0;background:var(--line-accent)}
.flight-line:after{right:0;border:1.5px solid var(--line-accent);background:var(--panel)}
.flight-line-track,.flight-line-done{position:absolute;left:4px;right:4px;top:50%;transform-origin:left center}
.flight-line-track{height:0;margin-top:-.75px;border-top:1.5px dotted color-mix(in srgb,var(--line-accent) 55%,transparent)}
.flight-line-done{height:1.5px;margin-top:-.75px;border-radius:1px;background:var(--line-accent);transform:scaleX(var(--progress))}
.flight-line.en-route .flight-line-done{display:none}
.flight-line-carrier{position:absolute;left:4px;right:4px;top:0;bottom:0;z-index:2;transform:translateX(calc(var(--progress) * 100%))}
.flight-line-plane{position:absolute;left:0;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;padding:1px;border-radius:50%;background:var(--panel);color:var(--line-accent);box-sizing:border-box}
.flight-line-plane svg{display:block;width:100%;height:100%}

html[data-layout] .workspace .flight-facts{align-items:center}
html[data-layout] .workspace .reading{display:flex;align-items:center;gap:10px;min-width:0;flex:none}
html[data-layout] .workspace .reading-copy{min-width:0}
html[data-layout] .workspace .reading .fact-label{font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html[data-layout] .workspace .reading .fact-value{margin:3px 0 0;font:550 23px/1 var(--sans);letter-spacing:-.6px;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
html[data-layout] .workspace .reading .fact-value small{margin-left:3px;font:600 9.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.gauge{flex:none;overflow:visible}
.gauge-dial{width:42px;height:25px}
.gauge-profile{width:42px;height:26px}
.gauge-track{fill:none;stroke:var(--line);stroke-width:2.2;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--lime);stroke-width:2.6;stroke-linecap:round}
.gauge-tick{stroke:var(--muted);stroke-width:1;stroke-linecap:round;opacity:.5}
.gauge-needle{stroke:var(--text);stroke-width:1.7;stroke-linecap:round;transform-origin:22px 23px}
.gauge-hub{fill:var(--text)}
.gauge-ceiling{stroke:var(--line);stroke-width:1;stroke-dasharray:1.5 2.5}
.gauge-climb{transform-origin:0 23px}
.gauge-craft{fill:var(--lime);stroke:var(--panel);stroke-width:1.2}

/* Desktop: the instruments sit in the itinerary's right-hand column. */
html[data-layout=desktop] .workspace .flight-facts{gap:26px}

/* Mobile: time and distance share one line beneath the route; two instruments split the row below. */
html[data-layout=mobile] .workspace .route-codes{gap:12px}
html[data-layout=mobile] .workspace .route-center{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;column-gap:6px;row-gap:3px}
html[data-layout=mobile] .workspace .flight-line{grid-column:1/-1;grid-row:1}
html[data-layout=mobile] .workspace .route-time{grid-row:2;font-size:14px;letter-spacing:-.2px}
html[data-layout=mobile] .workspace .route-distance{grid-row:2;font-size:11px}
html[data-layout=mobile] .workspace .route-time~.route-distance:before{content:'·';margin-right:6px}
html[data-layout=mobile] .workspace .route-center>:only-of-type{grid-column:1/-1}
html[data-layout=mobile] .workspace .flight-facts{justify-content:space-between;gap:12px;margin-top:7px;padding-top:7px}
html[data-layout=mobile] .workspace .reading{gap:8px;flex:1}
html[data-layout=mobile] .workspace .reading:last-child{justify-content:flex-end}
html[data-layout=mobile] .workspace .reading .fact-label{font-size:8.5px}
html[data-layout=mobile] .workspace .reading .fact-value{margin-top:2px;font-size:17px;letter-spacing:-.35px}
html[data-layout=mobile] .workspace .reading .fact-value small{font-size:8.5px}
html[data-layout=mobile] .workspace .gauge-dial{width:34px;height:20px}
html[data-layout=mobile] .workspace .gauge-profile{width:34px;height:21px}
@media(max-height:670px){
  html[data-layout=mobile] .workspace .flight-facts{margin-top:4px;padding-top:4px}
  html[data-layout=mobile] .workspace .reading .fact-value{margin:0;font-size:15px}
  html[data-layout=mobile] .workspace .gauge-dial{width:28px;height:17px}
  html[data-layout=mobile] .workspace .gauge-profile{width:28px;height:17px}
}