/* Dayhop's maps (dmap.js): Apple's maps when the site has a MapKit key, NASA's Earth when not;
   the route, the airports and the plane on top; and the full view with the trip in a sheet. */
.dm-host{position:relative;--dm-route:#ff9d7e}
.dm{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1);background:#0c2742}
.dm.dark{background:#04060c}
.dm.on{opacity:1}
.dm.card{cursor:pointer}
.dm.card:focus-visible{outline:3px solid var(--dm-route);outline-offset:-3px}
.dm .maplibregl-canvas{outline:0}
.dm .maplibregl-ctrl-attrib{font:500 10.5px/1.4 "Instrument Sans",system-ui,sans-serif;background:rgba(0,0,0,.45);color:#ddd}
.dm .maplibregl-ctrl-attrib a{color:#ddd}
.dm .maplibregl-ctrl-attrib-button{filter:invert(1)}

/* Every marker is a 0x0 anchor on its place, with what shows hung off it. */
.dm-anchor{position:relative;width:0;height:0;overflow:visible;pointer-events:none}
.dm-anchor>*{position:absolute;left:0;top:0}

/* an airport: a dot, and a pill with the city and its code */
.dm-ap{display:flex;align-items:center;gap:6px;transform:translate(-7px,-50%)}
.dm-ap i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--dm-route);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.5)}
.dm-ap.small{transform:translate(-4px,-50%)}
.dm-ap.small i{width:8px;height:8px;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.5)}
.dm-pill{display:inline-flex;align-items:stretch;border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.45);font:600 14px/1 "Instrument Sans",system-ui,sans-serif;white-space:nowrap}
.dm-pill b{padding:6px 8px 6px 9px;background:var(--dm-route);color:#1a0f0b;font-weight:600}
.dm-pill em{padding:6px 9px;background:#1f1f20;color:#fff;font-style:normal;font-weight:700;letter-spacing:.02em}

/* a destination on the board: a dot sized by the time there, and its name */
.dm-pt{display:flex;align-items:center;gap:6px;transform:translate(calc(var(--sz,10px) / -2),-50%)}
.dm-pt i{flex:none;width:var(--sz,10px);height:var(--sz,10px);border-radius:50%;background:var(--dm-route);box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.5)}
.dm-pt span{font:600 12.5px/1 "Instrument Sans",system-ui,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);white-space:nowrap}

/* names on NASA's map (Apple's has its own): countries spaced out, cities with a small ring */
.dm-cn{transform:translate(-50%,-50%);font:700 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 1px 4px rgba(0,0,0,.85);white-space:nowrap}
.dm-city{display:flex;align-items:center;gap:5px;transform:translate(-4px,-50%)}
.dm-city i{width:6px;height:6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(0,0,0,.35)}
.dm-city span{font:600 13px/1 "Instrument Sans",system-ui,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.55);white-space:nowrap}

.dm-plane{width:32px;height:32px;color:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));transform:translate(-50%,-50%) rotate(var(--hd,0deg))}
.dm-plane svg{width:100%;height:100%}

/* the card's map is a way in: this says so */
.dm-exp{position:absolute;z-index:3;top:10px;right:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,20,22,.62);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none}

