/* BLADES — "And much more": a carousel of the app's other features, each shown at work (js/more.js). The first slide
   is the global map (css/demo.css .globe-panel); the others are panels in the same look, the words on the left and
   the app's own screens, rebuilt in HTML, on the right. */

/* ---------- The carousel ---------- */
.more { position: relative; }
.more-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.more-tabs {
  flex: 1; min-width: 0; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 2px 24px 2px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.more-tabs::-webkit-scrollbar { display: none; }
.more-tab {
  position: relative; flex: none; overflow: hidden;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  font: 600 13.5px/1 var(--sans); color: var(--mist); white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.more-tab:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.3); }
.more-tab[aria-selected="true"] { color: var(--white); border-color: rgba(0, 200, 232, 0.6); background: rgba(0, 200, 232, 0.1); }
/* How long the slide has left, filling under its name */
.more-tab::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%);
  background: var(--app-accent);
}
.more-toggle { flex: none; }
.more-stage { position: relative; }
.more-on .more-stage { display: grid; touch-action: pan-y; }
.more-on .more-slide {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 44px));
  transition: opacity 0.5s ease, transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.more-on .more-slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.more-on .more-slide.was-on { transform: translateX(calc(var(--dir, 1) * -44px)); }
/* Without the script the slides simply follow one another */
.more:not(.more-on) .more-slide + .more-slide { margin-top: 16px; }
.more-ctl { display: none; }

