/* The flying page: the camera's view fills the window and everything else lies over it. */
:root {
  --photo: 1.3349;                      /* the photo's width over its height; main.js sets it from the scene */
  --ratio: var(--photo);                /* the picture's width over its height as the camera is set; camera.js sets it */
  --bar: 0px;                           /* how much higher than one row the bar at the top is; main.js sets it */
  --ink: #fff;
  --dim: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.28);
  --panel: rgba(16, 20, 24, 0.74);
  --ground: #181c21;                    /* the map's colour where the scene is empty */
  --warn: #ffb020;
  --good: #6fdc8c;                      /* on target, in the capture guide */
  --theirs: #1e9ad8;                    /* the flight that captured the scene */
  --yours: #d07c00;                     /* the pilot's own flight (solid on the map) */
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#view { position: fixed; inset: 0; }
#view canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* two, one over the other */
#photo-frame {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, 100vh * var(--photo)); height: calc(min(100vw, 100vh * var(--photo)) / var(--ratio));
  box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.5); pointer-events: none;
}
/* Gridlines: the picture in thirds, for placing the house and the sky. */
#photo-frame.grid::before, #photo-frame.grid::after { content: ""; position: absolute; border: 0 solid rgba(255, 255, 255, 0.32); }
#photo-frame.grid::before { inset: 0 33.333%; border-width: 0 1px; }
#photo-frame.grid::after { inset: 33.333% 0; border-width: 1px 0; }
#photo-frame.flash { animation: flash 0.22s ease-out; } /* a photo was taken */
@keyframes flash { from { border-color: #fff; background: rgba(255, 255, 255, 0.14); } to { background: rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { #photo-frame.flash { animation: none; } }
body.no3d #view, body.no3d #photo-frame { display: none; }

/* Framing, on the photo's frame: the horizon where it is and where the orbit has it, and the
   house where it is and where it belongs. Amber while off, green once the picture is framed. */
#framing { position: absolute; inset: 0; overflow: hidden; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
#framing .zone { position: absolute; left: 0; right: 0; background: rgba(120, 200, 255, 0.09); }
#framing .want, #framing .have { position: absolute; left: 0; right: 0; height: 0; }
#framing .want { border-top: 2px dashed rgba(150, 215, 255, 0.85); }
#framing .have { border-top: 2px solid var(--warn); color: var(--warn); transition: border-color 0.2s, color 0.2s; }
#framing .have.good { border-color: var(--good); color: var(--good); }
#framing .tag {
  position: absolute; bottom: 5px; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
  background: rgba(16, 20, 24, 0.78); font-variant-numeric: tabular-nums;
}
#framing .want .tag { right: 9%; color: rgb(170, 222, 255); }
#framing .have .tag { left: 56%; }
#framing .under .tag { bottom: auto; top: 5px; }
/* The house's place: four corners of a box a fifth of the picture wide and high. */
#framing .place {
  --c: var(--warn); --l: 16px; --w: 2px;
  position: absolute; left: 50%; width: 20%; height: 20%; transform: translate(-50%, -50%); color: var(--warn);
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--w), linear-gradient(var(--c) 0 0) left top / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--w), linear-gradient(var(--c) 0 0) right top / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--w), linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--w), linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
}
#framing .place.good { --c: var(--good); color: var(--good); }
#framing .place .tag { left: 50%; bottom: auto; top: calc(100% + 5px); transform: translateX(-50%); }
#framing .mark {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--warn); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#framing .mark.good { border-color: var(--good); }
#framing .say {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px;
  background: rgba(16, 20, 24, 0.82); border: 1px solid var(--warn); color: var(--warn); font-size: 12px; letter-spacing: 0.03em; white-space: nowrap;
}
#framing .say.good { border-color: var(--good); color: var(--good); }

button {
  font: inherit; color: var(--ink); background: var(--panel); cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
}
button:hover { background: rgba(60, 68, 76, 0.85); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--ink); color: #111; border-color: var(--ink); }

