/* Blink Viewpoint — Blink Image Brand Guide v1.0 (3 September 2026).
   Y:\Shared drives\ADMIN\Branding\Blink Image Brand Guide v1.0.html

   One brand colour carries the identity. Blink Yellow is a light colour
   and works as a FIELD, not as text: black on yellow is the preferred
   pairing (10.69:1), yellow on white fails at 1.96:1 and is never used
   for text, icons or thin rules (guide 2.4). Yellow on Ink passes at
   8.86:1, so accents on the dark bars are fine.

   Where this tool puts yellow over the 3D view it is over photography,
   which is neither white nor Ink — so those marks carry a dark halo to
   hold their contrast whatever is behind them. Same intent as the rule,
   applied to a surface the guide does not cover. */

:root {
  /* Guide 2.1-2.3, measured from the Illustrator master. These five
     neutrals are the whole supporting range; they are never a second
     brand colour. */
  --blink-yellow: #E7B106;   /* Pantone 124 C */
  --ink: #101010;            /* headings, body */
  --graphite: #4A473E;       /* secondary text */
  --steel: #7C7A6F;          /* captions, meta */
  --mist: #DAD7CD;           /* rules, dividers */
  --bone: #F6F5F1;           /* panels, fills */
  --white: #FFFFFF;
  --black: #000000;

  /* Derived working tints. Not brand values: each is mixed from the
     five above for interface states the guide does not legislate for. */
  --field: #EAE8E0;          /* between Bone and Mist */
  --line-2: #C4C0B3;         /* Mist, a step darker, for input borders */
  --yellow-hover: #D6A305;   /* Blink Yellow, pressed */
  --yellow-soft: #FBF1CF;    /* Blink Yellow as a wash behind Ink text */
  --danger: #B3261E;         /* the one non-brand hue: errors and the
                                height limit, where yellow would read as
                                an accent rather than a warning */
  --danger-soft: #FDF2F1;    /* that red as a wash, matching yellow-soft */

  /* Dark surfaces — the top bar, the status bar, the badges over the
     3D view. These are not invented: they are the values the brand
     guide's own document uses for its dark mode, where it redefines
     the same five neutrals. Matching them keeps the tool and the guide
     the same colour. */
  --d-paper: #0C0C0B;
  --d-surface: #161614;
  --d-surface-2: #242420;
  --d-ink: #F4F3EE;
  --d-ink-2: #B5B2A6;
  --d-ink-3: #87847A;
  --d-rule: #302F2A;
  --viewer: var(--d-surface);  /* the empty 3D stage */

  /* Functional aliases, so the rules below read by role not by name. */
  --ground: var(--bone); --panel: var(--white); --sunk: var(--bone);
  --ink-2: var(--graphite); --ink-3: var(--steel); --line: var(--mist);
  --yellow: var(--blink-yellow); --on-yellow: var(--black);

  /* Guide 3.1-3.3. Avant Garde is the logotype face and is licensed, so
     Poppins is the sanctioned free substitute for display; the guide
     sets long copy in IBM Plex Sans and this page follows it. */
  --ui: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --display: "Poppins", "Century Gothic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 8px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; background: var(--ground); color: var(--ink);
  font: 400 13.5px/1.4 var(--ui); overflow: hidden;
}
body { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--mono); }

button {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 5px 11px; cursor: pointer; white-space: nowrap; font-weight: 500;
}
button:hover:not(:disabled) { border-color: var(--ink); }
button:disabled { opacity: .45; cursor: default; border-color: var(--line-2); }
button.primary { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--yellow-hover); border-color: var(--yellow-hover); }
button.accent { background: var(--yellow-soft); border-color: var(--ink); font-weight: 600; }
button.small { padding: 2px 8px; font-size: 12.5px; }
button.on { background: var(--yellow); color: var(--on-yellow); border-color: var(--ink); }

input[type=text], input[type=number], input[type=date], select {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 4px 7px; min-width: 0;
}
input:focus, select:focus { border-color: var(--ink); outline: none; background: #fff; }
input[type=number] { width: 78px; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--ink); }
input[type=checkbox] { accent-color: var(--ink); width: 15px; height: 15px; }
select { width: 100%; }

