:root{
  --bg:#0a0618; --bg2:#1b1140; --accent:#c6ff4d; --ink:#e7e2ff; --muted:#8b7fc0;
  --panel:#140d33e6; --border:#34276a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif}
#rl-app{position:relative;height:100vh;overflow:hidden}
#rl-map{position:absolute;inset:0}
/* loading overlay — covers the map until style.load + first setRoutes (or 15s safety) */
.rl-loading{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 42%,var(--bg2),var(--bg) 70%);
  opacity:1;transition:opacity .55s ease;pointer-events:auto}
.rl-loading.hide{opacity:0;pointer-events:none}
.rl-loading-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.rl-spinner{width:42px;height:42px;border-radius:50%;
  border:2.5px solid #ffffff14;border-top-color:var(--accent);
  animation:rl-spin .9s linear infinite}
.rl-loading-text{font-size:13px;letter-spacing:.04em;color:var(--muted);display:inline-flex;align-items:baseline}
.rl-dots{display:inline-flex;gap:3px;margin-left:4px}
.rl-dots i{width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:.3;
  animation:rl-dot 1.2s ease-in-out infinite}
.rl-dots i:nth-child(2){animation-delay:.2s}
.rl-dots i:nth-child(3){animation-delay:.4s}
@keyframes rl-spin{to{transform:rotate(360deg)}}
@keyframes rl-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .rl-spinner,.rl-dots i{animation:none}
  .rl-spinner{border-top-color:var(--accent);opacity:.8}
}
.rl-topbar{position:absolute;top:0;left:0;right:0;min-height:60px;z-index:5;display:flex;
  align-items:center;gap:18px;padding:10px 20px;
  background:linear-gradient(#0a0618f2,#0a0618cc 55%,#0a061800)}
.rl-brand-wrap{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.rl-brand{font-weight:800;font-size:19px;letter-spacing:-.015em;line-height:1}
.rl-brand span{color:var(--accent)}
.rl-tagline{font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:.01em;line-height:1;
  white-space:nowrap}
@media (max-width:720px){.rl-tagline{display:none}}
.maplibregl-popup.rl-pop .maplibregl-popup-content{background:var(--panel);color:var(--ink);
  border:1px solid var(--border);border-radius:8px;font-size:12px}
.rl-pop .maplibregl-popup-tip{display:none}
/* filters — confident, breathing-room toolbar of Signal controls */
.rl-filters{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap;
  justify-content:flex-end}
/* search field with inset magnifier */
.rl-search{position:relative;display:flex;align-items:center}
.rl-search::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;pointer-events:none;opacity:.75;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7fc0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E")}
.rl-search-input{width:230px;max-width:46vw;background:#140d33cc;color:var(--ink);
  border:1px solid var(--border);border-radius:9px;padding:8px 11px 8px 32px;font:inherit;font-size:13px;
  transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
.rl-search-input::placeholder{color:var(--muted);opacity:.85}
.rl-search-input:hover{border-color:#473794;background:#140d33}
.rl-search-input:focus{outline:none;border-color:var(--accent);background:#140d33;
  box-shadow:0 0 0 3px #c6ff4d2e}
.rl-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* selects — strip native chrome, custom chevron */
.rl-select{background:#140d33cc;color:var(--ink);border:1px solid var(--border);border-radius:9px;
  padding:8px 30px 8px 12px;font:inherit;font-size:13px;cursor:pointer;line-height:1.2;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7fc0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
  transition:border-color .15s,box-shadow .15s,background-color .15s}
.rl-select:hover{border-color:#473794;background-color:#140d33}
.rl-select:focus{outline:none;border-color:var(--accent);background-color:#140d33;
  box-shadow:0 0 0 3px #c6ff4d2e}
.rl-select option{background:#140d33;color:var(--ink)}
/* leaderboard */
.rl-leaderboard{position:absolute;top:72px;right:16px;z-index:5;width:236px;background:var(--panel);
  border:1px solid var(--border);border-radius:13px;padding:13px 14px 11px;
  backdrop-filter:blur(8px);box-shadow:0 10px 30px #00000040}
.rl-leaderboard h4{margin:0;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
/* board header: title + board-type picker on one row, divider below */
.rl-lb-head{display:flex;align-items:center;gap:8px;margin:0 0 11px;
  padding-bottom:9px;border-bottom:1px solid var(--border)}
.rl-lb-select{flex:1;min-width:0;padding:5px 24px 5px 8px;font-size:11px;line-height:1.2;
  background-position:right 7px center;background-size:12px}
.rl-lb-row{display:flex;align-items:center;gap:9px;margin:2px -6px;padding:5px 6px;border-radius:7px;
  cursor:pointer;font-size:12px;transition:background .12s}
.rl-lb-row:hover{background:#c6ff4d12}
.rl-lb-row .rt{min-width:66px;color:#cfc8ff;font-weight:600;white-space:nowrap;flex-shrink:0;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.rl-lb-row .b{flex:1;min-width:14px;height:6px;border-radius:4px;background:#ffffff14;overflow:hidden}
.rl-lb-row .b i{display:block;height:100%;border-radius:4px}
.rl-lb-row .v{width:46px;text-align:right;color:var(--muted);font-size:11px;flex-shrink:0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* legend — aligned with leaderboard panel language */
.rl-legend{position:absolute;left:16px;bottom:16px;z-index:5;background:var(--panel);
  border:1px solid var(--border);border-radius:13px;padding:11px 13px;font-size:10px;
  font-weight:700;letter-spacing:.08em;color:var(--muted);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px #00000040}
/* lens toggle — clean Signal segmented control (active = lime-tinted) */
.rl-lens{display:flex;width:172px;gap:0;margin-bottom:11px;padding:2px;border-radius:9px;
  background:#0e0826cc;border:1px solid var(--border)}
.rl-lens-seg{flex:1;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  text-transform:none;padding:5px 0;border:none;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--muted);transition:background .14s,color .14s}
.rl-lens-seg:hover{color:var(--ink)}
.rl-lens-seg.on{background:#c6ff4d22;color:#d6ff8a;box-shadow:inset 0 0 0 1px #c6ff4d44}
.rl-lens-seg:focus-visible{outline:none;box-shadow:0 0 0 2px #c6ff4d55}
.rl-legend .bar{height:8px;width:172px;border-radius:5px;margin-top:8px;
  background:linear-gradient(90deg,#3ddc84,#ffd166,#ef476f)}
.rl-legend .ends{display:flex;justify-content:space-between;margin-top:5px;
  font-size:9.5px;font-weight:600;letter-spacing:.04em;color:#cfc8ff}
.rl-leg-sec + .rl-leg-sec{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.rl-leg-air .adots{display:flex;align-items:center;justify-content:space-between;
  width:172px;height:14px;margin-top:8px}
.rl-leg-air .adots i{display:block;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #0a061899}
.rl-leg-air .adots i:nth-child(1){width:5px;height:5px}
.rl-leg-air .adots i:nth-child(2){width:7px;height:7px}
.rl-leg-air .adots i:nth-child(3){width:9px;height:9px}
.rl-leg-air .adots i:nth-child(4){width:12px;height:12px}
/* time scrubber — bottom-center control: play/pause + range + month readout.
   Pinned center, clear of the legend (bottom-left) and attribution (bottom-right). */
.rl-scrubber{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:12px;padding:9px 14px;width:min(460px,calc(100vw - 360px));
  background:var(--panel);border:1px solid var(--border);border-radius:13px;
  backdrop-filter:blur(8px);box-shadow:0 10px 30px #00000040}
.rl-scrub-play{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;
  justify-content:center;font-size:11px;line-height:1;cursor:pointer;border-radius:8px;
  border:1px solid var(--border);background:#0e0826cc;color:var(--ink);
  transition:background .14s,color .14s,border-color .14s}
.rl-scrub-play:hover{border-color:#473794;color:#fff}
.rl-scrub-play.playing{background:#c6ff4d22;color:#d6ff8a;border-color:#c6ff4d44}
.rl-scrub-play:focus-visible{outline:none;box-shadow:0 0 0 2px #c6ff4d55}
.rl-scrub-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* range input — stripped native chrome, lime thumb, Signal track */
.rl-scrub-range{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;
  background:transparent;cursor:pointer}
.rl-scrub-range:focus{outline:none}
.rl-scrub-range::-webkit-slider-runnable-track{height:5px;border-radius:4px;
  background:#0e0826;border:1px solid var(--border)}
.rl-scrub-range::-moz-range-track{height:5px;border-radius:4px;
  background:#0e0826;border:1px solid var(--border)}
.rl-scrub-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:var(--accent);
  border:2px solid #0a0618;box-shadow:0 0 0 1px #c6ff4d66;transition:box-shadow .14s}
.rl-scrub-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);
  border:2px solid #0a0618;box-shadow:0 0 0 1px #c6ff4d66;transition:box-shadow .14s}
.rl-scrub-range:hover::-webkit-slider-thumb{box-shadow:0 0 0 3px #c6ff4d33}
.rl-scrub-range:hover::-moz-range-thumb{box-shadow:0 0 0 3px #c6ff4d33}
.rl-scrub-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #c6ff4d44}
.rl-scrub-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #c6ff4d44}
.rl-scrub-ticks{display:flex;justify-content:space-between;padding:0 5px;
  font-size:8.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.rl-scrub-ticks span{flex:1;text-align:center;font-variant-numeric:tabular-nums}
.rl-scrub-ticks span:first-child{flex:0 0 auto;text-align:left}
.rl-scrub-label{flex-shrink:0;width:74px;text-align:right;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:#d6ff8a;font-variant-numeric:tabular-nums}
@media (max-width:680px){
  .rl-scrubber{left:10px;right:10px;width:auto;transform:none;bottom:14px;gap:9px;padding:8px 11px}
  .rl-scrub-label{width:62px;font-size:10px}
}
/* dossier */
.rl-dossier{position:absolute;top:0;right:0;bottom:0;width:380px;max-width:90vw;z-index:6;
  background:linear-gradient(160deg,#1b1140,#0a0618);border-left:1px solid var(--border);
  padding:18px;overflow-y:auto;box-shadow:-8px 0 32px #00000066}
.rl-dossier .close{position:absolute;top:12px;right:14px;cursor:pointer;color:var(--muted);font-size:20px}
.rl-dossier h2{margin:.1em 0 0;font-size:21px;font-weight:800;letter-spacing:-.01em}
/* headline number — emphasized, with de-emphasized unit + caption */
.rl-dossier .rl-big{font-size:34px;font-weight:800;line-height:1.05;margin:10px 0 0;letter-spacing:-.02em}
.rl-dossier .rl-big .u{font-size:20px;font-weight:700;color:var(--muted);margin-left:1px}
.rl-dossier .rl-big small{font-size:13px;color:var(--accent);font-weight:700}
.rl-dossier .rl-sub{color:var(--muted);font-size:12px;margin-top:2px}
/* section label — consistent scale + rhythm across all panes */
.rl-dossier .lab{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 7px}
.rl-bars{display:flex;gap:2px;align-items:flex-end;height:46px}
.rl-bars i{flex:1;border-radius:2px 2px 0 0;min-height:2px}
.rl-crow{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px}
.rl-crow .nm{width:96px;color:#cfc8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-crow .b{height:7px;border-radius:4px;min-width:8px}.rl-crow .v{margin-left:auto;color:var(--ink);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
/* two-line carrier/aircraft row: name+bar+value on top, small figures below */
.rl-crow2{margin:9px 0}
.rl-crow2 .rl-crow{margin:0}
.rl-crow2 .rl-fig{margin:2px 0 0 104px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Aircraft rows: wider name column so "Boeing 777-200"/"787-9" don't clip (carrier names are short, stay at 96px). */
.rl-acrow .nm{width:138px}
.rl-acrow .rl-fig{margin-left:146px}
.rl-pills{display:flex;gap:6px;flex-wrap:wrap}
.rl-pill{font-size:11px;background:#c6ff4d22;color:#d6ff8a;border:1px solid #c6ff4d44;padding:3px 9px;border-radius:20px}
.rl-tabs{display:flex;gap:4px;margin:14px 0 12px}
.rl-tabs button{font:inherit;font-size:11px;font-weight:600;padding:6px 8px;border-radius:7px;border:none;cursor:pointer;
  background:#221a44;color:var(--muted);transition:background .12s,color .12s;white-space:nowrap}
.rl-tabs button:hover{color:var(--ink)}
.rl-tabs button.on{background:#c6ff4d22;color:#d6ff8a}
/* on-time stat row */
.rl-statrow{display:flex;gap:10px;margin-top:12px}
.rl-stat{flex:1;background:#221a4499;border:1px solid var(--border);border-radius:9px;padding:9px 11px}
.rl-stat b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rl-stat b .u{font-size:11px;font-weight:600;color:var(--muted)}
.rl-stat span{display:block;font-size:10px;color:var(--muted);margin-top:1px}
/* delay-cause segmented bar + legend */
.rl-stack{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#221a44}
.rl-stack span{display:block;height:100%}
.rl-keys{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px}
.rl-key{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
.rl-key i{width:8px;height:8px;border-radius:2px;display:inline-block}
/* scroll sections */
#rl-sections{padding:40px 6vw;background:var(--bg)}
.rl-sec{margin:0 auto 48px;max-width:1000px}
.rl-sec h3{font-size:20px;margin:0 0 10px}
.rl-empty{color:var(--muted);padding:20px;text-align:center}
/* responsive: phone */
@media (max-width:680px){
  .rl-topbar{align-items:flex-start;padding:10px 12px;gap:10px}
  .rl-filters{gap:8px}
  .rl-search-input{width:160px;max-width:42vw}
  .rl-select{padding:7px 28px 7px 10px;font-size:12px}
  .rl-leaderboard{left:10px;right:10px;width:auto;top:auto;bottom:96px;max-height:34vh;overflow:auto}
  .rl-dossier{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;height:72vh;border-left:none;
    border-top:1px solid var(--border);border-radius:14px 14px 0 0}
  .rl-legend{bottom:auto;top:96px}
}