#top {
  position: fixed; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 8px 12px 18px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
#top .gap { flex: 1; }
#title { font-size: 15px; }
#state, #source, #aircraft { padding: 4px 10px; border-radius: 6px; background: var(--panel); }
#source.warn { color: var(--warn); }
#modes, #worlds { display: inline-flex; }
#modes button, #worlds button { border-radius: 0; margin-left: -1px; }
#modes button:first-child, #worlds button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
#modes button:last-child, #worlds button:last-child { border-radius: 0 6px 6px 0; }

#notice {
  position: fixed; left: 50%; top: calc(96px + var(--bar)); transform: translateX(-50%); text-align: center;
  max-width: min(80vw, max(320px, 100vw - 720px)); /* between the capture guide and the camera's buttons, where there is room */
  padding: 8px 16px; border-radius: 8px; background: var(--panel); font-size: 16px;
}
#loading {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 12px 18px; border-radius: 8px; background: var(--panel); text-align: center;
}
#loading progress { width: 240px; }

/* The capture guide stands above the map. */
#guide {
  position: fixed; left: 12px; top: calc(56px + var(--bar)); box-sizing: border-box; width: 330px; max-height: calc(100vh - 332px - var(--bar));
  overflow: auto; padding: 8px 12px 10px; border-radius: 8px; background: var(--panel);
}
body.bigmap #guide, body.no3d #guide { left: auto; right: 12px; max-height: calc(100vh - 286px - var(--bar)); } /* there the map has the left side */
#guide-head { display: flex; align-items: center; gap: 8px; }
#guide-head strong { flex: 1; text-align: center; font-size: 15px; }
#guide p { margin: 6px 0 8px; color: var(--dim); font-size: 13px; }
#guide-body button { display: flex; justify-content: space-between; gap: 10px; width: 100%; margin-top: 3px; text-align: left; font-size: 13px; }
#guide-body button span { color: var(--dim); white-space: nowrap; }
#guide table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#guide th, #guide td { padding: 3px 8px 3px 0; text-align: left; white-space: nowrap; border-top: 1px solid rgba(255, 255, 255, 0.12); }
#guide tr:first-child th { border-top: 0; color: var(--dim); font-size: 12px; font-weight: normal; }
#guide th { font-weight: 600; }
#guide td.good { color: var(--good); }
#guide td.todo { color: var(--warn); }
#guide-foot { display: flex; gap: 8px; margin-top: 8px; }

/* The training stands where the capture guide stands, and in its place while it is open: a card
   for the step on show, with its picture, the one thing to do now and, in tiles, how the pilot
   stands to it. The step in full is its briefing, which opens over the card. */
body.training #guide { display: none; }
#train {
  --light: #8fd8ff; /* the colour of the capture's passes in the view */
  position: fixed; left: 12px; top: calc(56px + var(--bar)); box-sizing: border-box; width: 330px;
  max-height: calc(100vh - 332px - var(--bar)); display: flex; flex-direction: column; gap: 8px;
  padding: 9px 12px 12px; border: 1px solid rgba(143, 216, 255, 0.28); border-radius: 14px;
  background: linear-gradient(160deg, rgba(24, 34, 44, 0.94), rgba(10, 14, 18, 0.92));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
