/* Electron clouds: base.css (lib/page/) and the brand tokens (brand/brand.css), plus these.
   Sizes are in vh so the 960x540 preview and the 1920x1080 video lay out alike. */

:root { --pos: rgb(255, 153, 56); --neg: rgb(66, 153, 255); --im: rgb(199, 97, 255); }
html, body { font-size: 1.55vh; }
#globe canvas { display: block; }
#overlay { position: absolute; inset: 0; pointer-events: none; }

.card { position: absolute; background: var(--card-bg); border-radius: .35em; color: var(--fg);
  border-left: .28em solid var(--accent); padding: .6em 1em .7em; transition: none; }
.card .hd { font-weight: 700; letter-spacing: .12em; font-size: .75em; color: var(--fg-soft); margin-bottom: .35em; }
.card .hd span { font-weight: 400; letter-spacing: .03em; color: var(--muted); margin-left: .5em; }
.card .ft { margin-top: .3em; font-size: .72em; color: var(--muted); }

/* The orbital (top left). */
#state { left: 2.2vw; top: 3vh; min-width: 17em; }
#state .name { font-size: 2.6em; font-weight: 700; line-height: 1.05; }
#state .name sub { font-size: .55em; }
#state .name .to { color: var(--muted); font-weight: 300; margin: 0 .25em; }
#state .qn { font-family: var(--font-mono), monospace; color: var(--fg-soft); margin-top: .25em; font-size: .95em; }
#state .e { font-family: var(--font-mono), monospace; font-size: .95em; }
#state .nodes { color: var(--muted); font-size: .85em; margin-top: .2em; max-width: 24em; }
#state .weights { display: flex; height: .35em; margin-top: .45em; border-radius: .2em; overflow: hidden; background: var(--rule); }
#state .weights i { display: block; background: var(--accent); }

/* The camera's distance, and P(r) with the camera marked (bottom left). */
#probe { left: 2.2vw; bottom: 3.5vh; width: 44vh; box-sizing: border-box; }
#probe-r { font-family: var(--font-mono), monospace; white-space: pre; font-size: 1.05em; }
#radial { width: 100%; height: auto; display: block; margin-top: .35em; }

/* Sign colours and scale (bottom right). */
#legend { right: 2.2vw; bottom: 3.5vh; font-size: .9em; max-width: 28vh; }
#legend .sw { display: flex; align-items: center; gap: .55em; line-height: 1.6; }
#legend .sw i { width: .9em; height: .9em; border-radius: 50%; display: inline-block; }
#scalebar { margin-top: .5em; font-family: var(--font-mono), monospace; font-size: .9em; }
#scalebar .bar { height: .35em; border: 1px solid var(--fg-soft); border-top: 0; margin-bottom: .25em; }

/* Nucleus labels, placed by viewer.js (the transform puts the label's corner on the nucleus). */
.nuc { position: absolute; left: 0; top: 0; font: 700 1.05em var(--font-sans), sans-serif; color: var(--fg);
  margin: -1.9em 0 0 .5em; text-shadow: 0 0 .4em #000, 0 0 .2em #000; opacity: 0; white-space: nowrap; }

/* Captions: a title card, lower thirds, an end card. */
.cap { position: absolute; opacity: 0; }
#title { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 60vw; }
#title h1 { font-size: 4.2em; font-weight: 300; margin: 0 0 .3em; letter-spacing: .02em; }
#title p { font-size: 1.45em; color: var(--fg-soft); margin: 0 auto; max-width: 34em; line-height: 1.4; }
#caption { left: 50%; bottom: 5vh; transform: translateX(-50%); width: 74vh; box-sizing: border-box; background: var(--caption-bg);
  padding: .8em 1.2em; border-radius: .35em; font-size: 1.25em; line-height: 1.42; border-top: .2em solid var(--accent); }
#endcard { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(44em, 60vw); background: var(--caption-bg);
  padding: 1.2em 1.6em; border-radius: .4em; font-size: 1.3em; line-height: 1.5; }
#endcard p { margin: 0; }

/* The explore panel (not in the video). */
#panel { position: absolute; top: 3vh; right: 1.2vw; left: auto; width: 17.5em; font-size: 13px; padding: 4px 14px 12px;
  max-height: calc(100% - 6vh); overflow: auto; }
#panel .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#panel select, #panel input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
#panel select { background: #0d1530; color: var(--fg); border: 1px solid var(--rule); border-radius: 4px; padding: 3px; }
#panel button { background: var(--accent); color: #031026; border: 0; border-radius: 4px; padding: 5px 12px; font-weight: 700; }
#chapters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#chapters button { background: rgba(255, 255, 255, .08); color: var(--fg); font-weight: 400; padding: 3px 7px; font-size: 12px; }
#panel .help { color: var(--muted); font-size: 12px; line-height: 1.4; }
body.video #panel { display: none; }
body:not(.video) #legend { bottom: 3.5vh; }

#loading { position: absolute; inset: 0; display: grid; place-items: center; background: #02040b; color: var(--muted);
  font-size: 1.4em; }
#loading.done { display: none; }
#loading.error { color: #ff8a80; }

@media (max-width: 700px) {
  html, body { font-size: 11px; }
  #panel { width: auto; left: 8px; right: 8px; top: auto; bottom: 8px; max-height: 40vh; }
  #probe, #legend { display: none; }
}