/* Zedstar montage: Acme Corp.'s line maintenance system (dash-aviation.js), in DX Sidekick's Mission look: deep space
   and the red, white and blue slabs behind panes of painted glass. The glass is painted, not blurred: each pane shows
   a soft copy of the slabs behind it (gradients aligned to the 1600 x 1000 screen), a dark tint, a 1px rim, a lit line
   inside its top edge and the ribbon of light along it. Geist for the interface, Geist Mono for codes, keys and times,
   Newsreader for titles, figures and the organisation. Everything is scoped under .zd-av; no CSS animations (the
   module's one clock moves everything, so stop() stops everything). */

.zd-av {
  --zav-fg: #eef2f8;
  --zav-fg-2: #b3bdcf;
  --zav-fg-3: #8795ae;
  --zav-line: rgba(255, 255, 255, 0.07);
  --zav-line-strong: rgba(255, 255, 255, 0.14);
  --zav-control: rgba(255, 255, 255, 0.05);
  --zav-control-hover: rgba(255, 255, 255, 0.1);
  --zav-control-line: rgba(255, 255, 255, 0.1);
  --zav-control-solid: rgba(12, 17, 29, 0.66);
  --zav-accent: #e04a5c;
  --zav-accent-text: #ff8b98;
  --zav-accent-soft: rgba(224, 74, 92, 0.16);
  --zav-ok: #9fb8d8;
  --zav-ok-soft: rgba(159, 184, 216, 0.14);
  --zav-button: #c9384c;
  --zav-button-hover: #d04157;
  --zav-button-press: #b32a44;
  --zav-menu: rgba(12, 16, 26, 0.9);
  --zav-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --zav-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --zav-serif: Newsreader, "Iowan Old Style", Georgia, serif;
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1000px;
  overflow: hidden;
  transform-origin: 0 0;
  background: #030509;
  color: var(--zav-fg);
  font: 400 14px/1.5 var(--zav-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.zd-av *, .zd-av *::before, .zd-av *::after { box-sizing: border-box; }
.zd-av :where(p, h1, h3, ul) { margin: 0; padding: 0; }
.zd-av :where(em, i) { font-style: normal; }
.zd-av :where(b) { font-weight: 500; }
.zd-av :where(code, time) { font-family: var(--zav-mono); }
.zd-av .zd-av__i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.zd-av .zd-av__i circle[r="1.2"] { fill: currentColor; }

/* ---- the ground: drawn once, on its own layer ---- */
.zd-av__ground { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; overflow: hidden; background: #030509; will-change: transform; }
.zd-av__ground > i, .zd-av__gset > i { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; }
.zd-av__gbase { background:
  radial-gradient(circle 907px at 1452px 333px, rgba(27, 63, 150, 0.42), rgba(16, 39, 94, 0.28) 55%, rgba(3, 5, 9, 0) 100%),
  radial-gradient(circle 481px at 887px 593px, rgba(224, 54, 79, 0.16), rgba(224, 54, 79, 0)), #030509; }
/* the light the bright slabs throw: a tight glow and a wide spill, laid across the slabs' direction */
.zd-av__glow { background:
  linear-gradient(121deg, rgba(216, 53, 77, 0) 51%, rgba(216, 53, 77, 0.22) 57%, rgba(216, 53, 77, 0.04) 61%, rgba(201, 212, 230, 0.07) 65.2%,
    rgba(42, 102, 232, 0.04) 69.4%, rgba(42, 102, 232, 0.22) 73.5%, rgba(42, 102, 232, 0.04) 77.6%, rgba(42, 102, 232, 0.15) 81.7%,
    rgba(42, 102, 232, 0.03) 85.8%, rgba(42, 102, 232, 0.08) 90%, rgba(42, 102, 232, 0) 95.8%),
  linear-gradient(121deg, rgba(216, 53, 77, 0) 42%, rgba(216, 53, 77, 0.14) 57%, rgba(150, 120, 170, 0.06) 65%, rgba(42, 102, 232, 0.14) 73.5%,
    rgba(42, 102, 232, 0.1) 81.7%, rgba(42, 102, 232, 0.05) 90%, rgba(42, 102, 232, 0) 100%); }
/* the port side and the floor fall away into the dark */
.zd-av__gshade { background: linear-gradient(to bottom, rgba(3, 5, 9, 0) 50%, rgba(3, 5, 9, 0.78) 78%, #030509 94%), linear-gradient(to right, rgba(3, 5, 9, 0.9), rgba(3, 5, 9, 0) 42%); }
.zd-av__work { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; }

/* ---- painted glass ---- */
.zd-av__glass {
  --zd-av-gx: 0px;
  --zd-av-gy: 0px;
  --zav-paint:
    linear-gradient(to bottom, rgba(3, 5, 9, 0) 46%, rgba(3, 5, 9, 0.55) 78%, rgba(3, 5, 9, 0.85) 96%) var(--zd-av-gx) var(--zd-av-gy) / 1600px 1000px no-repeat,
    linear-gradient(to right, rgba(3, 5, 9, 0.8), rgba(3, 5, 9, 0) 40%) var(--zd-av-gx) var(--zd-av-gy) / 1600px 1000px no-repeat,
    linear-gradient(121deg,
      rgba(3, 5, 9, 0) 4%, rgba(46, 56, 74, 0.12) 7.5%, rgba(3, 5, 9, 0) 11.6%, rgba(46, 56, 74, 0.16) 15.8%, rgba(3, 5, 9, 0) 19.9%,
      rgba(46, 56, 74, 0.2) 24%, rgba(3, 5, 9, 0) 28.1%, rgba(46, 56, 74, 0.26) 32.3%, rgba(3, 5, 9, 0) 36.4%,
      rgba(46, 56, 74, 0.3) 40.5%, rgba(3, 5, 9, 0) 44.6%, rgba(56, 66, 86, 0.36) 48.8%, rgba(120, 34, 52, 0.22) 52.6%,
      rgba(216, 53, 77, 0.66) 57%, rgba(150, 70, 96, 0.34) 61.1%, rgba(160, 170, 188, 0.3) 65.2%, rgba(44, 76, 150, 0.32) 69.3%,
      rgba(42, 102, 232, 0.58) 73.5%, rgba(28, 66, 160, 0.34) 77.6%, rgba(36, 90, 210, 0.46) 81.7%, rgba(22, 52, 128, 0.28) 85.8%,
      rgba(30, 80, 190, 0.34) 90%, rgba(3, 5, 9, 0) 97%) var(--zd-av-gx) var(--zd-av-gy) / 1600px 1000px no-repeat,
    radial-gradient(circle 480px at 890px 590px, rgba(224, 54, 79, 0.22), rgba(224, 54, 79, 0)) var(--zd-av-gx) var(--zd-av-gy) / 1600px 1000px no-repeat,
    radial-gradient(circle 900px at 1452px 333px, rgba(27, 63, 150, 0.5), rgba(16, 39, 94, 0.3) 55%, rgba(3, 5, 9, 0)) var(--zd-av-gx) var(--zd-av-gy) / 1600px 1000px no-repeat,
    #050811;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: linear-gradient(rgba(12, 17, 29, 0.6), rgba(12, 17, 29, 0.6)), var(--zav-paint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* the logo's ribbon, lit along the top of every pane */
.zd-av__glass::after { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(224, 74, 92, 0) 4%, rgba(224, 74, 92, 0.85) 26%, rgba(255, 255, 255, 0.92) 50%, rgba(111, 140, 181, 0.9) 74%, rgba(111, 140, 181, 0) 96%); }

/* ---- shared controls ---- */
.zd-av kbd { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; border-radius: 6px; background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line);
  font: 400 11px/1 var(--zav-mono); color: var(--zav-fg-2); }
.zd-av kbd .zd-av__i { width: 11px; height: 11px; stroke-width: 1.8; }
.zd-av kbd.zd-av--press { background: rgba(255, 255, 255, 0.16); transform: scale(0.92); }
.zd-av__badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; flex: none; padding: 0 10px; border-radius: 999px; background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line);
  font: 500 12px/1 var(--zav-sans); color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__badge i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.zd-av__badge.zd-av--ok { background: var(--zav-ok-soft); color: var(--zav-ok); box-shadow: none; }
.zd-av__badge.zd-av--accent { background: var(--zav-accent-soft); color: var(--zav-accent-text); box-shadow: none; }
.zd-av__badge.zd-av--plain i { display: none; }
.zd-av__badge.zd-av--live i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.zd-av__av { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--zav-control-line);
  font: 600 12px/1 var(--zav-sans); color: var(--zav-fg); }
.zd-av__av.zd-av--t0 { background: color-mix(in srgb, #4f6a93 30%, #0e1320); }
.zd-av__av.zd-av--t1 { background: color-mix(in srgb, #c9384c 30%, #0e1320); }
.zd-av__av.zd-av--t2 { background: color-mix(in srgb, #6f8cb5 30%, #0e1320); }
.zd-av__av.zd-av--t3 { background: color-mix(in srgb, #56688a 30%, #0e1320); }
.zd-av__chev { width: 16px; height: 16px; color: var(--zav-fg-3); }
.zd-av__seg { position: relative; display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line); }
.zd-av__seg > span { position: relative; z-index: 1; display: inline-flex; height: 26px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px;
  font: 400 12.5px/1 var(--zav-sans); color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__seg > span.zd-av--on { font-weight: 500; color: var(--zav-fg); }
.zd-av__seg > span.zd-av--hover { color: var(--zav-fg); }
.zd-av__seg > span.zd-av--press { transform: scale(0.97); }
.zd-av__seglit { position: absolute; left: 3px; top: 3px; height: 26px; border-radius: 999px; background: var(--zav-control-hover); box-shadow: 0 1px 2px rgba(10, 17, 32, 0.3), inset 0 0 0 1px var(--zav-control-line); }
.zd-av__side .zd-av__seg > span { width: 72px; }
.zd-av__side .zd-av__seglit { width: 72px; }
.zd-av__parts .zd-av__seg > span { width: 66px; }
.zd-av__parts .zd-av__seglit { width: 66px; }
.zd-av__btn { position: relative; display: inline-flex; height: 40px; flex: none; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; overflow: hidden;
  border: 1px solid transparent; border-radius: 999px; font: 500 14px/1 var(--zav-sans); letter-spacing: -0.005em; color: var(--zav-fg); white-space: nowrap; }
.zd-av__btn .zd-av__i { width: 16px; height: 16px; stroke-width: 1.75; }
.zd-av__btn.zd-av--sec { background: var(--zav-control-solid); border-color: var(--zav-control-line); }
.zd-av__btn.zd-av--quiet { color: var(--zav-fg-2); background: transparent; }
.zd-av__btn.zd-av--sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.zd-av__btn.zd-av--pri { width: 154px; will-change: transform; background: color-mix(in srgb, #9fb8d8 15%, #0b101b); color: #fff; }
.zd-av__fill { position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border-radius: inherit; background: var(--zav-button); }
.zd-av__btn.zd-av--hover .zd-av__fill { background: var(--zav-button-hover); }
.zd-av__btn.zd-av--press .zd-av__fill { background: var(--zav-button-press); }
.zd-av__btn.zd-av--press { transform: scale(0.97); }
.zd-av__busy { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: inherit; opacity: 0; }
.zd-av__busy > i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 65%); }
.zd-av__bl { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.zd-av__bl2 { color: var(--zav-ok); }

/* ---- the top bar ---- */
.zd-av__top { left: 12px; top: 12px; width: 1576px; height: 58px; display: flex; align-items: center; padding: 0 10px 0 20px; border-radius: 20px; z-index: 5; }
.zd-av__brand { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
.zd-av__mark { display: block; width: 84px; height: 15px; }
.zd-av__div { width: 1px; height: 16px; background: var(--zav-line-strong); }
.zd-av__brand b { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__org { display: flex; align-items: center; gap: 12px; height: 44px; margin-right: 18px; padding: 0 10px 0 12px; border-radius: 12px; box-shadow: inset 1px 0 0 var(--zav-line-strong); }
.zd-av__org > span { display: flex; flex-direction: column; }
.zd-av__org em { font-size: 11.5px; line-height: 14px; color: var(--zav-fg-3); }
.zd-av__org b { font: 400 18px/21px var(--zav-serif); letter-spacing: -0.005em; color: var(--zav-fg); white-space: nowrap; }
.zd-av__nav { display: flex; align-items: center; gap: 2px; }
.zd-av__tab { display: inline-flex; height: 38px; align-items: center; gap: 9px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__tab .zd-av__i { color: var(--zav-fg-3); }
.zd-av__tab.zd-av--on { font-weight: 500; color: var(--zav-fg); background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line); }
.zd-av__tab.zd-av--on .zd-av__i { color: var(--zav-accent); }
.zd-av__count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--zav-button); font: 600 11px/1 var(--zav-mono); color: #fff; }
.zd-av__search { display: flex; width: 238px; height: 38px; align-items: center; gap: 10px; margin-left: auto; padding: 0 8px 0 12px; border: 1px solid var(--zav-control-line); border-radius: 12px;
  background: var(--zav-control); font-size: 13.5px; color: var(--zav-fg-3); }
.zd-av__search > .zd-av__i { width: 16px; height: 16px; }
.zd-av__search.zd-av--focus { border-color: var(--zav-ok); box-shadow: 0 0 0 4px rgba(159, 184, 216, 0.18); color: var(--zav-fg-2); }
.zd-av__keys { display: flex; gap: 4px; margin-left: auto; }
.zd-av__keys kbd { min-width: 22px; padding: 0 5px; }
.zd-av__bell { position: relative; display: grid; width: 38px; height: 38px; flex: none; place-items: center; margin-left: 8px; border-radius: 999px; color: var(--zav-fg-2); }
.zd-av__bell > i { position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--zav-accent); box-shadow: 0 0 0 2px #0d1220; }
.zd-av__me { display: flex; align-items: center; gap: 10px; margin-left: 6px; padding: 6px 8px 6px 6px; border-radius: 14px; }
.zd-av__me > .zd-av__who { display: flex; flex-direction: column; }
.zd-av__me b { font-size: 13px; line-height: 17px; color: var(--zav-fg); white-space: nowrap; }
.zd-av__me em { font-size: 12px; line-height: 16px; color: var(--zav-fg-3); white-space: nowrap; }

/* ---- the left pane: fleet and agents ---- */
.zd-av__side { left: 12px; top: 82px; width: 280px; height: 906px; display: flex; flex-direction: column; padding: 16px 12px 12px; z-index: 1; }
.zd-av__sh { display: flex; height: 32px; align-items: center; justify-content: space-between; padding: 0 2px 0 8px; margin-bottom: 8px; }
.zd-av__sh h3 { font: 600 15px/1 var(--zav-sans); letter-spacing: -0.01em; color: var(--zav-fg); white-space: nowrap; }
.zd-av__sh h3 span { margin-left: 6px; font-weight: 400; color: var(--zav-fg-3); }
.zd-av__sh2 { margin-top: 14px; padding-top: 16px; height: 48px; border-top: 1px solid var(--zav-line); }
.zd-av__fleet { position: relative; display: flex; flex-direction: column; gap: 2px; }
.zd-av__frow { position: relative; display: flex; height: 62px; align-items: center; gap: 12px; padding: 0 10px 0 12px; border-radius: 14px; }
.zd-av__frow.zd-av--sel { background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line); }
.zd-av__fic { color: var(--zav-fg-3); }
.zd-av__frow.zd-av--sel .zd-av__fic { color: var(--zav-accent); }
.zd-av__fn { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.zd-av__fl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zd-av__fn b { font-size: 14px; line-height: 19px; color: var(--zav-fg); white-space: nowrap; }
.zd-av__fn em { overflow: hidden; font-size: 12.5px; line-height: 17px; color: var(--zav-fg-3); white-space: nowrap; text-overflow: ellipsis; }
.zd-av__pl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.zd-av__pl > code { font-size: 11px; line-height: 1; color: var(--zav-fg-3); }
.zd-av__prog { display: block; height: 4px; flex: 1; overflow: hidden; border-radius: 999px; background: var(--zav-control-line); }
.zd-av__prog > i { display: block; height: 100%; border-radius: 999px; background: var(--zav-ok); transform-origin: 0 50%; }

.zd-av__agents { display: flex; flex-direction: column; }
.zd-av__agent { display: flex; height: 60px; align-items: center; gap: 12px; padding: 0 10px 0 8px; }
.zd-av__ag { position: relative; display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 999px; background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line); color: var(--zav-fg-2); }
.zd-av__ag .zd-av__i { width: 17px; height: 17px; }
.zd-av__agent.zd-av--work .zd-av__ag { color: var(--zav-ok); box-shadow: inset 0 0 0 1px rgba(159, 184, 216, 0.4); }
.zd-av__agent.zd-av--wait .zd-av__ag { color: var(--zav-accent-text); box-shadow: inset 0 0 0 1px rgba(224, 74, 92, 0.45); }
.zd-av__ring { position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border-radius: 999px; border: 1px solid var(--zav-ok); opacity: 0; }
.zd-av__an { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.zd-av__an b { font-size: 13.5px; line-height: 18px; color: var(--zav-fg); white-space: nowrap; }
.zd-av__fn .zd-av__badge, .zd-av__an .zd-av__badge { height: 22px; padding: 0 9px; font-size: 11.5px; }
.zd-av__an em { overflow: hidden; font-size: 12.5px; line-height: 17px; color: var(--zav-fg-3); white-space: nowrap; text-overflow: ellipsis; }
.zd-av__shift { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding: 14px 8px 4px; border-top: 1px solid var(--zav-line); font-size: 12.5px; color: var(--zav-fg-3); }
.zd-av__shift > span { color: var(--zav-fg-2); }
.zd-av__shift > b { margin-left: auto; font: 400 13px/1 var(--zav-mono); color: var(--zav-fg); }

/* ---- the page header ---- */
.zd-av__head { position: absolute; left: 318px; top: 98px; width: 1270px; z-index: 1; }
.zd-av__marker { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--zav-serif); color: var(--zav-fg-2); }
.zd-av__marker::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--zav-accent); }
.zd-av__head h1 { margin-top: 14px; font: 400 46px/1.06 var(--zav-serif); letter-spacing: -0.014em; color: var(--zav-fg); }
.zd-av__lede { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--zav-fg-2); }
.zd-av__hrow { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.zd-av__ptabs { display: flex; gap: 4px; }
.zd-av__ptabs > span { display: inline-flex; height: 36px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__ptabs > span.zd-av--on { font-weight: 500; color: var(--zav-fg); background: var(--zav-control-solid); box-shadow: inset 0 0 0 1px var(--zav-control-line); }
.zd-av__ptabs em { font: 400 11px/1 var(--zav-mono); color: var(--zav-fg-3); }
.zd-av__acts { display: flex; align-items: center; gap: 12px; }
.zd-av__stack { display: flex; align-items: center; margin-right: 4px; }
.zd-av__stack .zd-av__av { position: relative; margin-left: -5px; width: 30px; height: 30px; font-size: 10.5px; box-shadow: 0 0 0 2px #070b14, inset 0 0 0 1px var(--zav-control-line); }
.zd-av__stack .zd-av__av:nth-child(1) { z-index: 4; }
.zd-av__stack .zd-av__av:nth-child(2) { z-index: 3; }
.zd-av__stack .zd-av__av:nth-child(3) { z-index: 2; }
.zd-av__stack .zd-av__av:nth-child(4) { z-index: 1; }
.zd-av__stack .zd-av__av:first-child { margin-left: 0; }
.zd-av__stack > i { display: grid; width: 30px; height: 30px; margin-left: -5px; place-items: center; border-radius: 999px; background: #10151f; box-shadow: 0 0 0 2px #070b14, inset 0 0 0 1px var(--zav-control-line);
  font: 500 11px/1 var(--zav-sans); color: var(--zav-fg-3); }

/* ---- panes ---- */
.zd-av__pane { padding: 22px 24px; z-index: 1; }
.zd-av__ph { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.zd-av__ph h3 { font: 600 15px/1.2 var(--zav-sans); letter-spacing: -0.01em; color: var(--zav-fg); white-space: nowrap; }
.zd-av__ph h3 span { margin-left: 8px; font-weight: 400; color: var(--zav-fg-3); }
.zd-av__hangar { left: 316px; top: 282px; width: 780px; height: 360px; }
.zd-av__rel { left: 1116px; top: 282px; width: 472px; height: 360px; }
.zd-av__parts { left: 316px; top: 662px; width: 780px; height: 326px; }
.zd-av__act { left: 1116px; top: 662px; width: 472px; height: 326px; }

/* the hangar floor */
.zd-av__legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--zav-fg-3); }
.zd-av__legend > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.zd-av__legend i { width: 7px; height: 7px; border-radius: 999px; background: var(--zav-fg-3); }
.zd-av__legend i.zd-av--ok { background: var(--zav-ok); }
.zd-av__legend i.zd-av--accent { background: var(--zav-accent); }
.zd-av__floor { display: flex; gap: 26px; }
.zd-av__plan { display: block; width: 520px; height: 252px; flex: none; overflow: visible; }
.zd-av__hall { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.zd-av__door { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 3; stroke-linecap: round; }
.zd-av__bayl { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.zd-av__route { fill: none; stroke: var(--zav-ok); stroke-width: 1.5; stroke-dasharray: 4 8; stroke-linecap: round; }
.zd-av__bayt { font: 500 12px var(--zav-sans); fill: var(--zav-fg-3); }
.zd-av__bays { font: 500 13.5px var(--zav-sans); fill: var(--zav-fg); }
.zd-av__bayst { font: 400 12px var(--zav-sans); fill: var(--zav-fg-3); }
.zd-av__bdot { fill: var(--zav-fg-3); }
.zd-av__bdot.zd-av--ok { fill: var(--zav-ok); }
.zd-av__bdot.zd-av--accent { fill: var(--zav-accent); }
.zd-av__acg { --zav-acl: rgba(135, 149, 174, 0.6); --zav-acf: #0d121e; --zav-acd: rgba(135, 149, 174, 0.32); }
.zd-av__acg.zd-av--ready { --zav-acl: #e04a5c; --zav-acf: #2a111b; --zav-acd: rgba(255, 139, 152, 0.5); }
.zd-av__acg.zd-av--rel { --zav-acl: #9fb8d8; --zav-acf: #111b2c; --zav-acd: rgba(159, 184, 216, 0.45); }
.zd-av__aco { fill: none; stroke: var(--zav-acl); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.zd-av__acf { fill: var(--zav-acf); stroke: none; }
.zd-av__acd { fill: none; stroke: var(--zav-acd); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.zd-av__baysel { fill: rgba(255, 255, 255, 0.035); stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.zd-av__figs { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.zd-av__figs > div { padding: 10px 0; border-top: 1px solid var(--zav-line); }
.zd-av__figs > div:first-child { padding-top: 2px; border-top: 0; }
.zd-av__figs span { display: block; font-size: 13px; color: var(--zav-fg-3); white-space: nowrap; }
.zd-av__figs b { display: block; margin-top: 3px; font: 400 30px/1.05 var(--zav-serif); letter-spacing: -0.01em; color: var(--zav-fg); }
.zd-av__figs em { display: block; margin-top: 3px; font-size: 12.5px; color: var(--zav-fg-3); }

/* the release */
.zd-av__swap { display: grid; justify-items: end; }
.zd-av__swap > * { grid-area: 1 / 1; }
.zd-av__relsub { display: flex; justify-content: space-between; margin: -8px 0 10px; font-size: 13px; color: var(--zav-fg-3); }
.zd-av__lp > code { margin-left: 4px; font-size: 12px; color: var(--zav-fg-2); }
.zd-av__checks { list-style: none; }
.zd-av__checks li { display: flex; height: 34px; align-items: center; gap: 12px; border-top: 1px solid var(--zav-line); font-size: 14px; color: var(--zav-fg); }
.zd-av__checks li:first-child { border-top: 0; }
.zd-av__checks code { margin-left: auto; font-size: 12px; color: var(--zav-fg-3); }
.zd-av__ck { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border-radius: 999px; background: var(--zav-ok-soft); color: var(--zav-ok); }
.zd-av__ck .zd-av__i { width: 12px; height: 12px; stroke-width: 2.2; }
.zd-av__signer { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--zav-line); }
.zd-av__signer > .zd-av__who { display: flex; flex-direction: column; }
.zd-av__signer b { font-size: 14px; line-height: 19px; color: var(--zav-fg); }
.zd-av__signer em { font-size: 12.5px; line-height: 17px; color: var(--zav-fg-3); }
.zd-av__sigbox { position: relative; display: flex; width: 132px; height: 40px; align-items: center; justify-content: flex-end; margin-left: auto; }
.zd-av__sigbox > em { font-size: 12.5px; color: var(--zav-fg-3); }
.zd-av__sigbox > svg { position: absolute; left: 0; top: 0; width: 80px; height: 40px; overflow: visible; }
.zd-av__sigbox > code { position: absolute; right: 0; font-size: 12px; color: var(--zav-fg-3); }
.zd-av__sig { fill: none; stroke: #dfe8f6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zd-av__note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--zav-fg-3); }
.zd-av__note > i { width: 6px; height: 6px; flex: none; border-radius: 999px; background: var(--zav-ok); }

/* parts */
.zd-av__pact { display: flex; align-items: center; gap: 14px; }
.zd-av__switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--zav-button); }
.zd-av__switch > i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transform: translateX(16px); }
.zd-av__swl { margin-left: -6px; font-size: 13px; color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__thead, .zd-av__prow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 118px 136px 150px 28px; column-gap: 12px; align-items: center; }
.zd-av__thead { padding: 0 12px 8px; font-size: 12px; font-weight: 500; color: var(--zav-fg-3); }
.zd-av__parts .zd-av__ph { margin-bottom: 12px; }
.zd-av__rows { position: relative; height: 220px; }
.zd-av__prow { position: absolute; left: 0; top: 0; width: 732px; height: 44px; padding: 0 12px; border-top: 1px solid var(--zav-line); font-size: 14px; color: var(--zav-fg); }
.zd-av__prow > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zd-av__prow > code { font-size: 12.5px; color: var(--zav-fg-2); }
.zd-av__prow > .zd-av__badge { justify-self: start; }
.zd-av__more { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--zav-fg-3); }
.zd-av__more.zd-av--hover { background: var(--zav-control-hover); color: var(--zav-fg); }
.zd-av__more.zd-av--press { transform: scale(0.92); }
.zd-av__menu { right: 10px; bottom: 86px; width: 252px; padding: 6px; border-radius: 16px; z-index: 4; transform-origin: 100% 100%; will-change: transform, opacity;
  background: linear-gradient(var(--zav-menu), var(--zav-menu)), var(--zav-paint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px -18px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.35); }
.zd-av__menu::after { left: 22px; right: 22px; }
.zd-av__mi { display: flex; height: 36px; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; color: var(--zav-fg); white-space: nowrap; }
.zd-av__mi .zd-av__i { width: 16px; height: 16px; color: var(--zav-fg-3); }
.zd-av__mi kbd { margin-left: auto; background: none; box-shadow: none; padding: 0; min-width: 0; color: var(--zav-fg-3); }
.zd-av__mi.zd-av--hover { background: var(--zav-control-hover); }
.zd-av__mi.zd-av--press { background: rgba(255, 255, 255, 0.15); }
.zd-av__mi.zd-av--off { opacity: 0.5; }
.zd-av__msep { display: block; height: 1px; margin: 6px; background: var(--zav-line); }

/* activity */
.zd-av__feed { position: relative; height: 222px; overflow: hidden; }
.zd-av__ev { position: absolute; left: 0; top: 0; width: 424px; height: 54px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-content: center; align-items: start; column-gap: 14px; border-top: 1px solid var(--zav-line); }
.zd-av__ev > time { font-size: 12px; line-height: 20px; color: var(--zav-fg-3); }
.zd-av__ev > p { display: -webkit-box; overflow: hidden; font-size: 13.5px; line-height: 19px; color: var(--zav-fg-2); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zd-av__ev b { color: var(--zav-fg); }
.zd-av__ev code { font-size: 12.5px; color: var(--zav-fg); }

/* the command palette: Sidekick's sheet, centred over a scrim; the list and the answer share one body */
.zd-av__scrim { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; z-index: 6; background: rgba(0, 0, 0, 0.4); will-change: opacity; }
.zd-av__palette { left: 520px; top: 120px; width: 560px; z-index: 6; will-change: transform, opacity; background: linear-gradient(var(--zav-menu), var(--zav-menu)), var(--zav-paint);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.35); }
.zd-av__pin { position: relative; display: flex; height: 58px; align-items: center; gap: 14px; padding: 0 16px 0 18px; }
.zd-av__pin > .zd-av__i { color: var(--zav-fg-3); }
.zd-av__pq { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; font-size: 16px; color: var(--zav-fg); white-space: nowrap; }
.zd-av__pq > span { position: absolute; left: 0; color: var(--zav-fg-3); }
.zd-av__pq > b { font-weight: 400; }
.zd-av__pq > i { display: inline-block; width: 1.5px; height: 19px; margin-left: 1px; background: var(--zav-fg); }
.zd-av__pthink { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.zd-av__pthink > i { position: absolute; left: 0; top: 0; width: 34%; height: 2px; background: linear-gradient(90deg, rgba(159, 184, 216, 0), var(--zav-ok), rgba(159, 184, 216, 0)); }
.zd-av__pbody { position: relative; height: 300px; border-top: 1px solid var(--zav-line); }
.zd-av__plist, .zd-av__pans { position: absolute; left: 0; top: 0; right: 0; bottom: 0; will-change: opacity, transform; }
.zd-av__plist { padding: 6px; }
.zd-av__plist > em, .zd-av__pgo > em { display: block; padding: 10px 12px 6px; font-size: 12.5px; line-height: 15px; color: var(--zav-fg-3); }
.zd-av__pr { display: flex; height: 44px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; }
.zd-av__pr.zd-av--on { background: var(--zav-control-hover); }
.zd-av__pr.zd-av--press { background: rgba(255, 255, 255, 0.15); }
.zd-av__pr > .zd-av__i { color: var(--zav-fg-3); }
.zd-av__pr.zd-av--on > .zd-av__i { color: var(--zav-accent); }
.zd-av__pr > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.zd-av__pr b { font-size: 14px; font-weight: 400; line-height: 19px; color: var(--zav-fg); }
.zd-av__pr i { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--zav-fg-3); white-space: nowrap; text-overflow: ellipsis; }
.zd-av__pr kbd { flex: none; }
.zd-av__pans { display: flex; flex-direction: column; padding: 16px 18px 0; }
.zd-av__pah { display: flex; height: 24px; align-items: center; gap: 10px; }
.zd-av__pai { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 999px; background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line); color: var(--zav-fg-2); }
.zd-av__pai .zd-av__i { width: 14px; height: 14px; stroke-width: 1.6; }
.zd-av__pah b { font-size: 13.5px; color: var(--zav-fg); }
.zd-av__pah em { margin-left: auto; font-size: 12.5px; color: var(--zav-fg-3); }
.zd-av__pans > p { height: 72px; margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--zav-fg); }
.zd-av__pans > p > i { display: inline-block; width: 7px; height: 15px; margin-left: 3px; border-radius: 1px; background: var(--zav-ok); vertical-align: -2px; }
.zd-av__psrc { display: flex; gap: 6px; margin-top: 10px; }
.zd-av__psrc > span { display: inline-flex; height: 26px; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--zav-control); box-shadow: inset 0 0 0 1px var(--zav-control-line);
  font-size: 12.5px; color: var(--zav-fg-2); white-space: nowrap; }
.zd-av__psrc .zd-av__i { width: 14px; height: 14px; color: var(--zav-fg-3); }
.zd-av__pgo { margin: auto -18px 0; padding: 0 6px 6px; border-top: 1px solid var(--zav-line); }
.zd-av__pfoot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--zav-line); font-size: 12px; color: var(--zav-fg-3); }
.zd-av__pfoot > span { display: flex; align-items: center; gap: 6px; }

/* toasts: Sidekick's, bottom center, 22px up */
.zd-av__toasts { position: absolute; left: 0; bottom: 22px; width: 1600px; height: 44px; z-index: 7; }
.zd-av__tw { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; }
.zd-av__toast { position: relative; display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px;
  background: linear-gradient(var(--zav-menu), var(--zav-menu)), var(--zav-paint); font-size: 14px; color: var(--zav-fg); white-space: nowrap; transform-origin: 50% 100%; will-change: transform, opacity;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 44px -16px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.3); }
.zd-av__toast::after { left: 22px; right: 22px; }
.zd-av__toast > .zd-av__i { width: 18px; height: 18px; padding: 3px; border-radius: 999px; background: var(--zav-ok-soft); color: var(--zav-ok); stroke-width: 2; }

/* the engineer's pointer */
.zd-av__cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 9; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); will-change: transform, opacity; }
.zd-av__cursor path { fill: #fff; stroke: #0b0e14; stroke-width: 1.4; stroke-linejoin: round; }