.sep { width: 1px; height: 22px; background: var(--line); display: inline-block; margin: 0 4px; }
.spacer { flex: 1; }
.unit { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }

/* ---- top bar ---------------------------------------------------- */

/* Guide 1.4 and 1.5. The reversed lockup is 2.690:1 and its screen
   minimum is 130px wide, which makes it 48px tall. Clear space is the
   width of the i — 20% of the icon's height, so ~10px — and nothing may
   enter it: no type, no rules, no page edge. Hence 12px of padding
   above and below, 16px to the left edge, and 16px out to the divider
   rule before "Viewpoint". Do not shrink the logo to tighten the bar. */
#top {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  background: var(--ink); color: var(--d-ink); flex-wrap: wrap;
}
#top :focus-visible { outline-color: var(--yellow); }
.brandmark { display: flex; align-items: center; gap: 16px; }
.brandmark img { width: 130px; height: auto; display: block; }
.bm-product {
  font-family: var(--display); font-weight: 500; font-size: 1.25rem;
  letter-spacing: -.025em; padding-left: 16px; border-left: 1px solid var(--d-rule);
}
#top input {
  background: var(--d-surface-2) !important; border-color: var(--d-rule) !important; color: var(--d-ink) !important;
  font-weight: 500;
}
#top input:focus { border-color: var(--yellow) !important; }
#top input::placeholder { color: var(--d-ink-3); }
/* Spend warning, in the title bar because the panel it summarises is
   rolled up by default and nobody would ever see it there. Hidden
   entirely while there is nothing to say, so it means something when
   it does appear. */
.usagealert {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
  font: 600 12px var(--ui); white-space: nowrap;
  background: var(--yellow) !important; color: var(--on-yellow) !important;
  border: 1px solid var(--yellow) !important;
}
.usagealert:hover { background: var(--yellow-hover) !important; border-color: var(--yellow-hover) !important; }
.usagealert.over, .usagealert.daily {
  background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important;
}
.usagealert.over:hover, .usagealert.daily:hover { background: #8f1e17 !important; border-color: #8f1e17 !important; }

.projnum { width: 86px; font-family: var(--mono); }
.projname { width: 230px; }
#top .btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#top button { background: transparent; color: var(--d-ink); border-color: var(--d-rule); }
#top button:hover:not(:disabled) { border-color: var(--d-ink); }
#top button.primary { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
#top button.primary:hover:not(:disabled) { background: var(--yellow-hover); }
#top .sep { background: var(--d-rule); }

/* ---- layout ----------------------------------------------------- */

main { display: grid; grid-template-columns: 372px 1fr; min-height: 0; }

#panel { overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 0 0 48px; }
#panel details { border-bottom: 1px solid var(--line); }
#panel summary {
  padding: 11px 16px; font: 600 15px/1.2 var(--display); letter-spacing: -.02em;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; user-select: none;
}
#panel summary::-webkit-details-marker { display: none; }
#panel summary::before {
  content: "\203A"; color: var(--ink-3); font: 600 17px/1 var(--ui); transition: transform .15s; width: 10px;
}
#panel details[open] > summary::before { transform: rotate(90deg); }
#panel summary:hover { background: var(--sunk); }
#panel details[open] > summary { border-left: 3px solid var(--ink); padding-left: 13px; background: var(--yellow-soft); }

.sec { padding: 10px 16px 18px; display: grid; gap: 9px; }
.row { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; }
.row > label { color: var(--ink-2); }
.row .ctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .ctl input[type=range] { flex: 1; }
.row .ctl input[type=text] { flex: 1; }
.val { width: 50px; text-align: right; color: var(--ink-3); font: 12px var(--mono); }
/* Guide 3.4, Label: 11px, .16em, caps. Caps are fine here because this
   is the neutral text face — the no-all-caps rule is about headings set
   in the display face, which all-caps turns into a different brand. */