body.bigmap #train, body.no3d #train { left: auto; right: 12px; max-height: calc(100vh - 286px - var(--bar)); }
#train > * { flex: none; }
#train-head { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
#train-score { margin-left: auto; color: var(--warn); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#train-close, #train-notes-close { padding: 0 6px; border: 0; background: none; color: var(--dim); font-size: 18px; line-height: 1; }
/* The strip: a mark for each step, lit for the one on show and green for those done. */
#train-strip { display: flex; gap: 3px; }
#train-strip button { position: relative; flex: 1; min-width: 0; height: 14px; padding: 0; border: 0; background: none; }
#train-strip button::before { content: ""; position: absolute; inset: 4px 0; border-radius: 3px; background: rgba(255, 255, 255, 0.18); transition: background 0.2s; }
#train-strip button.first { margin-left: 5px; }
#train-strip button:hover::before { background: rgba(255, 255, 255, 0.45); }
#train-strip button.done::before { background: var(--good); }
#train-strip button.now::before { inset: 3px 0; background: var(--light); box-shadow: 0 0 8px rgba(143, 216, 255, 0.9); }
#train-strip button.now.done::before { background: var(--good); box-shadow: 0 0 8px rgba(111, 220, 140, 0.9); }
/* The card: the step's picture beside its name and what it is, in a line. */
#train-card { display: flex; gap: 12px; align-items: center; }
#train-art {
  flex: none; width: 96px; height: 96px; border: 1px solid rgba(143, 216, 255, 0.2); border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, rgba(83, 193, 249, 0.2), rgba(83, 193, 249, 0.03) 72%);
}
#train-words { min-width: 0; }
#train-kind { color: var(--light); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
#train-title { margin: 1px 0 4px; font-size: 19px; font-weight: 650; line-height: 1.15; }
#train-brief { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.35; }
/* What to do now. */
#train-coach { margin: 0; padding: 7px 10px 7px 12px; border-radius: 9px; font-size: 15px; font-weight: 600; line-height: 1.25; }
#train-coach:empty { display: none; }
#train-coach.todo { background: rgba(255, 176, 32, 0.14); box-shadow: inset 3px 0 var(--warn); color: var(--warn); }
#train-coach.good { background: rgba(111, 220, 140, 0.14); box-shadow: inset 3px 0 var(--good); color: var(--good); }
/* The tiles: amber on top while there is something to do about one, green once it is right. */
#train #train-rows { flex: 0 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; font-variant-numeric: tabular-nums; }
#train-rows div { grid-column: span 2; min-width: 0; padding: 6px 7px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 2px rgba(255, 255, 255, 0.16); }
/* three in a row; two when there are two or four of them, and for the last two of five */
#train-rows div:first-child:nth-last-child(2), #train-rows div:first-child:nth-last-child(2) ~ div,
#train-rows div:first-child:nth-last-child(4), #train-rows div:first-child:nth-last-child(4) ~ div,
#train-rows div:first-child:nth-last-child(5) ~ div:nth-child(n+4) { grid-column: span 3; }
#train-rows span, #train-rows strong, #train-rows small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#train-rows span { color: var(--dim); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
#train-rows strong { font-size: 15px; line-height: 1.3; }
#train-rows strong::first-letter { text-transform: uppercase; }
#train-rows small { color: var(--dim); font-size: 11px; line-height: 1.25; }
#train-rows strong:empty, #train-rows small:empty { display: none; }
#train-rows div.todo { box-shadow: inset 0 2px var(--warn); }
#train-rows div.todo small { color: var(--warn); }
#train-rows div.good { box-shadow: inset 0 2px var(--good); }
/* The camera's settings are many and have no numbers: a mark for each, in rows. */
#train[data-kind="camera"] #train-rows { display: flex; flex-wrap: wrap; }
#train[data-kind="camera"] #train-rows div { padding: 2px 9px 3px; border: 1px solid rgba(255, 176, 32, 0.55); border-radius: 12px; box-shadow: none; }
#train[data-kind="camera"] #train-rows span { color: var(--ink); font-size: 12px; letter-spacing: 0; text-transform: none; white-space: normal; }
#train[data-kind="camera"] #train-rows small { display: none; }
#train[data-kind="camera"] #train-rows div.good { border-color: rgba(111, 220, 140, 0.6); background: rgba(111, 220, 140, 0.14); }
#train[data-kind="camera"] #train-rows div.good span { color: var(--good); }
#train[data-kind="camera"] #train-rows div.good span::before { content: "✓ "; }
#train-foot { display: flex; gap: 6px; }
#train-foot button { padding: 5px 11px; border-radius: 8px; font-size: 13px; }
#train #train-next { margin-left: auto; padding: 5px 16px; border-color: rgba(143, 216, 255, 0.55); background: rgba(143, 216, 255, 0.16); font-weight: 600; }
#train #train-next.go { border-color: var(--good); background: var(--good); color: #111; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 0 0 5px rgba(111, 220, 140, 0.28); } }
/* The briefing lies over the card, and may be as tall as the card may. */
#train-notes {
  position: absolute; left: -1px; right: -1px; top: -1px; z-index: 1; box-sizing: border-box; min-height: calc(100% + 2px); max-height: inherit;
  overflow: auto; padding: 0 12px 12px; border: 1px solid rgba(143, 216, 255, 0.28); border-radius: 14px; background: #121a22;
  font-size: 13px; line-height: 1.4; animation: sheet 0.18s ease-out;
}
#train-notes-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; margin: 0 -12px; padding: 9px 12px 6px; background: #121a22; font-size: 15px; }
#train-notes p { margin: 6px 0; }
#train-notes ul { margin: 4px 0; padding-left: 18px; }
#train-notes li { margin: 2px 0; }
#train-field { margin: 12px 0 4px; color: var(--light); font-size: 11px; font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; }
#train-field-list { color: var(--dim); }
@keyframes sheet { from { opacity: 0; transform: translateY(8px); } }
/* The reward for a step: a tick is drawn, and for a pass its stars come up. */
#train-win {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 13px; background: rgba(9, 16, 14, 0.93); text-align: center; pointer-events: none; animation: win 0.2s ease-out;
}
#train-win svg { width: 96px; height: 96px; fill: none; stroke: var(--good); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#train-win circle { stroke-dasharray: 214; stroke-dashoffset: 214; transform: rotate(-90deg); transform-origin: 60px 60px; animation: draw 0.5s 0.05s ease-out forwards; }
#train-win path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 0.3s 0.4s ease-out forwards; }
#train-win strong { font-size: 18px; }
#train-win span { color: var(--warn); font-size: 28px; letter-spacing: 4px; line-height: 1.2; animation: pop 0.45s 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
#train-win span:empty { display: none; }
@keyframes win { from { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.3); } }
/* The pictures, which training-art.js draws: the capture's lines in its light, the aircraft
   white, and green where the pilot has done their part. */
