/* ==========================================================================
   Demo: "Command from anywhere" (air). Scoped under .airdemo.
   The console is an instrument: always night. The phone follows the site
   theme (white in light, black in dark), whatever surface it sits on.
   Layout adapts to the container, not the viewport:
     airdemo     the root (console beside the phone from 1100 px)
     airconsole  the console (feed beside map and log from 760 px)
     airfeed     the camera feed (HUD placed in video coordinates)
     airphone    the phone (type scales with its width)
   ========================================================================== */

.airdemo {
  --ad-line: rgb(255 255 255 / 0.08);
  --ad-line-2: rgb(255 255 255 / 0.15);
  --ad-ink: var(--night-ink);
  --ad-ink-2: var(--night-ink-2);
  --ad-ink-3: var(--night-ink-3);
  --ad-hot: var(--crimson-300);
  --ad-panel: rgb(255 255 255 / 0.028);
  container: airdemo / inline-size;
  position: relative;
  color: var(--ad-ink);
  font-family: var(--font-text);
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
}
.airdemo__fallback { width: 100%; height: auto; border-radius: var(--r-md); }
.airdemo__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.airdemo vm-icon { display: inline-flex; line-height: 0; flex: none; }

/* ---------------------------------------------------------------- Stage */
.airdemo__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5cqw, 44px); align-items: center; }
@container airdemo (min-width: 1100px) {
  .airdemo__stage { grid-template-columns: minmax(0, 1fr) clamp(262px, 22cqw, 300px); gap: clamp(24px, 3cqw, 44px); }
}

/* -------------------------------------------------------------- Console */
.airdemo__console {
  container: airconsole / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 60% at 50% -10%, rgb(255 255 255 / 0.06), transparent 60%),
    linear-gradient(180deg, #111115, var(--night-1) 40%, #08080A);
  border: 1px solid var(--ad-line-2);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.07) inset,
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 60px 120px -50px rgb(0 0 0 / 0.95);
  isolation: isolate;
}
.airdemo__console::after { /* crimson horizon on the top edge */
  content: "";
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--crimson-rgb) / 0.9), transparent);
  pointer-events: none;
}

.airdemo__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 2px 10px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-ink-3);
  white-space: nowrap;
}
.airdemo__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ad-ink); font-weight: 500; }
.airdemo__mark { width: 18px; height: auto; color: var(--crimson); }
.airdemo__where { display: inline-flex; align-items: center; gap: 10px; }
.airdemo__where i { width: 16px; height: 1px; background: var(--ad-line-2); }
/* The flow, as a stepper: 01 Alert — 02 Dispatch — 03 On station — 04 Handover */
.airdemo__steps { display: flex; align-items: center; gap: 0; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 9.5px; letter-spacing: 0.14em; }
.airdemo__steps li { display: inline-flex; align-items: center; gap: 7px; color: var(--ad-ink-3); transition: color 400ms var(--ease-soft); }
.airdemo__steps li + li::before { content: ""; width: 18px; height: 1px; margin: 0 10px; background: var(--ad-line-2); transition: background-color 400ms var(--ease-soft); }
.airdemo__steps b { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border: 1px solid var(--ad-line-2); border-radius: 2px; font-weight: 500; letter-spacing: 0.06em; color: var(--ad-ink-3); transition: background-color 400ms, border-color 400ms, color 400ms; }
.airdemo__steps li.is-done { color: var(--ad-ink-2); }
.airdemo__steps li.is-done b { border-color: rgb(255 255 255 / 0.32); color: var(--ad-ink); }
.airdemo__steps li.is-done + li::before, .airdemo__steps li.is-now + li::before { background: rgb(255 255 255 / 0.3); }
.airdemo__steps li.is-now { color: #fff; }
.airdemo__steps li.is-now b { background: var(--crimson); border-color: transparent; color: #fff; }
@container airconsole (max-width: 980px) { .airdemo__steps li:not(.is-now) span { display: none; } .airdemo__steps li + li::before { width: 12px; margin: 0 7px; } }
@container airconsole (max-width: 620px) { .airdemo__where { display: none; } }
@container airconsole (max-width: 400px) { .airdemo__brand span { display: none; } .airdemo__bar { gap: 10px; } .airdemo__steps li + li::before { width: 8px; margin: 0 5px; } }

/* Status strip */
.airdemo__status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin: 0 0 8px;
  padding: 7px 12px 7px 8px;
  border-radius: calc(var(--r-md) - 8px);
  background: var(--ad-panel);
  border: 1px solid var(--ad-line);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ad-ink-2);
  transition: background-color 500ms var(--ease-soft), border-color 500ms var(--ease-soft), color 500ms;
}
.airdemo__tag {
  flex: none;
  padding: 5px 8px;
  border: 1px solid var(--ad-line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ad-ink);
  transition: background-color 400ms, border-color 400ms;
}
.airdemo[data-state="alert"] .airdemo__status,
.airdemo[data-state="onstation"] .airdemo__status {
  background: linear-gradient(90deg, rgb(var(--crimson-rgb) / 0.3), rgb(var(--crimson-rgb) / 0.1));
  border-color: rgb(var(--crimson-rgb) / 0.55);
  color: #fff;
}
.airdemo[data-state="alert"] .airdemo__tag,
.airdemo[data-state="onstation"] .airdemo__tag { background: var(--crimson); border-color: transparent; color: #fff; }

/* Grid of panels */
.airdemo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.airdemo__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
@container airconsole (min-width: 540px) {
  .airdemo__side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@container airconsole (min-width: 760px) {
  .airdemo__grid { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); }
  .airdemo__side { display: flex; flex-direction: column; contain: size; height: 100%; }
  .airdemo__side .ad-map { flex: none; }
  .airdemo__side .ad-log { flex: 1; min-height: 0; }
}

.ad-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-ink-3);
}
.ad-label b { font-weight: 500; color: var(--ad-ink-2); margin-left: 6px; }