.sub {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  color: var(--steel); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mist);
}
.sec > .sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink-2); }
.note { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.note b { color: var(--ink-2); }
.note:empty { display: none; }
.note.bad { color: var(--danger); }
.note.good { color: var(--ink-2); }
/* A warning is not an error. The brand has one brand colour and one
   non-brand hue, the danger red, so this gets full-strength Ink and a
   little weight instead of a third colour of its own. */
.note.warn { color: var(--ink); font-weight: 500; }

.pill {
  font: 600 10.5px/1 var(--ui); text-transform: uppercase; letter-spacing: .09em;
  background: var(--field); color: var(--ink-2); border-radius: 999px; padding: 4px 8px;
  margin-left: auto;
}
.pill.live { background: var(--yellow); color: var(--on-yellow); }
.pill.bad { background: var(--danger); color: #fff; }

/* ---- the field-of-view summary ---------------------------------- */

.fovbox {
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 11px; display: grid; gap: 3px; font-size: 12.5px;
}
.fovbox dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.fovbox dt { color: var(--ink-3); }
.fovbox dd { margin: 0; font-family: var(--mono); font-weight: 500; text-align: right; }
.fovbox .alt { color: var(--ink-3); font-size: 11.5px; border-top: 1px dashed var(--line-2); margin-top: 5px; padding-top: 5px; }
.fovbox .flag {
  font-size: 11.5px; line-height: 1.4; color: var(--ink-2);
  background: var(--yellow-soft); border-radius: 4px; padding: 5px 7px; margin-top: 5px;
}

/* Photo / Video. A segmented control rather than a dropdown because it
   is switched constantly and both options should be readable at once. */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.seg button {
  border: 0; border-radius: 0; background: var(--panel); padding: 5px 14px;
  font-weight: 500; color: var(--ink-2);
}
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover:not(.on) { background: var(--sunk); }
.seg button.on { background: var(--yellow); color: var(--on-yellow); font-weight: 600; }

/* ---- lists ------------------------------------------------------ */

.list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.list li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px;
}
.list li.on { background: var(--yellow-soft); border-color: var(--ink); }
.list li .nm { font-weight: 500; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .meta { font: 11.5px var(--mono); color: var(--ink-3); }
/* Colour swatch in the massing list, so the list reads as the model does. */
.list li .sw {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid var(--line-2); margin-right: 7px; vertical-align: -1px;
}
.list li input[type=number] { width: 62px; }
.list li .x {
  border: 0; background: transparent; color: var(--ink-3); padding: 0 4px; font-size: 15px; line-height: 1;
}
.list li .x:hover { color: var(--danger); }
.list:empty { display: none; }

/* Key diagnostics. Google's own wording is kept under each result:
   when our reading of it is wrong, that is the phrase to search for. */
.checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.checks:empty { display: none; }
.checks li {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px;
  background: var(--sunk); padding: 8px 10px; display: grid; gap: 3px; font-size: 12.5px;
}
.checks li.pass { border-left-color: var(--ink); }
.checks li.fail { border-left-color: var(--danger); background: var(--danger-soft); }
.checks .nm { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.checks .nm::before { content: "\2713"; font-weight: 700; }
.checks li.fail .nm { color: var(--danger); }
.checks li.fail .nm::before { content: "\2715"; }
.checks .fix { color: var(--ink-2); }
.checks .raw {
  font: 11.5px/1.35 var(--mono); color: var(--ink-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 7px; margin-top: 2px; word-break: break-word;
}

/* Usage. Quiet by default: this is a reassurance, not an alarm. */
.usage {
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 11px; display: grid; gap: 5px; font-size: 12.5px;
}
.usage dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.usage dt { color: var(--ink-3); }
.usage dd { margin: 0; font-family: var(--mono); font-weight: 500; text-align: right; }
.usage .says { color: var(--ink-2); padding-top: 5px; margin-top: 3px; border-top: 1px dashed var(--line-2); }
.usage.charging { border-color: var(--line-2); background: var(--yellow-soft); }

.sunreadout, .airstatus {
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 11px; font-size: 12.5px; display: grid; gap: 4px;
}
.sunreadout dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.sunreadout dt { color: var(--ink-3); }
.sunreadout dd { margin: 0; font-family: var(--mono); font-weight: 500; text-align: right; }
.sunreadout .verdict { font-weight: 600; padding-top: 5px; margin-top: 4px; border-top: 1px dashed var(--line-2); }
.airstatus.bad { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); font-weight: 500; }

/* ---- the stage -------------------------------------------------- */

/* overflow:hidden is load-bearing. The frame mask dims everything
   outside the shot with a 9999px box-shadow, and with nothing to clip
   it that wash paints straight across the panel and the top bar —
   putting 52% black over the logo and over every Blink Yellow on the
   page, which is exactly what the contrast rules in the brand guide
   are calculated against. Keep the stage clipping its own HUD. */
#stage { position: relative; min-width: 0; overflow: hidden; background: var(--viewer); }
#cesium { position: absolute; inset: 0; }
#cesium .cesium-widget-credits { display: none !important; }
#cesium canvas { display: block; }

#hud { position: absolute; inset: 0; pointer-events: none; }

#mask { position: absolute; inset: 0; }
#maskHole {
  position: absolute; box-shadow: 0 0 0 9999px rgba(16,16,16,.52);
  outline: 1px solid rgba(255,255,255,.5);
}

/* Yellow over photography. The guide forbids Blink Yellow as a thin
   rule because it fails on white (1.96:1); the frame marks sit over
   imagery that can be anything from a dark wood to a white roof, so
   each yellow line is sandwiched between two dark ones. The yellow
   still reads as the brand accent, and the mark holds either way. */
#guide {
  position: absolute; border: 1px solid var(--yellow);
  box-shadow: 0 0 0 1px rgba(16, 16, 16, .55), inset 0 0 0 1px rgba(16, 16, 16, .55);
}
#guide::before, #guide::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 2px solid var(--yellow); border-radius: 1px;
  filter: drop-shadow(0 0 1px rgba(16, 16, 16, .9));
}
#guide::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
#guide::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* Framing grid. Thin white lines like the DJI controller's, so the
   pilot is matching the same intersections the view was framed on.
   non-scaling-stroke keeps them 1px however the viewBox is stretched,
   and the dark halo holds them over a white roof as well as a dark
   wood — the same reasoning as the yellow marks above. */
#grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 1px rgba(16, 16, 16, .85));
}
#grid g { display: none; }
#grid.thirds #gridThirds { display: unset; }
#grid.diagonals #gridDiagonals { display: unset; }
#grid line {
  stroke: rgba(255, 255, 255, .62); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
#grid #gridDiagonals line { stroke: rgba(255, 255, 255, .45); }

#crosshair {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1.5px rgba(16, 16, 16, .95));
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: var(--yellow);
}
#crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
#crosshair::after { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px; }

.tag {
  position: absolute; font: 500 11px/1 var(--mono); letter-spacing: .04em;
  background: var(--yellow); color: var(--on-yellow); padding: 4px 7px; border-radius: 4px;
  white-space: nowrap;
}
#frameTag { left: 0; top: -24px; }
#covTag { right: 0; bottom: -24px; background: rgba(16,16,16,.78); color: var(--d-ink); }

/* Plan view: a drawing aid, so it sits on the stage with the readouts
   rather than in a panel — you reach for it while looking at the shape,
   not while setting the camera up. Guide 2.4: yellow is a field with
   black on it, never yellow text, so the active state inverts. */
.planbtn {
  position: absolute;
  /* Under the height badge, not at the foot of the stage: the camera
     key and its reopen button both live bottom-left. */
  left: 16px;
  top: 58px;
  z-index: 6;
  pointer-events: auto;
  font: 600 11px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--d-ink);
  background: color-mix(in srgb, var(--d-surface) 86%, transparent);
  border: 1px solid var(--d-rule);
  backdrop-filter: blur(6px);
}
.planbtn:hover { border-color: var(--d-ink-3); }
.planbtn[aria-pressed="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

.badge {
  position: absolute; left: 16px; top: 16px;
  font: 600 13px/1 var(--mono); background: rgba(16,16,16,.8); color: var(--d-ink);
  padding: 8px 11px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18);
}
.badge.over { background: var(--danger); color: #fff; border-color: #fff; }
/* Travelling, not flying: quiet, so the red means something when it comes. */
.badge.far { color: var(--d-ink-3); font-weight: 500; }

#sunDial { position: absolute; right: 14px; top: 14px; }
#sunDial svg { display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
#sunDial .dial { fill: rgba(16,16,16,.66); stroke: rgba(255,255,255,.28); stroke-width: 1; }
#sunDial .tick { stroke: rgba(255,255,255,.55); stroke-width: 1; }
#sunDial .n { fill: var(--d-ink); font: 600 9px var(--ui); text-anchor: middle; }
#sunDial .cam { stroke: var(--d-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
#sunDial .sun { fill: var(--yellow); stroke: var(--ink); stroke-width: 1; }
#sunDial .sun.down { fill: var(--d-ink-3); }
#sunDial .elev { fill: var(--d-ink); font: 500 10px var(--mono); text-anchor: middle; }

/* Camera controls key. Sits bottom-left of the viewer, out of the way
   of the height badge (top left), the sun dial (top right) and the
   coverage tag (bottom right). pointer-events back on for its own
   button, since the HUD as a whole lets clicks through to the camera. */
.controlkey {
  position: absolute; left: 16px; bottom: 16px;
  width: 290px; max-width: calc(100% - 32px);   /* never wider than the viewer */
  background: rgba(12, 12, 11, .82); color: var(--d-ink);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r);
  padding: 10px 12px 11px; font-size: 12px; line-height: 1.4;
  backdrop-filter: blur(3px);
}
.controlkey .ck-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .14em;
  color: var(--d-ink-3); margin-bottom: 8px;
}
.controlkey .ck-head button {
  pointer-events: auto; background: transparent; border: 0; color: var(--d-ink-3);
  font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer;
}
.controlkey .ck-head button:hover { color: var(--d-ink); }
.controlkey dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: baseline;
}
.controlkey dt { font: 500 11.5px/1.35 var(--mono); color: var(--blink-yellow); white-space: nowrap; }
.controlkey dd { margin: 0; color: var(--d-ink-2); }
.controlkey .or { color: var(--d-ink-3); font-family: var(--ui); }
.controlkey .ck-note {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--d-ink-3); font-size: 11.5px;
}
.controlkey .ck-note b { color: var(--d-ink-2); }