#train-art svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#train-art .house { fill: rgba(255, 255, 255, 0.14); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.5; }
#train-art .drone { fill: #fff; stroke: none; }
#train-art .drone.side { fill: none; stroke: #fff; }
#train-art .drone.side rect { fill: #fff; stroke: none; }
#train-art .ring, #train-art .cap { stroke: rgba(143, 216, 255, 0.55); stroke-width: 1.5; stroke-dasharray: 2 5; }
#train-art .post { fill: var(--light); stroke: none; }
#train-art .ln { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
#train-art .cap { transition: stroke 0.3s; }
#train-art .cap.on { stroke: var(--good); stroke-width: 2.5; stroke-dasharray: none; } /* the aircraft is at the ring */
#train-art .seg, #train-art .track { stroke: rgba(255, 255, 255, 0.2); stroke-width: 5; stroke-linecap: butt; transition: stroke 0.3s; }
#train-art .seg.on, #train-art .done { stroke: var(--good); stroke-width: 5; stroke-linecap: butt; }
#train-art .sight { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; stroke-dasharray: 2 3; }
#train-art .body { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.5; }
#train-art .screen { fill: rgba(143, 216, 255, 0.2); stroke: rgba(143, 216, 255, 0.55); stroke-width: 1; }
#train-art .well { fill: rgba(0, 0, 0, 0.3); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; transition: stroke 0.3s, fill 0.3s; }
#train-art .well.on { fill: rgba(111, 220, 140, 0.2); stroke: var(--good); }
#train-art .knob { fill: #fff; stroke: none; }
#train-art .tick { stroke: #fff; }
#train-art text { fill: #fff; stroke: none; text-anchor: middle; }
#train-art .big { font-size: 24px; font-weight: 650; }
#train-art .small { fill: var(--dim); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
#train-art .pad { stroke: rgba(143, 216, 255, 0.6); stroke-width: 1.5; }
#train-art .check { stroke: var(--good); stroke-width: 6; visibility: hidden; }
/* They move: the whole flight goes round, taking off and landing are shown over and over until
   the pilot has done them. */