/* ---- the full view: the map is the page, the trip is in a sheet ---- */
.dm-view{position:fixed;inset:0;z-index:120;background:#000;animation:dmin .25s cubic-bezier(.4,0,.2,1)}
@keyframes dmin{from{opacity:0}to{opacity:1}}
.dm-view-map{position:absolute;inset:0}
.dm-view .dm{opacity:1}
.dm-x{position:absolute;z-index:6;top:calc(14px + env(safe-area-inset-top));right:16px;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(20,20,22,.7);color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.dm-full-top{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));left:16px;right:76px;pointer-events:none}
.dm-full-top b{display:inline-block;font:600 16px/1.3 "Instrument Sans",system-ui,sans-serif;color:#fff;background:rgba(20,20,22,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 14px;border-radius:12px}
/* The sheet is its full height all the time and slides (dmap.js sheet): the part below the screen
   is simply out of view, and nothing is re-laid out while a finger moves it. */
.dm-sheet{position:absolute;z-index:5;left:0;right:0;top:calc(72px + env(safe-area-inset-top));bottom:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--paper,#131314);color:var(--ink,#f1f0f3);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.45);
  padding:0 12px calc(var(--sp,0px) + 24px + env(safe-area-inset-bottom));
  transform:translate3d(0,var(--sy,50vh),0);transition:transform .34s cubic-bezier(.2,.8,.2,1);will-change:transform}
.dm-sheet.dragging{transition:none;user-select:none}
.dm-grab{position:sticky;top:0;z-index:2;display:block;width:calc(100% + 24px);margin:0 -12px;height:36px;border:0;cursor:grab;touch-action:none;background:linear-gradient(var(--paper,#131314) 65%,transparent)}
.dm-grab:focus-visible{outline:2px solid var(--dm-route);outline-offset:-4px;border-radius:12px}
.dm-grab::before{content:"";display:block;width:40px;height:5px;margin:10px auto 0;border-radius:999px;background:var(--line,#3a3a3e)}
.dm-sheet-in{padding-top:2px}
.dm-side{display:none}
@media (min-width:900px){
  .dm-sheet{top:16px;left:16px;bottom:16px;right:auto;width:var(--tv-w);border-radius:18px;padding:12px 12px 16px;transform:none;transition:none}
  /* On a desktop the panel slides away to the side, with a tab on its edge (dmap.js .dm-side). */
  .dm-sheet{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .dm-view.s-min .dm-sheet{transform:translateX(calc(-100% - 40px))}
  .dm-grab{display:none}
  .dm-sheet{padding-top:16px}
  .dm-side{display:inline-flex;align-items:center;justify-content:center;position:absolute;z-index:6;left:0;top:calc(50% - 36px);height:72px;width:22px;padding:0;
    border:1px solid var(--line,#3a3a3e);border-left:0;border-radius:0 12px 12px 0;background:var(--paper,#131314);color:var(--muted,#9a9aa0);cursor:pointer;
    box-shadow:6px 6px 18px -6px rgba(0,0,0,.35);transform:translateX(calc(var(--tv-w) + 16px));transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .dm-side:hover{color:var(--ink,#fff);width:26px}
  .dm-side:focus-visible{outline:2px solid var(--dm-route);outline-offset:2px}
  .dm-side svg{width:14px;height:14px;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .dm-view.s-min .dm-side{transform:none}
  .dm-view.s-min .dm-side svg{transform:rotate(180deg)}
  .dm-view.s-min .dm-view-map .dm-legend{left:40px}
  .dm-view-map .dm-legend{transition:left .32s cubic-bezier(.2,.8,.2,1)}
}
/* The pages size every svg in a map box to fill it (their drawn maps); these are not those. */
.dm-host .dm svg,.dm-host .dm-exp svg,.dm-view svg{position:static;inset:auto;display:block}
.dm-host .dm-exp svg{width:18px;height:18px}
.dm-x svg{width:20px;height:20px}
.dm-plane svg{width:32px!important;height:32px!important}

/* which line is which: out and home */
.dm-legend{position:absolute;z-index:4;top:calc(14px + env(safe-area-inset-top));left:16px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.dm-host:not(.dm-view-map) .dm-legend{top:10px;left:10px}
.dm-legend span{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 11px;border-radius:999px;background:rgba(20,20,22,.72);color:#fff;
  font:600 13px/1 "Instrument Sans",system-ui,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.dm-legend span.dim{opacity:.55}
.dm-legend.tap{pointer-events:auto}
.dm-legend button{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:9px 13px;border:0;border-radius:999px;background:rgba(20,20,22,.72);color:#fff;cursor:pointer;
  font:600 13px/1 "Instrument Sans",system-ui,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.dm-legend button.dim{opacity:.5}
.dm-legend button[aria-pressed="true"]{background:rgba(20,20,22,.9);box-shadow:0 0 0 2px #fff,0 2px 10px rgba(0,0,0,.35)}
.dm-legend button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dm-legend i{width:18px;height:4px;border-radius:999px}
@media (min-width:900px){.dm-view-map .dm-legend{left:calc(var(--tv-w) + 32px)}}

/* v9 — a full map's controls (Apple's logo and credit, the zoom buttons) follow the sheet or panel smoothly (dmap.js cover) */
.dm.dm-cov .mk-controls-container,.dm.dm-cov .maplibregl-ctrl-bottom-right,.dm.dm-cov .maplibregl-ctrl-bottom-left{
  bottom:var(--dm-cb,0px)!important;transition:bottom .34s cubic-bezier(.2,.8,.2,1),left .32s cubic-bezier(.2,.8,.2,1)}
.dm.dm-cov .mk-controls-container,.dm.dm-cov .maplibregl-ctrl-bottom-left{left:var(--dm-cl,0px)!important}
.dm.dm-cov .mk-controls-container{top:0!important;right:0!important}

/* v11 — desktop panels are as wide as you drag them (dmap.js grip) */
:root{--tv-w:460px}
.dm-grip{display:none}
@media (min-width:900px){
  .dm-view:not(.s-min) .dm-grip[data-g="tv"]{display:block;position:absolute;z-index:6;top:16px;bottom:16px;left:calc(16px + var(--tv-w) - 7px)}
  .dm-grip{width:14px;cursor:ew-resize;touch-action:none;outline:none}
  .dm-grip::after{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:3px;border-radius:3px;background:transparent;transition:background .15s}
  .dm-grip:hover::after,.dm-grip:focus-visible::after,body.dm-resizing .dm-grip::after{background:var(--dm-route,#e8896a)}
  body.dm-resizing,body.dm-resizing *{cursor:ew-resize!important;user-select:none;transition:none!important}
}

/* v12 — the wider / narrower button above each panel's hide tab (dmap.js grip) */
.dm-wide{display:none}
@media (min-width:900px){
  .dm-wide{align-items:center;justify-content:center;left:0;z-index:6;height:44px;width:22px;padding:0;
    border:1px solid var(--line,#3a3a3e);border-left:0;border-radius:0 10px 10px 0;background:var(--paper,#131314);color:var(--muted,#9a9aa0);cursor:pointer;
    box-shadow:6px 6px 18px -6px rgba(0,0,0,.35);transition:transform .32s cubic-bezier(.2,.8,.2,1),color .15s}
  .dm-wide:hover,.dm-wide[aria-pressed="true"]{color:var(--ink,#fff)}
  .dm-wide:hover{width:26px}
  .dm-wide:focus-visible{outline:2px solid var(--dm-route,#e8896a);outline-offset:2px}
  .dm-wide svg{width:14px;height:14px}
  .dm-view:not(.s-min) .dm-wide[data-g="tv"]{display:inline-flex;position:absolute;top:calc(50% - 36px - 52px);transform:translateX(calc(var(--tv-w) + 16px))}
  /* The width changes in one step (animating width re-lays out the whole panel every frame); the tabs jump with it rather than sliding after it. */
  body.dm-widen .dm-wide,body.dm-widen .dm-side,body.dm-widen .log-side,body.dm-widen .fl-side{transition:none!important}
}

/* A numbered stop in a day's plan (itin.js) */
.dm-num{transform:translate(-50%,-50%)}
.dm-num b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dm-route,#e42d0f);color:#fff;font:700 13px/1 "Instrument Sans",system-ui,sans-serif;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,0,0,.45)}
.dm-num.on b{width:32px;height:32px;font-size:15px;background:#0a0a0a}