/* ---------- A slide: the words, and the app at work ---------- */
.globe-text h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.02em; line-height: 1.1; }
.more-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  min-height: clamp(520px, 62vw, 720px);
  padding: clamp(22px, 4vw, 48px);
  border-radius: clamp(20px, 2.4vw, 30px);
  background: radial-gradient(ellipse 80% 70% at 65% 55%, #102542 0%, #060d1a 70%);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.more-text { align-self: start; }
.more-text h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.02em; line-height: 1.1; color: var(--white); }
.more-text h4 em { display: block; font-style: italic; color: var(--cyan); }
.more-text p { margin-top: 12px; color: var(--mist); max-width: 34ch; }
.more-demo { position: relative; display: grid; place-items: center; min-height: 100%; }
@media (max-width: 820px) {
  .more-bar { margin-bottom: 12px; }
  .more-tab { padding: 8px 12px; font-size: 13px; }
  .more-panel { grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 26px 22px 22px; gap: 22px; }
  .more-text p { font-size: 15px; }
  .more-demo { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .more-on .more-slide { transition: none; }
}

/* ======================= The demos (js/more-demos.js): the app's own look ======================= */
.more-demo {
  /* constants/colors.ts (NavyColors) */
  --a-bg: #0A1628; --a-card: #0F1E3A; --a-bd: #1A3A5A; --a-el: #152338; --a-sep: #122030; --a-deep: #06101E;
  --a-cy: #00C8E8; --a-ok: #00E8A0; --a-gold: #FFB830; --a-red: #FF4D6A; --a-t2: #7FA8C8; --a-mut: #3A5A7A;
  --mono-a: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif-a: "Fraunces", Georgia, serif;
  --seg-a: "DSEG7", "JetBrains Mono", monospace;
  zoom: calc(var(--z, 1) * 0.7);   /* the demos a little smaller than the app's own sizes */
  color: #fff; font-family: -apple-system, system-ui, var(--sans);
}
.more-demo svg { display: block; }
.more-demo .ac { background: var(--a-card); border: 1px solid var(--a-bd); border-radius: 16px; overflow: hidden; }
.more-demo .ac-h { display: flex; align-items: center; gap: 8px; }
.more-demo .ac-h svg { width: 18px; height: 18px; fill: none; stroke: var(--a-cy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.more-demo .ac-h b { font: 500 18px var(--serif-a); letter-spacing: -0.2px; }
.more-demo .ac-h em { margin-left: auto; font: 400 10px var(--mono-a); font-style: normal; color: var(--a-cy); }
.more-demo .cap { font: 700 9px var(--mono-a); letter-spacing: 1.2px; color: var(--a-mut); text-transform: none; }
/* A tap: a ring that grows and fades over the element tapped */
.more-demo .md-tapped { position: relative; }
.more-demo .md-tapped::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 30%, rgba(255, 255, 255, 0.16) 31% 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  animation: mdTap 0.55s ease-out both; pointer-events: none;
}
@keyframes mdTap { from { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } to { opacity: 0; transform: scale(1.25); } }

/* How big each demo stands on a computer (the app's own sizes are those of a phone) */
@media (min-width: 821px) {
  .md-milestones { --z: 1.45; }
  .md-share { --z: 1.2; }
  .md-closest { --z: 1.12; }
}

/* On a phone the demos built 340 px wide are scaled to the panel (the screen less its margins) */
@media (max-width: 430px) { .md-insights, .md-milestones, .md-closest, .md-load { --z: 0.95; } }
@media (max-width: 405px) { .md-insights, .md-milestones, .md-closest, .md-load { --z: 0.9; } }
@media (max-width: 385px) { .md-insights, .md-milestones, .md-closest, .md-load { --z: 0.85; } .md-share, .md-security { --z: 0.95; } }
@media (max-width: 365px) { .md-insights, .md-milestones, .md-closest, .md-load { --z: 0.8; } .md-share, .md-security { --z: 0.9; } }
@media (max-width: 340px) { .md-insights, .md-milestones, .md-closest, .md-load { --z: 0.74; } .md-share, .md-security { --z: 0.84; } }

/* ---------- Insights ---------- */
.mi { display: grid; grid-template-columns: 310px 340px; gap: 12px; align-items: start; }
.mi-col { display: grid; gap: 14px; }
.mi .ah-1 { display: flex; justify-content: space-between; padding: 14px; }
.mi .ah-1 .r { text-align: right; }
.mi .ah-1 .lo { letter-spacing: 0.4px; }
.mi .ah-v { display: flex; align-items: baseline; gap: 3px; margin-top: 6px; }
.mi .ah-1 .r .ah-v { justify-content: flex-end; }
.mi .ah-v b { font: 800 30px var(--seg-a); color: #fff; font-variant-numeric: tabular-nums; }
.mi .ah-v i { font: 700 11px var(--mono-a); font-style: normal; color: var(--a-cy); }
.mi .ah-v.s b { font-size: 22px; color: var(--a-t2); }
.mi .ah-v.s i { color: var(--a-mut); }
.mi .ah-2 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--a-sep); }
.mi .ah-2 > div { display: grid; gap: 4px; justify-items: center; padding: 10px 4px; }
.mi .ah-2 > div + div { border-left: 1px solid var(--a-sep); }
.mi .ah-v.x { margin: 0; }
.mi .ah-v.x b { font-size: 14px; }
.mi .ah-v.x i { font-size: 9px; color: var(--a-mut); }
.mi .cap.s { font-size: 8px; letter-spacing: 1px; }
.mi .ah-pick { font: 400 13px var(--mono-a); color: var(--a-cy); }
.mi .lic { padding: 14px; border-color: #00C8E855; display: grid; gap: 10px; }
.mi .lic .ac-h { gap: 6px; white-space: nowrap; }
.mi .lic .ac-h b { font-size: 17px; }
.mi .lic .pill { display: inline-flex; margin-left: 6px; border-radius: 7px; background: var(--a-el); }
.mi .lic .pill i { padding: 3px 7px; font: 400 9px var(--mono-a); font-style: normal; color: var(--a-t2); border-radius: 7px; }
.mi .lic .pill i.on { background: var(--a-cy); color: var(--a-deep); }
.mi .lic .ac-h em { color: var(--a-mut); }
.mi .lic-big { display: flex; align-items: baseline; justify-content: space-between; }
.mi .lic-big b { font: 500 30px var(--serif-a); letter-spacing: -0.5px; }
.mi .lic-big span { font: 600 26px var(--serif-a); color: var(--a-cy); }
.mi .lic-t { display: flex; justify-content: space-between; align-items: baseline; }
.mi .lic-t span { font: 500 12.5px system-ui, var(--sans); }
.mi .lic-t b { font: 400 11px var(--mono-a); color: var(--a-mut); }
.mi .lic-t em { font-style: normal; font-weight: 700; color: #fff; }
.mi .lic-t em.met { color: var(--a-ok); }
.mi .lic-bar { height: 6px; margin-top: 5px; border-radius: 99px; background: var(--a-sep); overflow: hidden; }
.mi .lic-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--c); }
.mi .lic-d { margin-top: 4px; font: 400 9px var(--mono-a); color: var(--a-mut); }
.mi .goal { padding: 16px; display: grid; gap: 10px; }
.mi .seg2 { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 9px; background: var(--a-el); }
.mi .seg2 span { padding: 7px 0; text-align: center; border-radius: 7px; font: 700 12px system-ui, var(--sans); color: var(--a-t2); }
.mi .seg2 .on { background: var(--a-cy); color: var(--a-deep); }
.mi .cap2 { margin: 0; font: 400 9.5px var(--mono-a); color: var(--a-mut); }
.mi .chart { width: 100%; height: auto; overflow: visible; }
.mi .chart .g { stroke: var(--a-sep); stroke-width: 1; }
.mi .chart text { font: 400 8px var(--mono-a); fill: var(--a-mut); }
.mi .chart .yr { font-weight: 700; fill: #3A5A7A; }
.mi .chart .act { fill: none; stroke: var(--a-cy); stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mi .chart .area { opacity: 0; }
.mi .chart .proj { fill: none; stroke: var(--a-gold); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0; }
.mi .chart .goal-l { stroke: var(--a-gold); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0; }
.mi .chart .now { fill: var(--a-cy); stroke: var(--a-card); stroke-width: 2; opacity: 0; }
.mi .chart .gdot { fill: var(--a-gold); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mi .proj-t { display: grid; gap: 2px; opacity: 0; transform: translateY(6px); }
.mi .proj-t .cap { font-size: 9.5px; color: var(--a-mut); }
.mi .proj-t b { font: 600 24px var(--serif-a); color: var(--a-gold); }
.mi .cap3 { font: 400 10px var(--mono-a); color: var(--a-mut); }
.mi .to { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mi .to span { padding: 7px 0; text-align: center; border-radius: 9px; background: var(--a-el); font: 700 12px system-ui, var(--sans); color: var(--a-t2); }
.mi .to .on { background: var(--a-cy); color: var(--a-deep); }
/* Playing: the line draws, the projection reaches the goal, the bars fill */
.mi.go .chart .act { transition: stroke-dashoffset 1.7s cubic-bezier(.4, 0, .2, 1) 0.1s; stroke-dashoffset: 0; }
.mi.go .chart .area { transition: opacity 0.8s ease 1.3s; opacity: 1; }
.mi.go .chart .now { transition: opacity 0.3s ease 1.75s; opacity: 1; }
.mi.go .chart .goal-l { transition: opacity 0.5s ease 1.9s; opacity: 0.5; }
.mi.go .chart .proj { transition: opacity 0.6s ease 2.1s; opacity: 1; }
.mi.go .chart .gdot { animation: mdPop 0.5s cubic-bezier(.3, 1.6, .5, 1) 2.6s both; }
.mi.go .proj-t { transition: opacity 0.5s ease 2.9s, transform 0.5s ease 2.9s; opacity: 1; transform: none; }
.mi.go .lic-bar i { transition: width 1.1s cubic-bezier(.2, .8, .2, 1); width: calc(var(--w) * 100%); }
.mi.go .lic-r:nth-of-type(3) .lic-bar i { transition-delay: 0.1s; } .mi.go .lic-r:nth-of-type(4) .lic-bar i { transition-delay: 0.2s; }
.mi.go .lic-r:nth-of-type(5) .lic-bar i { transition-delay: 0.3s; } .mi.go .lic-r:nth-of-type(6) .lic-bar i { transition-delay: 0.4s; }
.mi.go .lic-r:nth-of-type(7) .lic-bar i { transition-delay: 0.5s; } .mi.go .lic-r:nth-of-type(8) .lic-bar i { transition-delay: 0.6s; }
.mi.still * { transition: none !important; animation: none !important; }
.mi.still .chart .gdot { opacity: 1; }
@keyframes mdPop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 820px) {
  .mi { grid-template-columns: 340px; justify-content: center; }
  .mi .lic { display: none; }
}

/* ---------- Milestones ---------- */
.mm { width: 340px; display: grid; gap: 10px; }
.mm-row { display: grid; grid-template-columns: 44fr 56fr; gap: 10px; }
.mm .lx, .mm .bw { height: 220px; }
.mm .lx { display: flex; flex-direction: column; }
.mm .lx-map { position: relative; height: 100px; flex: none; background: var(--a-bg); border-bottom: 1px solid var(--a-sep); overflow: hidden; }
.mm .lx-map img, .mm .lx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm .lx-map path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mm .lx-map .o { stroke: rgba(0, 0, 0, 0.55); stroke-width: 6; }
.mm .lx-map .c { stroke: var(--a-cy); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mm .lx-ap { position: absolute; transform: translate(-50%, -50%); }
.mm .lx-ap i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--a-cy); border: 2px solid #fff; }
.mm .lx-ap b { position: absolute; top: -20px; padding: 1px 5px; border-radius: 6px; background: rgba(15, 22, 38, 0.92); font: 800 11px Menlo, var(--mono-a); white-space: nowrap; }
.mm .lx-ap b.r { right: 4px; } .mm .lx-ap b.l { left: 4px; top: 12px; }
.mm .lx-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 99px; border: 1px solid #00C8E855; background: rgba(6, 11, 22, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 7.5px var(--mono-a); letter-spacing: 1.1px; color: var(--a-cy); }
.mm .lx-badge i, .mm .bw-eye i { width: 4px; height: 4px; border-radius: 50%; background: var(--a-cy); }
.mm .lx-b { padding: 12px 10px; display: grid; gap: 5px; }
.mm .lx-hero { display: flex; align-items: baseline; gap: 4px; }
.mm .lx-hero b { font: 500 32px/1 var(--serif-a); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.mm .lx-hero i, .mm .bw-hero i { font: 700 10px var(--mono-a); font-style: normal; color: var(--a-cy); }
.mm .lx-route { font: 700 10.5px var(--mono-a); color: var(--a-t2); }
.mm .lx-route i { font-style: normal; color: var(--a-cy); }
.mm .lx-foot { display: flex; justify-content: space-between; font: 700 9px var(--mono-a); color: var(--a-t2); }
.mm .bw { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.mm .bw-eye { display: flex; align-items: center; gap: 6px; font: 700 8.5px var(--mono-a); letter-spacing: 1.4px; color: var(--a-cy); }
.mm .bw-wk { margin-top: -5px; font: 600 9px var(--mono-a); letter-spacing: 0.9px; color: var(--a-t2); }
.mm .bw-hero { display: flex; align-items: baseline; gap: 3px; margin-top: -4px; }
.mm .bw-hero b { font: 500 30px/32px var(--serif-a); letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.mm .bw-bars { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; min-height: 0; }
.mm .bw-d { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; }
.mm .bw-v { font: 700 7px var(--mono-a); color: #fff; }
.mm .bw-d.peak .bw-v { color: var(--a-cy); }
.mm .bw-d.none .bw-v { color: var(--a-mut); opacity: 0.6; }
.mm .bw-t { position: relative; flex: 1; width: 100%; border-radius: 4px; border: 1px solid var(--a-sep); background: rgba(127, 168, 200, 0.05); overflow: hidden; }
.mm .bw-t i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #00C8E8cc, #00C8E855); }
.mm .bw-d.peak .bw-t i { background: linear-gradient(180deg, #00C8E8, #00C8E8aa); box-shadow: 0 0 6px #00C8E8; }
.mm .bw-wd { font: 700 7px var(--mono-a); letter-spacing: 0.6px; color: var(--a-t2); }
.mm .bw-dd { margin-top: -3px; font: 600 8px var(--mono-a); color: var(--a-mut); }
.mm .bw-foot { display: flex; gap: 12px; padding-top: 8px; border-top: 1px solid var(--a-sep); font: 700 9px var(--mono-a); letter-spacing: 0.6px; color: var(--a-t2); }
.mm .bw-foot b { color: var(--a-cy); }
.mm .pace { padding: 12px 14px; display: grid; gap: 8px; }
.mm .pace-h { display: flex; align-items: baseline; gap: 8px; }
.mm .pace-h b { font: 500 13px var(--serif-a); }
.mm .pace-h em { margin-left: auto; font: 600 16px var(--serif-a); font-style: normal; color: var(--a-cy); }
.mm .pace-r { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 8px; font: 700 8px var(--mono-a); letter-spacing: 0.8px; color: var(--a-t2); }
.mm .pace-r b { font: 700 10px var(--mono-a); color: #fff; text-align: right; }
.mm .pace-t { height: 8px; border-radius: 4px; background: var(--a-sep); overflow: hidden; }
.mm .pace-t i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--a-mut); }
.mm .pace-t i.a { background: var(--a-cy); }
.mm.go .lx-map .c { transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1) 0.2s; stroke-dashoffset: 0; }
.mm.go .bw-t i { transition: height 0.9s cubic-bezier(.2, .8, .2, 1); height: calc(var(--h) * 100%); }
.mm.go .bw-d:nth-child(2) i { transition-delay: 0.08s; } .mm.go .bw-d:nth-child(3) i { transition-delay: 0.16s; } .mm.go .bw-d:nth-child(4) i { transition-delay: 0.24s; }
.mm.go .bw-d:nth-child(5) i { transition-delay: 0.32s; } .mm.go .bw-d:nth-child(6) i { transition-delay: 0.4s; } .mm.go .bw-d:nth-child(7) i { transition-delay: 0.48s; }
.mm.go .pace-t i { transition: width 1s cubic-bezier(.2, .8, .2, 1) 1.2s; width: calc(var(--w) * 100%); }
.mm.still * { transition: none !important; }

/* ---------- Share card ---------- */
.msh { width: 300px; display: grid; gap: 12px; }
.sh-card { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #0f1728; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
.sh-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-l { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.sh-card[data-l="perf"] .sh-perf, .sh-card[data-l="route"] .sh-route, .sh-card[data-l="post"] .sh-post { opacity: 1; }
.sh-l * { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.sh-lock { position: absolute; right: 14px; bottom: 12px; display: grid; justify-items: end; line-height: 1.15; }
.sh-lock.tl { right: auto; bottom: auto; left: 14px; top: 12px; justify-items: start; }
.sh-lock i { font: italic 9px Georgia, serif; color: #fff; }
.sh-lock b { font: 700 10px Georgia, serif; letter-spacing: 2.4px; color: #FFB830; }
.sh-lock em { font: 600 7px Georgia, serif; font-style: normal; letter-spacing: 1.4px; color: #C9CFD9; }
.sh-stats { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.sh-stats div { display: grid; justify-items: center; }
.sh-stats span { font: 700 16px system-ui, var(--sans); }
.sh-stats b { font: 800 40px system-ui, var(--sans); letter-spacing: -1px; line-height: 1.05; }
.sh-scrim { position: absolute; left: 0; right: 0; }
.sh-scrim.t { top: 0; height: 24%; background: linear-gradient(180deg, rgba(6, 11, 22, 0.5), transparent); }
.sh-scrim.b { bottom: 0; height: 46%; background: linear-gradient(180deg, transparent, rgba(6, 11, 22, 0.72)); }
.sh-dash { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-dash path { fill: none; stroke: #FFB830; stroke-width: 1.4; stroke-dasharray: 4 4.6; vector-effect: non-scaling-stroke; }
.sh-tile { position: absolute; display: flex; align-items: center; gap: 8px; }
.sh-tile.sh-a { right: 22px; top: 52px; flex-direction: row-reverse; }
.sh-tile.sh-b { left: 22px; bottom: 112px; }
.sh-img { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 184, 48, 0.6); background: #16253a; }
.sh-img .ap-attr { display: none; }
.sh-ic { display: grid; line-height: 1.1; }
.sh-tile.sh-a .sh-ic { justify-items: end; }
.sh-ic b { font: 400 21px var(--serif-a); }
.sh-ic em { font: 400 7px var(--mono-a); font-style: normal; letter-spacing: 1px; color: #FFB830; text-transform: uppercase; }
.sh-bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 6px; }
.sh-hair { height: 1px; background: linear-gradient(90deg, transparent, #FFB830aa, transparent); }
.sh-date { font: 400 9.5px var(--mono-a); color: rgba(255, 255, 255, 0.72); }
.sh-row { display: flex; justify-content: space-between; }
.sh-row b { font: 600 18px var(--serif-a); }
.sh-row b i { margin-left: 2px; font: 400 7.5px var(--mono-a); font-style: normal; color: #FFB830; }
.sh-row span { display: block; font: 700 8px var(--mono-a); letter-spacing: 1.4px; color: rgba(255, 255, 255, 0.62); }
.sh-title { position: absolute; left: 0; right: 0; top: 35%; transform: translateY(-50%) scale(0.8); display: grid; justify-items: center; line-height: 1.05; }
.sh-title i { font: italic 36px Georgia, serif; }
.sh-title b { font: 600 52px Georgia, serif; }
.sh-edge { position: absolute; left: 10px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg) translateY(50%); transform-origin: center; white-space: nowrap; font: 9px Menlo, var(--mono-a); letter-spacing: 1.8px; color: #FFB830; }
.sh-ft { position: absolute; left: 16px; bottom: 14px; display: grid; }
.sh-ft span { font: 7px Menlo, var(--mono-a); letter-spacing: 1px; color: #FFB830; }
.sh-ft b { font: 600 14px Georgia, serif; }
.sh-ctl { display: grid; gap: 10px; }
.sh-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); }
.sh-seg span { padding: 7px 0; text-align: center; border-radius: 8px; font: 700 11px var(--mono-a); color: rgba(255, 255, 255, 0.55); transition: background-color 0.3s ease, color 0.3s ease; }
.sh-seg span.on { background: #2563EB; color: #fff; }
.sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-btns span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font: 700 14px system-ui, var(--sans); }
.sh-close { border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; }
.sh-share { background: #2563EB; color: #fff; }
.sh-share svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Closest airport ---------- */
.mc { width: 340px; display: grid; gap: 10px; }
.mc-search { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 7px; border-radius: 14px; border: 1px solid #00C8E866; background: rgba(6, 11, 22, 0.85); }
.mc-ib { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #00C8E822; }
.mc-ib svg { width: 17px; height: 17px; fill: none; stroke: var(--a-cy); stroke-width: 2.2; stroke-linecap: round; }
.mc-ph { font: 700 14px system-ui, var(--sans); color: rgba(255, 255, 255, 0.5); }
.mc-row { display: flex; gap: 6px; }
.mc-row > span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--a-bd); background: rgba(6, 11, 22, 0.85); font: 700 12px system-ui, var(--sans); }
.mc-row svg { width: 14px; height: 14px; fill: none; stroke: var(--a-t2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-row .fill { fill: currentColor; stroke: none; }
.mc-closest { flex: 1; justify-content: center; border-color: #00C8E866 !important; color: #fff; }
.mc-closest svg { color: var(--a-cy); stroke: none; }
.mc-chip { color: var(--a-t2); }
.mc-chip svg:last-child { width: 11px; height: 11px; }
.mc-out { position: relative; min-height: 400px; }
.mc-radar { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s ease; }
.mc-radar i { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid #00C8E8; opacity: 0; }
.mc-radar b { width: 14px; height: 14px; border-radius: 50%; background: var(--a-cy); border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(0, 200, 232, 0.2); }
.mc.seek .mc-radar { opacity: 1; }
.mc.seek .mc-radar i { animation: mcRing 1.6s ease-out infinite; }
.mc.seek .mc-radar i:nth-child(2) { animation-delay: 0.5s; } .mc.seek .mc-radar i:nth-child(3) { animation-delay: 1s; }
@keyframes mcRing { from { opacity: 0.9; transform: scale(0.2); } to { opacity: 0; transform: scale(4.5); } }
.mc-res { display: grid; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2, .8, .2, 1); }
.mc.found .mc-res { opacity: 1; transform: none; }
.mc-card { display: flex; gap: 12px; padding: 14px 14px 12px; border-radius: 14px; background: rgba(15, 22, 38, 0.96); border: 1px solid var(--a-bd); }
.mc-id { display: grid; justify-items: center; align-content: start; gap: 3px; }
.mc-id b { font: 800 22px Menlo, var(--mono-a); color: var(--a-cy); letter-spacing: 0.5px; }
.mc-id span { font-size: 18px; line-height: 1; }
.mc-main { min-width: 0; display: grid; gap: 6px; }
.mc-nm { display: flex; align-items: center; gap: 8px; }
.mc-nm span { font: 600 11px system-ui, var(--sans); color: var(--a-t2); }
.mc-nm em { padding: 1px 6px; border-radius: 5px; background: #34D39926; font: 800 10px Menlo, var(--mono-a); font-style: normal; color: #34D399; }
.mc-pl { margin: 0; font: 700 10.5px system-ui, var(--sans); letter-spacing: 0.3px; color: var(--a-cy); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.mc-fq { display: flex; margin-top: 2px; }
.mc-fq[hidden] { display: none; }
.mc-fq div { flex: 1; display: grid; gap: 1px; }
.mc-fq div + div { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.mc-fq span { font: 400 9px Menlo, var(--mono-a); color: #5a7fa0; }
.mc-fq b { font: 800 15px system-ui, var(--sans); font-variant-numeric: tabular-nums; }
.mc-map { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: #0f1e3a; border: 1px solid var(--a-bd); }
.mc-map .ap-attr { font-size: 7px; }
.mc-nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 10px; border-radius: 14px; background: rgba(15, 22, 38, 0.96); border: 1px solid var(--a-bd); }
.mc-nav > div { display: grid; gap: 2px; align-content: start; padding: 0 4px; }
.mc-nav > div + div { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.mc-nav span { font: 700 8.5px Menlo, var(--mono-a); letter-spacing: 0.4px; color: var(--a-mut); white-space: nowrap; }
.mc-nav b { font: 800 19px system-ui, var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-nav b i { font: 700 11px system-ui, var(--sans); font-style: normal; color: var(--a-t2); }
.mc-nav .crs b { color: var(--a-cy); }
.mc-nav em { font: 400 8.5px system-ui, var(--sans); font-style: normal; color: var(--a-mut); white-space: nowrap; }

/* ---------- Security ---------- */
.ms { display: grid; grid-template-columns: 280px 300px; gap: 18px; align-items: center; }
.ms-set { padding: 14px 14px 6px; }
.ms-h { display: block; margin-bottom: 8px; font: 700 10px var(--mono-a); letter-spacing: 1.4px; color: var(--a-t2); text-transform: uppercase; }
.ms-r { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--a-sep); }
.ms-r > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ms-r b { font: 600 13px system-ui, var(--sans); }
.ms-r em { font: 400 11px system-ui, var(--sans); font-style: normal; color: var(--a-t2); }
.ms-i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #00C8E81A; flex: none; }
.ms-i svg { width: 16px; height: 16px; fill: none; stroke: var(--a-cy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-tg { width: 42px; height: 25px; border-radius: 13px; background: var(--a-ok); position: relative; flex: none; }
.ms-tg i { position: absolute; right: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; }
.ms-ch { color: var(--a-mut); font-size: 18px; }
.ms-phone { position: relative; height: 470px; border-radius: 30px; overflow: hidden; background: var(--a-bg); border: 1px solid var(--a-bd); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.ms-log { position: absolute; inset: 0; padding: 22px 12px; display: grid; align-content: start; gap: 8px; overflow: hidden; }
.ms-lt { margin: 0 4px 6px; font: 700 15px system-ui, var(--sans); text-align: center; }
.ms-e { display: grid; gap: 6px; padding: 12px; border-radius: 10px; background: var(--a-card); opacity: 0; transform: translateY(10px); }
.ms-eh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ms-eh b { font: 700 12px system-ui, var(--sans); }
.ms-eh span { order: 3; flex-basis: 100%; font: 400 10px system-ui, var(--sans); color: var(--a-mut); }
.ms-eh svg { margin-left: auto; }
.ms-eh svg { width: 13px; height: 13px; fill: none; stroke: var(--a-cy); stroke-width: 2; stroke-linejoin: round; flex: none; }
.ms-d { display: grid; grid-template-columns: 70px auto 14px 1fr; align-items: baseline; gap: 4px; font: 400 11.5px system-ui, var(--sans); }
.ms-d span { color: var(--a-t2); }
.ms-d s { color: #FF4D6A; }
.ms-d i { font-style: normal; color: var(--a-mut); text-align: center; }
.ms-d em { font-style: normal; font-weight: 600; color: var(--a-ok); }
.ms-why { margin: 0; font: italic 10.5px system-ui, var(--sans); color: var(--a-mut); }
.ms-lock { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 24px; background: var(--a-bg); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.ms-lock img { width: 64px; height: 64px; margin-bottom: 18px; }
.ms-lc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #00C8E81A; border: 1px solid #00C8E844; }
.ms-lc svg { width: 22px; height: 22px; fill: none; stroke: var(--a-cy); stroke-width: 1.8; stroke-linejoin: round; }
.ms-lock b { font: 400 22px Georgia, serif; }
.ms-lock p { margin: -6px 0 6px; font: 400 13.5px system-ui, var(--sans); color: var(--a-t2); }
.ms-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 14px; background: var(--a-cy); font: 800 15px system-ui, var(--sans); color: var(--a-bg); }
.ms-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--a-bg); stroke-width: 1.8; stroke-linecap: round; }
.ms-face { position: absolute; left: 50%; top: 44%; display: grid; justify-items: center; gap: 8px; padding: 22px 26px 16px; border-radius: 22px; background: rgba(40, 46, 58, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translate(-50%, -50%) scale(0.8); opacity: 0; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.3, 1.4, .5, 1); }
.ms-face svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-face span { font: 500 13px system-ui, var(--sans); }
.ms-face .fid-ok { opacity: 0; stroke: #34D399; stroke-dasharray: 40; stroke-dashoffset: 40; }
.ms.scan .ms-face { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ms.scan .ms-face .fid-fc { animation: msScan 0.9s ease-in-out infinite; }
.ms.ok .ms-face .fid-fc, .ms.ok .ms-face .fid-fr { opacity: 0; transition: opacity 0.2s ease; }
.ms.ok .ms-face .fid-ok { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s ease 0.1s, opacity 0.1s; }
.ms.open .ms-face { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
.ms.open .ms-lock { opacity: 0; transform: scale(1.06); pointer-events: none; }
.ms.open .ms-e { transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2, .8, .2, 1); opacity: 1; transform: none; }
.ms.open .ms-e:nth-of-type(2) { transition-delay: 0.25s; } .ms.open .ms-e:nth-of-type(3) { transition-delay: 0.45s; } .ms.open .ms-e:nth-of-type(4) { transition-delay: 0.65s; }
@keyframes msScan { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2px); } 70% { transform: translateX(2px); } }
@media (max-width: 820px) {
  .ms { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .ms-set { display: none; }
}

/* ---------- Flight load ---------- */
.ml { display: grid; grid-template-columns: 340px 270px; gap: 14px; align-items: start; }
.ml-p { padding: 14px; display: grid; gap: 12px; }
.ml-h { display: flex; align-items: center; gap: 8px; }
.ml-h > span { font: 700 9px Menlo, var(--mono-a); letter-spacing: 1.2px; color: var(--a-t2); }
.ml-chip { padding: 2px 7px; border-radius: 7px; font: 800 8.5px system-ui, var(--sans); letter-spacing: 1px; color: var(--zc, #00E8A0); background: color-mix(in srgb, var(--zc, #00E8A0) 12%, transparent); border: 1px solid color-mix(in srgb, var(--zc, #00E8A0) 35%, transparent); transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
.ml-h em { margin-left: auto; font: 700 9px Menlo, var(--mono-a); font-style: normal; color: var(--a-cy); }
.ml-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); }
.ml-bar .ml-f { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f, 0) * 100%); border-radius: 3px; background: linear-gradient(90deg, #00C8E82E, #00C8E8E6); }
.ml-bar .ml-k { position: absolute; top: 50%; left: calc(var(--f, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2px solid #00C8E8; box-shadow: 0 0 0 4px rgba(0, 200, 232, 0.18); }
.ml-bar .ml-t { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; background: #fff; opacity: 0.7; }
.ml-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.ml-ring { position: relative; width: 110px; height: 110px; }
.ml-ring svg { width: 110px; height: 110px; }
.ml-pct { position: absolute; inset: 0 0 8px; display: flex; align-items: baseline; justify-content: center; padding-top: 40px; gap: 1px; }
.ml-pct b { font: 700 23px Menlo, var(--mono-a); color: #E6EEF7; font-variant-numeric: tabular-nums; }
.ml-pct em { font: 400 13px Menlo, var(--mono-a); font-style: normal; color: var(--a-t2); }
.ml-zone { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 800 8.5px system-ui, var(--sans); letter-spacing: 1px; color: var(--zc, #00E8A0); transition: color 0.3s; }
.ml-info { position: absolute; left: 2px; bottom: 2px; color: var(--a-mut); }
.ml-info svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ml-ro { display: grid; gap: 6px; }
.ml-ro > div { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border-radius: 8px; background: #0A1628CC; border: 1px solid var(--a-bd); }
.ml-ro span { font: 400 10px Menlo, var(--mono-a); color: var(--a-mut); }
.ml-ro b { font: 400 16px var(--seg-a); font-variant-numeric: tabular-nums; }
.ml-ro .cy { color: var(--a-cy); }
.ml-ro .zn { color: var(--zc, #00E8A0); display: inline-flex; align-items: baseline; }
.ml-ro .zn i { font-style: normal; }
.ml-ro .zn s { text-decoration: none; color: var(--a-mut); }
.ml-p .ml-ro .zn { color: var(--a-ok); }
.ml-badge { position: absolute; left: 50px; padding: 1px 6px; border-radius: 6px; background: #00E8A022; font: 700 9px Menlo, var(--mono-a) !important; color: var(--a-ok) !important; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.ml.bump .ml-badge { opacity: 1; transform: none; }
.ml-info-card { padding: 16px; display: grid; gap: 10px; }
.ml-ih { display: flex; align-items: center; gap: 8px; }
.ml-ih svg { width: 18px; height: 18px; fill: none; stroke: var(--a-cy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ml-ih b { font: 700 16px system-ui, var(--sans); }
.ml-info-card p { margin: 0; font: 400 12px/1.45 system-ui, var(--sans); color: #C7D4E4; }
.ml-info-card p.lo { color: var(--a-t2); }
.ml-zs { display: grid; gap: 2px; }
.ml-z { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 7px; transition: background-color 0.3s; }
.ml-z b { font: 800 9px system-ui, var(--sans); letter-spacing: 1px; }
.ml-z span { font: 400 11px system-ui, var(--sans); color: var(--a-t2); }
.ml-z.on { background: rgba(255, 255, 255, 0.07); }
.ml-z.on span { color: #fff; }
@media (max-width: 820px) {
  .ml { grid-template-columns: 340px; justify-content: center; }
  .ml-info-card p { display: none; }
  .ml-info-card { padding: 12px; }
}

/* ---------- Day and night: Sun & route ---------- */
.dn { width: min(100%, 600px); padding: 12px; border-radius: 12px; display: grid; gap: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85); }
.dn-h { display: flex; align-items: center; gap: 7px; }
.dn-h svg { width: 16px; height: 16px; fill: none; stroke: #FFB830; stroke-width: 1.8; stroke-linecap: round; }
.dn-h svg:last-child { margin-left: auto; width: 14px; height: 14px; stroke: var(--a-t2); transform: rotate(180deg); }
.dn-h b { font: 700 14px system-ui, var(--sans); }
.dn-map { position: relative; aspect-ratio: 1100 / 680; border-radius: 10px; overflow: hidden; background: #0b1626; }
.dn-map img, .dn-map canvas, .dn-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dn-map line { stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dn-chip { position: absolute; transform: translate(-50%, -150%); height: 16px; padding: 0 5px; display: grid; place-items: center; border-radius: 5px; background: rgba(15, 22, 38, 0.9); font: 700 10px Menlo, var(--mono-a); }
.dn-plane { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; transform: rotate(45deg); background: #3FE0FF; border: 1.5px solid #06101F; box-shadow: 0 0 10px rgba(63, 224, 255, 0.7); }
.dn-bar { display: flex; align-items: center; gap: 8px; }
.dn-play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #FFB830; background: #FFB83018; flex: none; }
.dn-play svg { width: 11px; height: 11px; fill: #FFB830; }
.dn-tt { font: 700 10px var(--mono-a); color: var(--a-t2); flex: none; }
.dn-track { position: relative; flex: 1; height: 6px; border-radius: 3px; }
.dn-thumb { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFB830; border: 2px solid #fff; }
.dn-st { display: flex; align-items: center; gap: 8px; }
.dn-clock { font: 700 13px var(--mono-a); font-variant-numeric: tabular-nums; }
.dn-phase { padding: 2px 7px; border-radius: 6px; font: 800 10px var(--mono-a); color: var(--sc, #F2914A); background: color-mix(in srgb, var(--sc, #F2914A) 13%, transparent); }
.dn-lg { display: flex; gap: 14px; }
.dn-lg span { display: inline-flex; align-items: center; gap: 5px; font: 400 9px var(--mono-a); color: var(--a-mut); }
.dn-lg i { width: 9px; height: 3px; border-radius: 2px; }