| @font-face { |
| font-family: Departure; |
| src: url("/fonts/DepartureMono-Regular.woff2") format("woff2"); |
| font-display: swap; |
| font-weight: 400; |
| } |
| :root { |
| font-family: Departure, "Courier New", monospace; |
| color: var(--ink); |
| background: var(--paper); |
| font-synthesis: none; |
| font-weight: 400; |
| font-size: 11px; |
| --paper: #eeede8; |
| --ink: #414141; |
| --muted: #727272; |
| --rule: #c2c2c2; |
| --faint: #dadada; |
| --dark: #343434; |
| --hover: #dfdfdf; |
| --border: #8b8b83; |
| --dim: #898982; |
| --muted-strong: #60605a; |
| --button-hover-ink: #54544d; |
| --grid: #cdcdc6; |
| --soft-shadow: #35353517; |
| --backdrop: #ecececc9; |
| color-scheme: light; |
| } |
| * { |
| box-sizing: border-box; |
| } |
| body { |
| margin: 0; |
| } |
| button, |
| input, |
| select { |
| font: inherit; |
| color: inherit; |
| } |
| button { |
| cursor: pointer; |
| border: 1px solid var(--rule); |
| background: transparent; |
| border-radius: 0; |
| min-height: 29px; |
| padding: 6px 10px; |
| transition: |
| background 0.14s, |
| border-color 0.14s; |
| } |
| button:hover { |
| background: var(--hover); |
| border-color: var(--border); |
| } |
| button:focus-visible, |
| input:focus-visible, |
| select:focus-visible, |
| a:focus-visible { |
| outline: 2px solid var(--ink); |
| outline-offset: 3px; |
| } |
| button:disabled { |
| opacity: 0.36; |
| cursor: not-allowed; |
| } |
| button:disabled:hover { |
| background: transparent; |
| border-color: var(--rule); |
| } |
| input, |
| select { |
| border: 1px solid var(--rule); |
| border-radius: 0; |
| background: transparent; |
| padding: 7px 8px; |
| min-width: 0; |
| max-width: 100%; |
| } |
| select { |
| cursor: pointer; |
| } |
| a { |
| color: inherit; |
| text-underline-offset: 3px; |
| } |
| h1, |
| h2, |
| h3, |
| p { |
| font-weight: 400; |
| margin: 0; |
| } |
| h3 { |
| font-size: 11px; |
| letter-spacing: 1px; |
| } |
| input[type="checkbox"] { |
| appearance: none; |
| padding: 0; |
| width: 11px; |
| height: 11px; |
| min-width: 11px; |
| border: 1px solid var(--dim); |
| cursor: pointer; |
| position: relative; |
| } |
| input[type="checkbox"]:checked { |
| background: var(--ink); |
| box-shadow: inset 0 0 0 2px var(--paper); |
| } |
| input[type="range"] { |
| appearance: none; |
| padding: 0; |
| border: 0; |
| width: 100%; |
| height: 17px; |
| background: transparent; |
| cursor: pointer; |
| } |
| input[type="range"]::-webkit-slider-runnable-track { |
| height: 3px; |
| background: var(--rule); |
| } |
| input[type="range"]::-moz-range-track { |
| height: 3px; |
| background: var(--rule); |
| } |
| input[type="range"]::-webkit-slider-thumb { |
| appearance: none; |
| width: 7px; |
| height: 15px; |
| background: var(--ink); |
| border: 0; |
| margin-top: -6px; |
| } |
| input[type="range"]::-moz-range-thumb { |
| width: 7px; |
| height: 15px; |
| background: var(--ink); |
| border: 0; |
| border-radius: 0; |
| } |
| .app-shell { |
| max-width: 2000px; |
| margin: 0 auto; |
| padding: 30px 38px 12px; |
| } |
| .masthead { |
| height: 88px; |
| display: grid; |
| grid-template-columns: 240px 1fr 310px; |
| align-items: start; |
| border-bottom: 1px solid var(--rule); |
| gap: 26px; |
| } |
| .eyebrow { |
| font-size: 10px; |
| letter-spacing: 0.5px; |
| color: var(--muted); |
| display: block; |
| } |
| .earth-time { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 5px 13px; |
| } |
| .earth-time .eyebrow { |
| grid-column: 1/-1; |
| } |
| .clock { |
| font-size: 22px; |
| letter-spacing: 1px; |
| line-height: 1.25; |
| } |
| .date-label { |
| font-size: 10px; |
| align-self: end; |
| padding-bottom: 5px; |
| color: var(--muted); |
| } |
| .brand { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 0 21px; |
| padding-top: 3px; |
| } |
| .brand h1 { |
| font-size: 22px; |
| letter-spacing: 9px; |
| padding-left: 9px; |
| line-height: 1.3; |
| } |
| .brand-bars { |
| font-size: 15px; |
| letter-spacing: 5px; |
| color: var(--dim); |
| align-self: center; |
| } |
| .brand p { |
| flex-basis: 100%; |
| text-align: center; |
| font-size: 9px; |
| letter-spacing: 2px; |
| margin-top: 9px; |
| color: var(--muted); |
| } |
| .location-top { |
| border: 0; |
| text-align: right; |
| padding: 0; |
| justify-self: end; |
| font-size: 13px; |
| line-height: 1.6; |
| } |
| .location-top small { |
| display: block; |
| font-size: 10px; |
| color: var(--muted); |
| } |
| .location-top:hover { |
| background: transparent; |
| } |
| .workspace { |
| display: grid; |
| grid-template-columns: 222px minmax(380px, 1fr) 288px; |
| gap: 28px; |
| height: calc(100dvh - 225px); |
| min-height: 650px; |
| padding: 23px 0 19px; |
| } |
| .left-rail, |
| .right-rail { |
| overflow: auto; |
| scrollbar-width: thin; |
| scrollbar-color: var(--rule) transparent; |
| } |
| .left-rail { |
| padding-right: 5px; |
| display: flex; |
| flex-direction: column; |
| gap: 22px; |
| } |
| .right-rail { |
| padding-left: 3px; |
| padding-right: 3px; |
| } |
| .section-title { |
| position: relative; |
| display: flex; |
| justify-content: space-between; |
| gap: 8px; |
| font-size: 10px; |
| line-height: 13px; |
| margin-bottom: 13px; |
| letter-spacing: 0.35px; |
| } |
| .section-title::after { |
| content: ""; |
| position: absolute; |
| bottom: -4px; |
| left: 0; |
| right: 0; |
| border-bottom: 1px solid var(--rule); |
| } |
| .section-title > span:nth-child(2) { |
| font-size: 9px; |
| color: var(--muted); |
| letter-spacing: 0; |
| align-self: center; |
| } |
| .section-title .text-toggle { |
| min-height: 15px; |
| padding: 0 4px; |
| font-size: 9px; |
| line-height: 14px; |
| position: relative; |
| top: -1px; |
| } |
| .text-toggle.on { |
| background: var(--ink); |
| color: var(--paper); |
| border-color: var(--ink); |
| } |
| .location-card { |
| border: 0; |
| width: 100%; |
| padding: 2px 0; |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 10px; |
| text-align: left; |
| font-size: 13px; |
| min-height: 24px; |
| } |
| .location-address { |
| flex: 1; |
| min-width: 0; |
| line-height: 1.45; |
| overflow-wrap: anywhere; |
| } |
| .location-address > span { |
| display: block; |
| } |
| .location-edit { |
| flex-shrink: 0; |
| white-space: nowrap; |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .small-note { |
| color: var(--muted); |
| font-size: 9px; |
| line-height: 1.55; |
| margin: 5px 0; |
| } |
| .two-buttons { |
| display: flex; |
| gap: 6px; |
| margin-top: 10px; |
| } |
| .two-buttons button { |
| font-size: 9px; |
| flex: 1; |
| padding: 5px; |
| } |
| .layer-row { |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| min-height: 27px; |
| cursor: pointer; |
| } |
| .object-symbol { |
| width: 21px; |
| font-size: 17px; |
| text-align: center; |
| } |
| .object-symbol.satellite { |
| font-size: 11px; |
| } |
| .count { |
| margin-left: auto; |
| color: var(--dim); |
| font-size: 10px; |
| } |
| .range-heading { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 10px; |
| } |
| .range-heading strong { |
| font-weight: 400; |
| font-size: 18px; |
| } |
| .range-labels { |
| display: flex; |
| justify-content: space-between; |
| font-size: 9px; |
| color: var(--muted); |
| margin-top: 1px; |
| } |
| .suggestions { |
| margin-top: 9px; |
| } |
| .suggestions button { |
| border: 0; |
| min-height: 24px; |
| display: flex; |
| width: 100%; |
| justify-content: space-between; |
| padding: 4px 0; |
| font-size: 10px; |
| } |
| .suggestions button span + span { |
| color: var(--muted); |
| } |
| .instrument-name { |
| font-size: 11px; |
| line-height: 1.5; |
| } |
| .sim-label { |
| font-size: 9px; |
| color: var(--muted); |
| letter-spacing: 0.7px; |
| margin-top: 3px; |
| } |
| .connect-button { |
| width: 100%; |
| display: flex; |
| justify-content: space-between; |
| font-size: 9px; |
| margin-top: 11px; |
| margin-bottom: 11px; |
| padding: 8px; |
| } |
| .connect-button.connected { |
| border-color: var(--border); |
| background: var(--hover); |
| } |
| .field-label { |
| display: block; |
| color: var(--muted); |
| font-size: 9px; |
| } |
| .field-label select { |
| display: block; |
| width: 100%; |
| font-size: 9px; |
| margin-top: 5px; |
| padding: 6px 3px; |
| } |
| .shape-control { |
| display: flex; |
| margin: 8px 0; |
| } |
| .shape-control button { |
| width: 50%; |
| font-size: 9px; |
| padding: 4px; |
| min-height: 24px; |
| } |
| .shape-control button + button { |
| border-left: 0; |
| } |
| .active { |
| background: var(--ink) !important; |
| color: var(--paper) !important; |
| border-color: var(--ink) !important; |
| } |
| .field-inputs { |
| display: flex; |
| gap: 10px; |
| } |
| .field-inputs label { |
| width: 50%; |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .field-inputs input { |
| width: 100%; |
| display: block; |
| font-size: 10px; |
| margin-top: 4px; |
| padding: 4px 6px; |
| } |
| .about-link { |
| border: 0; |
| padding: 5px 0; |
| font-size: 9px; |
| text-align: left; |
| margin-top: auto; |
| color: var(--muted); |
| } |
| .sky-stage { |
| display: flex; |
| flex-direction: column; |
| min-height: 0; |
| min-width: 0; |
| } |
| .stage-top { |
| display: flex; |
| justify-content: space-between; |
| align-items: start; |
| margin-bottom: 16px; |
| padding: 0 4px; |
| } |
| .stage-title strong { |
| font-size: 15px; |
| letter-spacing: 2px; |
| font-weight: 400; |
| display: block; |
| margin-top: 4px; |
| } |
| .stage-title .eyebrow { |
| font-size: 9px; |
| } |
| .view-switch { |
| display: flex; |
| } |
| .view-switch button { |
| font-size: 9px; |
| min-height: 24px; |
| padding: 5px 8px; |
| } |
| .view-switch button + button { |
| border-left: 0; |
| } |
| .search-box { |
| display: flex; |
| align-items: center; |
| position: relative; |
| z-index: 4; |
| width: min(420px, 90%); |
| margin: 0 auto; |
| gap: 8px; |
| border-bottom: 1px solid var(--rule); |
| color: var(--muted); |
| height: 32px; |
| } |
| .search-box > span { |
| font-size: 23px; |
| } |
| .search-box input { |
| border: 0; |
| padding: 6px 0; |
| flex: 1; |
| font-size: 10px; |
| outline-offset: 1px; |
| } |
| .search-box kbd { |
| font: inherit; |
| padding: 1px 5px; |
| border: 1px solid var(--rule); |
| font-size: 9px; |
| } |
| .search-results { |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 32px; |
| background: var(--paper); |
| box-shadow: 0 7px 20px var(--soft-shadow); |
| border: 1px solid var(--rule); |
| max-height: 355px; |
| overflow: auto; |
| } |
| .search-results button { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| width: 100%; |
| text-align: left; |
| border: 0; |
| border-bottom: 1px solid var(--faint); |
| gap: 10px; |
| font-size: 10px; |
| padding: 10px; |
| } |
| .search-results small { |
| font-size: 9px; |
| color: var(--muted); |
| white-space: nowrap; |
| } |
| .search-results p { |
| padding: 16px; |
| } |
| .map-area { |
| position: relative; |
| flex: 1; |
| min-height: 260px; |
| } |
| .sky-canvas { |
| position: absolute; |
| inset: 0; |
| touch-action: none; |
| user-select: none; |
| -webkit-user-select: none; |
| } |
| .sky-canvas, |
| .sky-canvas * { |
| cursor: url("/cursor-crosshair.svg") 12 12, crosshair !important; |
| -webkit-user-drag: none; |
| } |
| .sky-canvas canvas { |
| pointer-events: none; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| inset: 0; |
| } |
| .sky-canvas .map-overlay { |
| pointer-events: none; |
| } |
| .map-readout { |
| position: absolute; |
| top: 21px; |
| left: 5px; |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| pointer-events: none; |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .zoom-controls { |
| position: absolute; |
| right: 3px; |
| bottom: 40px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
| .zoom-controls button { |
| font-size: 19px; |
| padding: 1px; |
| min-height: 28px; |
| width: 29px; |
| background: var(--paper); |
| } |
| .zoom-controls button:last-child { |
| font-size: 16px; |
| } |
| .daylight-note { |
| position: absolute; |
| bottom: 5px; |
| left: 30px; |
| right: 30px; |
| text-align: center; |
| font-size: 9px; |
| color: var(--dim); |
| pointer-events: none; |
| } |
| .sky-tooltip { |
| position: absolute; |
| pointer-events: none; |
| width: 224px; |
| background: var(--paper); |
| border: 1px solid var(--border); |
| padding: 10px 12px; |
| box-shadow: 4px 4px 0 var(--soft-shadow); |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| z-index: 5; |
| font-size: 9px; |
| } |
| .sky-tooltip strong { |
| font-size: 15px; |
| font-weight: 400; |
| } |
| .sky-tooltip .eyebrow { |
| font-size: 9px; |
| } |
| .sky-tooltip small { |
| font-size: 9px; |
| color: var(--muted); |
| margin-top: 3px; |
| } |
| .sky-tooltip i { |
| font-style: normal; |
| color: var(--dim); |
| } |
| .map-caption { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| font-size: 9px; |
| color: var(--muted); |
| padding: 11px 4px 13px; |
| border-bottom: 1px solid var(--rule); |
| } |
| .scope-strip { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 14px 3px 0; |
| gap: 15px; |
| } |
| .scope-strip .eyebrow { |
| font-size: 9px; |
| } |
| .scope-strip strong { |
| font-weight: 400; |
| font-size: 9px; |
| display: block; |
| margin-top: 5px; |
| line-height: 1.5; |
| } |
| .scope-actions { |
| display: flex; |
| gap: 7px; |
| } |
| .scope-actions button { |
| font-size: 9px; |
| padding: 5px 7px; |
| white-space: nowrap; |
| } |
| .object-heading { |
| padding-top: 9px; |
| margin-bottom: 17px; |
| } |
| .object-heading .eyebrow { |
| font-size: 9px; |
| line-height: 1.6; |
| } |
| .object-heading h2 { |
| font-size: 31px; |
| line-height: 1.3; |
| margin: 7px 0 14px; |
| overflow-wrap: anywhere; |
| letter-spacing: -0.5px; |
| } |
| .visibility { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 9px; |
| } |
| .visible-mark { |
| color: var(--muted-strong); |
| } |
| .below-mark { |
| color: var(--dim); |
| } |
| .object-stats { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| .object-stats > div { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 10px; |
| } |
| .object-stats span { |
| font-size: 9px; |
| color: var(--muted); |
| flex-shrink: 0; |
| } |
| .object-stats strong { |
| font-size: 10px; |
| font-weight: 400; |
| text-align: right; |
| } |
| .object-fact { |
| font-family: Departure, monospace; |
| font-size: 10px; |
| line-height: 1.75; |
| margin: 18px 0; |
| color: var(--muted); |
| } |
| .object-actions { |
| display: flex; |
| flex-direction: column; |
| gap: 7px; |
| } |
| .object-actions button { |
| font-size: 9px; |
| min-height: 30px; |
| } |
| .primary { |
| background: var(--ink); |
| color: var(--paper); |
| border-color: var(--ink); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| .primary:hover { |
| background: var(--button-hover-ink); |
| color: var(--paper); |
| border-color: var(--button-hover-ink); |
| } |
| .primary:disabled { |
| background: var(--faint); |
| color: var(--muted); |
| opacity: 0.65; |
| border-color: var(--rule); |
| } |
| .coordinate-row { |
| font-size: 9px; |
| display: flex; |
| justify-content: space-between; |
| margin: 13px 0 22px; |
| color: var(--muted); |
| } |
| .context-diagram { |
| margin-top: 18px; |
| } |
| .diagram-label { |
| display: flex; |
| justify-content: space-between; |
| gap: 8px; |
| border-top: 1px solid var(--rule); |
| padding-top: 12px; |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .diagram-label span + span { |
| font-size: 9px; |
| color: var(--dim); |
| } |
| .context-diagram svg { |
| width: 100%; |
| height: auto; |
| display: block; |
| margin: 3px 0 0; |
| overflow: visible; |
| } |
| .context-diagram svg text { |
| font-family: Departure, monospace; |
| font-size: 8px; |
| fill: var(--muted); |
| } |
| .diagram-grid { |
| stroke: var(--grid); |
| fill: none; |
| stroke-width: 0.6; |
| stroke-dasharray: 2 3; |
| } |
| .orbit-line { |
| stroke: var(--rule); |
| fill: none; |
| stroke-width: 0.7; |
| } |
| .selected-orbit { |
| stroke: var(--muted); |
| fill: none; |
| stroke-width: 1; |
| } |
| .diagram-dot { |
| fill: var(--muted); |
| } |
| .diagram-dot.selected { |
| fill: var(--ink); |
| } |
| .focus-ring { |
| stroke: var(--muted-strong); |
| stroke-width: 1; |
| fill: none; |
| } |
| .connection-line { |
| stroke: var(--border); |
| fill: none; |
| stroke-dasharray: 2 4; |
| stroke-width: 0.7; |
| } |
| .leader { |
| stroke: var(--dim); |
| fill: none; |
| stroke-width: 0.7; |
| } |
| .diagram-note { |
| font-size: 9px; |
| line-height: 1.6; |
| color: var(--dim); |
| } |
| .diagram-label-bg { |
| fill: var(--paper); |
| } |
| .neighbour-list { |
| margin: 9px 0 20px; |
| } |
| .neighbour-list div { |
| display: flex; |
| justify-content: space-between; |
| font-size: 9px; |
| line-height: 2; |
| } |
| .neighbour-list span + span { |
| color: var(--muted); |
| } |
| .galaxy-arms path { |
| fill: none; |
| stroke: var(--rule); |
| stroke-width: 5; |
| stroke-linecap: round; |
| opacity: 0.5; |
| } |
| .galaxy-locator .diagram-label { |
| margin-top: 12px; |
| } |
| .ground-track { |
| fill: none; |
| stroke: var(--ink); |
| stroke-width: 1.3; |
| } |
| .earth-land { |
| fill: var(--faint); |
| stroke: var(--border); |
| stroke-width: 0.35; |
| stroke-linejoin: round; |
| } |
| .ground-track.future { |
| stroke-dasharray: 3 4; |
| } |
| .satellite-bracket { |
| fill: var(--paper); |
| stroke: var(--ink); |
| stroke-width: 1.2; |
| } |
| .empty-explorer { |
| text-align: center; |
| padding: 100px 20px; |
| color: var(--muted); |
| } |
| .empty-explorer > span { |
| display: block; |
| font-size: 40px; |
| margin-bottom: 20px; |
| } |
| .empty-explorer p { |
| font-size: 13px; |
| margin-bottom: 15px; |
| } |
| .empty-explorer small { |
| line-height: 1.8; |
| font-size: 10px; |
| } |
| .time-deck { |
| border-top: 1px solid var(--rule); |
| border-bottom: 1px solid var(--rule); |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| min-height: 61px; |
| padding: 10px 0; |
| } |
| .time-status { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| min-width: 100px; |
| font-size: 10px; |
| } |
| .live-light { |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .pulse { |
| animation: slowpulse 3s infinite; |
| } |
| .time-buttons { |
| display: flex; |
| } |
| .time-buttons button { |
| min-width: 32px; |
| min-height: 27px; |
| font-size: 10px; |
| } |
| .time-buttons button + button { |
| border-left: 0; |
| } |
| .datetime-label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .datetime-label input { |
| font-size: 10px; |
| padding: 5px; |
| } |
| .time-deck .day-slider { |
| flex: 1; |
| min-width: 70px; |
| } |
| .time-deck > select { |
| font-size: 10px; |
| padding: 5px; |
| } |
| .now-button { |
| font-size: 10px; |
| white-space: nowrap; |
| } |
| .motor-status { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| margin-left: auto; |
| font-size: 9px; |
| color: var(--muted); |
| } |
| .motor-status button { |
| font-size: 9px; |
| min-height: 27px; |
| } |
| .bottom-line { |
| display: flex; |
| justify-content: space-between; |
| font-size: 9px; |
| letter-spacing: 0.3px; |
| color: var(--dim); |
| padding-top: 12px; |
| } |
| .loading-message { |
| position: absolute; |
| inset: 0; |
| display: flex; |
| gap: 15px; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| font-size: 14px; |
| color: var(--muted); |
| } |
| .toast { |
| position: fixed; |
| bottom: 94px; |
| left: 50%; |
| transform: translateX(-50%); |
| max-width: calc(100% - 30px); |
| padding: 13px 20px; |
| background: var(--ink); |
| color: var(--paper); |
| font-size: 11px; |
| line-height: 1.6; |
| z-index: 30; |
| box-shadow: 4px 4px 0 var(--rule); |
| } |
| .modal-backdrop { |
| position: fixed; |
| inset: 0; |
| background: var(--backdrop); |
| backdrop-filter: blur(3px); |
| z-index: 40; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| } |
| .modal { |
| background: var(--paper); |
| border: 1px solid var(--border); |
| box-shadow: 8px 8px 0 var(--soft-shadow); |
| max-width: 510px; |
| width: 100%; |
| max-height: 90dvh; |
| overflow: auto; |
| padding: 25px; |
| } |
| .modal-title { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 20px; |
| margin-bottom: 16px; |
| } |
| .modal-title h2 { |
| font-size: 16px; |
| letter-spacing: 1px; |
| } |
| .modal-title button { |
| border: 0; |
| font-size: 23px; |
| padding: 0 5px; |
| } |
| .modal p { |
| font-size: 11px; |
| line-height: 1.8; |
| color: var(--muted); |
| margin: 14px 0; |
| } |
| .modal .primary { |
| width: 100%; |
| font-size: 10px; |
| padding: 10px; |
| margin: 17px 0; |
| } |
| .modal label { |
| font-size: 9px; |
| display: block; |
| margin-top: 17px; |
| color: var(--muted); |
| } |
| .modal label input, |
| .modal label select { |
| display: block; |
| width: 100%; |
| margin-top: 6px; |
| color: var(--ink); |
| font-size: 11px; |
| padding: 9px; |
| } |
| .form-columns { |
| display: flex; |
| gap: 15px; |
| } |
| .form-columns label { |
| flex: 1; |
| min-width: 0; |
| } |
| .modal .form-message { |
| padding: 10px; |
| border: 1px dashed var(--border); |
| font-size: 10px; |
| } |
| .about-modal { |
| max-width: 620px; |
| } |
| .about-modal h3 { |
| border-bottom: 1px solid var(--rule); |
| padding-bottom: 7px; |
| margin-top: 23px; |
| } |
| .mobile-tabs { |
| display: none; |
| } |
| @keyframes slowpulse { |
| 0%, |
| 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.35; |
| } |
| } |
| @media (min-width: 1700px) { |
| .app-shell { |
| padding-left: 55px; |
| padding-right: 55px; |
| } |
| .workspace { |
| grid-template-columns: 245px minmax(500px, 1fr) 315px; |
| gap: 42px; |
| } |
| .masthead { |
| grid-template-columns: 245px 1fr 315px; |
| gap: 42px; |
| } |
| .left-rail { |
| gap: 26px; |
| } |
| .object-heading h2 { |
| font-size: 35px; |
| } |
| } |
| @media (max-width: 1250px) { |
| .app-shell { |
| padding: 24px 24px 12px; |
| } |
| .workspace { |
| grid-template-columns: 195px minmax(320px, 1fr) 250px; |
| gap: 18px; |
| } |
| .masthead { |
| grid-template-columns: 195px 1fr 250px; |
| gap: 18px; |
| } |
| .brand { |
| gap: 0 12px; |
| } |
| .brand-bars { |
| letter-spacing: 2px; |
| } |
| .brand h1 { |
| font-size: 20px; |
| letter-spacing: 6px; |
| } |
| .clock { |
| font-size: 20px; |
| } |
| .earth-time { |
| grid-template-columns: 1fr; |
| } |
| .date-label { |
| display: none; |
| } |
| .object-stats span { |
| font-size: 8px; |
| } |
| .object-stats strong { |
| font-size: 9px; |
| } |
| .object-heading h2 { |
| font-size: 26px; |
| } |
| .scope-strip { |
| align-items: start; |
| flex-direction: column; |
| gap: 8px; |
| } |
| .scope-actions { |
| width: 100%; |
| } |
| .scope-actions button { |
| flex: 1; |
| } |
| .time-deck { |
| gap: 10px; |
| } |
| .motor-status > span { |
| display: none; |
| } |
| .map-caption span + span { |
| display: none; |
| } |
| .day-slider { |
| max-width: 150px; |
| } |
| } |
| @media (max-width: 1000px) and (min-width: 761px) { |
| .app-shell { |
| padding: 20px 18px 12px; |
| } |
| .workspace { |
| grid-template-columns: 175px minmax(270px, 1fr) 218px; |
| gap: 14px; |
| } |
| .masthead { |
| grid-template-columns: 175px 1fr 218px; |
| gap: 14px; |
| } |
| .brand-bars { |
| display: none; |
| } |
| .clock { |
| font-size: 19px; |
| } |
| .location-top { |
| font-size: 11px; |
| } |
| .left-rail { |
| gap: 19px; |
| } |
| .object-heading h2 { |
| font-size: 24px; |
| } |
| .time-deck .day-slider { |
| display: none; |
| } |
| .object-stats > div { |
| gap: 5px; |
| } |
| .layer-row { |
| gap: 6px; |
| } |
| .map-readout { |
| top: 17px; |
| font-size: 8px; |
| } |
| .search-box { |
| width: 100%; |
| } |
| .search-box input { |
| font-size: 9px; |
| } |
| .stage-top { |
| flex-direction: column; |
| gap: 10px; |
| } |
| .view-switch { |
| align-self: end; |
| } |
| .map-caption { |
| font-size: 8px; |
| } |
| .diagram-label { |
| font-size: 9px; |
| } |
| } |
| @media (max-width: 760px) { |
| .app-shell { |
| padding: 18px 15px 12px; |
| } |
| .masthead { |
| height: 82px; |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| } |
| .brand { |
| grid-row: 1; |
| grid-column: 1; |
| justify-content: start; |
| padding-top: 0; |
| } |
| .brand h1 { |
| font-size: 18px; |
| letter-spacing: 5px; |
| padding-left: 0; |
| } |
| .brand-bars { |
| display: none; |
| } |
| .brand p { |
| text-align: left; |
| font-size: 8px; |
| letter-spacing: 1px; |
| margin-top: 5px; |
| } |
| .earth-time { |
| display: none; |
| } |
| .location-top { |
| grid-column: 2; |
| grid-row: 1; |
| font-size: 11px; |
| } |
| .location-top .eyebrow { |
| font-size: 9px; |
| } |
| .location-top small { |
| font-size: 9px; |
| } |
| .mobile-tabs { |
| display: flex; |
| margin-top: 14px; |
| } |
| .mobile-tabs button { |
| width: 33.333%; |
| font-size: 10px; |
| padding: 7px; |
| } |
| .mobile-tabs button + button { |
| border-left: 0; |
| } |
| .workspace { |
| display: block; |
| height: auto; |
| min-height: 0; |
| padding: 18px 0 15px; |
| } |
| .left-rail, |
| .right-rail, |
| .sky-stage { |
| display: none; |
| } |
| .mobile-sky .sky-stage { |
| display: flex; |
| height: calc(100dvh - 284px); |
| min-height: 450px; |
| } |
| .mobile-controls .left-rail { |
| display: flex; |
| max-width: 450px; |
| margin: auto; |
| overflow: visible; |
| padding-right: 0; |
| gap: 22px; |
| } |
| .mobile-object .right-rail { |
| display: block; |
| max-width: 450px; |
| margin: auto; |
| overflow: visible; |
| padding: 0; |
| } |
| .right-rail .context-diagram svg { |
| max-height: 260px; |
| } |
| .map-area { |
| min-height: 245px; |
| } |
| .stage-top { |
| margin-bottom: 12px; |
| padding: 0; |
| } |
| .stage-title strong { |
| font-size: 13px; |
| } |
| .view-switch button { |
| font-size: 9px; |
| padding: 5px 7px; |
| } |
| .search-box { |
| width: 100%; |
| height: 30px; |
| } |
| .search-box input { |
| font-size: 9px; |
| } |
| .map-readout { |
| font-size: 8px; |
| top: 14px; |
| left: 0; |
| } |
| .zoom-controls { |
| right: 0; |
| bottom: 32px; |
| } |
| .zoom-controls button { |
| width: 27px; |
| min-height: 27px; |
| } |
| .map-caption { |
| font-size: 8px; |
| padding: 8px 0; |
| letter-spacing: 0; |
| } |
| .scope-strip { |
| padding-top: 11px; |
| gap: 8px; |
| } |
| .scope-strip strong { |
| font-size: 9px; |
| } |
| .scope-strip .eyebrow { |
| font-size: 8px; |
| } |
| .scope-actions button { |
| font-size: 9px; |
| padding: 6px; |
| } |
| .daylight-note { |
| font-size: 6px; |
| bottom: 0; |
| left: 10px; |
| right: 10px; |
| } |
| .time-deck { |
| flex-wrap: wrap; |
| gap: 8px; |
| padding: 10px 0; |
| min-height: 83px; |
| } |
| .time-status { |
| font-size: 9px; |
| min-width: 90px; |
| flex: 1; |
| } |
| .time-buttons { |
| order: 2; |
| } |
| .datetime-label { |
| order: 4; |
| flex: 1; |
| } |
| .datetime-label input { |
| font-size: 10px; |
| width: 100%; |
| max-width: 200px; |
| } |
| .time-deck .day-slider { |
| display: none; |
| } |
| .time-deck > select { |
| order: 3; |
| font-size: 9px; |
| padding: 5px; |
| } |
| .now-button { |
| order: 5; |
| font-size: 9px; |
| } |
| .motor-status { |
| order: 6; |
| } |
| .motor-status button { |
| font-size: 9px; |
| } |
| .time-buttons button { |
| font-size: 9px; |
| min-width: 28px; |
| padding: 5px; |
| } |
| .bottom-line { |
| font-size: 6px; |
| gap: 10px; |
| } |
| .bottom-line span:last-child { |
| display: none; |
| } |
| .modal { |
| padding: 18px; |
| max-height: 90dvh; |
| } |
| .modal-title h2 { |
| font-size: 13px; |
| } |
| .object-heading h2 { |
| font-size: 35px; |
| } |
| .object-stats span { |
| font-size: 9px; |
| } |
| .object-stats strong { |
| font-size: 11px; |
| } |
| .object-fact { |
| font-size: 11px; |
| } |
| .toast { |
| bottom: 22px; |
| font-size: 10px; |
| width: max-content; |
| } |
| .sky-tooltip { |
| display: none; |
| } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| animation: none !important; |
| transition: none !important; |
| } |
| } |
|
|