.controlstab {
  position: absolute; left: 16px; bottom: 16px; pointer-events: auto;
  background: rgba(12, 12, 11, .82); color: var(--d-ink-2);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r);
  padding: 6px 12px; font: 500 12px var(--ui); cursor: pointer;
}
.controlstab:hover { color: var(--d-ink); border-color: rgba(255, 255, 255, .4); }

.hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--yellow); color: var(--on-yellow); font-weight: 600;
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; white-space: nowrap;
}
.toast {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  background: rgba(16,16,16,.9); color: var(--d-ink); padding: 9px 15px;
  border-radius: 999px; font-size: 12.5px; max-width: 70%; text-align: center;
}
.toast.bad { background: var(--danger); color: #fff; }

/* ---- status bar ------------------------------------------------- */

#status {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px;
  background: var(--ink); color: var(--d-ink-2); font: 400 12px/1 var(--mono);
  flex-wrap: nowrap; overflow: hidden;
}
#status .sep { background: var(--d-rule); height: 14px; flex: none; }
#status .st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status .warn { color: var(--blink-yellow); font-weight: 500; flex: none; }

/* Google's attribution is a licence condition, so the credit container
   has to be visible and legible. Cesium's own stylesheet positions it
   absolutely at the bottom left, which escapes this footer and lands on
   top of the readouts — so it is pinned back to static flow here. */
.credits {
  position: relative; flex: 0 1 auto; min-width: 0;
  font: 400 11px/1.3 var(--ui); color: var(--d-ink-3); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.credits .cesium-widget-credits {
  position: static; display: inline-block; bottom: auto; left: auto;
  color: inherit; font: inherit; text-shadow: none; padding: 0;
}
.credits a { color: var(--d-ink-2); }
.credits .cesium-credit-logoContainer,
.credits .cesium-credit-expand-link { display: inline-block; vertical-align: middle; }
.credits img { height: 13px; vertical-align: middle; }