/* Conjunction Detector - app.css Dark by default; add class="light" to for light mode. Font stack: IBM Plex Sans (UI) + IBM Plex Mono (data/numbers) */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Theme tokens */ :root { --bg: #0b0e15; --bg2: #161b25; --bg3: #1f2531; --border: #2c323e; --text: #e7eaef; --muted: #8990a1; --dim: #4a5163; --accent: #d4a34a; --accent-dim: #8a6c2b; --accent-bright: #fcd34d; --link: #e6bd6b; --ok: #6bbf7e; --err: #e36f6f; --series-blue: #60a5fa; --series-blue-dim: #4a7bb5; --series-blue-soft: #8fb4de; --series-green: #4ade80; --series-purple: #a593d8; --series-purple-dim: #6d5aa6; --pc-hi-bg: rgba(227, 111, 111, 0.14); --pc-hi-t: #f1a3a3; --pc-med-bg: rgba(212, 163, 74, 0.13); --pc-med-t: #e6bd6b; } html.light { --bg: #f7f5ef; --bg2: #ffffff; --bg3: #efece4; --border: #d9d4c6; --text: #1a1714; --muted: #5f584c; --dim: #9a9286; --accent: #a37017; --accent-dim: #92400e; --accent-bright: #c2912f; --link: #8a5d10; --ok: #2f7a3f; --err: #a5341f; --series-blue: #1d4ed8; --series-blue-dim: #1d4ed8; --series-blue-soft: #1d4ed8; --series-green: #2f7a3f; --series-purple: #5b21b6; --series-purple-dim: #5b21b6; --pc-hi-bg: #f5d9d1; --pc-hi-t: #8a2d16; --pc-med-bg: #f2e3c0; --pc-med-t: #6e4e10; } /* Base */ html { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; } body { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Nav */ .app-nav { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 28px; height: 52px; display: flex; align-items: center; position: sticky; top: 0; z-index: 50; } .nav-brand { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-right: 32px; white-space: nowrap; text-decoration: none; } .nav-brand:hover { text-decoration: none; } .nav-links { display: flex; flex: 1; } .nav-link { padding: 0 15px; height: 52px; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; transition: color 0.1s; } .nav-link:hover { color: var(--text); text-decoration: none; } .nav-link.active { color: var(--text); border-bottom-color: var(--accent); } /* Nav right: status + theme toggle */ .nav-right { display: flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); flex-shrink: 0; } .nav-stat { display: contents; } /* Drawer wrapper: transparent on desktop, sidebar on mobile */ .nav-drawer { display: contents; } .nav-burger { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; margin-right: 8px; flex-direction: column; gap: 4px; } .nav-burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 1px; } .nav-backdrop { display: none; } .nav-sep { color: var(--border); padding: 0 1px; } .nav-val { color: var(--text); } .nav-ok { color: var(--ok); font-weight: 600; } .nav-err { color: var(--err); font-weight: 600; } /* Theme toggle - plain text button */ .theme-btn { margin-left: 16px; background: transparent; border: none; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 18px; line-height: 1; cursor: pointer; padding: 6px 8px; flex-shrink: 0; } .theme-btn:hover { color: var(--text); } .theme-btn::before { content: '☾'; } html.light .theme-btn::before { content: '☀'; } /* Page layout */ .page-body { padding: 28px; flex: 1; } .section-head { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: 14px; } .page-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 3px; } .page-sub { font-size: 12px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; margin-bottom: 0; } /* Filter bar */ .filter-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .filter-bar label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--text); } .filter-bar input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; } /* Tables */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: collapse; font-size: 12px; } .data-table thead th { background: var(--bg3); color: var(--muted); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; } .data-table thead th.sortable { cursor: pointer; } .data-table thead th.sortable:hover { color: var(--text); } .data-table thead th.sort-asc::after { content: ' ↑'; color: var(--accent); } .data-table thead th.sort-desc::after { content: ' ↓'; color: var(--accent); } .data-table thead th.num { text-align: right; } .data-table tbody tr { border-bottom: 1px solid var(--border); } .data-table tbody tr:hover { background: var(--bg3); } .data-table tbody td { padding: 9px 14px; font-size: 13px; } .data-table .mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; } .data-table .num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 12px; } .data-table .col-sep { border-left: 1px solid var(--border); } .data-table .col-head-sep { border-left: 1px solid var(--border); } /* Pc risk colouring - text only, no row tint */ .pc-hi { color: var(--pc-hi-t); font-weight: 600; } .pc-med { color: var(--pc-med-t); } /* Type badge - outlined, monospace, minimal */ .type-badge { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: 2px; font-size: 10px; font-weight: 500; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.02em; color: var(--muted); background: transparent; } .type-badge[data-type="PAYLOAD"] { border-color: var(--series-blue-dim); color: var(--series-blue-soft); } .type-badge[data-type="DEBRIS"] { border-color: var(--accent-dim); color: var(--accent); } .type-badge[data-type="ROCKET BODY"] { border-color: var(--series-purple-dim); color: var(--series-purple); } html.light .type-badge[data-type="PAYLOAD"] { border-color: var(--series-blue); color: var(--series-blue); } html.light .type-badge[data-type="DEBRIS"] { border-color: var(--accent-dim); color: var(--accent-dim); } html.light .type-badge[data-type="ROCKET BODY"] { border-color: var(--series-purple); color: var(--series-purple); } /* Pagination */ .pagination { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; color: var(--muted); } .btn { border: none; background: transparent; color: var(--text); padding: 4px 0; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'IBM Plex Mono', monospace; transition: color 0.1s; } .btn:hover { color: var(--link); } /* Cards */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 16px; } .card-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; } .kv { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .kv:last-child { border-bottom: none; } .kv .k { color: var(--muted); font-size: 12px; } .kv .v { font-family: 'IBM Plex Mono', monospace; font-size: 12px; } /* TLE block */ .tle-block { background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 12px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.9; color: var(--muted); margin-bottom: 22px; overflow-x: auto; white-space: nowrap; } .tle-block .tle-name { color: var(--accent); } /* HTMX loading state */ #results { transition: opacity 200ms; } #results.htmx-request { opacity: 0.5; } /* Stats page */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 16px 18px; } .stat-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 8px; } .stat-val { font-size: 28px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; line-height: 1; } .stat-sub { font-size: 11px; color: var(--muted); margin-top: 6px; font-family: 'IBM Plex Mono', monospace; } .stat-card.risk-hi { background: var(--pc-hi-bg); border-color: rgba(248, 113, 113, .25); } .stat-card.risk-hi .stat-label, .stat-card.risk-hi .stat-val, .stat-card.risk-hi .stat-sub { color: var(--pc-hi-t); } /* Bar charts */ .bar-chart { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .bar-row { display: flex; align-items: center; gap: 10px; } .bar-label { width: 90px; text-align: right; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 11px; white-space: nowrap; flex-shrink: 0; } .bar-track { flex: 1; background: var(--bg3); border-radius: 2px; height: 14px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 2px; background: var(--accent); } .chart-axis { fill: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 9px; } .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .split-grid:last-of-type { margin-bottom: 0; } .asym-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "tall r1" "tall r2"; gap: 18px; margin-bottom: 18px; } .asym-grid > .span-rows { grid-area: tall; } .unit { font-size: 14px; font-weight: 400; color: var(--muted); } .dist-label { position: absolute; color: var(--accent-bright); font: bold 11px 'IBM Plex Mono', monospace; pointer-events: none; z-index: 10; } .bar-fill.amber { background: var(--accent-bright); } .bar-fill.purple { background: var(--series-purple); } .bar-fill.muted { background: var(--muted); opacity: 0.35; } .bar-fill.green { background: var(--series-green); } .bar-val { width: 52px; color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 11px; } /* SVG line charts */ .chart-wrap { width: 100%; overflow: hidden; margin-top: 6px; } .chart-wrap svg { display: block; width: 100%; } /* Scan/sync history tables */ .log-table td { font-family: 'IBM Plex Mono', monospace; font-size: 12px; } /* Satellite detail */ .detail-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 22px; } .detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; } /* Visualization page */ .viz-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .viz-obj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .viz-meta-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 12px 16px; } .viz-meta-card .meta-label { font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .viz-meta-card .meta-val { font-size: 20px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; } .viz-meta-card .meta-val.sm { font-size: 13px; } #canvas-container { width: 100%; height: clamp(420px, 65vh, 900px); background: #000; position: relative; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } #time-display { position: absolute; top: 12px; left: 14px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: rgba(0, 0, 0, .55); border: 1px solid var(--border); padding: 5px 10px; border-radius: 3px; z-index: 10; } #viz-legend { position: absolute; top: 12px; right: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); z-index: 10; display: flex; flex-direction: column; gap: 5px; } .legend-item { display: flex; align-items: center; gap: 5px; } .legend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #controls { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 8px; } .viz-btn { background: rgba(0, 0, 0, .55); border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px; border-radius: 4px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } .viz-btn:hover { border-color: var(--accent); } #speed-slider { width: 160px; accent-color: var(--accent); } #speed-value { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); width: 40px; } /* Error page */ .error-body { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; font-family: 'IBM Plex Mono', monospace; color: var(--muted); } .error-code { font-size: 64px; font-weight: 700; color: var(--dim); letter-spacing: -0.05em; } .error-msg { font-size: 14px; } /* Footer */ .app-footer { border-top: 1px solid var(--border); padding: 10px 28px; font-size: 11px; line-height: 1.55; color: var(--dim); font-family: 'IBM Plex Mono', monospace; margin-top: auto; } .app-footer p { max-width: 1100px; } .app-footer a { color: var(--muted); } /* Responsive */ @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .detail-grid-3 { grid-template-columns: 1fr 1fr; } .viz-meta-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { html { font-size: 13px; } .app-nav { padding: 0 14px; height: 48px; } .nav-brand { font-size: 14px; margin-right: 0; } .nav-burger { display: flex; } .nav-drawer { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: 0; left: 0; bottom: 0; width: min(78vw, 320px); background: var(--bg2); border-right: 1px solid var(--border); padding: 60px 14px 20px; transform: translateX(-100%); transition: transform 180ms ease; z-index: 60; overflow-y: auto; } body.drawer-open .nav-drawer { transform: translateX(0); } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 55; } body.drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; } .nav-links { flex-direction: column; flex: 0 0 auto; margin-bottom: 16px; } .nav-link { height: 40px; padding: 0 10px; font-size: 14px; border-bottom: none; border-left: 2px solid transparent; } .nav-link.active { border-bottom-color: transparent; border-left-color: var(--accent); } .nav-right { font-size: 11px; flex-wrap: wrap; gap: 0; flex-shrink: 1; min-width: 0; } .nav-stat { display: flex; flex-basis: 100%; gap: 5px; align-items: baseline; padding: 2px 0; } .nav-sep { display: none; } .theme-btn { margin-left: 0; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); align-self: stretch; text-align: left; } .page-body { padding: 16px 14px; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .split-grid, .asym-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 12px; } .detail-grid-3, .detail-grid-2, .viz-obj-grid { grid-template-columns: 1fr; } .viz-meta-grid { grid-template-columns: 1fr 1fr; } .data-table { font-size: 11px; } .data-table thead th { padding: 6px 8px; font-size: 9px; } .data-table tbody td { padding: 6px 8px; font-size: 12px; } .app-footer { padding: 10px 14px; font-size: 10px; } #canvas-container { height: clamp(320px, 70vh, 560px); } .chart-wrap svg { aspect-ratio: 620 / 165; } } /* Playground */ .playground-page .pg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; } @media (min-width: 1100px) { .playground-page .pg-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; } } .pg-canvas-wrap { position: relative; width: 100%; height: clamp(450px, 68vh, 930px); background: var(--bg3); border-radius: 4px; overflow: hidden; } .pg-canvas-wrap canvas { width: 100%; height: 100%; display: block; } .params-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .params-head .card-title { margin: 0; } .pg-reset-btn { width: 28px; height: 28px; color: var(--muted); } .pg-reset-btn:hover { color: var(--accent); } .pg-overlays-panel { position: absolute; top: 10px; left: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; } .pg-preset-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pg-preset-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; } .pg-preset-btn { background: transparent; border: 1px solid var(--border); color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 4px 10px; border-radius: 3px; cursor: pointer; } .pg-preset-btn:hover { border-color: var(--accent); } .pg-preset-btn.active { border-color: var(--accent); background: var(--accent); color: var(--bg); } .pg-overlays-panel .pg-overlays-title { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; } .pg-overlays-panel .overlay-toggle { margin-bottom: 2px; font-size: 11px; } .pg-badge { position: absolute; right: 10px; padding: 4px 8px; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; border-radius: 3px; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .pg-badge.active { opacity: 1; } .pg-badge-grid { top: 10px; background: var(--series-green); color: #0f1a12; } .pg-badge-coarse { top: 38px; background: var(--accent-bright); color: #1a1714; } .pg-badge-conjunction { top: 66px; background: var(--err); color: #fff; font-size: 11px; } .scrubber-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .scrubber-row input[type=range] { flex: 1; accent-color: var(--accent); } .scrubber-row .viz-btn { flex-shrink: 0; } .slider-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .slider-row .slider-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); } .slider-row .slider-head label { flex: 1 1 auto; } .slider-row .slider-head label code { color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 12px; } .slider-row .slider-head .slider-val { flex-shrink: 0; } .slider-row input[type=range] { width: 100%; accent-color: var(--accent); } .slider-val { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: 12px; } .overlay-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 6px; cursor: pointer; } .overlay-toggle input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; } .pg-legend-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); } .pg-legend-row .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; } .pg-refine-section { display: flex; flex-direction: column; flex: 1 1 0; min-height: 180px; margin-bottom: 16px; } .pg-chart-note { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; } .pg-chart-note code { color: var(--text); font-family: 'IBM Plex Mono', monospace; font-size: 11px; } .pg-refine-wrap { position: relative; width: 100%; flex: 1 1 0; min-height: 0; } .pg-refine-wrap canvas { width: 100%; height: 100%; display: block; background: var(--bg3); border-radius: 4px; } .pg-controls-card { display: flex; flex-direction: column; } .pg-controls-bottom { margin-top: auto; }