/* ============================================================ SSEL REAL Telemetry Dashboard ---------------------------------------------------------- Two themes, light by default. Theme is toggled by setting data-theme="dark" on (persisted in localStorage). The colour palette is driven entirely by CSS custom properties so app code never has to branch on theme. ============================================================ */ :root, :root[data-theme="light"] { /* MSU brand */ --msu-blue: #003e7e; --msu-blue-bright: #1862c4; --msu-blue-deep: #002a57; --msu-blue-soft: #e6efff; --msu-gold: #a87a00; --msu-gold-soft: #fbf2dd; /* Surfaces (light) */ --bg-0: #f5f7fa; /* page */ --bg-1: #ffffff; /* panel */ --bg-2: #f9fbfd; /* raised */ --bg-3: #eef3fa; /* hover */ --bg-sidebar: #fafbfd; /* Lines */ --line: #dbe2ec; --line-soft: #eaeff5; --line-bright: #c3cdda; /* Text */ --text: #0c1b30; --text-dim: #3b4a5e; --text-faint: #6b7a90; --text-muted: #828ea3; /* Status */ --ok: #1d8a3b; --warn: #a85a00; --bad: #b3261e; --info: #0b6fbf; --telemetry-flag: #111827; --telemetry-flag-soft: rgba(17,24,39,.08); /* Limit-band colours */ --limit-rl: #b3261e; /* red-low / red-high */ --limit-yl: #a85a00; /* yellow */ --limit-nom: #1d8a3b; /* nominal */ --shadow-1: 0 1px 0 rgba(10,27,48,.02), 0 1px 2px rgba(10,27,48,.05); --shadow-2: 0 12px 36px rgba(10,27,48,.10); } :root[data-theme="dark"] { --msu-blue: #0a4f9c; --msu-blue-bright: #2b7de9; --msu-blue-deep: #062c5c; --msu-blue-soft: #122947; --msu-gold: #d4a017; --msu-gold-soft: #2a2110; --bg-0: #05080f; --bg-1: #0a1119; --bg-2: #0f1722; --bg-3: #131c2a; --bg-sidebar: #070b13; --line: #1a2434; --line-soft: #131c2a; --line-bright: #243349; --text: #e6edf6; --text-dim: #9aa7bb; --text-faint: #5e6c83; --text-muted: #76859d; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --info: #38bdf8; --telemetry-flag: #ffffff; --telemetry-flag-soft: rgba(255,255,255,.09); --limit-rl: #ef4444; --limit-yl: #f59e0b; --limit-nom: #22c55e; --shadow-1: 0 1px 0 rgba(255,255,255,.02), 0 1px 2px rgba(0,0,0,.6); --shadow-2: 0 4px 16px rgba(0,0,0,.45); } :root { --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sidebar-w-expanded: 220px; --sidebar-w: var(--sidebar-w-expanded); --header-h: 56px; } * , *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--msu-blue-bright); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--msu-blue-bright); outline-offset: 2px; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: fixed; left: 12px; top: 8px; z-index: 1000; padding: 8px 12px; border-radius: 6px; background: var(--bg-1); color: var(--text); box-shadow: var(--shadow-2); transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-0); } ::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 5px; border: 2px solid var(--bg-0); } ::-webkit-scrollbar-thumb:hover { background: var(--msu-blue-bright); } /* ============================================================ APP SHELL ============================================================ */ .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--header-h) 1fr; min-height: 100vh; } /* ----- header ----- */ .app-header { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 22px; background: var(--bg-1); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .icon-btn { width: 34px; height: 34px; min-width: 34px; padding: 0; display: inline-grid; place-items: center; } /* Sidebar toggle: a clean borderless icon button (no awkward cut-off box). It carries the header background and sits above the brand block (which slides under it via a negative margin) so it never shows a two-tone / half-highlighted look that differed between sidebar shown vs hidden. Hover/focus give it a subtle rounded backdrop that never clips. */ .sidebar-toggle.btn, .sidebar-toggle.btn-ghost { position: relative; z-index: 1; border: none; background: var(--bg-1); color: var(--text-dim); border-radius: 8px; } .sidebar-toggle:hover { background: var(--bg-3); border: none; color: var(--text); } .sidebar-toggle:focus-visible { outline: 2px solid var(--msu-blue-bright); outline-offset: 2px; } .hamburger, .hamburger::before, .hamburger::after { display: block; width: 14px; height: 2px; border-radius: 999px; background: currentColor; } .hamburger { position: relative; } .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; } .hamburger::before { top: -5px; } .hamburger::after { top: 5px; } .brand { display: flex; align-items: center; gap: 12px; min-width: calc(var(--sidebar-w-expanded) - 46px); margin-left: -22px; padding: 0 22px; height: var(--header-h); border-right: 1px solid var(--line); background: var(--bg-sidebar); } /* Mission crest sits in the upper-left. The transparent 512 px PNG covers both the 34 px header mark and the larger About hero. */ .brand-mark { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; display: block; box-shadow: 0 0 0 1px var(--line), 0 0 14px rgba(24, 98, 196, .22); background: var(--bg-1); } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text .t1 { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text); } .brand-text .t2 { font-size: 10px; letter-spacing: .14em; color: var(--text-faint); text-transform: uppercase; } .header-title { display: flex; flex-direction: column; line-height: 1.1; } .header-title .t1 { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: .01em; } .header-title .t2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .header-spacer { flex: 1; } .header-refresh { padding: 5px 10px; font-size: 11.5px; flex: none; } .chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; background: var(--bg-2); color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; } .chip strong { color: var(--text); font-weight: 600; letter-spacing: .04em; } .chip-breakdown { color: var(--text-faint); letter-spacing: .04em; } .header-time .time-short, .header-time .time-date { display: none; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); } .chip.ok .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .chip.warn .dot { background: var(--warn); box-shadow: 0 0 6px var(--warn); } .chip.bad .dot { background: var(--bad); box-shadow: 0 0 6px var(--bad); } .chip.info .dot { background: var(--info); box-shadow: 0 0 6px var(--info); } /* ----- sidebar ----- */ .sidebar { grid-column: 1; grid-row: 2; background: var(--bg-sidebar); border-right: 1px solid var(--line); padding: 14px 0 24px; position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav-section { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); padding: 14px 22px 6px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 22px; font-size: 13px; color: var(--text-dim); cursor: pointer; width: 100%; margin: 0; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; border-left: 2px solid transparent; user-select: none; } .nav-link:hover { color: var(--text); background: var(--bg-3); } .nav-link.active { color: var(--text); background: var(--msu-blue-soft); border-left-color: var(--msu-blue-bright); } .nav-link .ico { width: 14px; height: 14px; display: inline-grid; place-items: center; position: relative; opacity: .6; flex: none; } .nav-link .ico::before { color: currentColor; font-family: var(--mono); font-size: 13px; line-height: 1; } .nav-link[data-view="overview"] .ico::before { content: "◉"; } .nav-link[data-view="live"] .ico::before { content: "∿"; font-size: 17px; } .nav-link[data-view="ldt"] .ico::before { content: "▥"; } .nav-link[data-view="orbit"] .ico::before { content: "◎"; font-size: 15px; } .nav-link[data-view="explorer"] .ico::before { content: "⌕"; font-size: 15px; } .nav-link[data-view="about"] .ico::before { content: "i"; font-family: var(--sans); font-weight: 700; } .nav-link[data-view="settings"] .ico::before { content: "⚙"; font-size: 15px; } .nav-link.active .ico { opacity: .95; color: var(--msu-blue-bright); } .sidebar-footer { margin-top: 24px; padding: 14px 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); border-top: 1px solid var(--line); } /* ----- main ----- */ .main { grid-column: 2; grid-row: 2; padding: 22px 28px 56px; max-width: 1500px; width: 100%; min-width: 0; } .main, .main > * { min-width: 0; } /* Collapsed sidebar = a narrow ICON RAIL (still navigable by symbol), not a full hide. The grid column shrinks to the rail width; the header crest/title relax their sidebar-width alignment so the header doesn't show a 220px coloured block next to a 56px rail. */ :root[data-sidebar="hidden"] { --sidebar-w: 56px; } :root[data-sidebar="hidden"] .nav-link { padding: 10px 0; justify-content: center; gap: 0; } :root[data-sidebar="hidden"] .nav-link .ico { opacity: .85; } :root[data-sidebar="hidden"] .nav-link .label, :root[data-sidebar="hidden"] .nav-section, :root[data-sidebar="hidden"] .sidebar-footer { display: none; } :root[data-sidebar="hidden"] .brand { min-width: 0; border-right: none; background: transparent; } /* Backdrop behind the mobile drawer — toggled via JS, phones only. */ .sidebar-scrim { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0, 0, 0, .45); z-index: 35; } .sidebar-scrim.show { display: block; } @media (min-width: 761px) { .sidebar-scrim { display: none !important; } } .view { display: none; } .view.active { display: block; } .view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } .view-head h2 { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -.01em; } .view-head p.desc { color: var(--text-dim); font-size: 13px; margin: 6px 0 0; max-width: 760px; } /* ----- segmented control (sub-tabs) ----- */ .seg { display: inline-flex; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 3px; gap: 2px; } .seg button { background: transparent; border: none; color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; padding: 6px 14px; border-radius: 4px; cursor: pointer; letter-spacing: .02em; } .seg button:hover { color: var(--text); background: var(--bg-3); } .seg button.active { background: var(--msu-blue); color: #fff; box-shadow: 0 0 0 1px var(--msu-blue-deep); } /* ============================================================ PANELS / CARDS ============================================================ */ .panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-1); } .panel + .panel { margin-top: 16px; } .panel-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .panel-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; } .panel-head .meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); letter-spacing: .06em; } .panel-head .spacer { flex: 1; } .panel-body { padding: 16px; } /* ----- metric cards (overview) ----- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .card { container-type: inline-size; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--msu-blue-bright); opacity: .9; } .card.gold::before { background: var(--msu-gold); } .card.warn::before { background: var(--warn); } .card.bad::before { background: var(--bad); } .card.ok::before { background: var(--ok); } .card .label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; } .card .value { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: .01em; line-height: 1.15; max-width: 100%; white-space: normal; word-break: normal; overflow-wrap: anywhere; } .card .value.sm { font-size: 14px; } .card.temp-card .value { font-size: 24px; } .card .value.metric-ok { color: var(--ok); } .card .value.metric-warn { color: var(--warn); } .card .value.metric-bad { color: var(--bad); } .card .sub { margin-top: 4px; font-size: 11px; color: var(--text-faint); overflow-wrap: anywhere; } /* Split (count ↔ latest) overview cards. Left column holds the headline count, right column holds latest / start metadata so the eye lands on the magnitude first. */ .card.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 16px; align-items: start; } .card.split .left { min-width: 0; } .card.split .left .label { margin-bottom: 6px; } .card.split .left .value { font-size: 22px; line-height: 1.1; } .card.split .right { text-align: right; min-width: 0; max-width: 100%; } .card.split .right .row { margin-top: 0; } .card.split .right .row + .row { margin-top: 6px; } .card.split .right .label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1px; } .card.split .right .value { font-size: clamp(10px, 4cqi, 12.5px); font-weight: 600; white-space: nowrap; } .card-time .time-short, .card-time .time-date { display: none; } @container (max-width: 320px) { .card-time .time-full { display: none; } .card-time .time-short { display: inline; } } @container (max-width: 210px) { .card.split { grid-template-columns: 1fr; gap: 8px; } .card.split .right { text-align: left; } .card-time .time-short { display: none; } .card-time .time-date { display: inline; } } .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .quick-link { display: block; background: var(--bg-2); border: 1px solid var(--line); padding: 12px 14px; border-radius: 5px; cursor: pointer; color: var(--text); text-decoration: none; } .quick-link:hover { background: var(--bg-3); border-color: var(--msu-blue-bright); text-decoration: none; } .quick-link .ql-label { font-size: 12.5px; font-weight: 600; } .quick-link .ql-sub { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: .06em; margin-top: 4px; text-transform: uppercase; } /* ============================================================ CONTROLS ============================================================ */ .controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 150px; } .ctrl-wide { min-width: 220px; flex: 1; } .ctrl label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .ctrl select, .ctrl input, .ctrl textarea { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; font-family: var(--sans); font-size: 13px; outline: none; } .ctrl select:focus, .ctrl input:focus, .ctrl textarea:focus { border-color: var(--msu-blue-bright); box-shadow: 0 0 0 2px var(--msu-blue-soft); } .btn { font-family: var(--sans); font-size: 12.5px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--line-bright); background: var(--bg-2); color: var(--text); border-radius: 4px; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--bg-3); border-color: var(--msu-blue-bright); color: var(--text); } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn-primary { background: var(--msu-blue); border-color: var(--msu-blue); color: #fff; } .btn-primary:hover { background: var(--msu-blue-bright); border-color: var(--msu-blue-bright); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text-dim); } .btn-ghost:hover { color: var(--text); border-color: var(--line-bright); } .btn.active { border-color: var(--msu-blue-bright); color: var(--msu-blue-bright); background: color-mix(in srgb, var(--msu-blue-bright) 10%, transparent); } .btn-link { background: transparent; border: none; color: var(--msu-blue-bright); padding: 0; font-family: var(--mono); font-size: 11.5px; cursor: pointer; } .btn-link:hover { text-decoration: underline; } /* expandable advanced-filter section */ .adv { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; } .adv-toggle { background: transparent; border: none; color: var(--text-dim); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 0; } .adv-toggle::before { content: "▸ "; display: inline-block; transition: transform .15s; } .adv-open .adv-toggle::before { transform: rotate(90deg); } .adv-content { display: none; margin-top: 10px; } .adv-open .adv-content { display: block; } .adv-layout { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(320px, 1.35fr); gap: 12px; align-items: start; } .adv-block { min-width: 0; border: 1px solid var(--line); background: var(--bg-2); border-radius: 6px; padding: 12px; } .adv-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .adv-pill { color: var(--text-faint); letter-spacing: 0; text-transform: none; white-space: nowrap; } .adv-filter-grid { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, .8fr) minmax(140px, .7fr); gap: 10px; } .field-picker-tools { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; } .field-picker-tools input.fp-search { background: var(--bg-1); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 8px; font-family: var(--mono); font-size: 12px; min-width: 0; } .field-picker-compact { max-height: 230px; padding: 8px; } .field-picker-compact > input.fp-search { display: none; } @media (max-width: 1100px) { .adv-layout, .adv-filter-grid { grid-template-columns: 1fr; } } /* ----- field picker (multi-select chip list) ----- */ .field-picker { display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 10px; max-height: 260px; overflow: auto; } .field-picker input.fp-search { background: var(--bg-1); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 8px; font-family: var(--mono); font-size: 12px; margin-bottom: 6px; width: 100%; } .field-picker .fp-row { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; padding: 2px 4px; cursor: pointer; border-radius: 3px; } .field-picker .fp-row:hover { background: var(--bg-3); } .field-picker .fp-row .unit { color: var(--text-faint); font-size: 10.5px; margin-left: auto; } .field-picker .fp-row.checked { color: var(--text); } .field-picker .fp-row input { accent-color: var(--msu-blue-bright); } /* Type group headers in the grouped (Mission Overview) field picker. */ .field-picker .fp-group-head { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 8px 4px 2px; margin-top: 2px; border-top: 1px solid var(--line-soft); } .field-picker .fp-group-head:first-child { border-top: 0; margin-top: 0; padding-top: 2px; } .fp-group-head.row-search-hide { display: none !important; } /* Top-N collapse — applies to every multi-select picker on the site (settings + per-mount custom-fields + table columns). Two independent "hidden" classes so the keyword-search filter and the row-count cap can coexist without stomping on each other. */ .fp-row.row-search-hide, .col-row.row-search-hide, .fp-row.row-cap-hide, .col-row.row-cap-hide { display: none !important; } .fp-more { display: block; cursor: pointer; user-select: none; padding: 6px 6px 2px; margin-top: 4px; border-top: 1px dashed var(--line-soft); font-family: var(--mono); font-size: 11px; color: var(--text-faint); text-align: center; } .fp-more:hover { color: var(--text); background: var(--bg-3); } .fp-more.hidden { display: none; } .fp-group[hidden] { display: none; } .fp-group + .fp-group { margin-top: 8px; } .fp-group-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 2px 0 4px; } .fp-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 10px; } .minimal-columns-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .mini-col-picker { min-width: 0; } .mini-col-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--text-faint); margin: 0 0 5px; } /* Columns disclosure panel (table toolbar) */ .cols-panel { border-top: 1px solid var(--line); background: var(--bg-2); padding: 12px 14px; } .cols-panel-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .cols-panel .cols-search { background: var(--bg-1); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px 9px; font-family: var(--mono); font-size: 12px; flex: 1 1 220px; min-width: 0; } .cols-list { display: block; max-height: 320px; overflow: auto; } .col-group { margin-bottom: 10px; } .col-group[hidden] { display: none; } .col-group-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 8px 0 4px; } .col-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; } .cols-list .col-row { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; padding: 2px 4px; cursor: pointer; color: var(--text-dim); border-radius: 3px; } .cols-list .col-row:hover { background: var(--bg-3); } .cols-list .col-row .col-meta { margin-left: auto; color: var(--text-faint); font-size: 10px; } .cols-list .col-row.checked { color: var(--text); } .cols-list .col-row input { accent-color: var(--msu-blue-bright); } /* ============================================================ CHART ============================================================ */ .chart-wrap { position: relative; height: 460px; background: radial-gradient(1200px 400px at 50% -20%, var(--msu-blue-soft), transparent 70%), var(--bg-1); border-radius: 4px; padding: 6px; } .chart-wrap.lg { height: 520px; } .chart-wrap.sm { height: 280px; } /* When showing one Chart.js subplot per field (matches notebook style) we stack them inside a scroll-bounded container. */ .chart-grid { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg-1); border-radius: 4px; max-height: 78vh; overflow-y: auto; min-width: 0; } .chart-grid .subplot { position: relative; /* Default = medium; Settings → Plot size flips data-plot-size on which swaps this var. */ height: var(--subplot-height, 220px); border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; min-width: 0; } .chart-grid .subplot canvas { display: block; width: 100% !important; height: 100% !important; } .chart-grid .subplot:last-child { border-bottom: none; } /* Plot-size presets — applied to */ :root[data-plot-size="small"] { --subplot-height: 160px; } :root[data-plot-size="medium"] { --subplot-height: 220px; } :root[data-plot-size="large"] { --subplot-height: 320px; } /* Large preset also bumps the chart-grid scroll cap so users don't have to scroll through five subplots inside an 80vh viewport. */ :root[data-plot-size="large"] .chart-grid { max-height: 90vh; } .chart-stats { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); padding: 10px 16px; border-top: 1px solid var(--line); } .chart-stats span strong { color: var(--text); font-weight: 600; } /* ============================================================ ORBIT REPLAY ============================================================ */ .orbit-shell { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .orbit-toolbar { display: grid; grid-template-columns: minmax(150px, 200px) minmax(180px, 260px) minmax(210px, 1fr) auto auto auto auto; gap: 10px; align-items: end; } .orbit-toolbar .ctrl { min-width: 0; } .orbit-stage { position: relative; min-height: min(72vh, 720px); height: clamp(460px, 68vh, 760px); overflow: hidden; background: radial-gradient(900px 520px at 72% 18%, rgba(34, 211, 238, .10), transparent 70%), linear-gradient(180deg, #020817, #06101f 58%, #020817); border: 1px solid var(--line); border-radius: 6px; } .orbit-stage:fullscreen, .orbit-stage.orbit-fullscreen { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; background: radial-gradient(900px 520px at 72% 18%, rgba(34, 211, 238, .10), transparent 70%), linear-gradient(180deg, #020817, #06101f 58%, #020817); } .orbit-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .orbit-stage canvas:active { cursor: grabbing; } .orbit-overlay { position: absolute; pointer-events: none; color: #f8fafc; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .orbit-stage-controls { position: absolute; left: 16px; right: 16px; bottom: 86px; z-index: 5; display: none; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 10px; border: 1px solid rgba(148,163,184,.28); border-radius: 8px; background: rgba(2,8,23,.78); box-shadow: 0 10px 30px rgba(0,0,0,.28); pointer-events: auto; transition: opacity .16s ease, transform .16s ease; } .orbit-stage:fullscreen .orbit-stage-controls, .orbit-stage.orbit-fullscreen .orbit-stage-controls { display: flex; opacity: 0; pointer-events: none; transform: translateY(8px); } .orbit-stage:fullscreen:hover .orbit-stage-controls, .orbit-stage.orbit-fullscreen:hover .orbit-stage-controls, .orbit-stage:fullscreen .orbit-stage-controls:focus-within, .orbit-stage.orbit-fullscreen .orbit-stage-controls:focus-within { opacity: 1; pointer-events: auto; transform: translateY(0); } .orbit-stage-controls .orbit-play { width: 38px; height: 38px; } .orbit-stage-controls .orbit-timeline { flex: 1 1 260px; } .orbit-readout { left: 16px; top: 14px; display: grid; gap: 7px; max-width: min(560px, calc(100% - 32px)); } .orbit-titleline { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(248,250,252,.72); } .orbit-time { font-family: var(--mono); font-size: clamp(16px, 2vw, 25px); font-weight: 600; font-variant-numeric: tabular-nums; } .orbit-facts { display: flex; flex-wrap: wrap; gap: 6px; } .orbit-pill { font-family: var(--mono); font-size: 11px; color: rgba(248,250,252,.88); background: rgba(15,23,42,.68); border: 1px solid rgba(148,163,184,.28); border-radius: 999px; padding: 4px 8px; } .orbit-telemetry-strip { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 6px; align-items: stretch; } .orbit-mini { display: grid; grid-template-columns: auto; gap: 1px; min-width: 86px; padding: 5px 8px; border-radius: 6px; background: rgba(15,23,42,.72); border: 1px solid rgba(148,163,184,.26); font-family: var(--mono); } .orbit-mini span { font-size: 9px; color: rgba(248,250,252,.62); text-transform: uppercase; letter-spacing: .05em; } .orbit-mini strong { font-size: 11px; color: rgba(248,250,252,.94); font-weight: 600; white-space: nowrap; } .orbit-mini.interp strong { color: #fbbf24; } .orbit-mini.track strong { color: #cbd5e1; } .orbit-orient { right: 16px; bottom: 14px; display: grid; gap: 6px; justify-items: end; font-family: var(--mono); font-size: 11px; } .orbit-axis-key { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .orbit-axis-key span { background: rgba(15,23,42,.68); border: 1px solid rgba(148,163,184,.28); border-radius: 999px; padding: 3px 7px; } .axis-x { color: #ff6b6b; } .axis-y { color: #4ade80; } .axis-z { color: #60a5fa; } .axis-ecp { color: #22d3ee; } .axis-sun { color: #facc15; } .axis-north { color: #e0f2fe; } .axis-south { color: #fef3c7; } .axis-mag { color: #d946ef; } .orbit-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .orbit-kv { border-top: 1px solid var(--line); padding-top: 9px; min-width: 0; } .orbit-kv .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .orbit-kv .v { margin-top: 3px; font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; } .orbit-empty { min-height: 360px; display: grid; place-items: center; color: var(--text-dim); border: 1px dashed var(--line); border-radius: 6px; } @media (max-width: 900px) { .orbit-toolbar { grid-template-columns: 1fr; } .orbit-stage { height: 540px; min-height: 420px; } .orbit-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .orbit-stage { height: 470px; } .orbit-readout { left: 10px; top: 10px; max-width: calc(100% - 20px); } .orbit-orient { left: 10px; right: 10px; bottom: 10px; justify-items: start; } .orbit-axis-key { justify-content: flex-start; } .orbit-pill { font-size: 10px; } .orbit-telemetry-strip { grid-template-columns: repeat(2, minmax(0, max-content)); } .orbit-mini { min-width: 78px; padding: 4px 6px; } .orbit-details { grid-template-columns: 1fr; } } /* ── Refactored Orbit Replay: public control panel + scientific toggle ─────── */ .orbit-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; } .orbit-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent, #22d3ee); color: #04121b; font-size: 17px; line-height: 1; display: grid; place-items: center; transition: transform .1s ease, filter .1s ease; } .orbit-play:hover { filter: brightness(1.08); } .orbit-play:active { transform: scale(.94); } .orbit-play.active { background: #f59e0b; } .orbit-timeline { flex: 1 1 280px; min-width: 190px; display: flex; flex-direction: column; gap: 3px; } .orbit-timeline input[type="range"] { width: 100%; accent-color: var(--accent, #22d3ee); cursor: pointer; margin: 0; } .orbit-timelabel { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .orbit-speed { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); } .orbit-speed select { padding: 5px 6px; } .orbit-speed-stepper { display: inline-flex; align-items: center; gap: 3px; } .orbit-speed-step { min-width: 32px; height: 30px; padding: 0 7px; border-radius: 5px; font-family: var(--mono); font-size: 11px; line-height: 1; } .orbit-speed-step:disabled { opacity: .42; cursor: not-allowed; } .orbit-sci-btn.active { background: var(--accent, #22d3ee); color: #04121b; border-color: transparent; } .orbit-dash-btn.active { background: var(--accent, #22d3ee); color: #04121b; border-color: transparent; } /* Vectors dropdown: one menu for every optional spacecraft vector / marker. */ .orbit-vectors { position: relative; display: inline-flex; } .orbit-vectors-btn.active { background: var(--accent, #22d3ee); color: #04121b; border-color: transparent; } .orbit-vectors-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px; padding: 8px; border-radius: 8px; background: var(--bg-2, #0b1220); border: 1px solid var(--line, #1f2a3d); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; } .orbit-vectors-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text, #dbe5f1); user-select: none; } .orbit-vectors-item:hover { background: rgba(34, 211, 238, .10); } .orbit-vectors-item input { accent-color: var(--accent, #22d3ee); cursor: pointer; margin: 0; } .orbit-viewmode { display: inline-flex; } .orbit-viewmode .btn { border-radius: 0; } .orbit-viewmode .btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .orbit-viewmode .btn:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-left: -1px; } .orbit-viewmode .btn.active { background: var(--accent, #22d3ee); color: #04121b; border-color: transparent; z-index: 1; } .orbit-overlap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); font-family: var(--mono); } .overlap-title { appearance: none; border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); cursor: default; } .overlap-title[data-overlap-t] { cursor: pointer; } .overlap-title[data-overlap-t]:hover { color: var(--text); } .overlap-empty { font-size: 11px; color: var(--text-dim); } .overlap-chip { appearance: none; display: inline-grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px; max-width: min(100%, 420px); padding: 5px 8px; border: 1px solid rgba(148,163,184,.28); border-radius: 8px; color: var(--text-dim); background: rgba(15,23,42,.42); font-family: inherit; text-align: left; cursor: pointer; } .overlap-chip:hover { border-color: rgba(103,232,249,.5); } .overlap-chip.near { border-color: rgba(34,211,238,.62); background: rgba(8,47,73,.42); } .overlap-chip b { color: var(--text); font-weight: 650; font-size: 11px; } .overlap-chip em { min-width: 20px; padding: 1px 5px; border-radius: 999px; text-align: center; font-style: normal; font-size: 10px; color: #04121b; background: var(--accent, #22d3ee); } .overlap-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .overlap-chip time { grid-column: 1 / -1; color: rgba(203,213,225,.66); font-size: 10px; font-variant-numeric: tabular-nums; } /* SpaceX-launch-style always-on telemetry HUD (SPEED · clock · ALTITUDE) */ .orbit-hud { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 20px 14px; font-family: var(--mono); background: linear-gradient(0deg, rgba(2,8,23,.74), rgba(2,8,23,.10) 62%, transparent); } .orbit-hud .hud-stat:first-child { text-align: left; } .orbit-hud .hud-stat:last-child { display: none; } .orbit-hud .hud-val { font-size: clamp(22px, 3.6vw, 42px); font-weight: 700; line-height: 1; color: #f8fafc; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .orbit-hud .hud-lbl { margin-top: 5px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(248,250,252,.6); } .orbit-hud .hud-mid { text-align: center; padding-bottom: 3px; } .orbit-hud .hud-clock { font-size: clamp(14px, 1.9vw, 20px); color: #67e8f9; font-variant-numeric: tabular-nums; letter-spacing: .05em; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .orbit-hud .hud-sub { margin-top: 2px; font-size: 10px; letter-spacing: .04em; color: rgba(248,250,252,.55); } /* Fighter-jet HUD: curated LIVE science overlaid in the stage corners (sci mode only) — glanceable, glowing, and non-blocking (center stays clear). */ /* Corner offsets come from CSS vars that adapt per size tier / fullscreen, so panels never collide with the bottom band or the corner action button. */ .orbit-shell { --orbit-pad: 14px; --orbit-band: 98px; /* reserve the bottom SPEED/ALT/CLOCK HUD */ --orbit-top: var(--orbit-pad); --orbit-tr-reserve: 290px; /* vertical room the top-right science rail needs */ } .orbit-shell[data-size="compact"] { --orbit-pad: 11px; --orbit-tr-reserve: 200px; } .orbit-shell[data-size="tight"] { --orbit-pad: 9px; } .orbit-stage:fullscreen, .orbit-stage.orbit-fullscreen { --orbit-band: 164px; /* also clear the hover controls bar */ --orbit-top: calc(var(--orbit-pad) + 48px); /* clear the corner button */ } /* Same-side panels live in one flex column (rail) → they auto-stack and can never overlap each other; rails are anchored, not the panels. */ .orbit-fhud-rail { position: absolute; z-index: 3; display: none; pointer-events: none; flex-direction: column; gap: 8px; max-width: min(245px, 42%); } .orbit-shell[data-sci="on"] .orbit-fhud-rail { display: flex; } .orbit-fhud-rail-tr { top: var(--orbit-top); right: var(--orbit-pad); align-items: flex-end; } .orbit-fhud-rail-bl { left: var(--orbit-pad); bottom: var(--orbit-band); } .orbit-fhud-rail-br { right: var(--orbit-pad); bottom: var(--orbit-band); align-items: flex-end; } .orbit-fhud { width: 100%; pointer-events: none; font-family: var(--mono); min-width: 152px; background: linear-gradient(180deg, rgba(2,14,22,.30), rgba(2,14,22,.10)); border: 1px solid rgba(103,232,249,.34); border-radius: 4px; padding: 7px 10px; box-shadow: inset 0 0 18px rgba(34,211,238,.08), 0 0 18px rgba(34,211,238,.10); } /* Size tiers drop the lowest-priority panels before anything can collide. */ .orbit-shell[data-size="compact"] .orbit-fhud-rail-br { display: none; } .orbit-shell[data-size="compact"] .orbit-fhud { padding: 5px 8px; } .orbit-shell[data-size="tight"] .orbit-fhud-rail { display: none !important; } /* Live-pass dashboard owns the bottom-right corner when it is present. */ .orbit-shell[data-livedash="on"] .orbit-fhud-rail-br { display: none; } .orbit-shell[data-livedash="on"][data-size="compact"] .orbit-fhud-state { display: none; } .orbit-fhud .fhud-h { font-size: 8.5px; letter-spacing: .18em; color: rgba(103,232,249,.9); margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid rgba(103,232,249,.22); } .orbit-fhud .fhud-row { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; line-height: 1.55; } .orbit-fhud .fhud-row span { color: rgba(148,200,220,.66); letter-spacing: .05em; } .orbit-fhud .fhud-row b { color: #d6f5ff; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 7px rgba(103,232,249,.5); } .orbit-shell[data-telemetry="track"] .orbit-hud .hud-val, .orbit-shell[data-telemetry="track"] .orbit-hud .hud-clock, .orbit-shell[data-telemetry="track"] .orbit-fhud .fhud-h, .orbit-shell[data-telemetry="track"] .orbit-fhud .fhud-row b, .orbit-shell[data-telemetry="track"] .orbit-now-state, .orbit-shell[data-telemetry="track"] .orbit-science .orbit-kv .v { color: #94a3b8; text-shadow: none; } .orbit-shell[data-telemetry="track"] .orbit-fhud, .orbit-shell[data-telemetry="track"] .orbit-science { border-color: rgba(148,163,184,.22); } .orbit-advanced { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; } .orbit-advanced .ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .orbit-advanced .ctrl label { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .orbit-advanced .orbit-jump { flex-direction: row; align-items: end; gap: 6px; flex-wrap: wrap; } .orbit-now { left: 18px; top: 16px; display: grid; gap: 4px; max-width: min(560px, calc(100% - 36px)); } .orbit-shell[data-sci="on"] .orbit-now { left: var(--orbit-pad); top: var(--orbit-pad); transform: none; width: auto; min-width: 0; max-width: min(46%, 420px); /* never reach the top-right rail */ justify-items: start; text-align: left; } .orbit-shell[data-size="tight"] .orbit-now { max-width: calc(100% - 2 * var(--orbit-pad)); } /* In fullscreen the corner action is present top-right; keep the readout clear of it. */ .orbit-shell[data-fullscreen="on"][data-size="tight"] .orbit-now { max-width: calc(100% - 2 * var(--orbit-pad) - 400px); } .orbit-now-time { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(248,250,252,.74); } .orbit-now-loc { font-size: clamp(18px, 2.4vw, 28px); font-weight: 650; line-height: 1.12; } .orbit-now-loc strong { color: #67e8f9; } .orbit-now-where { font-size: 15px; color: rgba(248,250,252,.84); text-transform: capitalize; } .orbit-now-state { margin-top: 4px; justify-self: start; font-family: var(--mono); font-size: 11px; color: rgba(248,250,252,.78); background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.24); border-radius: 999px; padding: 3px 9px; } .orbit-thermal { left: var(--orbit-pad); bottom: var(--orbit-band); display: flex; flex-wrap: wrap; gap: 6px; max-width: min(620px, calc(100% - 36px)); font-family: var(--mono); align-items: center; } .orbit-thermal[hidden] { display: none; } .orbit-shell[data-sci="on"] .orbit-thermal { bottom: calc(var(--orbit-band) + 128px); max-width: min(560px, 44%); } .thermal-title { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(248,250,252,.62); } .thermal-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(148,163,184,.28); background: rgba(15,23,42,.70); box-shadow: 0 1px 10px rgba(0,0,0,.22); } .thermal-pill b { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(203,213,225,.72); } .thermal-pill em { font-style: normal; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .thermal-pill.temp-ok em { color: #22c55e; } .thermal-pill.temp-warn em { color: #f59e0b; } .thermal-pill.temp-bad em { color: #ef4444; } .orbit-live-dash { right: var(--orbit-pad); bottom: var(--orbit-band); top: auto; left: auto; width: min(410px, 44%); max-height: min(58vh, 580px); overflow: auto; padding: 10px; border: 1px solid rgba(103,232,249,.34); border-radius: 6px; background: rgba(2,14,22,.72); box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 18px rgba(34,211,238,.07); font-family: var(--mono); pointer-events: auto; scrollbar-width: thin; } .orbit-live-dash[hidden] { display: none; } .orbit-shell[data-sci="on"] .orbit-live-dash { left: auto; right: var(--orbit-pad); top: auto; bottom: var(--orbit-band); } /* When BOTH the science rails and the live power/thermal dashboard are shown, dock the dashboard BELOW the top-right science rail so it can never cover the magnetic / spacecraft readouts. It fills the lower-right and scrolls internally; the reserved height shrinks per size tier, and the 'tight' tier (rails hidden) lets the dashboard reclaim the full stage height. */ .orbit-shell[data-sci="on"][data-livedash="on"] .orbit-live-dash { top: calc(var(--orbit-top) + var(--orbit-tr-reserve)); bottom: var(--orbit-band); max-height: none; } .orbit-shell[data-sci="on"][data-livedash="on"][data-size="tight"] .orbit-live-dash { top: var(--orbit-top); } .live-dash-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: rgba(103,232,249,.9); font-size: 9px; letter-spacing: 0; text-transform: uppercase; } .live-dash-head time { color: rgba(226,232,240,.72); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; } .live-dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; } .live-dash-metric, .live-dash-wide { min-width: 0; padding: 6px 7px; border: 1px solid rgba(148,163,184,.24); border-radius: 5px; background: rgba(15,23,42,.55); } .live-dash-metric b, .live-dash-wide b { display: block; color: rgba(203,213,225,.62); font-size: 8.5px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; } .live-dash-metric span, .live-dash-wide span { display: block; margin-top: 3px; color: #e2e8f0; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .live-dash-metric.ok span { color: #22c55e; } .live-dash-metric.warn span { color: #f59e0b; } .live-dash-metric.bad span { color: #ef4444; } .live-dash-metric.ok { border-color: rgba(34,197,94,.28); } .live-dash-metric.warn { border-color: rgba(245,158,11,.38); } .live-dash-metric.bad { border-color: rgba(239,68,68,.46); } .live-dash-wide { grid-column: span 3; } .orbit-hint { right: 14px; top: 12px; font-size: 10.5px; color: rgba(248,250,252,.5); font-family: var(--mono); } .orbit-fs-tools { position: absolute; right: 16px; top: 16px; z-index: 6; display: none; align-items: center; gap: 8px; pointer-events: auto; } .orbit-fs-tools > .btn, .orbit-fs-tools .orbit-fs-vectors-btn { display: inline-flex; min-width: 42px; height: 38px; padding: 0 10px; justify-content: center; align-items: center; background: rgba(2,8,23,.72); border-color: rgba(103,232,249,.36); box-shadow: 0 8px 24px rgba(0,0,0,.22); } .orbit-fs-viewmode { align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.22); } .orbit-fs-viewmode .btn { min-height: 38px; padding: 0 10px; background: rgba(2,8,23,.72); border-color: rgba(103,232,249,.36); } .orbit-fs-vectors { position: relative; } .orbit-fs-vectors-menu { left: auto; right: 0; top: calc(100% + 6px); } .orbit-fs-anomaly[hidden] { display: none !important; } .orbit-stage:fullscreen .orbit-fs-tools, .orbit-stage.orbit-fullscreen .orbit-fs-tools { display: inline-flex; } .orbit-stage:fullscreen .orbit-hint, .orbit-stage.orbit-fullscreen .orbit-hint { display: none; } /* (fhud panel positions are handled by the corner rails + CSS vars above) */ .orbit-fs-sci.active, .orbit-fs-dash.active, .orbit-fs-vectors-btn.active, .orbit-fs-anomaly.active { background: var(--accent, #22d3ee); color: #04121b; border-color: transparent; } /* Axis legend is visible only in scientific mode. */ .orbit-orient { right: 14px; bottom: 14px; display: none; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 64%; } .orbit-shell[data-sci="on"] .orbit-orient { display: none !important; } .orbit-orient span { font-family: var(--mono); font-size: 10.5px; background: rgba(15,23,42,.7); border: 1px solid rgba(148,163,184,.28); border-radius: 999px; padding: 3px 7px; } .orbit-shell[data-axis="unknown"] .orbit-orient span { color: #94a3b8; } /* Full science sections DOCKED below the replay window (always available when sci mode is on; never covers the globe). */ .orbit-science { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 16px; margin-top: 4px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; } .orbit-science[hidden] { display: none; } /* respect the toggle (overrides display:grid) */ .orbit-sci-group { min-width: 0; } .orbit-sci-h { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent, #22d3ee); border-bottom: 1px solid rgba(148,163,184,.32); padding-bottom: 5px; margin-bottom: 6px; } .orbit-science .orbit-kv { border-top-color: rgba(148,163,184,.24); } .orbit-science .orbit-kv .k { color: var(--text-faint); } .orbit-science .orbit-kv .v { color: var(--text); } @media (max-width: 900px) { .orbit-timeline { flex-basis: 100%; order: 5; } .orbit-shell[data-sci="on"] .orbit-now { top: 16px; left: 18px; transform: none; width: auto; min-width: 0; max-width: calc(100% - 36px); } .orbit-live-dash, .orbit-shell[data-sci="on"] .orbit-live-dash { top: auto; right: 18px; bottom: 118px; width: min(360px, calc(100% - 36px)); max-height: min(52vh, 520px); } .orbit-shell[data-sci="on"] .orbit-thermal { left: 18px; bottom: 248px; max-width: min(360px, calc(100% - 36px)); } .orbit-science { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 1100px) { .chip-breakdown { display: none; } } @media (max-width: 560px) { .orbit-stage:fullscreen, .orbit-stage.orbit-fullscreen { min-height: 100dvh; height: 100dvh; } .orbit-stage-controls { left: 10px; right: 10px; bottom: 78px; flex-wrap: wrap; } .orbit-stage-controls .orbit-timeline { flex-basis: calc(100% - 58px); min-width: 0; } .orbit-now { left: 12px; top: 12px; max-width: calc(100% - 24px); } .orbit-thermal { left: 12px; right: 12px; bottom: 86px; max-width: none; } .orbit-live-dash, .orbit-shell[data-sci="on"] .orbit-live-dash { left: 12px; right: 12px; bottom: 118px; width: auto; max-height: 42vh; } .orbit-shell[data-sci="on"] .orbit-thermal { left: 12px; right: 12px; bottom: calc(118px + 42vh + 10px); max-width: none; } .live-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .live-dash-wide { grid-column: span 2; } .thermal-title { width: 100%; } .orbit-shell[data-sci="on"] .orbit-now { left: 12px; top: 12px; max-width: calc(100% - 24px); justify-items: start; text-align: left; } .orbit-shell[data-sci="on"] .orbit-fhud-rail { display: none; } .orbit-fhud .fhud-h { font-size: 7.5px; letter-spacing: .12em; } .orbit-fhud .fhud-row { gap: 8px; font-size: 9.5px; } .orbit-overlap { align-items: stretch; } .overlap-title { width: 100%; } .overlap-chip { width: 100%; border-radius: 7px; } .orbit-shell[data-sci="on"] .orbit-orient { display: none; } .orbit-science { grid-template-columns: 1fr; } } /* ============================================================ TABLE ============================================================ */ .table-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); border-top-left-radius: 6px; border-top-right-radius: 6px; } .table-info { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); min-width: min(100%, 280px); } .table-info strong { color: var(--text); } .table-stat { display: inline-block; margin-top: 2px; } .table-search-ctrl { min-width: min(280px, 100%); flex: 1 1 280px; } .table-search-ctrl input { width: 100%; } .table-scroll { max-height: 600px; overflow: auto; } table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; } th { position: sticky; top: 0; z-index: 2; text-align: left; background: var(--bg-2); color: var(--text); font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid var(--line-bright); white-space: nowrap; } td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; } tr:hover td { background: var(--msu-blue-soft); } tr.telemetry-flagged td { background: var(--telemetry-flag-soft); } tr.telemetry-flagged td:first-child { box-shadow: inset 3px 0 0 var(--telemetry-flag); } tr.telemetry-flagged:hover td, .table-scroll tr.telemetry-flagged:hover td.freeze { background: var(--telemetry-flag-soft); } td.num { text-align: right; font-variant-numeric: tabular-nums; } td.ts { color: var(--text-dim); } td.warn { color: var(--warn); } td.bad { color: var(--bad); } td.ok { color: var(--ok); } td.expandable { cursor: pointer; } td.expandable:hover { background: var(--msu-blue-soft); } /* Onboard time cells flip integer ↔ estimated UTC on click (see table.js). */ td.time-cell { cursor: pointer; } td.time-cell:hover { background: var(--msu-blue-soft); } button.time-cell, .table-sort-btn, .cell-expand { appearance: none; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } button.time-cell { text-decoration: underline dotted var(--line-soft); text-underline-offset: 3px; } .table-sort-btn { text-transform: inherit; letter-spacing: inherit; } .cell-expand { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Click-to-sort column headers (asc ▲ / desc ▼ / off) */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--accent); } th.sorted { color: var(--accent); } /* Frozen first (timestamp) column — spreadsheet-style freeze pane: stays put while scrolling horizontally through wide field sets. */ .table-scroll th.freeze, .table-scroll td.freeze { position: sticky; left: 0; background: var(--bg-2); border-right: 1px solid var(--line-bright); } .table-scroll th.freeze { z-index: 3; } /* top-left corner: above both sticky axes */ .table-scroll td.freeze { z-index: 1; } .table-scroll tr:hover td.freeze { background: var(--msu-blue-soft); } .table-scroll tr.telemetry-flagged td.freeze, .table-scroll tr.telemetry-flagged:hover td.freeze { background: var(--telemetry-flag-soft); } /* ----- pagination ----- */ .pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg-2); font-family: var(--mono); font-size: 11px; color: var(--text-dim); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .pagination .pages { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .pagination button { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border: 1px solid var(--line-bright); background: var(--bg-1); color: var(--text-dim); border-radius: 3px; cursor: pointer; } .pagination button:hover { color: var(--text); border-color: var(--msu-blue-bright); } .pagination button:disabled { opacity: .3; cursor: not-allowed; } .pagination button.active { background: var(--msu-blue); color: #fff; border-color: var(--msu-blue); } /* ============================================================ STATES (loader/empty/error/unavailable) ============================================================ */ .loader { padding: 60px 20px; text-align: center; color: var(--text-faint); } .loader-bar { max-width: 320px; margin: 14px auto 0; height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; } .loader-fill { height: 100%; background: linear-gradient(90deg, var(--msu-blue), var(--msu-blue-bright)); width: 0; transition: width .2s; } .empty { padding: 40px 20px; text-align: center; color: var(--text-faint); font-family: var(--mono); font-size: 12px; } .unavailable { padding: 24px; border: 1px dashed var(--line-bright); border-radius: 6px; background: var(--bg-1); color: var(--text-dim); } .unavailable h4 { margin: 0 0 6px; font-size: 13px; color: var(--text); font-weight: 600; } .unavailable code { font-family: var(--mono); font-size: 11.5px; background: var(--bg-2); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line); } .error { padding: 14px 16px; background: var(--msu-gold-soft); border: 1px solid var(--warn); color: var(--bad); border-radius: 5px; margin-bottom: 16px; font-size: 13px; } .error code { font-family: var(--mono); font-size: 11.5px; background: var(--bg-1); padding: 1px 5px; border-radius: 3px; } /* ============================================================ MODAL ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10,27,48,.45); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } :root[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.6); } .modal { background: var(--bg-1); border: 1px solid var(--line-bright); border-radius: 6px; max-width: 760px; width: 100%; max-height: 80vh; overflow: auto; padding: 20px 22px; box-shadow: var(--shadow-2); } .modal h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .modal pre { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--bg-0); border: 1px solid var(--line); border-radius: 4px; padding: 12px; white-space: pre-wrap; word-break: break-all; margin: 0 0 14px; max-height: 50vh; overflow: auto; } /* ============================================================ ABOUT / DOCS ============================================================ */ .docs h3 { margin: 22px 0 8px; font-size: 14px; } .docs p { color: var(--text-dim); max-width: 780px; } .docs ul { color: var(--text-dim); max-width: 780px; padding-left: 20px; } .docs li { margin-bottom: 4px; } .docs code { font-family: var(--mono); font-size: 12px; background: var(--bg-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 3px; } /* ============================================================ SETTINGS ============================================================ */ .settings-grid { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; } .settings-grid .label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding-top: 8px; } .theme-picker { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px; } .theme-picker button { background: transparent; border: none; color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; padding: 7px 16px; border-radius: 4px; cursor: pointer; } .theme-picker button.active { background: var(--msu-blue); color: #fff; } .settings-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .settings-controls .ctrl { min-width: 150px; } .settings-controls input[type="number"] { max-width: 150px; } /* Range-slider settings (opacity / dot size) — show the live value next to the label so the user has direct feedback. */ .slider-ctrl { min-width: 200px; } .slider-ctrl label { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .slider-ctrl .slider-val { font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--bg-2); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); } .slider-ctrl input[type="range"] { width: 100%; accent-color: var(--msu-blue-bright); } .check-ctrl { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; color: var(--text-dim); font-size: 12.5px; } .check-ctrl input { accent-color: var(--msu-blue-bright); } /* ============================================================ ABOUT — mission hero, spec tables, partners, refs ============================================================ */ .mission-hero { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: start; } .mission-hero-img img { width: 100%; max-width: 160px; height: auto; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 0 20px rgba(24, 98, 196, .18); background: var(--bg-1); display: block; } .mission-hero-text .hero-title { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 8px; color: var(--text); } .mission-hero-text .hero-sub { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); max-width: 720px; } .mission-meta-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .mission-meta-chips .chip { background: var(--bg-2); } @media (max-width: 720px) { .mission-hero { grid-template-columns: 1fr; text-align: center; } .mission-hero-img img { margin: 0 auto; max-width: 140px; } } /* Key/value spec tables */ .kv-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; } .kv-table th, .kv-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: normal; } .kv-table th { width: 36%; background: transparent; font-weight: 500; color: var(--text-faint); text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: 11px; position: static; } .kv-table td { color: var(--text); } .kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom: none; } .track-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* Partner cards */ .partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .partner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-2); color: var(--text); text-decoration: none; } .partner:hover { background: var(--bg-3); border-color: var(--msu-blue-bright); text-decoration: none; } .partner .partner-short { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--msu-blue-bright); } .partner .partner-name { font-size: 13px; font-weight: 600; } .ref-list { list-style: none; padding: 0; margin: 0; } .ref-list li { padding: 8px 0; border-bottom: 1px dashed var(--line-soft); } .ref-list li:last-child { border-bottom: none; } .ref-list a { font-family: var(--sans); font-size: 13px; font-weight: 500; } /* ============================================================ UTIL ============================================================ */ .hide { display: none !important; } .mono { font-family: var(--mono); } .dim { color: var(--text-dim); } .faint{ color: var(--text-faint); } .muted{ color: var(--text-muted); } .grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .grid-2 > * { min-width: 0; } .grid-row-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .grid-row-2 > * { min-width: 0; } @media (max-width: 1100px) { .grid-row-2 { grid-template-columns: 1fr; } } @media (max-width: 900px) { .main { padding: 18px 16px 44px; } .controls .ctrl, .settings-controls .ctrl { min-width: min(170px, 100%); flex: 1 1 170px; } .ctrl-wide { min-width: min(220px, 100%); } .settings-grid { grid-template-columns: 1fr; gap: 8px; } .settings-grid .label { padding-top: 14px; } } @media (max-width: 760px) { /* Phone layout: single column; the sidebar becomes an off-canvas drawer that slides in over the content when the header button is tapped. When open (data-sidebar="shown") it shows full labels — the desktop icon-rail rules only apply while closed/off-screen. */ .app { grid-template-columns: minmax(0, 1fr); } .main { grid-column: 1; } .sidebar { position: fixed; top: var(--header-h); left: 0; width: min(80vw, 260px); height: calc(100vh - var(--header-h)); transform: translateX(-100%); transition: transform .22s ease; z-index: 40; box-shadow: var(--shadow-2); } :root[data-sidebar="shown"] .sidebar { transform: translateX(0); } .app-header { gap: 6px; padding: 0 12px; } .brand { min-width: 0; margin-left: 0; padding: 0; border-right: none; background: transparent; } .brand-text { display: none; } /* Drop the page-title block on phones; the crest keeps identity and frees header room for the chips. */ .header-title { display: none; } .header-refresh { padding: 4px 8px; font-size: 11px; } /* Phone header chips: drop the verbose "Rows loaded"/"Latest" labels and show just the values in the compact time form so the row count and the beacon timestamp stay fully readable on a narrow header. */ .chips { gap: 6px; min-width: 0; flex-shrink: 1; flex-wrap: nowrap; } .chip-label { display: none; } .chip-breakdown { display: none; } .chips .chip { font-size: 10px; padding: 3px 8px; white-space: nowrap; } .header-time .time-full { display: none; } .header-time .time-short { display: inline; } .header-time .time-date { display: none; } } /* ============================================================ HEX-DUMP INSPECTOR (Data Explorer / any raw-hex cell) ============================================================ */ .modal.modal-wide { max-width: min(900px, 95vw); } [data-modal-content] { white-space: pre-wrap; word-break: break-all; font-family: var(--mono); font-size: 12px; max-height: 60vh; overflow: auto; margin: 0; } [data-modal-content].hexdump { white-space: pre; word-break: normal; line-height: 1.55; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 10px; } .hexdump .hd-off { color: var(--text-faint); } .hexdump .hd-asc { color: var(--text-dim); } .hexdump .hl-sync { color: #fff; background: var(--msu-blue-bright); border-radius: 2px; } .hexdump .hl-type { background: rgba(245, 158, 11, .40); border-radius: 2px; } .hexdump .hl-wrap { background: rgba(34, 197, 94, .35); border-radius: 2px; } .hexdump-legend { display: flex; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; } .hexdump-legend span { padding: 1px 6px; border-radius: 3px; } .hexdump-legend .hl-sync { color: #fff; background: var(--msu-blue-bright); } .hexdump-legend .hl-type { background: rgba(245, 158, 11, .40); } .hexdump-legend .hl-wrap { background: rgba(34, 197, 94, .35); } /* ============================================================ OVERVIEW: data-freshness cards + live UTC reference clock In the Mission-status panel — "how recently did each telemetry type arrive", green within 6 h / orange otherwise. ============================================================ */ .utc-now { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .freshness-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .fresh-card { border: 1px solid var(--line); border-left: 3px solid var(--line-bright); border-radius: 10px; background: var(--bg-2); padding: 10px 14px; } .fresh-card .fl { font-size: 11px; color: var(--text-faint); letter-spacing: .02em; } .fresh-card .fv { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; } .fresh-card .fs { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; } .fresh-card.ok { border-left-color: var(--ok); } .fresh-card.ok .fv { color: var(--ok); } .fresh-card.warn { border-left-color: var(--warn); } .fresh-card.warn .fv { color: var(--warn); } .fresh-card.bad { border-left-color: var(--bad); } .fresh-card.bad .fv { color: var(--bad); } @media (max-width: 560px) { .freshness-row { grid-template-columns: 1fr; } } /* Data & sync sources table — scroll instead of clipping at the edge */ .sources-wrap { overflow-x: auto; max-width: 100%; } .sources-table { min-width: 640px; } .source-actions { white-space: nowrap; font-size: 12px; } .source-actions a { color: var(--msu-blue-bright); text-decoration: none; margin-right: 10px; } .source-actions a:hover { text-decoration: underline; } /* Dashboard Customize panel (Overview header) */ .dash-customize { flex: none; } .dash-customize .btn.active { border-color: var(--msu-blue-bright); color: var(--msu-blue-bright); background: color-mix(in srgb, var(--msu-blue-bright) 9%, var(--bg-1)); } .dash-pop { margin: -2px 0 16px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-1); padding: 12px; } .dash-pop[hidden] { display: none; } .dash-custom-grid { display: grid; grid-template-columns: minmax(210px, .9fr) minmax(210px, .9fr) repeat(2, minmax(260px, 1.2fr)); gap: 12px; align-items: start; } .dash-custom-section { min-width: 0; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-2); padding: 8px; } .dash-pop-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding: 4px 8px 6px; } .dash-add-list { display: grid; gap: 7px; } .dash-add-tile { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid var(--line-soft); background: var(--bg-1); color: var(--text); border-radius: 8px; padding: 8px; text-align: left; cursor: pointer; } .dash-add-tile:hover { border-color: var(--msu-blue-bright); background: var(--bg-3); } .dash-add-tile.added { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--bg-1)); } .dash-add-plus { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; color: var(--msu-blue-bright); background: color-mix(in srgb, var(--msu-blue-bright) 10%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--msu-blue-bright) 35%, var(--line-soft)); } .dash-add-tile.added .dash-add-plus { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--bg-2)); border-color: var(--ok); } .dash-add-tile b { display: block; font-size: 13px; line-height: 1.25; } .dash-add-tile em, .dash-empty-note { display: block; margin-top: 2px; color: var(--text-faint); font-style: normal; font-size: 11.5px; line-height: 1.3; } .dash-empty-note { padding: 8px; } .dash-custom-target { position: relative; outline: 1px dashed color-mix(in srgb, var(--msu-blue-bright) 60%, var(--line)); outline-offset: 4px; } .dash-hide-btn { position: absolute; top: 6px; right: 6px; z-index: 7; width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 12%, var(--bg-1)); color: var(--bad); font-weight: 800; line-height: 1; cursor: pointer; box-shadow: var(--shadow-1); } .dash-hide-btn:hover { background: color-mix(in srgb, var(--bad) 20%, var(--bg-1)); } .dash-pop-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); } .dash-pop-row:hover { background: var(--bg-3); } .dash-pop-row input { accent-color: var(--msu-blue-bright); width: 15px; height: 15px; flex: none; } .dash-pop-divider { height: 1px; background: var(--line-soft); margin: 7px 4px; } .dash-pop-add { width: 100%; justify-content: center; font-size: 12.5px; margin-top: 2px; } .dash-switch-row, .dash-chip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--text); font-size: 13px; cursor: pointer; } .dash-switch-row:hover, .dash-chip-row:hover { background: var(--bg-3); } .dash-switch-row input, .dash-chip-row input { position: absolute; opacity: 0; pointer-events: none; } .dash-switch { position: relative; flex: none; width: 34px; height: 18px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-bright); } .dash-switch::after { content: ""; position: absolute; width: 14px; height: 14px; left: 1px; top: 1px; border-radius: 50%; background: var(--text-faint); transition: transform .16s ease, background .16s ease; } .dash-switch-row input:checked + .dash-switch { background: color-mix(in srgb, var(--ok) 22%, var(--bg-3)); border-color: var(--ok); } .dash-switch-row input:checked + .dash-switch::after { transform: translateX(16px); background: var(--ok); } .dash-chip-row { justify-content: flex-start; border: 1px solid transparent; } .dash-chip-row input:checked + span { color: var(--msu-blue-bright); font-weight: 600; } .dash-chip-row:has(input:checked) { border-color: var(--msu-blue-bright); background: color-mix(in srgb, var(--msu-blue-bright) 9%, var(--bg-2)); } .dash-field-picker { max-height: 300px; overflow: auto; } @media (max-width: 1200px) { .dash-custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .dash-custom-grid { grid-template-columns: 1fr; } } /* Performance / diagnostics line (Data & sync) */ .perf-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); margin: 0 0 10px; } .perf-line .pk { color: var(--text-faint); } .perf-line .pv { color: var(--text); font-weight: 600; } /* Time-axis zoom: floating reset chip inside a subplot */ .zoom-reset { position: absolute; top: 6px; right: 6px; z-index: 3; font-family: var(--sans); font-size: 10.5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-bright); background: var(--bg-1); color: var(--text-dim); cursor: pointer; box-shadow: var(--shadow-1); } .zoom-reset:hover { color: var(--text); border-color: var(--msu-blue-bright); } /* Pinned plots on the Overview */ .pinned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .pinned-plot { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column; } .pinned-plot-wide { grid-column: span 2; } .pp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); } .pp-title { display: flex; flex-direction: column; min-width: 0; } .pp-field { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-src { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-remove { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text-faint); cursor: pointer; font-size: 12px; line-height: 1; } .pp-remove:hover { color: var(--bad); border-color: var(--bad); } .pp-canvas-wrap { position: relative; height: 210px; padding: 6px; } .pp-canvas-wrap canvas { width: 100% !important; height: 100% !important; } .pp-multi-plot .subplot { height: 100%; border-bottom: 0; padding: 0; } .pp-empty { display: grid; place-items: center; height: 100%; color: var(--text-faint); font-size: 12px; } @media (max-width: 760px) { .pinned-plot-wide { grid-column: auto; } } /* "loading…" placeholder on cards whose source is still streaming in */ .loading-dots { color: var(--text-faint); font-weight: 500; animation: ssel-pulse 1.3s ease-in-out infinite; } @keyframes ssel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } /* ============================================================ SETTINGS (grouped, collapsible) ============================================================ */ .settings-stack { display: flex; flex-direction: column; gap: 14px; max-width: 900px; } .settings-group { padding: 0; } .settings-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; user-select: none; } .settings-summary::-webkit-details-marker { display: none; } .settings-summary:hover h3 { color: var(--msu-blue-bright); } .settings-summary h3 { margin: 0; font-size: 14px; transition: color .15s ease; } .settings-summary .set-sub { font-size: 12px; color: var(--text-faint); } .settings-summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg); transition: transform .18s ease; } details.settings-group[open] > .settings-summary::after { transform: rotate(-135deg); } details.settings-group[open] > .settings-summary { border-bottom: 1px solid var(--line-soft); } .set-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .panel-body > .set-row:first-child { padding-top: 2px; } .panel-body > .set-row:last-child { border-bottom: none; padding-bottom: 2px; } .set-row-col { flex-direction: column; gap: 10px; } .set-label { flex: 1 1 auto; min-width: 0; } .set-name { font-weight: 600; font-size: 13px; color: var(--text); } .set-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; line-height: 1.45; } .set-checks { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .set-tunes { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } .set-row-col .set-tunes, .set-row-col .minimal-columns-settings, .set-row-col .field-picker { width: 100%; } @media (max-width: 680px) { .set-row { flex-direction: column; gap: 10px; } .set-checks, .set-tunes { width: 100%; } } /* Orbit Replay — clickable source frame link + full-frame / raw-hex modal */ .orbit-frame-link { font: inherit; color: var(--accent, #22d3ee); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .orbit-frame-link:hover { color: var(--text); } .orbit-frame-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(2, 8, 16, .68); padding: 24px; } .ofm-panel { width: min(840px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); overflow: hidden; } .ofm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); } .ofm-title { display: grid; gap: 2px; } .ofm-title b { font-size: 14px; } .ofm-title span { font-family: var(--mono); font-size: 11px; color: var(--text-faint); } .ofm-close { flex: 0 0 auto; } .ofm-body { overflow: auto; padding: 12px 14px; display: grid; gap: 14px; } .ofm-tablewrap { overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; } .ofm-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; } .ofm-table th { position: sticky; top: 0; text-align: left; background: var(--bg-2); color: var(--text-dim); padding: 6px 10px; border-bottom: 1px solid var(--line-soft); } .ofm-table td { padding: 4px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .ofm-table td:first-child { color: var(--text-dim); white-space: nowrap; } .ofm-table td:last-child { color: var(--text); word-break: break-word; } .ofm-table tr:hover td { background: var(--bg-2); } .ofm-hex { display: grid; gap: 6px; } .ofm-hex-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); } .ofm-hex-head span { font-family: var(--mono); color: var(--text-faint); } .ofm-hex-btns { margin-left: auto; display: inline-flex; gap: 6px; } .ofm-hex-pre { margin: 0; max-height: 240px; overflow: auto; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text); white-space: pre; } /* ============================================================ MISSION HUB (root index.html) + lightweight project scaffolds Reuses the same tokens/components as the REAL dashboard so the landing page and scaffolds inherit theme + look automatically. ============================================================ */ body.hub { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-0); color: var(--text); } .hub-header { position: sticky; top: 0; z-index: 10; height: var(--header-h); display: flex; align-items: center; background: var(--bg-1); border-bottom: 1px solid var(--line); } .hub-header-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 14px; } .hub-header .brand { background: transparent; padding: 0; min-width: 0; margin-left: 0; border-right: none; } .hub-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 40px 24px 56px; } .hub-intro { margin-bottom: 28px; } .hub-intro h1 { margin: 0 0 8px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .hub-card { display: flex; gap: 16px; padding: 20px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .hub-card:hover { border-color: var(--msu-blue-bright); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); } .hub-card-mark { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hub-card-mark img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .hub-monogram { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: .03em; color: var(--msu-blue-bright); } .hub-card-body { min-width: 0; } .hub-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .hub-card-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .01em; } .hub-card-sub { margin: 0 0 8px; font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; } .hub-card-desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); } .hub-card-open { font-size: 13px; font-weight: 600; color: var(--msu-blue-bright); } .hub-footer { border-top: 1px solid var(--line); padding: 18px 24px; text-align: center; font-size: 12px; color: var(--text-faint); } /* --- Scaffold placeholder (ASIO / SFXTI "under development") --- */ .scaffold-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 24px; color: var(--text-dim); } .scaffold-placeholder .sp-badge { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; } .scaffold-placeholder h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); } .scaffold-placeholder p { margin: 0; max-width: 460px; font-size: 13.5px; line-height: 1.55; } /* Monogram used as a brand mark (scaffold with no logo) needs to center its text inside the 34px circle, not the 64px hub tile. */ .brand-mark.hub-monogram { display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--msu-blue-bright); } @media (max-width: 560px) { .hub-card { flex-direction: column; } }