#train-art .spin { transform-origin: 60px 60px; animation: spin 9s linear infinite; }
#train-art .csc-left { animation: csc-left 4.5s ease-in-out infinite; }
#train-art .csc-right { animation: csc-right 4.5s ease-in-out infinite; }
#train-art .lift { animation: lift 4.5s ease-in-out infinite; }
#train-art .down { animation: down 3.6s ease-in-out infinite; }
#train-art .still .csc-left, #train-art .still .csc-right, #train-art .still .lift, #train-art .still .down { animation: none; }
#train-art .still .lift { transform: translateY(-14px); }
#train-art .still .down { transform: translateY(68px); }
#train-art .still .check { visibility: visible; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes csc-left { 0%, 8%, 56%, 100% { transform: none; } 20%, 46% { transform: translate(8px, 8px); } 66%, 90% { transform: translateY(-8px); } }
@keyframes csc-right { 0%, 8%, 56%, 100% { transform: none; } 20%, 46% { transform: translate(-8px, 8px); } }
@keyframes lift { 0%, 62%, 100% { transform: none; } 78%, 92% { transform: translateY(-14px); } }
@keyframes down { 0%, 10% { transform: none; } 70%, 100% { transform: translateY(68px); } }
@media (prefers-reduced-motion: reduce) {
  #train *, #train *::before { animation: none !important; transition: none !important; }
  #train-win circle, #train-win path { stroke-dashoffset: 0; }
}

/* The camera, where the aircraft's own app has it: the settings in use under the bar at the top,
   the buttons down the right side, and their menus beside them. */
#cam-bar {
  position: fixed; right: 12px; top: calc(56px + var(--bar)); max-width: calc(100vw - 366px); display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 2px 14px; padding: 4px 12px; border-radius: 8px; background: var(--panel); font-size: 13px; font-variant-numeric: tabular-nums;
}
#cam-bar .good { color: var(--good); }
#cam-bar .todo { color: var(--warn); }
#camera {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%); width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@media (max-width: 1080px) { #camera { top: calc(50% - 50px); } } /* the readouts stand at the right, under the camera */
#camera > button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; min-height: 40px; padding: 4px 0; font-size: 12px; font-weight: 600;
}
#camera button[aria-expanded="true"] { background: var(--ink); color: #111; border-color: var(--ink); }
#camera svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#camera > #cam-shutter { position: relative; width: 60px; height: 60px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
#cam-shutter::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); transition: inset 0.12s, border-radius 0.12s; }
#cam-shutter.video::before { background: #e5484d; }
#cam-shutter.busy::before { inset: 15px; border-radius: 4px; } /* a square: pressing it now stops */
#cam-shutter-text { position: relative; color: #111; font-size: 13px; font-weight: 700; }
#cam-taken { padding: 2px 6px; border-radius: 6px; background: var(--panel); color: var(--dim); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
#cam-taken strong { display: block; color: var(--ink); font-size: 15px; }
#cam-menu {
  position: fixed; right: 88px; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: min(340px, 100vw - 100px);
  padding: 10px 14px 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 20, 24, 0.96);
  z-index: 1; /* over the readouts, where a small window leaves it no room of its own */
}
#cam-menu h2 { margin: 0 0 6px; font-size: 15px; }
#cam-menu div { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
#cam-menu span { flex: 0 0 100%; color: var(--dim); font-size: 12px; }
#cam-menu button { padding: 3px 9px; font-size: 13px; }
/* DJI Fly has the settings in use at the bottom right, over where the sticks are shown here; a
   narrow window has the readouts there, and the strip stays at the top. */