/* ----------------------------------------------------------------- Feed */
.ad-feed {
  container: airfeed / size;
  position: relative;
  aspect-ratio: 16 / 10;
  min-width: 0;
  border-radius: calc(var(--r-md) - 8px);
  overflow: hidden;
  background: #050506;
  border: 1px solid var(--ad-line);
  isolation: isolate;
  --iw: max(100cqw, 100cqh * 16 / 9);
  --ih: calc(var(--iw) * 9 / 16);
}
@container airconsole (min-width: 760px) { .ad-feed { aspect-ratio: 4 / 3.1; } }
@container airconsole (min-width: 980px) { .ad-feed { aspect-ratio: 16 / 11; } }

.ad-chart, .ad-video, .ad-link, .ad-hud {
  position: absolute;
  inset: 0;
  transition: opacity 600ms var(--ease-soft);
}
.ad-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; background: #050506; }
.ad-link, .ad-hud { opacity: 0; pointer-events: none; }
.ad-feed[data-view="chart"] .ad-chart { opacity: 1; }
.ad-feed:not([data-view="chart"]) .ad-chart { opacity: 0; }
.ad-feed[data-view="link"] .ad-link { opacity: 1; }
.ad-feed[data-view="video"] .ad-video, .ad-feed[data-view="video"] .ad-hud { opacity: 1; }

/* Chart */
.ad-chart {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: clamp(12px, 3.2cqw, 20px) clamp(12px, 3.2cqw, 22px) clamp(10px, 2.6cqw, 16px);
  background:
    radial-gradient(90% 70% at 50% 110%, rgb(var(--crimson-rgb) / 0.1), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent);
}
.ad-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.ad-chart__legend { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ad-ink-3); }
.ad-chart__legend i { width: 14px; height: 2px; background: rgb(255 255 255 / 0.8); }
.ad-chart__legend i.is-limit { margin-left: 8px; background: repeating-linear-gradient(90deg, var(--ad-hot) 0 4px, transparent 4px 7px); }
@container airfeed (max-width: 420px) { .ad-chart__legend { display: none; } }
.ad-chart__plot { position: relative; min-height: 0; border-left: 1px solid var(--ad-line); border-bottom: 1px solid var(--ad-line); }
.ad-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ad-chart__grid path { stroke: rgb(255 255 255 / 0.05); stroke-width: 1; fill: none; }
.ad-chart__area { stroke: none; }
.ad-chart__breach { fill: rgb(var(--crimson-rgb) / 0.4); }
.ad-chart__limit-line { stroke: var(--ad-hot); stroke-width: 1; stroke-dasharray: 5 5; fill: none; opacity: 0.7; }
.ad-chart__line { fill: none; stroke: rgb(255 255 255 / 0.88); stroke-width: 1.6; stroke-linejoin: round; }
.ad-chart__line--hot { stroke: #FF6B82; stroke-width: 2.2; }
.ad-chart__limit {
  position: absolute;
  right: 0;
  top: var(--y);
  transform: translateY(-130%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-hot);
}
.ad-chart__marker {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--x);
  width: 0;
  border-left: 1px dashed rgb(255 107 130 / 0.85);
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: 50% 100%;
  transition: opacity 400ms var(--ease-soft), transform 900ms var(--ease-out);
}
.ad-chart__marker em {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -2px);
  padding: 3px 7px;
  background: var(--crimson);
  color: #fff;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.airdemo:not([data-state="idle"]) .ad-chart__marker { opacity: 1; transform: none; }
