/* TowerScope replay prototype. Same tokens as ts.css (LIFE OS look). */
body.protopage{padding-bottom:0;overflow:hidden;height:100dvh}
.protopage .top .wrap{height:56px}
.app{position:fixed;inset:56px 0 0 0;overflow:hidden}
#stage{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#0d1424 0%,#18263f 46%,#0b0d12 47%)}
#map{position:absolute;inset:0;transform:rotate(var(--roll,0deg)) scale(var(--zs,1));transform-origin:50% 50%;transition:transform .08s linear}
body[data-view=flight] #stage{--zs:1}
body[data-view=flight] #map{--zs:1.45}
.maplibregl-canvas{outline:none}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mute);background:var(--bg);z-index:30;font-size:15px}
.card-g{position:absolute;z-index:6;background:rgba(15,18,25,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.banner{position:absolute;z-index:8;top:12px;left:50%;transform:translateX(-50%);padding:7px 16px;border-radius:var(--r-pill);background:rgba(11,13,18,.88);border:1px solid rgba(255,107,107,.5);color:#ffd2d2;font:600 12px/1.2 var(--font);letter-spacing:.01em;white-space:nowrap}
.views{top:56px;left:14px;display:flex;padding:4px;gap:2px}
.seg{min-height:40px;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--mute);font:600 14px var(--font);cursor:pointer}
.seg:hover{color:var(--ink)}
.seg[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.opts{top:112px;left:14px;padding:6px 10px;display:flex;flex-direction:column;gap:2px}
.opts>div{display:flex;align-items:center;gap:6px;min-height:40px}
.opts .lab{font-size:12px;color:var(--faint);margin-right:4px;min-width:84px}
.opts .chip{min-height:32px;padding:0 12px}
.readout{top:56px;right:14px;margin:0;padding:12px 16px;display:grid;grid-template-columns:repeat(2,auto);gap:6px 22px}
.readout div{display:flex;flex-direction:column}
.readout dt{font-size:11px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
.readout dd{margin:0;font:600 17px var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hud{position:absolute;inset:0;z-index:5;pointer-events:none;color:#cfe3ff}
.hud .fpm{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #9fe9c3;border-radius:50%}
.hud .fpm:before,.hud .fpm:after{content:"";position:absolute;top:10px;height:2px;width:12px;background:#9fe9c3}
.hud .fpm:before{left:-14px}.hud .fpm:after{right:-14px}
.hud .tape{position:absolute;display:flex;flex-direction:column;align-items:center;padding:6px 14px;background:rgba(11,13,18,.55);border:1px solid rgba(159,233,195,.45);border-radius:var(--r-md);font-variant-numeric:tabular-nums}
.hud .tape small{font-size:10px;letter-spacing:.08em;color:#9fe9c3}
.hud .tape b{font:600 22px var(--font);color:#e8f6ee}
.hud .l{left:22%;top:50%;transform:translateY(-50%)}
.hud .r{right:22%;top:50%;transform:translateY(-50%)}
.hud .b{left:50%;top:104px;transform:translateX(-50%);flex-direction:row;gap:10px;align-items:baseline}
.follow{position:absolute;z-index:7;left:50%;top:104px;transform:translateX(-50%);min-height:40px}
.dock{left:14px;right:14px;bottom:14px;padding:10px 14px 8px;max-width:980px;margin:0 auto}
.ctl{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.btn.round{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;background:var(--accent);border-color:var(--accent);color:var(--on-accent);flex:none}
.time{font:600 13px var(--font);font-variant-numeric:tabular-nums;color:var(--mute);flex:none;min-width:92px}
.spd{display:flex;gap:4px;flex:none}
.spd .chip{min-height:32px;padding:0 10px}
#scrub{flex:1;min-width:80px;height:28px;-webkit-appearance:none;appearance:none;background:transparent;margin:0;--p:0%}
#scrub::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent-2) var(--p),rgba(255,255,255,.14) var(--p))}
#scrub::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
#scrub::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent-2)}
#scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:0;margin-top:-7px}
#scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0}
#chart{display:block;width:100%;height:84px;margin-top:6px;cursor:ew-resize;touch-action:none}
.leg{margin:2px 0 4px;font-size:12px;color:var(--faint)}
.leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 6px 0 10px;vertical-align:baseline}
.leg i:first-child{margin-left:0}
.leg .b{background:var(--accent-2)}.leg .g{background:var(--ok)}
.src{margin:0;line-height:1.4;font-size:11px}
.src a{color:var(--mute);text-decoration:underline}
@media(max-width:820px){
  .banner{top:8px;font-size:11px;padding:6px 12px}
  .views{top:46px;left:8px;right:8px;justify-content:space-between}
  .seg{flex:1;padding:0 6px;font-size:13px}
  .opts{top:100px;left:8px;right:8px;padding:2px 8px}
  .opts>div{min-height:36px}
  .opts .lab{min-width:0;font-size:11px}
  .readout{top:auto;bottom:auto;right:8px;top:196px;padding:6px 10px;grid-template-columns:1fr 1fr;gap:2px 12px}
  .readout div:nth-child(n+4){display:none}
  .readout dd{font-size:14px}
  .dock{left:8px;right:8px;bottom:8px;padding:8px 10px 6px}
  .ctl{gap:8px;flex-wrap:wrap}
  #scrub{order:5;flex:1 1 100%}
  .time{min-width:0}
  #chart{height:64px}
  .src{max-height:34px;overflow:hidden}
  .hud .l{left:6%}.hud .r{right:6%}
  .hud .b{top:150px}
}
@media(max-width:420px){.opts .lab{display:none}}

.leg .w{background:#fff}
.srcd{margin-top:2px}
.srcd summary{cursor:pointer;font-size:12px;color:var(--mute);min-height:28px;display:flex;align-items:center}
.opts .chip{white-space:nowrap}
.readout{grid-template-columns:repeat(3,auto)}
@media(max-width:820px){.readout{grid-template-columns:1fr 1fr}.readout div:nth-child(n+4){display:none}.readout div:nth-child(6){display:flex}}