@media (min-width: 1081px) {
  body[data-app="fly"]:not(.bigmap):not(.no3d) #cam-bar { top: auto; bottom: 96px; }
}
/* With the map large or alone, the capture guide has the right side and the camera stands beside it. */
body.bigmap #cam-bar, body.no3d #cam-bar, body.bigmap #camera, body.no3d #camera { right: 354px; }
body.bigmap #cam-menu, body.no3d #cam-menu { right: 430px; }

#map {
  position: fixed; left: 12px; bottom: 12px; width: 240px; height: 240px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; background: var(--ground);
}
/* 344px: the room the readouts need on the map's right */
body.bigmap #map { width: max(180px, min(74vh, 100vw - 344px)); height: max(180px, min(74vh, 100vw - 344px)); }
body.no3d #map { left: 0; bottom: 0; width: 100vw; height: 100vh; border: 0; border-radius: 0; }

#telemetry {
  position: fixed; left: 264px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: 8px;
  display: grid; grid-template-columns: repeat(4, auto); gap: 2px 18px;
  background: var(--panel); font-variant-numeric: tabular-nums;
}
body.bigmap #telemetry, body.no3d #telemetry { left: auto; right: 12px; bottom: 96px; grid-template-columns: repeat(2, auto); }
@media (max-width: 1080px) { /* no room between the map and the sticks in a narrow window */
  #telemetry { left: auto; right: 12px; bottom: 96px; grid-template-columns: repeat(2, auto); }
}
@media (max-width: 600px) { /* nor for the map at its usual size */
  #map { width: 180px; height: 180px; }
}
@media (max-height: 860px) { /* a short window: the map gives the training above it some of its room */
  body.training:not(.bigmap):not(.no3d) #map { width: 180px; height: 180px; }
  body.training:not(.bigmap):not(.no3d) #train { max-height: calc(100vh - 272px - var(--bar)); }
}
@media (max-height: 860px) and (min-width: 1081px) {
  body.training:not(.bigmap):not(.no3d) #telemetry { left: 204px; }
}
#telemetry div { display: flex; align-items: baseline; gap: 6px; }
#telemetry dt { color: var(--dim); font-size: 12px; }
#telemetry dd { margin: 0; min-width: 4.6em; font-size: 16px; }

#sticks {
  position: fixed; right: 12px; bottom: 12px; width: 168px; height: 72px;
  padding: 4px; border-radius: 8px; background: var(--panel);
}

#help {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box;
  width: min(760px, 94vw); max-height: 88vh; overflow: auto; padding: 14px 20px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 20, 24, 0.95);
  z-index: 2; /* over the camera's menu too */
}
#help h2 { margin: 0 0 8px; font-size: 18px; }
#help table { width: 100%; border-collapse: collapse; }
#help th, #help td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; border-top: 1px solid rgba(255, 255, 255, 0.12); }
#help tr:first-child th { border-top: 0; color: var(--dim); font-weight: normal; }
#help th { font-weight: 600; }
#help p { color: var(--dim); }
kbd {
  display: inline-block; min-width: 1.2em; padding: 0 5px; text-align: center; font: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: rgba(255, 255, 255, 0.08);
}
#reverse { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
#reverse label { display: inline-block; margin-right: 16px; white-space: nowrap; }
#map-key span { display: inline-block; width: 30px; margin: 0 4px 0 12px; vertical-align: middle; }
#map-key span:first-child { margin-left: 0; }
#map-key .theirs { border-top: 2px solid #53c1f9; box-shadow: 0 0 5px var(--theirs); } /* a glowing line, as on the map */
#map-key .yours { border-top: 2px solid var(--yours); }