.ad-chart__axis { position: relative; height: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--ad-ink-3); }
.ad-chart__axis span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
@container airfeed (max-width: 380px) { .ad-chart__axis span:nth-child(even) { display: none; } }

/* Link acquisition */
.ad-link {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ad-ink-2);
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(60% 60% at 50% 50%, #17171c, #050506);
}
.ad-link i { position: relative; width: 140px; height: 1px; background: var(--ad-line-2); overflow: hidden; }
.ad-link b { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--ad-hot); }
.ad-feed[data-view="link"] .ad-link b { animation: ad-link 1s var(--ease-in-out) infinite; }
@keyframes ad-link { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* HUD over the drone camera */
.ad-hud { font-family: var(--font-mono); color: #fff; }
.ad-hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.5)); }
.ad-corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgb(255 255 255 / 0.75); }
.ad-corner--tl { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; }
.ad-corner--tr { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; }
.ad-corner--bl { bottom: 12px; left: 12px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ad-corner--br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.ad-read {
  position: absolute;
  top: 20px;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
  font-variant-numeric: tabular-nums;
}
.ad-read b { font-weight: 600; color: #fff; }
.ad-read--tl { left: 24px; }
.ad-read--tr { right: 24px; text-align: right; }
.airdemo[data-state="onstation"] .ad-read--tr b, .airdemo[data-state="done"] .ad-read--tr b { color: #FF8397; }
@container airfeed (max-width: 460px) { .ad-opt { display: none; } }
@container airfeed (max-width: 360px) { .ad-read { font-size: 8.5px; top: 16px; } .ad-read--tl { left: 18px; } .ad-read--tr { right: 18px; } }

/* Positioned in video coordinates (object-fit: cover) */
.ad-at {
  position: absolute;
  left: calc(50% + (var(--x) - 0.5) * var(--iw));
  top: calc(50% + (var(--y) - 0.5) * var(--ih));
}
.ad-cross { width: 26px; height: 26px; margin: -13px 0 0 -13px; transition: opacity 400ms; }
.ad-cross::before, .ad-cross::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.7); }
.ad-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ad-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.airdemo[data-state="onstation"] .ad-cross, .airdemo[data-state="done"] .ad-cross { opacity: 0; }

.ad-reticle {
  --s: calc(var(--iw) * 0.085);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border: 1.5px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.8) rotate(45deg);
  transition: opacity 400ms var(--ease-soft), transform 900ms var(--ease-out);
}
.ad-reticle::before, .ad-reticle::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.85); }
.ad-reticle::before { left: 50%; top: -12px; bottom: -12px; width: 1px; -webkit-mask: linear-gradient(#000 0 12px, transparent 12px calc(100% - 12px), #000 calc(100% - 12px)); mask: linear-gradient(#000 0 12px, transparent 12px calc(100% - 12px), #000 calc(100% - 12px)); }
.ad-reticle::after { top: 50%; left: -12px; right: -12px; height: 1px; -webkit-mask: linear-gradient(90deg, #000 0 12px, transparent 12px calc(100% - 12px), #000 calc(100% - 12px)); mask: linear-gradient(90deg, #000 0 12px, transparent 12px calc(100% - 12px), #000 calc(100% - 12px)); }
.ad-reticle i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: #fff; }
.airdemo[data-state="onstation"] .ad-reticle, .airdemo[data-state="done"] .ad-reticle { opacity: 1; transform: none; }

.ad-box {
  --bw: calc(var(--iw) * 0.14);
  --bh: calc(var(--ih) * 0.2);
  width: var(--bw);
  height: var(--bh);
  margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
  border: 1.5px solid var(--ad-hot);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
  opacity: 0;
  transform: scale(1.4);
  transition: opacity 400ms var(--ease-soft), transform 700ms var(--ease-spring);
}
.airdemo.is-detected .ad-box { opacity: 1; transform: none; }
.ad-box em, .ad-box small {
  position: absolute;
  left: -1.5px;
  white-space: nowrap;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
}
.ad-box em { bottom: 100%; margin-bottom: 5px; background: var(--crimson); color: #fff; }
.ad-box small { top: 100%; margin-top: 5px; background: rgb(0 0 0 / 0.6); color: #fff; border: 1px solid rgb(255 255 255 / 0.2); }

/* Kilometre tape */
.ad-tape {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: min(62%, 420px);
  height: 30px;
  transform: translateX(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.ad-tape__strip {
  --kp: 5.2;
  --km: 34px;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(calc(var(--kp) * var(--km) * -1));
  will-change: transform;
}
.ad-tape__tick { position: absolute; left: calc(var(--k) * var(--km)); bottom: 0; width: 1px; height: 7px; background: rgb(255 255 255 / 0.55); }
.ad-tape__tick.is-major { height: 12px; background: #fff; }
.ad-tape__tick b { position: absolute; bottom: 15px; left: 0; transform: translateX(-50%); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.8); }
.ad-tape__index { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 7px solid var(--ad-hot); border-top: 0; }
@container airfeed (max-width: 420px) { .ad-tape { width: 70%; } }

/* ------------------------------------------------------------------ Map */
.ad-map {
  position: relative;
  aspect-ratio: 320 / 214;
  min-width: 0;
  border-radius: calc(var(--r-md) - 8px);
  overflow: hidden;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.015));
  border: 1px solid var(--ad-line);
}
.ad-map__label { position: absolute; top: 10px; left: 12px; z-index: 1; }
.ad-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.ad-map__svg text { font-family: var(--font-mono); font-size: 7.6px; letter-spacing: 0.1em; fill: rgb(255 255 255 / 0.62); }
.m-contours path { fill: none; stroke: rgb(255 255 255 / 0.06); stroke-width: 0.8; }
.m-road { fill: none; stroke: rgb(255 255 255 / 0.2); stroke-width: 1; stroke-dasharray: 1.5 2.5; }
.m-pipe { fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 2; stroke-linecap: round; }
.m-ticks path { stroke: rgb(255 255 255 / 0.55); stroke-width: 0.8; }
.m-ticks path.is-major { stroke: #fff; stroke-width: 1; }
.m-ticks text { fill: rgb(255 255 255 / 0.5); }
.m-route { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1.1; stroke-dasharray: 2.5 3; opacity: 0; transition: opacity 500ms; }
.m-trail { fill: none; stroke: var(--ad-hot); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transition: opacity 300ms; }
.airdemo:is([data-state="enroute"], [data-state="onstation"], [data-state="done"]) .m-route,
.airdemo:is([data-state="enroute"], [data-state="onstation"], [data-state="done"]) .m-trail { opacity: 1; }
.m-teamlink { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 0.9; stroke-dasharray: 2 2.5; }
.m-base rect { fill: #0B0B0D; stroke: #fff; stroke-width: 1.1; }
.m-base path { stroke: rgb(255 255 255 / 0.5); stroke-width: 0.8; }
.m-base text, .m-team text { fill: rgb(255 255 255 / 0.85); }
.m-team path { fill: #0B0B0D; stroke: #fff; stroke-width: 1.2; transition: fill 400ms; }
.airdemo[data-state="done"] .m-team path { fill: var(--crimson); stroke: var(--ad-hot); }
.m-alert { opacity: 0; transition: opacity 400ms; }
.airdemo:not([data-state="idle"]) .m-alert { opacity: 1; }
.m-alert__mark { fill: var(--crimson); stroke: var(--ad-hot); stroke-width: 1; }
.m-alert__ring { fill: none; stroke: var(--ad-hot); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.airdemo[data-state="alert"] .m-alert__ring { animation: ad-ring 1.8s var(--ease-out) 2; }
@keyframes ad-ring { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(2.2); } }
.m-alert text { fill: #FF8397; }
.m-drone path { fill: #fff; stroke: #0B0B0D; stroke-width: 0.8; stroke-linejoin: round; }
.airdemo:not([data-state="idle"]):not([data-state="alert"]) .m-drone path { fill: #fff; }
.m-compass path { fill: rgb(255 255 255 / 0.8); }
.m-compass text { font-size: 7px; fill: rgb(255 255 255 / 0.6); }
.m-scale path { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 0.8; }
.m-scale text { font-size: 6.8px; fill: rgb(255 255 255 / 0.5); }

/* ------------------------------------------------------------------ Log */
.ad-log {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 150px;
  border-radius: calc(var(--r-md) - 8px);
  background: var(--ad-panel);
  border: 1px solid var(--ad-line);
  overflow: hidden;
}
@container airconsole (min-width: 540px) and (max-width: 759.98px) { .ad-log { min-height: 0; contain: size; height: 100%; } }
@container airconsole (min-width: 760px) { .ad-log { min-height: 0; } }
.ad-log__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--ad-line); }
.ad-log__count { font-family: var(--font-mono); font-size: 10px; color: var(--ad-ink-3); font-variant-numeric: tabular-nums; }
.ad-log__list {
  flex: 1;
  min-height: 0;
  max-height: 220px;
  margin: 0;
  padding: 6px 0 8px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.15) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px);
  mask-image: linear-gradient(180deg, transparent, #000 14px);
}
@container airconsole (min-width: 540px) { .ad-log__list { max-height: none; } }
.ad-log__list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 5px 12px 5px 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ad-ink-2);
  animation: ad-in 500ms var(--ease-out) both;
}
.ad-log__list li::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: transparent; }
.ad-log__list li.is-alert { color: #fff; }
.ad-log__list li.is-alert::before { background: var(--crimson); }
.ad-log__list li.is-alert b { color: #FF8397; border-color: rgb(255 72 99 / 0.45); }
.ad-log__list li.is-done span { color: #fff; }
.ad-log__list li.is-new { background: linear-gradient(90deg, rgb(255 255 255 / 0.05), transparent); }
.ad-log__list b { align-self: start; min-width: 50px; margin-top: 1px; padding: 2px 5px; border: 1px solid var(--ad-line-2); border-radius: 2px; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.3; text-align: center; text-transform: uppercase; color: var(--ad-ink-3); }
.ad-log__list li.is-done b { color: #fff; border-color: rgb(255 255 255 / 0.35); }
@keyframes ad-in { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------- Controls */
.airdemo__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 2px 2px; }
.ad-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--ad-line-2);
  background: rgb(255 255 255 / 0.03);
  color: var(--ad-ink);
  font: 600 13.5px/1 var(--font-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-exit) var(--ease-out), opacity var(--t-fast);
}
@media (hover: hover) { .ad-btn:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.3); } }
.ad-btn:active { transform: scale(0.97); }
/* Outline, not box-shadow: the idle, done and disabled states set their own shadows and would cancel a shadow ring. */
.ad-btn:focus-visible { outline: 2px solid var(--night-ink); outline-offset: 2px; }
.ad-btn vm-icon { color: var(--ad-ink-2); }
.ad-btn--primary {
  min-width: 190px;
  background: var(--crimson);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset;
}
.ad-btn--primary vm-icon { color: #fff; }
@media (hover: hover) { .ad-btn--primary:hover { background: var(--crimson-400); border-color: transparent; } }
/* Crimson only when the system is asking for a decision (Dispatch, Alert
   field team). Starting and running again are neutral: white on night. */
.airdemo:is([data-state="idle"], [data-state="done"]) .ad-btn--primary {
  background: var(--night-ink);
  color: var(--night);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 10px 26px -14px rgb(0 0 0 / 0.9);
}
.airdemo:is([data-state="idle"], [data-state="done"]) .ad-btn--primary vm-icon { color: var(--night); }
@media (hover: hover) { .airdemo:is([data-state="idle"], [data-state="done"]) .ad-btn--primary:hover { background: #fff; } }
.ad-btn[aria-disabled="true"] { cursor: default; background: rgb(255 255 255 / 0.05); color: var(--ad-ink-3); box-shadow: none; }
.ad-btn[aria-disabled="true"] vm-icon { color: var(--ad-ink-3); }
.ad-btn[aria-disabled="true"]:active { transform: none; }
.ad-btn[aria-pressed="true"]:not(.ad-btn--icon) { border-color: rgb(var(--crimson-rgb) / 0.7); color: #fff; background: rgb(var(--crimson-rgb) / 0.16); }
.ad-btn--icon { width: 42px; padding: 0; margin-left: auto; }
.ad-btn__play { display: none; }
.ad-btn--icon[aria-pressed="true"] .ad-btn__play { display: inline-flex; }
.ad-btn--icon[aria-pressed="true"] .ad-btn__pause { display: none; }
@container airconsole (max-width: 460px) {
  .ad-btn--primary { flex: 1 1 100%; }
  .ad-btn:not(.ad-btn--primary):not(.ad-btn--icon) { flex: 1; }
}

/* Paused: everything holds still */
.airdemo.is-paused *, .airdemo.is-paused *::before, .airdemo.is-paused *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- Phone */
.airdemo__phone { display: grid; justify-items: center; min-width: 0; }
.ad-device {
  container: airphone / inline-size;
  position: relative;
  width: min(100%, 290px);
  aspect-ratio: 9 / 19.2;
  padding: 3.4%;
  border-radius: 15.5% / 7.3%;
  background: linear-gradient(145deg, #45454b 0%, #1c1c20 26%, #0c0c0e 60%, #2d2d33 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1) inset,
    0 0 0 1.5px #050506,
    0 60px 90px -40px rgb(0 0 0 / 0.75);
}
.ad-device::before { /* side button */
  content: "";
  position: absolute;
  right: -1.6%;
  top: 27%;
  width: 1.4%;
  height: 11%;
  border-radius: 0 3px 3px 0;
  background: #2a2a2e;
}
@container airdemo (max-width: 1099.98px) { .ad-device { width: min(100%, 280px); } }

.ad-screen {
  --ph-bg: #F2F2F6;
  --ph-card: #FFFFFF;
  --ph-ink: #0A0A0C;
  --ph-ink-2: #3B3B42;
  --ph-ink-3: #6E6E78;
  --ph-line: rgb(10 10 12 / 0.08);
  --ph-hot: var(--crimson);
  --ph-glass: rgb(255 255 255 / 0.82);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12.6% / 5.9%;
  overflow: hidden;
  background: var(--ph-bg);
  color: var(--ph-ink);
  font-family: var(--font-text);
  font-size: 4.5cqw;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: background-color var(--t-med), color var(--t-med);
}
:root[data-theme="dark"] .ad-screen {
  --ph-bg: #000000;
  --ph-card: #161619;
  --ph-ink: #F5F5F7;
  --ph-ink-2: #C9C9D0;
  --ph-ink-3: #8E8E98;
  --ph-line: rgb(255 255 255 / 0.09);
  --ph-hot: #FF4863;
  --ph-glass: rgb(38 38 42 / 0.86);
}

.ph-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 13cqw;
  padding: 1.5cqw 7.5cqw 0 9cqw;
  font-size: 4.4cqw;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.ph-island { position: absolute; left: 50%; top: 3.2cqw; width: 30cqw; height: 8.6cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.ph-sys { display: inline-flex; align-items: flex-end; gap: 0.7cqw; }
.ph-sys i { width: 0.9cqw; background: currentColor; border-radius: 0.3cqw; }
.ph-sys i:nth-child(1) { height: 1.4cqw; } .ph-sys i:nth-child(2) { height: 2cqw; } .ph-sys i:nth-child(3) { height: 2.6cqw; } .ph-sys i:nth-child(4) { height: 3.2cqw; }
.ph-sys b { width: 6.6cqw; height: 3.2cqw; margin-left: 1.4cqw; border-radius: 1cqw; border: 0.35cqw solid currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%) content-box; padding: 0.35cqw; opacity: 0.9; }

/* Notification banner */
.ph-banner {
  position: absolute;
  z-index: 3;
  top: 3cqw;
  left: 3cqw;
  right: 3cqw;
  display: flex;
  gap: 3cqw;
  align-items: flex-start;
  padding: 3.4cqw;
  border-radius: 6cqw;
  background: var(--ph-glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 8cqw 14cqw -8cqw rgb(0 0 0 / 0.45), 0 0 0 1px var(--ph-line);
  transform: translateY(-140%);
  opacity: 0;
  transition: transform 700ms var(--ease-spring), opacity 300ms var(--ease-soft);
}
.ph-banner.is-shown { transform: none; opacity: 1; }
.ph-appicon { display: grid; place-items: center; flex: none; width: 10cqw; height: 10cqw; border-radius: 2.6cqw; background: linear-gradient(160deg, #D5142F, var(--crimson) 50%, var(--crimson-700)); }
.ph-appicon__mark { width: 70%; height: auto; color: #fff; }
.ph-banner__text { display: grid; gap: 0.4cqw; min-width: 0; font-size: 3.7cqw; line-height: 1.3; }
.ph-banner__app { display: flex; justify-content: space-between; gap: 2cqw; font-size: 3.1cqw; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ph-ink-3); }
.ph-banner__app small { font-size: inherit; text-transform: none; letter-spacing: 0; }
.ph-banner__text b { font-weight: 650; }
.ph-banner__text > span:last-child { color: var(--ph-ink-2); }

.ph-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 2cqw 5cqw 0; overflow: hidden; }
.ph-top { display: grid; gap: 0.6cqw; padding: 1cqw 1cqw 3.6cqw; }
.ph-kicker { font-family: var(--font-mono); font-size: 2.9cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ph-hot); }
.ph-title { font-size: 7.4cqw; font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; }

.ph-card {
  display: grid;
  gap: 1.8cqw;
  padding: 4.2cqw;
  border-radius: 5.4cqw;
  background: var(--ph-card);
  box-shadow: 0 0 0 1px var(--ph-line);
  transition: background-color 500ms var(--ease-soft), color 500ms, box-shadow 500ms;
}
.ph-card__row { display: flex; align-items: center; justify-content: space-between; }
.ph-card__icon { display: grid; place-items: center; width: 8.6cqw; height: 8.6cqw; border-radius: 2.4cqw; background: rgb(var(--crimson-rgb) / 0.1); color: var(--ph-hot); }
.ph-card__icon vm-icon, .ph-card__icon svg { width: 5.2cqw; height: 5.2cqw; }
.ph-card__tag { font-family: var(--font-mono); font-size: 2.8cqw; letter-spacing: 0.14em; text-transform: uppercase; padding: 1cqw 1.8cqw; border: 1px solid var(--ph-line); border-radius: 0.6cqw; color: var(--ph-ink-2); }
.ph-card__title { margin: 0.6cqw 0 0; font-size: 5cqw; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.ph-card__text { margin: 0; font-size: 3.6cqw; line-height: 1.38; color: var(--ph-ink-3); }
.ph-card__thumb { position: relative; display: none; height: 18cqw; margin-top: 1cqw; border-radius: 3cqw; overflow: hidden; background: #111; }
.ph-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 47%; transform: scale(1.9); transform-origin: 52% 47%; }
.ph-card__thumb i { position: absolute; left: 44%; top: 20%; width: 16%; height: 58%; border: 1.5px solid #FF6B82; box-shadow: none; }
.ph-card__progress { display: none; align-items: center; gap: 2.4cqw; margin-top: 0.8cqw; }
.ph-card__bar { flex: 1; height: 1.2cqw; border-radius: 1cqw; background: var(--ph-line); overflow: hidden; }
.ph-card__bar i { display: block; height: 100%; background: var(--ph-hot); transform: scaleX(0); transform-origin: 0 50%; }
.ph-card__eta { font-family: var(--font-mono); font-size: 3cqw; color: var(--ph-ink-3); font-variant-numeric: tabular-nums; }
.airdemo[data-state="enroute"] .ph-card__progress { display: flex; }
.airdemo:is([data-state="onstation"], [data-state="done"]) .ph-card__thumb { display: block; }

.ph-card[data-tone="alert"] { background: linear-gradient(160deg, #D5142F, var(--crimson) 55%, var(--crimson-700)); color: #fff; box-shadow: 0 5cqw 10cqw -5cqw rgb(var(--crimson-rgb) / 0.7); }
.ph-card[data-tone="alert"] .ph-card__icon { background: rgb(255 255 255 / 0.18); color: #fff; }
.ph-card[data-tone="alert"] .ph-card__tag { border-color: rgb(255 255 255 / 0.35); color: #fff; }
.ph-card[data-tone="alert"] .ph-card__text { color: rgb(255 255 255 / 0.86); }
.ph-card[data-tone="focus"] { box-shadow: 0 0 0 1.5px var(--ph-hot), 0 5cqw 10cqw -6cqw rgb(var(--crimson-rgb) / 0.45); }
.ph-card[data-tone="focus"] .ph-card__tag { background: var(--crimson); border-color: transparent; color: #fff; }

.ph-label { margin: 4.6cqw 1cqw 1.8cqw; font-family: var(--font-mono); font-size: 2.8cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ph-ink-3); }
.ph-assets { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 5.4cqw; background: var(--ph-card); box-shadow: 0 0 0 1px var(--ph-line); overflow: hidden; }
.ph-assets li { display: flex; align-items: center; gap: 2.8cqw; padding: 2.8cqw 3.6cqw; }
.ph-assets li + li { border-top: 1px solid var(--ph-line); }
.ph-assets__icon { display: grid; place-items: center; flex: none; width: 7.6cqw; height: 7.6cqw; border-radius: 2cqw; background: var(--ph-bg); color: var(--ph-ink-2); }
.ph-assets__icon vm-icon, .ph-assets__icon svg { width: 4.6cqw; height: 4.6cqw; }
.ph-assets__name { display: grid; flex: 1; min-width: 0; }
.ph-assets__name b { font-size: 3.8cqw; font-weight: 650; }
.ph-assets__name small { font-size: 3cqw; color: var(--ph-ink-3); }
.ph-assets em { font-style: normal; font-size: 3.1cqw; font-weight: 600; color: var(--ph-ink-3); white-space: nowrap; transition: color 300ms; }
.ph-assets em.is-live { color: var(--ph-ink); }
.ph-assets em.is-live::before { content: ""; display: inline-block; width: 1.4cqw; height: 1.4cqw; margin: 0 1.4cqw 0.3cqw 0; background: var(--ph-hot); vertical-align: middle; }
.ph-assets em.is-hot { color: var(--ph-hot); }

.ph-feed { display: grid; gap: 0; margin: 0; padding: 0 1cqw; list-style: none; }
.ph-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.6cqw; align-items: baseline; padding: 1.6cqw 0; font-size: 3.3cqw; color: var(--ph-ink-2); animation: ad-in 500ms var(--ease-out) both; }
.ph-feed li + li { border-top: 1px solid var(--ph-line); color: var(--ph-ink-3); }
.ph-feed b { font-family: var(--font-mono); font-size: 2.6cqw; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ph-ink-3); min-width: 11cqw; }
.ph-feed span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ph-feed li.is-alert span { color: var(--ph-hot); }
.ph-feed li.is-alert b { color: var(--ph-hot); }

.ph-dock { position: relative; flex: none; padding: 3.6cqw 5cqw 8.6cqw; }
.ph-go {
  --go: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 14.5cqw;
  border-radius: 4.4cqw;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--crimson);
  color: #fff;
  font: 650 4.6cqw/1 var(--font-text);
  letter-spacing: -0.015em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset;
  transition: background-color 400ms var(--ease-soft), color 300ms, transform var(--t-exit) var(--ease-out), box-shadow 400ms;
}
@media (hover: hover) { .ph-go:hover { background: var(--crimson-400); } }
.ph-go:active { transform: scale(0.97); }
.ph-go:focus-visible { outline: 2px solid var(--night-ink); outline-offset: 2px; }
.ph-go::after { /* sheen */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.3) 50%, transparent 80%);
  transform: translateX(-120%);
}
.airdemo:is([data-state="alert"], [data-state="onstation"]) .ph-go::after { animation: ad-sheen 2.8s var(--ease-in-out) 600ms 3; }
@keyframes ad-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.ph-go__fill { position: absolute; inset: 0; z-index: -1; background: rgb(var(--crimson-rgb) / 0.14); transform: scaleX(var(--go)); transform-origin: 0 50%; }
.ph-go[aria-disabled="true"] { cursor: default; background: var(--ph-card); color: var(--ph-ink-3); box-shadow: 0 0 0 1px var(--ph-line); }
.ph-go[aria-disabled="true"]:active { transform: none; }
.airdemo[data-state="enroute"] .ph-go { color: var(--ph-ink); }
.airdemo[data-state="done"] .ph-go { background: var(--ph-ink); color: var(--ph-bg); box-shadow: none; }
.airdemo:not([data-state="enroute"]) .ph-go__fill { opacity: 0; }
.ph-home { position: absolute; left: 50%; bottom: 2.4cqw; width: 34cqw; height: 1.4cqw; transform: translateX(-50%); border-radius: 99px; background: var(--ph-ink); opacity: 0.85; }

/* ------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .airdemo *, .airdemo *::before, .airdemo *::after { animation: none !important; transition-duration: 0.01ms !important; }
}