/* CALM flyover viewer — header bar, flight stage, tour strip */
:root{
  --navy:#16325c; --orange:#e8742a;
  --bg:#e8ecf2; --stage:#dfe4eb; --dot:#c4ccd8; --panel:#f8f9fb; --fg:#15233a; --muted:#56637a;
  --accent:#e8742a; --accent-soft:rgba(232,116,42,.16); --line:#cdd4de; --chip:#ffffff; --on-accent:#ffffff;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1522; --stage:#0a101a; --dot:#1e2838; --panel:#131c2b; --fg:#e4e9f1; --muted:#90a0b7;
  --accent:#f08a45; --accent-soft:rgba(240,138,69,.2); --line:#26324a; --chip:#1a2436; --on-accent:#10151f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1522; --stage:#0a101a; --dot:#1e2838; --panel:#131c2b; --fg:#e4e9f1; --muted:#90a0b7;
  --accent:#f08a45; --accent-soft:rgba(240,138,69,.2); --line:#26324a; --chip:#1a2436; --on-accent:#10151f; color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.4 var(--sans);overflow:hidden}
.app{height:100%;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding-block:8px;
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));
  background:var(--panel);border-bottom:1px solid var(--line)}
.home{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0;flex:1 1 260px}
.home img{height:38px;width:auto;background:#fff;border-radius:6px;padding:2px 4px;border:1px solid var(--line)}
.home b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home span{display:block;font:12px var(--mono);color:var(--muted)}
.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
button,.btn,input{font:600 12px var(--sans);color:var(--fg);background:var(--chip);border:1px solid var(--line);
  border-radius:6px;padding:7px 10px;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.2}
input{cursor:text;font-weight:400;width:200px}
button:hover,.btn:hover{border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.switch{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .btn.switch{background:#22406f;border-color:#22406f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.switch{background:#22406f;border-color:#22406f}}
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background-color:var(--stage);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px;touch-action:none;cursor:grab;user-select:none}
.stage.drag{cursor:grabbing}
#view{width:100%;height:100%;display:block}
.sheet{fill:#fff;filter:drop-shadow(0 4px 20px rgba(0,0,0,.2))}
#hl{fill:none;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s}
#hl.on{opacity:1}
.hud{position:absolute;left:calc(12px + env(safe-area-inset-left,0px));top:12px;font:600 11px var(--mono);color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 9px;pointer-events:none;max-width:calc(100% - 24px)}
.hud b{color:var(--accent);font-weight:600}
.mini{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));bottom:12px;width:170px;border:1px solid var(--line);border-radius:6px;
  background:#fff;overflow:hidden;cursor:pointer}
.mini img{display:block;width:100%;opacity:.9}
.mini i{position:absolute;border:2px solid var(--accent);background:var(--accent-soft);pointer-events:none}
footer{background:var(--panel);border-top:1px solid var(--line);padding-block:8px;
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.tour{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.tour button em{font-style:normal;color:var(--muted);font-weight:400;margin-left:4px}
.tour button[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tour button[aria-current="true"] em{color:var(--on-accent);opacity:.8}
.keys{font:11px var(--mono);color:var(--muted);margin-top:6px}
.miss{border-color:#c0392b!important}
@media (max-width:640px){.mini{width:100px}.keys{display:none}input{width:150px}.home img{height:30px}}
@media (prefers-reduced-motion: reduce){#hl{transition:none}}