/* ===== CMAT theme tokens =====
Two professional/scientific palettes selectable at runtime from the View
menu (sets data-theme on ):
• (default) → Light — cool neutral scientific light
• data-theme="dark" → Dark — slate scientific dark
Only colors change between themes; layout/spacing is shared.
The 3D viewports and the bottom console stay dark in every theme
by design (space view + terminal aesthetic).
A third theme lived here until 2026-08-18: a cream-and-orange-red palette
whose values were taken from an outside brand. It was removed with every
other trace of that brand, and app.js migrates anyone whose browser still
has it stored onto Light. Do not reintroduce a theme whose colours are
sourced from someone else's site. */
:root {
/* ---- shared, theme-independent ---- */
--mono: "JetBrains Mono", "SF Mono", "DejaVu Sans Mono", Consolas, Monaco, monospace;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* accents (kept consistent for brand recognition) */
--red: #0b8aa8; /* teal-cyan accent (active states, links, accent bar) */
/* The accent doubles as a TEXT colour (active tree leaf, breadcrumb, BETA pill,
flagged metrics, hover labels). At full strength it only reaches ~3.3:1 on the
darker surfaces it lands on — under WCAG AA for body-sized text, and most of
those labels are 11-13px, so the large-text allowance does not apply. This is
the same hue darkened until it clears 4.5:1 on the WORST surface it is used
on (--hover-bg / --sk-base, the darkest of them); fills, borders, outlines and
gradients keep the full-strength --red so the brand still reads at a glance.
Recomputed if any surface token changes. */
--red-text: #097189; /* 4.63:1 on --hover-bg, 5.5:1 on cards */
--red-hover: #097791;
--red-border:#0a7d95;
--red-edge: #12a4c4;
--green: #3f9d5e;
--green-dk: #2f7a48;
--blue: #5b9fd6;
--amber: #e8a23b;
--focus-ring: rgba(11,138,168,.16);
--accent-tint: rgba(11,138,168,.12); /* soft accent wash (menu hover) */
/* SEMANTIC ERROR, distinct from the accent. Invalid fields and an offline
backend must read as "wrong", and in Light/Dark the accent is teal, so
painting them with it says "active/selected" instead. --error is the
border/fill strength (needs 3:1 against its surface, WCAG non-text),
--error-text is the AA text strength (4.5:1), --error-ring is --error at
35% for the invalid-input glow. Each theme's log console red is now the
same colour, so there is one error red per theme rather than three. */
--error: #b23a22;
--error-text: #b23a22; /* 4.91:1 on the worst surface it lands on */
--error-ring: rgba(178,58,34,.35);
/* output-log console (warm/light in cream themes, dark only in Dark) */
--log-bg:#eef0ed; --log-ink:#3a424c; --log-muted:#79838c; --log-btn-bg:#f7f8f6; --log-btn-border:#dcdfda; --log-scroll:#c8ccc5;
--log-info:#2f6fb0; --log-ok:#2f7a48; --log-error:var(--error-text); --log-warn:#9a6414;
/* thermal case accents (hot = red, cold = blue) — per-theme so they read
clearly on that theme's card surface. Independent of the teal --red accent. */
--hot: #d34426; --hot-text: #b8381e; --hot-soft: #fbeae6;
--cold: #2f6fb0; --cold-text: #275f97; --cold-soft: #e9f1f9;
/* ============ LIGHT (default) ============ */
/* surfaces */
--app-bg: #f3f4f2;
--rail-bg: #ffffff; /* left tree panel + right rail */
--toolbar-bg:#ffffff;
--card-bg: #ffffff;
--card-head: #f3f4f2;
--white: #ffffff;
/* borders */
--border: #dcdfda;
--border-2: #e3e5e0;
--border-3: #e9ebe6;
--border-4: #eff1ec;
--border-strong: #c8ccc5;
/* text */
--ink: #0f1620;
--label: #2a323c;
--text-2: #4b5560;
--muted: #79838c;
--faint: #9aa3ac;
/* derived surfaces / states */
--btn-bg: #f2f4f1;
--btn-hover-bg: #ffffff;
--btn-disabled-text: #a6afb8;
--hover-bg: #e7eae5;
--dot-faint: #b6bdb4;
--active-soft: #e1f1f5; /* pale teal tint for active tree leaf */
--green-soft-bg: #e2f0e6;
--conn-ok-bg: #eaf3ec;
--conn-ok-border:#cfe2d3;
--conn-bad-bg: #fbece8;
--conn-bad-border:#f0cabf;
--conn-unknown-bg:#eef1ec;
--beta-border: #a9d9e5;
--scroll-thumb: #c8ccc5;
--scroll-thumb-hover:#adb4ad;
--sk-base: #e7eae5;
--sk-highlight: #f2f4f1;
--sk-note-overlay: rgba(255,255,255,.6);
--warn-text: #9a6414;
--warn-bg: #fdefd6;
--warn-mark: #e0a94e;
--arrow-stroke: %2379838c;
}
/* ================= DARK ================= */
html[data-theme="dark"] {
--red: #29b6d4; /* teal-cyan accent (desaturated from safety-orange for cross-theme cohesion) */
--red-text: #29b6d4; /* light-on-dark already clears AA everywhere (6.3:1 worst) — no darkening needed */
--red-hover: #45c6e0;
--red-border:#1f9fbb;
--red-edge: #5ad2ea;
--green: #4bb06a;
--green-dk: #6fce8c;
--blue: #6bb0e0;
--amber: #eab24f;
--focus-ring: rgba(41,182,212,.26);
--accent-tint: rgba(41,182,212,.22);
--error: #e8745a;
--error-text: #e8745a; /* 5.14:1 worst — light-on-dark needs no darkening */
--error-ring: rgba(232,116,90,.35);
--log-bg:#0d141c; --log-ink:#c3ccd5; --log-muted:#6b7680; --log-btn-bg:#172029; --log-btn-border:#2b343e; --log-scroll:#2b343e;
--log-info:#6bb0e0; --log-ok:#4bb06a; --log-error:var(--error-text); --log-warn:#e8c36b;
--hot: #ff7043; --hot-text: #ff8a63; --hot-soft: #2a1713;
--cold: #5aa6e0; --cold-text: #7bbdf0; --cold-soft: #142434;
--app-bg: #101418;
--rail-bg: #141922;
--toolbar-bg:#141922;
--card-bg: #181d22;
--card-head: #141922;
--white: #1f252b;
--border: #262c33;
--border-2: #2a313a;
--border-3: #222831;
--border-4: #1d232a;
--border-strong: #363e46;
--ink: #f2f1ee;
--label: #d6d5d0;
--text-2: #a8aaa5;
--muted: #808580;
--faint: #626863;
--btn-bg: #1c222a;
--btn-hover-bg: #232a32;
--btn-disabled-text: #5c6169;
--hover-bg: #20262e;
--dot-faint: #4a5158;
--active-soft: #13282e; /* cool teal-tinted dark — matches the dark theme's teal accent */
--green-soft-bg: #1c3327;
--conn-ok-bg: #16281d;
--conn-ok-border:#2c4a37;
--conn-bad-bg: #2a1714;
--conn-bad-border:#4a2820;
--conn-unknown-bg:#181d22;
--beta-border: #1f4a55; /* cool teal border — matches the dark theme's teal accent text */
--scroll-thumb: #313842;
--scroll-thumb-hover:#434b55;
--sk-base: #1a2027;
--sk-highlight: #232a32;
--sk-note-overlay: rgba(16,20,24,.55);
--warn-text: #e0a94e;
--warn-bg: #332512;
--warn-mark: #d39a4f;
--arrow-stroke: %23a8aaa5;
}
/* The light theme used to re-scope the right-hand rail to a dark navy contrast
panel. That was removed once the previews inside it became theme-aware: a
pale viewport sitting in a black rail was the one place the light theme still
went dark, and it forced every scene colour to be a mid-tone compromise that
had to stay legible on both surfaces. The rail now just follows the page
theme like every other panel, so --rail-bg / --card-bg / --ink come straight
from :root and the scene palette is free to use its natural values.
One nuance: in the light theme --rail-bg and --card-bg are both #ffffff, so
the legend and readout cards would disappear into the panel. Dark already
seats the rail a step below its cards; this does the same for light, and
only for the right-hand rail — the left tree panel shares --rail-bg but has
no cards on it, so it stays white. */
html[data-theme="light"] .rail-panel,
html:not([data-theme]) .rail-panel { --rail-bg: #f3f4f2; }
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; height: 100%;
background: var(--app-bg);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "cv05", "cv11"; /* Inter: open l/a alternates read cleaner at UI sizes */
}
/* Engineering data must column-align: tabular figures on every numeric surface. */
input, select, .ro-value, .metric-value, .pass-table, .gt-readout, .tf-row,
.adcs-metrics, .about-line, table { font-variant-numeric: tabular-nums; }
/* Mobile viewport height, in three layers.
100vh is the LARGEST viewport on mobile browsers, so at 100vh the output-log
footer sits underneath the address bar. 100dvh tracks the visible area.
But dvh on alone is not enough, and this is the subtle part: a
PERCENTAGE height resolves against the initial containing block, which Chrome
on Android sizes to the LARGE viewport (address bar hidden). So
`html { height: 100% }` stands taller than a 100dvh body, and the difference
paints as bare app background below the console — the strip of dead space
reported on a Galaxy S25. The two boxes were being measured against two
different viewports.
Layer three is the reliable one: app.js measures window.innerHeight into
--app-h and adds .js-vh. innerHeight tracks the address bar but, unlike
visualViewport.height, is NOT shrunk by the on-screen keyboard — so the shell
does not collapse while you type into a field. The class gates the rule so
var(--app-h) can never resolve to nothing. */
html { overflow: hidden; }
body { height: 100vh; height: 100dvh; overflow: hidden; }
html.js-vh, html.js-vh body { height: var(--app-h); }
::selection { background: var(--red); color: #fff; }
input:focus, select:focus { outline: none; }
/* Keyboard focus: a clear ring for users navigating with Tab (mouse clicks stay
ring-free via :focus-visible). Inputs keep their existing box-shadow ring too. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
outline: 2px solid var(--red); outline-offset: 2px;
}
/* Respect the OS "reduce motion" setting: collapse spinners, shimmer, pulses and
transitions so motion-sensitive users get a calm, static interface. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
}
/* custom scrollbars */
.cmat-scroll::-webkit-scrollbar, .main-panel::-webkit-scrollbar,
.tree-panel::-webkit-scrollbar, .rail-panel::-webkit-scrollbar { width: 10px; height: 10px; }
.main-panel::-webkit-scrollbar-thumb, .tree-panel::-webkit-scrollbar-thumb,
.rail-panel::-webkit-scrollbar-thumb {
background: var(--scroll-thumb); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px;
}
.main-panel::-webkit-scrollbar-thumb:hover, .tree-panel::-webkit-scrollbar-thumb:hover,
.rail-panel::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border: 3px solid transparent; background-clip: padding-box; }
.log-body::-webkit-scrollbar { width: 8px; }
.log-body::-webkit-scrollbar-thumb { background: var(--log-scroll); border-radius: 8px; }
@keyframes cmatPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* ===== Root workspace grid =====
Rows are addressed BY NAME. Do not go back to a positional template.
The history is worth keeping, because this trap caught the layout twice from
opposite directions. It was `auto 1fr auto` for five children, which assumed
the stale banner was display:none; the moment the banner appeared it took the
1fr and the workspace collapsed. That was fixed by padding the template out to
five rows, which assumed the opposite: with the banner hidden a display:none
item claims no row at all, so every row below shifted up one, the
minmax(0, 1fr) landed on the run strip, and the workspace stopped at its
content height. The mission tree stopped with it, leaving a band of bare page
between the tree and the output log the whole time no run was stale.
Naming the areas makes the mapping independent of which children exist. An
absent item leaves its row at auto, which is 0px. A child added later without
an area lands in an implicit row instead of silently taking the flexible one.
minmax(0, 1fr), not 1fr, so the workspace may be SMALLER than its content:
that is what lets the inner panes own their scrolling instead of pushing the
log off-screen. */
body {
display: grid;
grid-template-areas: "toolbar" "stale" "workspace" "runstrip" "log";
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.toolbar { grid-area: toolbar; }
.stale-banner { grid-area: stale; }
.app-body { grid-area: workspace; }
.run-strip { grid-area: runstrip; }
.output-log { grid-area: log; }
/* ===== Toolbar ===== */
.toolbar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
background: var(--toolbar-bg);
border-bottom: 1px solid var(--border);
padding: 3px 22px; z-index: 5;
}
/* Two-row toolbar: row 1 = brand + account (full width), row 2 = menus + actions. */
.toolbar-left {
display: flex; align-items: center; gap: 16px; min-width: 0;
flex: 1 0 100%; padding: 5px 0; border-bottom: 1px solid var(--border);
}
.toolbar-left .cmat-user-chip { margin-left: auto; }
/* Mission-tree drawer toggle. Only rendered below 881px (see the responsive
section at the end of this file); on desktop the tree pane is always visible so
the button would be noise. */
.nav-toggle {
display: none; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
background: var(--btn-bg); color: var(--ink);
border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* Dimmer behind the drawer. Always in the DOM so it can transition; inert until
the drawer opens. */
.nav-scrim {
position: fixed; inset: 0; z-index: 1400;
background: rgba(0, 0, 0, .45);
opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
.menubar, .toolbar-actions { padding: 5px 0; }
.logo-mark {
width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.logo-mark img { width: 34px; height: 34px; display: block; object-fit: contain; }
/* theme-aware orbit-and-probe mark: light/cream variant by default, dark variant in Dark theme */
.logo-mark svg { width: 34px; height: 34px; display: block; }
.logo-mark .logo-dark { display: none; }
html[data-theme="dark"] .logo-mark .logo-light { display: none; }
html[data-theme="dark"] .logo-mark .logo-dark { display: block; }
.app-title { font-weight: 800; font-size: 19px; letter-spacing: .5px; }
.beta-pill {
font-size: 10px; font-weight: 700; letter-spacing: 1px;
color: var(--red-text); border: 1px solid var(--beta-border);
border-radius: 4px; padding: 2px 6px; text-transform: uppercase;
}
.toolbar-divider { width: 1px; height: 22px; background: var(--border); }
.app-subtitle {
font-family: var(--sans); font-size: 15px;
color: var(--muted); white-space: nowrap;
}
.toolbar-actions { display: flex; align-items: center; gap: 10px; }
/* ===== Theme slider (Light / Dark) ===== */
.theme-switch {
position: relative; display: inline-flex; align-items: stretch;
background: var(--btn-bg); border: 1px solid var(--border);
border-radius: 8px; padding: 3px;
}
.theme-switch-thumb {
position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); width: 0;
background: var(--card-bg); border: 1px solid var(--border-2);
border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.10);
transition: transform .22s cubic-bezier(.4,.1,.2,1), width .22s cubic-bezier(.4,.1,.2,1);
pointer-events: none; z-index: 0;
}
.theme-opt {
position: relative; z-index: 1; border: none; background: transparent;
font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
color: var(--muted); padding: 5px 12px; border-radius: 6px; cursor: pointer;
white-space: nowrap; transition: color .18s ease;
}
.theme-opt:hover:not(.is-active) { color: var(--label); }
.theme-opt.is-active { color: var(--ink); }
.theme-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
@media (max-width: 1180px) { .theme-opt { padding: 5px 9px; font-size: 11px; } }
.btn {
font-family: var(--sans); font-size: 12.5px; font-weight: 600;
color: var(--label); background: var(--btn-bg); border: 1px solid var(--border);
border-radius: 7px; padding: 8px 14px; cursor: pointer;
transition: all .15s ease; display: inline-flex; align-items: center; gap: 8px;
}
.btn-ghost:hover:not(:disabled) { background: var(--btn-hover-bg); border-color: var(--border-strong); }
.btn:disabled { color: var(--btn-disabled-text); background: var(--toolbar-bg); border-color: var(--border-2); cursor: not-allowed; }
.btn-primary {
color: #fff; background: var(--red); border-color: var(--red-border);
font-weight: 700; padding: 8px 16px; box-shadow: 0 1px 3px rgba(210,63,28,.3);
}
.btn-primary:hover:not(:disabled) { background: var(--red-hover); }
.btn-primary svg { margin-right: -2px; }
/* inline spinner shown on the Run button while an analysis is in flight */
.btn-spin {
width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
animation: spin .7s linear infinite;
}
.btn-primary:disabled .btn-spin { border-color: rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.85); }
/* inline action icons (replace the old emoji glyphs); inherit button text color */
.ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; flex-shrink: 0; }
.gt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mini-btn, .log-btn { display: inline-flex; align-items: center; gap: 6px; }
#staleBanner .ico { width: 14px; height: 14px; vertical-align: -3px; margin-right: 5px; }
.conn-status {
font-size: 12px; font-weight: 600; letter-spacing: .01em;
border-radius: 7px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 6px;
}
.conn-ok { color: var(--green-dk); background: var(--conn-ok-bg); border: 1px solid var(--conn-ok-border); }
.conn-bad { color: var(--error-text); background: var(--conn-bad-bg); border: 1px solid var(--conn-bad-border); }
.conn-unknown { color: var(--muted); background: var(--conn-unknown-bg); border: 1px solid var(--border-2); }
.conn-status::before { content: "●"; font-size: 9px; }
/* Two labels; the responsive block swaps which one shows. */
.conn-status .conn-short { display: none; }
.conn-ok::before { color: var(--green); }
/* ===== Body: 3 panes ===== */
.app-body {
display: grid; grid-template-columns: 266px 1fr 396px;
min-height: 0; background: var(--app-bg); overflow: hidden;
}
/* Sections with no directly-relevant rail content (see NO_RAIL_RESULTS in
app.js) drop the right column entirely and let the results breathe. */
.app-body.no-rail { grid-template-columns: 266px 1fr; }
.app-body.no-rail .rail-panel { display: none; }
.app-body.no-rail .inspector-inner { max-width: 1100px; }
/* ===== Tree nav (left) ===== */
.tree-panel {
background: var(--rail-bg); border-right: 1px solid var(--border);
overflow-y: auto; display: flex; flex-direction: column;
}
.tree-header {
font-size: 10.5px; letter-spacing: 2px; color: var(--faint);
padding: 18px 18px 10px; font-weight: 700; text-transform: uppercase;
}
.tree { list-style: none; margin: 0; padding: 2px 12px; flex: 1; }
.tree > li { margin-bottom: 3px; }
.tree-root {
padding: 9px 10px; cursor: pointer; font-size: 13.5px; font-weight: 600;
color: var(--ink); display: flex; align-items: center; gap: 9px; border-radius: 7px;
}
.tree-root:hover { background: var(--hover-bg); }
/* disclosure chevron: points right when collapsed, rotates down when expanded */
.tree-root::before {
content: ""; width: 9px; height: 9px; flex-shrink: 0; background-color: var(--faint);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform .16s ease;
}
.tree-root.expanded::before { transform: rotate(90deg); }
.tree-root:hover::before { background-color: var(--muted); }
.tree-name { flex: 1; }
/* category icon in the tree nav — muted, brightens with the row on hover/active */
.tree-ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--faint); flex-shrink: 0; }
.tree-ico svg { width: 15px; height: 15px; }
.tree-root:hover .tree-ico, .tree-root.expanded .tree-ico { color: var(--muted); }
/* keyboard focus ring for tree items (they're divs/li, not native controls).
ORDER IS LOAD-BEARING. These two selectors have identical specificity (0,2,0),
and :focus matches whenever :focus-visible does, so whichever comes LAST wins.
Written the other way round, `outline: none` silently killed the ring in the
exact case it exists for, and the tree is the app's only navigation: a
keyboard user had no indicator at all. Measured with a real Tab press before
the swap: outline-width 0px, no box-shadow, no background change. */
.tree-root:focus, .tree-leaf:focus { outline: none; }
.tree-root:focus-visible, .tree-leaf:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.tree-status {
font-size: 9px; font-weight: 700; letter-spacing: .5px;
padding: 2px 6px; border-radius: 4px;
}
.st-idle { color: var(--faint); background: var(--hover-bg); }
.st-set { color: var(--green-dk); background: var(--green-soft-bg); }
.tree-children {
list-style: none; margin: 2px 0 8px 19px; padding-left: 13px;
border-left: 1px solid var(--border); display: none;
}
.tree-root.expanded + .tree-children { display: block; }
.tree-leaf {
position: relative; padding: 7px 10px; font-size: 12.5px; color: var(--text-2);
cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 6px; font-weight: 500;
}
.tree-leaf::before {
content: ""; position: absolute; left: -13px; width: 9px; height: 1px; background: var(--border);
}
.tree-leaf::after {
content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--dot-faint); flex-shrink: 0;
order: -1;
}
.tree-leaf:hover { background: var(--hover-bg); color: var(--ink); }
.tree-leaf.active { background: var(--active-soft); color: var(--red-text); font-weight: 700; }
.tree-leaf.active::after { background: var(--red); }
.tree-divider { height: 1px; background: var(--border); margin: 10px 6px; list-style: none; }
.tree-footer {
padding: 14px 20px; border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 5px;
}
.tree-footer .tf-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); }
.tree-footer .tf-row span:last-child { color: var(--muted); }
/* ===== Inspector (center) ===== */
/* scrollbar-gutter keeps the content width identical whether or not the section
is tall enough to scroll, so nothing shifts when a scrollbar appears. */
.main-panel { overflow-y: auto; min-width: 0; background: var(--app-bg); scrollbar-gutter: stable; }
/* Left-anchored, NOT centered (margin: 0, not auto): sections have two widths
(760px beside the rail, 1100px when a results view drops it), and centering
each made the text's left edge jump sideways on every tree change. Anchoring
to the left padding gives every branch the same start position. */
.inspector-inner { max-width: 760px; margin: 0; padding: 30px 44px 60px; }
.panel-section { display: none; }
.panel-section.active { display: block; }
.breadcrumb {
display: flex; align-items: center; gap: 8px; font-size: 12px;
color: var(--faint); margin-bottom: 18px;
}
.breadcrumb .crumb-sep { color: var(--border-strong); }
.breadcrumb .crumb-current { color: var(--red-text); font-weight: 600; }
.panel-section h2 {
margin: 0; font-size: clamp(20px, 4.6vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink);
}
.panel-section h2::after {
content: ""; display: block; width: 46px; height: 3px; background: var(--red);
border-radius: 2px; margin: 14px 0 16px;
}
/* Section intros run the full width of the content they describe (viewport,
charts, cards) so text and visual always share one edge — and justify, so
both edges of the paragraph are flush with the content below. */
.section-intro {
font-family: var(--sans); font-size: 15px; line-height: 1.6;
color: var(--text-2); margin: 0 0 28px; max-width: none;
text-align: justify;
}
.rail-caption, .about-note { text-align: justify; }
/* Zoom hint shown as its own caption beneath a chart (under the x-axis label),
not baked into the axis title text. */
.chart-hint {
font-family: var(--sans);
font-size: 11px; color: var(--muted); text-align: center;
margin: 8px 0 0; letter-spacing: 0.2px;
}
/* Keep the DOI range-sliders visually plain: hide the miniature chart preview
Plotly draws inside the slider so only the flat brand-tinted strip remains. */
.rangeslider-rangeplot .scatterlayer,
.rangeslider-rangeplot .barlayer,
.rangeslider-rangeplot .gridlayer,
.rangeslider-rangeplot .zerolinelayer,
.rangeslider-rangeplot .maplayer { display: none !important; }
/* ===== Panel cards ===== */
.panel-card {
background: var(--card-bg); border: 1px solid var(--border-2);
border-radius: 12px; overflow: hidden; margin-bottom: 22px;
}
.panel-card-head {
display: flex; align-items: center; gap: 9px; padding: 13px 20px;
border-bottom: 1px solid var(--border-3); background: var(--card-head);
font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted);
}
.panel-card-head.between { justify-content: space-between; }
.panel-card-head.between > span:first-child { display: flex; align-items: center; gap: 9px; }
.panel-card-head .head-meta { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--faint); }
.dot-red { width: 5px; height: 5px; border-radius: 50%; background: var(--red); display: inline-block; flex-shrink: 0; }
.panel-card-body { padding: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 2px; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--label); margin-bottom: 2px; }
/* contextual help "?" badge next to input labels, with a hover/focus tooltip */
.help-tip {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px;
border: 1px solid var(--border-strong); border-radius: 50%;
font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--muted);
background: var(--btn-bg); cursor: help; position: relative; user-select: none;
text-transform: none; letter-spacing: 0;
}
.help-tip:hover, .help-tip:focus-visible { color: var(--red-text); border-color: var(--red); }
/* Hover may recolour and stop there; KEYBOARD focus may not. A 1px border that
changes colour is the same cue twice and no cue at all to anyone who cannot
separate the two hues, which is WCAG 1.4.1 and 2.4.11. The badge is 14px, so
the ring sits outside it rather than inside. */
.help-tip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Single body-level tooltip positioned by JS (help-tooltip.js logic in app.js),
so it escapes the scrolling panels and is clamped to the viewport — never clipped. */
.help-tooltip {
position: fixed; z-index: 4000; max-width: 260px; width: max-content;
background: var(--ink); color: var(--app-bg);
font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.45;
letter-spacing: .01em; text-align: left; padding: 8px 11px; border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none;
opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.help-tooltip.show { opacity: 1; visibility: visible; }
/* Caption line above each chart. Charts had no title element at all, so there
was nothing naming them and nothing to hang a help badge on. Inserted before
the .chart-box by wireChartHelp so Plotly's redraws cannot wipe it. */
.chart-cap {
display: flex; align-items: center; gap: 2px;
font-family: var(--sans); font-size: 11px; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
/* No left offset: the caption shares the section's left edge with h2, the
intro and the chart frame. Vertically it belongs to the chart BELOW it:
clear space above (away from the previous chart) and a tight 8px to its
own chart. Stacked charts rely on this instead of per-box inline margins. */
color: var(--muted); margin: 24px 0 8px;
}
/* Output badges sit on labels that are themselves small, so the badge follows
the text size down rather than looming over it. */
.metric-label .help-tip, .adcs-metric .help-tip, th .help-tip, .chart-cap .help-tip,
.case-card .row .help-tip {
width: 12px; height: 12px; font-size: 8.5px; margin-left: 4px; vertical-align: -1px;
}
/* A table header is often right-aligned and tight; keep the badge from forcing a
wrap that would change the column width. */
th .help-tip { flex: none; }
.field-sub { display: block; font-size: 11px; color: var(--faint); margin-bottom: 8px; }
.field-input { position: relative; display: flex; align-items: center; margin-top: auto; }
.field-input input, .field-input select {
width: 100%; font-family: var(--sans); font-size: 14px; font-weight: 500;
padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px;
background-color: var(--white); color: var(--ink);
}
.field-input.has-unit input { padding-right: 44px; }
/* A select has to keep the 32px of right padding the base `select` rule below
reserves for the chevron it draws at "right 14px center". The shared input
padding above is more specific and was overriding it to 13px, so the arrow
was painted UNDER the option text and vanished the moment a label was long
enough to reach it. Every other dropdown escaped only because its longest
option happened to be short; PV Extraction's is not. */
.field-input select { padding-right: 32px; }
.field-input .unit {
position: absolute; right: 13px; font-size: 11px; color: var(--faint);
pointer-events: none; letter-spacing: .03em;
}
input:focus, select:focus {
border-color: var(--red); box-shadow: 0 0 0 3px var(--focus-ring);
}
select {
appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
}
html[data-theme="dark"] select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
}
/* form-factor panel */
.form-factor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.envelope-spec { border-left: 1px solid var(--border-3); padding-left: 24px; }
.spec-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--faint); }
.spec-row { display: flex; justify-content: space-between; font-size: 13px; margin-top: 10px; }
.spec-row span:first-child { color: var(--muted); }
.spec-row span:last-child { font-weight: 600; }
/* ===== Face table ===== */
.face-table {
border-collapse: separate; border-spacing: 0; width: 100%;
background: transparent; font-family: var(--sans);
}
.face-table-flush { border: none; }
.face-table th, .face-table td {
padding: 10px 20px; text-align: left; font-size: 13px;
border-bottom: 1px solid var(--border-4);
}
.face-table th {
background: transparent; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
font-size: 10.5px; color: var(--faint); border-bottom: 1px solid var(--border-3); padding: 11px 20px;
}
/* alpha and epsilon are lowercase by convention, and CSS uppercasing a Greek
lowercase letter turns it into its CAPITAL: (α) and (ε) were rendering as
(Α) and (Ε), which are indistinguishable from a Latin A and E. On a screen
about radiative properties that is the wrong symbol, not a styling nit. The
header keeps its small-caps look; only the symbol opts out. */
.face-table th .sym { text-transform: none; }
.face-table td:first-child { font-weight: 700; display: flex; align-items: center; gap: 7px; }
.face-chip { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.face-table input {
width: 100%; max-width: 160px; font-family: var(--sans); font-size: 13.5px;
padding: 9px 12px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--white);
color: var(--ink);
}
.face-table tfoot .face-total td {
background: var(--card-head); font-weight: 700; border-bottom: none; padding: 13px 20px;
}
.face-table tfoot .face-total td:first-child { color: var(--muted); display: table-cell; }
/* Per-face surface type. The select takes the same shape as the number inputs
beside it, so the row reads as one strip of controls.
background-COLOR, not the shorthand: `background: var(--white)` also resets
background-image, which silently threw away the chevron the base `select`
rule draws. These six then looked exactly like text inputs, with no hint
that they open. The right padding clears the arrow the same way the form
selects do. */
.face-table select.face-type {
width: 100%; min-width: 176px; max-width: 252px; font-family: var(--sans); font-size: 13px;
padding: 9px 30px 9px 10px; border: 1px solid var(--border-2); border-radius: 7px;
background-color: var(--white); color: var(--ink);
}
/* 252px is the longest option ("Panel + solar cells + camera lens", 205px at
13px Inter) plus the arrow. Raising the cap alone was not enough: a table
column is sized from its content, and auto layout spreads the spare width
across all five columns, so the select stopped at 206px and the option was
still truncated. The percentage width below makes THIS column the one that
absorbs the surplus, so it reaches its 252px cap whenever the card can
afford it and still falls back to 176px when the card is narrow, rather
than forcing a horizontal scrollbar under an input table on the desktop.
The rest of the space is bought back from the neighbours: the area box was
160px for a four-character number, the cells box 104px for a percentage,
and this table's cells carried 40px of horizontal padding each. */
.face-table-flush td:nth-child(3) { width: 100%; }
.face-table-flush th, .face-table-flush td { padding-left: 12px; padding-right: 12px; }
/* The min-widths are not optional. The percentage width above hands the surplus
to the surface column, which squeezes these two back to their min-content,
and a number input CLIPS its value rather than shrinking it: without these,
the area box showed "0" for 0.01 and the cells box showed nothing at all.
Measured on the ORIGINAL build too, where both were already clipping at
1200 and 1300px; this fixes that as well. */
.face-table-flush td:nth-child(2) input { min-width: 86px; max-width: 108px; }
.face-table-flush td:nth-child(4) input.face-cellpct { min-width: 62px; max-width: 76px; }
.face-table input.face-cellpct { max-width: 104px; }
/* A face with no cells has nothing to say about coverage. Dimmed rather than
emptied, so the column keeps its width and the rows do not jump as the type
changes. */
.face-table td.is-off { opacity: .38; }
.face-table td.is-off input { pointer-events: none; }
/* Cell area is derived from the two controls to its left, so it is set as a
value rather than as another box someone might try to type into. */
.face-table td.face-derived { font-variant-numeric: tabular-nums; color: var(--muted); }
/* ============================================================
LIVE-PREVIEW VIEWPORT PALETTE (--vp-*)
------------------------------------------------------------
The rail previews (orbit viewport, spacecraft cube, station map,
mission timeline) used to be hard-coded #080808 in every theme, so a
black slab sat inside a cream or navy rail. These tokens make them
follow the theme instead.
They are declared on , NOT inside .rail-panel, on purpose: the
light theme re-scopes the rail's surface tokens to dark navy, and the
previews must keep following the PAGE theme rather than inheriting
that override.
Two groups:
- surface (--vp-bg / grid / border / label / foot / glow / shadow)
- scene ink (--vp-orbit / sat / node / ... / ax-x|y|z)
The scene-ink values are read back in JS (getComputedStyle) to colour
the three.js orbit scene and the CSS orbit triad, and are reused by the
legend swatches in index.html — one source of truth, so the legend can
never drift from what is drawn.
Axis convention: X red, Y green, Z blue, desaturated toward
instrumentation rather than primary colours. This is what GMAT, STK and
CAD packages use, so the triad reads correctly to an engineer without
consulting the legend. It applies to BOTH the ECI arrows in the orbit
viewport (vernal equinox is ECI +X, so it takes the X colour) and the
LVLH triad on the spacecraft cube.
Because the axes claim red, the orbit path moved to violet — the one
strong hue left that clashes with neither the RGB triad nor the amber
satellite. The equatorial plane is a light blue, deliberately lighter
than the Z axis so a translucent plane and a solid axis never read as
the same element.
============================================================ */
:root {
--vp-bg: #eaeff5;
--vp-bg-top: #fbfdff;
--vp-grid: rgba(38,64,94,.075);
--vp-vignette: rgba(38,64,94,.13);
--vp-border: #c6d1de;
/* Floating chip over the scene (the playback dock). Near-opaque on purpose:
it has to hold its own over the pale sky AND over the Earth it half covers.
12.6:1 over the canvas, 11.5:1 over the globe. */
--vp-chip-bg: rgba(247,250,253,.92);
--vp-chip-ink: #21313f;
--vp-chip-hover:rgba(33,49,63,.08);
--vp-label: #6a7a8c;
--vp-hint: #93a2b2;
--vp-foot: #55647a;
--vp-ink: #21313f; /* 3-D text sprites */
--vp-halo: rgba(255,255,255,.92); /* halo behind sprites / labels */
--vp-shadow: rgba(30,50,75,.20); /* contact shadow under the cube */
--vp-glow: rgba(120,160,225,.15); /* ambient backglow */
--vp-stars: 0; /* 1 = draw the starfield */
--vp-path: rgba(58,84,120,.55); /* dashed orbit ring (cube view) */
/* scene ink */
--vp-ax-x: #b8453a; /* ECI +X / velocity */
--vp-ax-y: #4f8f3f; /* ECI +Y */
--vp-ax-z: #2d6cad; /* ECI +Z / nadir */
--vp-eq: #5b93d6; /* equatorial plane */
--vp-orbit: #d61b8f; /* hot magenta — pops against the blue planet and clashes with no axis/marker */
--vp-orbit-glow:#ef6fc0;
--vp-sat: #c08a10;
--vp-vernal: #b8453a; /* vernal equinox IS ECI +X */
--vp-node: #3fa8a2; /* line of nodes */
--vp-nodemk: #0f8f8a; /* node markers */
--vp-peri: #b5487f;
--vp-apo: #c9741f;
}
html[data-theme="dark"] {
--vp-bg: #0b0f14;
--vp-bg-top: #131b24;
--vp-grid: rgba(255,255,255,.05);
--vp-vignette: rgba(0,0,0,.45);
--vp-border: #242c35;
--vp-chip-bg: rgba(17,24,32,.86);
--vp-chip-ink: #dbe6f1;
--vp-chip-hover:rgba(219,230,241,.10);
--vp-label: #74818e;
--vp-hint: #616d79;
--vp-foot: #8592a0;
--vp-ink: #dbe6f1;
--vp-halo: rgba(0,0,0,.62);
--vp-shadow: rgba(0,0,0,.6);
--vp-glow: rgba(96,128,196,.17);
--vp-stars: 1;
--vp-path: rgba(205,220,242,.70);
--vp-ax-x: #e8695c;
--vp-ax-y: #6fc25a;
--vp-ax-z: #5a9fe0;
--vp-eq: #7cb4ec;
--vp-orbit: #ff3db5; /* hot magenta ribbon — vivid over the real Earth and the dark sky */
--vp-orbit-glow:#ff8ad4;
--vp-sat: #f5c451;
--vp-vernal: #e8695c;
--vp-node: #5fd8d0;
--vp-nodemk: #38e1d6;
--vp-peri: #f08cc0;
--vp-apo: #ffa85c;
}
/* ===== Right rail (live preview) ===== */
.rail-panel {
background: var(--rail-bg); border-left: 1px solid var(--border);
overflow-y: auto; padding: 20px;
}
.rail-label, .rail-readout-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: var(--faint);
margin-bottom: 13px;
}
.rail-readout-label { margin-top: 22px; margin-bottom: 11px; }
.rail-caption {
font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
color: var(--muted); margin: 13px 0 0; /* flush with the rail label above */
}
/* Shared preview-surface recipe: theme-tinted base, soft top light, faint
graticule and an inset vignette that seats the content in the frame. */
.mission-timeline-box, .gs-map-box, .viewport, .cube-viewer {
background-color: var(--vp-bg);
background-image:
radial-gradient(125% 92% at 50% 0%, var(--vp-bg-top), transparent 62%),
linear-gradient(var(--vp-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--vp-grid) 1px, transparent 1px);
background-size: auto, 26px 26px, 26px 26px;
border: 1px solid var(--vp-border);
box-shadow: inset 0 0 46px var(--vp-vignette);
}
/* Mission timeline (rail, Mission section) */
.mission-timeline-box {
position: relative; min-height: 320px; border-radius: 12px; overflow: hidden;
padding: 40px 16px 20px 34px;
}
.mission-timeline { position: relative; }
.mission-timeline::before {
content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px;
background: linear-gradient(var(--vp-hint), var(--vp-hint) 94%, transparent);
opacity: .6;
}
.mt-row { position: relative; padding-bottom: 24px; }
.mt-row:last-child { padding-bottom: 0; }
.mt-dot {
position: absolute; left: -28px; top: 2px; width: 11px; height: 11px; border-radius: 50%;
background: var(--vp-hint); box-shadow: 0 0 0 3px var(--vp-bg), 0 0 0 4px var(--vp-border);
}
.mt-row.mt-start .mt-dot { background: var(--vp-orbit); box-shadow: 0 0 0 3px var(--vp-bg), 0 0 0 4px var(--vp-orbit); }
.mt-row.mt-doi .mt-dot { background: var(--vp-sat); box-shadow: 0 0 0 3px var(--vp-bg), 0 0 0 4px var(--vp-sat); }
.mt-row.mt-season .mt-dot{ background: var(--vp-nodemk); box-shadow: 0 0 0 3px var(--vp-bg), 0 0 0 4px var(--vp-nodemk); }
.mt-row.mt-end .mt-dot { background: var(--vp-foot); box-shadow: 0 0 0 3px var(--vp-bg), 0 0 0 4px var(--vp-hint); }
.mt-label { font-size: 11px; letter-spacing: .04em; color: var(--vp-ink); font-weight: 700; text-transform: uppercase; }
.mt-date { font-size: 12.5px; color: var(--vp-foot); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mt-date .mt-day { color: var(--vp-hint); margin-left: 8px; }
.mt-empty { color: var(--vp-hint); font-size: 12.5px; text-align: center; padding: 40px 14px; }
/* Ground-station world map (rail, Ground Station section) */
.gs-map-box {
position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2;
}
#gsMapPlot { position: absolute; inset: 0; }
.viewport {
position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1.08;
}
.viewport-label {
position: absolute; top: 13px; left: 15px; z-index: 2;
font-size: 10.5px; letter-spacing: 1px; color: var(--vp-label); pointer-events: none;
}
.viewport-hint {
position: absolute; top: 13px; right: 15px; z-index: 2;
font-size: 9.5px; letter-spacing: .06em; color: var(--vp-hint); pointer-events: none;
}
.viewport-foot {
position: absolute; bottom: 13px; left: 15px; right: 15px; z-index: 2;
font-size: 10px; letter-spacing: .04em; color: var(--vp-foot); pointer-events: none;
}
#orbitViewport { width: 100%; height: 100%; }
#orbitViewport canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
#orbitViewport canvas:active { cursor: grabbing; }
/* Orbit viewport HUD chrome (scoped to the orbit box so the station-map's
shared .viewport-label stays untouched): bracketed title top-left, centred
"data stream" readout chip along the bottom, mission-graphic style. */
#orbitVpBox .viewport-label {
border-left: 2px solid var(--vp-label); border-top: 2px solid var(--vp-label);
padding: 6px 10px 3px; font-weight: 700; letter-spacing: 2.5px;
}
/* ===== Orbit section: hero viewport + input-method toggle ===== */
/* Segmented control choosing between the six elements and the TLE importer.
Sits centred between the hero viewport and the input cards. */
.orbit-mode-row { display: flex; justify-content: center; margin: 18px 0; }
.orbit-mode-toggle {
display: inline-flex; gap: 2px; padding: 3px;
background: var(--btn-bg); border: 1px solid var(--border); border-radius: 9px;
}
.orbit-mode-btn {
font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
color: var(--muted); background: transparent; border: 1px solid transparent;
border-radius: 7px; padding: 7px 16px; cursor: pointer;
}
.orbit-mode-btn:hover { color: var(--ink); }
.orbit-mode-btn.is-active {
background: var(--white); color: var(--red-text); border-color: var(--border-strong);
}
.orbit-mode-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
/* The viewport as the section centrepiece: wide, capped height, legend as a
single horizontal strip beneath it instead of the rail's 2-column grid. */
.orbit-hero { margin-bottom: 4px; }
.orbit-hero .viewport { aspect-ratio: auto; height: min(40vh, 420px); border-radius: 14px; }
.orbit-hero .viewport-legend {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; padding: 8px 12px;
}
/* Legend chips double as visibility toggles for their scene element. */
button.lg-item {
font-family: inherit; background: none; border: 0; cursor: pointer;
padding: 4px 7px; border-radius: 7px; transition: opacity .14s ease, background-color .14s ease;
}
button.lg-item:hover { background: var(--hover-bg); }
button.lg-item:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.lg-item.is-off { opacity: .38; }
.lg-item.is-off .lg-swatch { filter: grayscale(.9); }
.lg-item.is-off { text-decoration: line-through; text-decoration-thickness: 1px; }
.lg-note {
margin-left: auto; font-size: 10px; letter-spacing: .05em; color: var(--faint);
text-transform: uppercase; white-space: nowrap;
}
/* Six classical elements in one compact row under the viewport (3×2 when narrow). */
.elements-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1280px) { .elements-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.elements-strip .field-input.has-unit input { padding-right: 40px; }
/* The six boxes must sit on ONE line. Left to themselves each field is an
independent stack, so a description that wraps to two lines (semi-major
axis) or a derived readout printed under the box (mean altitude) pushed
that column's box off the line the other five share. Fix: the strip owns
four rows (label, description, box, derived readout) and every field
borrows them with subgrid, so the four bands are shared instead of
per-column and no amount of wrapping can stagger the boxes.
Row gap stays 2px, matching the flex gap it replaces, so the internal
spacing is unchanged; the 14px field margin restores the 16px separation
between the two banks when the strip wraps, and the negative margin on the
strip stops that margin adding space under the last bank. */
.elements-strip { column-gap: 16px; row-gap: 2px; margin-bottom: -14px; }
@supports (grid-template-rows: subgrid) {
.elements-strip .field {
display: grid; grid-row: span 4; grid-template-rows: subgrid;
gap: 0; margin-bottom: 14px;
}
}
/* Last band, and the bottom of the card: it does not need the description's
trailing margin. */
.elements-strip #sma_derived { margin-bottom: 0; }
/* TLE mode: the strip becomes a read-only readback of the imported set. */
#orbitElementsCard.is-readonly .field-input input {
background: var(--btn-bg); color: var(--muted); pointer-events: none;
}
#orbitElementsCard.is-readonly .field-input input::-webkit-outer-spin-button,
#orbitElementsCard.is-readonly .field-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#orbitElementsCard .head-meta { color: var(--red-text); font-weight: 700; letter-spacing: .06em; }
/* Environment card: one narrow field, no need to span the full form grid. */
.env-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.viewport-legend {
background: var(--card-bg); border: 1px solid var(--border-2); border-radius: 10px;
padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 13px;
}
.lg-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); }
.lg-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
/* cube viewer in rail */
.cube-viewer {
position: relative; aspect-ratio: 1 / 1.08; border-radius: 12px; overflow: hidden;
}
.cube-viewer-head {
position: absolute; top: 13px; left: 15px; right: 15px; display: flex; justify-content: space-between;
font-size: 10.5px; letter-spacing: 1px; color: var(--vp-label); z-index: 2;
}
.cube-viewer-head span:last-child { color: var(--red-text); font-weight: 700; }
.cube-viewer-foot {
position: absolute; bottom: 13px; left: 15px; font-size: 10.5px; color: var(--vp-foot); z-index: 2;
}
.cube-rotating {
position: absolute; bottom: 13px; right: 15px; display: flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--vp-foot); z-index: 2;
}
.rot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
/* Grabbable: the stage is the camera control for the preview. touch-action
is off so a drag on a phone rotates the body instead of scrolling the
panel out from under it. */
.cube-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 760px;
cursor: grab; touch-action: none; }
.cube-stage.is-grabbing { cursor: grabbing; }
/* The Attitude view's preview is a readout, not an object to turn. */
.cube-stage.no-drag { cursor: default; }
/* soft ambient backglow behind the body + a grounding contact shadow below it
(absolute so they don't disturb the flex centering; painted below .cube) */
.cube-stage::before {
content: ""; position: absolute; width: 56%; height: 56%; border-radius: 50%;
background: radial-gradient(circle, var(--vp-glow), transparent 68%);
filter: blur(5px); z-index: 0; pointer-events: none;
}
.cube-stage::after {
content: ""; position: absolute; bottom: 15%; width: 40%; height: 9%; border-radius: 50%;
background: radial-gradient(ellipse, var(--vp-shadow), transparent 72%);
filter: blur(3px); z-index: 0; pointer-events: none;
}
/* .cube is now a fixed camera (3/4 view). The body orientation and the gentle
cosmetic spin live on .cube-body; the orbit-frame triad stays fixed. */
.cube { position: relative; z-index: 1; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-30deg); }
.cube-body, .orbit-frame { position: absolute; top: 0; left: 0; transform-style: preserve-3d; will-change: transform; }
/* Orbit-frame triad. Previously each rod/tip carried a coloured box-shadow
halo, which read as a neon glow and fought the rest of the UI. The rods are
now matte: a soft neutral drop shadow gives depth without the bloom. */
.axis-rod, .axis-head, .axis-label { position: absolute; top: 50%; left: 50%; pointer-events: none; }
.axis-rod {
border-radius: 2px;
box-shadow: 0 1px 2px var(--vp-shadow), inset 0 0 0 .5px rgba(255,255,255,.18);
}
/* Arrowhead: a zero-size box whose borders draw the triangle, so the shadow has
to come from a filter (box-shadow would outline the box, not the triangle). */
.axis-head { width: 0; height: 0; filter: drop-shadow(0 1px 2px var(--vp-shadow)); }
/* Axis letters sit on a chip rather than relying on a glow. Z points at nadir,
so past the horizon it was blue text on the blue ocean and disappeared; a
halo alone could not carry it. The chip is filled with the preview's own
background, which means it is invisible against the empty sky where X and Y
live and only becomes a plate where a label crosses the planet. */
.axis-label {
margin-left: -10px; margin-top: -10px;
font-size: 12px; font-weight: 700; line-height: 1;
padding: 3px 5px; border-radius: 5px;
background: var(--vp-bg); border: 1px solid var(--vp-border);
}
.orbit-path {
position: absolute; top: 50%; left: 50%; box-sizing: border-box;
border: 2.5px dashed var(--vp-path); border-radius: 50%; pointer-events: none;
}
/* Earth limb in the cube preview. The surface itself is a