| |
| .app-shell { |
| max-width: none; |
| padding: 8px 24px 0; |
| } |
| .masthead { |
| height: 38px; |
| grid-template-columns: 220px 1fr 280px; |
| align-items: center; |
| gap: 20px; |
| } |
| .earth-time { |
| display: flex; |
| align-items: baseline; |
| gap: 9px; |
| } |
| .earth-time .eyebrow { |
| font-size: 9px; |
| } |
| .clock { |
| font-size: 13px; |
| letter-spacing: 0.4px; |
| } |
| .date-label { |
| align-self: auto; |
| padding: 0; |
| font-size: 9px; |
| } |
| .brand { |
| padding: 0; |
| } |
| .brand h1 { |
| font-size: 16px; |
| letter-spacing: 6px; |
| line-height: 1; |
| } |
| .location-top { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-size: 10px; |
| line-height: 1.2; |
| } |
| .location-top .eyebrow { |
| font-size: 8px; |
| max-width: 80px; |
| line-height: 1.4; |
| } |
| .location-top small { |
| font-size: 9px; |
| } |
| .workspace { |
| grid-template-columns: 210px minmax(0, 1fr) 280px; |
| gap: 20px; |
| height: calc(100dvh - 90px); |
| min-height: 480px; |
| padding: 12px 0 8px; |
| } |
| .left-rail, |
| .right-rail { |
| padding-top: 3px; |
| } |
| .sky-stage { |
| position: relative; |
| } |
| .map-area { |
| position: absolute; |
| inset: 0; |
| min-height: 0; |
| } |
| .stage-top { |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: auto; |
| margin: 0; |
| padding: 0; |
| z-index: 3; |
| } |
| .search-box { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: min(300px, calc(100% - 222px)); |
| height: 27px; |
| margin: 0; |
| background: var(--paper); |
| } |
| .search-box input { |
| font-size: 10px; |
| } |
| .search-results { |
| top: 27px; |
| width: max(100%, 330px); |
| } |
| .map-readout { |
| top: 44px; |
| left: 0; |
| font-size: 9px; |
| gap: 6px; |
| } |
| .sky-condition { |
| color: var(--ink); |
| padding-bottom: 5px; |
| letter-spacing: 0.8px; |
| } |
| .zoom-controls { |
| right: 0; |
| bottom: 46px; |
| } |
| .map-caption { |
| position: absolute; |
| bottom: 3px; |
| left: 0; |
| right: 0; |
| padding: 0; |
| border: 0; |
| pointer-events: none; |
| font-size: 8px; |
| } |
| .scope-strip { |
| display: none; |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| padding: 0; |
| align-items: end; |
| gap: 12px; |
| flex-direction: row; |
| } |
| .has-telescope .scope-strip { |
| display: flex; |
| } |
| .has-telescope .map-caption { |
| bottom: 43px; |
| } |
| .scope-strip .eyebrow { |
| font-size: 8px; |
| } |
| .scope-strip strong { |
| font-size: 9px; |
| margin-top: 4px; |
| } |
| .scope-actions { |
| width: auto; |
| gap: 6px; |
| } |
| .scope-actions button { |
| flex: none; |
| background: var(--paper); |
| font-size: 9px; |
| } |
| .scope-actions button:hover { |
| background: var(--faint); |
| } |
| .daylight-note { |
| bottom: 23px; |
| font-size: 8px; |
| } |
| .has-telescope .daylight-note { |
| bottom: 63px; |
| } |
| .time-deck { |
| min-height: 44px; |
| height: 44px; |
| padding: 7px 0; |
| border-bottom: 0; |
| gap: 14px; |
| } |
| .time-deck .day-slider { |
| max-width: none; |
| } |
| .toast { |
| bottom: 59px; |
| } |
|
|
| |
| .galaxy-stipple { |
| fill: var(--ink); |
| } |
| .galaxy-atlas svg { |
| overflow: hidden; |
| } |
| .galaxy-guide { |
| stroke: var(--rule); |
| fill: none; |
| stroke-width: 0.65; |
| stroke-dasharray: 1 4; |
| } |
| .galaxy-annotation { |
| stroke: var(--muted); |
| stroke-width: 0.65; |
| fill: none; |
| } |
| .galaxy-marker { |
| fill: var(--paper); |
| stroke: var(--ink); |
| stroke-width: 0.9; |
| } |
| .galaxy-marker-core { |
| fill: var(--ink); |
| } |
| .galaxy-caption { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| padding: 7px 0 0; |
| color: var(--muted); |
| font-size: 8px; |
| } |
| .context-diagram .galaxy-label { |
| font-size: 8px; |
| fill: var(--muted-strong); |
| } |
| .context-diagram .galaxy-distance { |
| font-size: 11px; |
| fill: var(--ink); |
| } |
| .galaxy-scale { |
| stroke: var(--dim); |
| fill: none; |
| stroke-width: 0.7; |
| } |
| .galaxy-atlas .diagram-note { |
| padding-top: 9px; |
| } |
|
|
| @media (min-width: 1700px) { |
| .app-shell { |
| padding-left: 28px; |
| padding-right: 28px; |
| } |
| .workspace { |
| grid-template-columns: 220px minmax(0, 1fr) 300px; |
| gap: 24px; |
| } |
| } |
| @media (max-width: 1250px) { |
| .app-shell { |
| padding: 8px 18px 0; |
| } |
| .workspace { |
| grid-template-columns: 185px minmax(0, 1fr) 248px; |
| gap: 16px; |
| } |
| .masthead { |
| grid-template-columns: 185px 1fr 248px; |
| gap: 16px; |
| } |
| .location-top small, |
| .date-label { |
| display: none; |
| } |
| .search-box input { |
| font-size: 9px; |
| } |
| .scope-actions button { |
| font-size: 8px; |
| padding: 5px; |
| } |
| .scope-strip strong { |
| font-size: 8px; |
| } |
| .map-caption span + span { |
| display: none; |
| } |
| } |
| @media (min-width: 761px) and (max-width: 1000px) { |
| .app-shell { |
| padding: 6px 12px 0; |
| } |
| .workspace { |
| grid-template-columns: 166px minmax(0, 1fr) 216px; |
| gap: 12px; |
| } |
| .masthead { |
| grid-template-columns: 166px 1fr 216px; |
| gap: 12px; |
| } |
| .scope-strip { |
| align-items: start; |
| flex-direction: column; |
| gap: 6px; |
| } |
| .scope-strip .eyebrow { |
| display: none; |
| } |
| .has-telescope .map-caption { |
| bottom: 54px; |
| font-size: 7px; |
| } |
| .has-telescope .zoom-controls { |
| bottom: 75px; |
| } |
| .search-box { |
| width: calc(100% - 222px); |
| } |
| .search-box kbd { |
| display: none; |
| } |
| } |
| @media (max-width: 760px) { |
| .app-shell { |
| padding: 6px 12px 0; |
| } |
| .masthead { |
| height: 34px; |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| } |
| .brand { |
| align-items: center; |
| } |
| .brand h1 { |
| font-size: 15px; |
| letter-spacing: 4px; |
| } |
| .earth-time { |
| display: none; |
| } |
| .location-top { |
| font-size: 9px; |
| gap: 5px; |
| } |
| .location-top .eyebrow, |
| .location-top small { |
| display: none; |
| } |
| .mobile-tabs { |
| margin-top: 6px; |
| } |
| .mobile-tabs button { |
| font-size: 9px; |
| min-height: 26px; |
| padding: 4px; |
| } |
| .workspace { |
| display: block; |
| height: auto; |
| min-height: 0; |
| padding: 8px 0; |
| } |
| .mobile-sky .sky-stage { |
| height: calc(100dvh - 168px); |
| min-height: 360px; |
| } |
| .stage-top { |
| flex-direction: row; |
| } |
| .search-box { |
| width: calc(100% - 222px); |
| } |
| .search-box input { |
| font-size: 9px; |
| } |
| .search-results { |
| width: calc(100vw - 24px); |
| max-height: 280px; |
| } |
| .map-readout { |
| top: 39px; |
| font-size: 8px; |
| gap: 5px; |
| } |
| .map-caption { |
| font-size: 7px; |
| } |
| .scope-strip { |
| flex-direction: column; |
| align-items: stretch; |
| gap: 7px; |
| } |
| .scope-strip > div:first-child { |
| display: flex; |
| align-items: baseline; |
| justify-content: space-between; |
| gap: 10px; |
| } |
| .scope-strip strong { |
| margin: 0; |
| } |
| .scope-actions { |
| width: 100%; |
| } |
| .scope-actions button { |
| flex: 1; |
| } |
| .has-telescope .map-caption { |
| bottom: 58px; |
| } |
| .zoom-controls { |
| bottom: 35px; |
| } |
| .has-telescope .zoom-controls { |
| bottom: 76px; |
| } |
| .has-telescope .daylight-note { |
| bottom: 76px; |
| font-size: 6px; |
| } |
| .time-deck { |
| height: 80px; |
| min-height: 80px; |
| padding: 7px 0; |
| gap: 7px; |
| } |
| .toast { |
| bottom: 89px; |
| } |
| .right-rail .galaxy-atlas svg { |
| max-height: 320px; |
| } |
| } |
| .solar-controls { |
| display: flex; |
| gap: 0; |
| margin-top: 12px; |
| } |
| .solar-controls button { |
| flex: 1; |
| font-size: 8px; |
| min-height: 23px; |
| padding: 4px; |
| } |
| .solar-controls button + button { |
| border-left: 0; |
| } |
| .solar-distance { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 10px; |
| margin: 4px 0 9px; |
| font-size: 8px; |
| color: var(--muted); |
| } |
| .solar-distance strong { |
| color: var(--ink); |
| font-size: 10px; |
| font-weight: 400; |
| } |
| .satellite-sources { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 9px 15px; |
| margin: -7px 0 17px; |
| font-size: 8px; |
| color: var(--muted); |
| } |
| .object-stats strong { |
| overflow-wrap: anywhere; |
| } |
|
|
| |
| .heading-controls { |
| position: absolute; |
| bottom: 26px; |
| left: 50%; |
| transform: translateX(-50%); |
| display: flex; |
| align-items: center; |
| background: var(--paper); |
| } |
| .heading-controls span { |
| min-width: 100px; |
| text-align: center; |
| font-size: 10px; |
| } |
| .heading-controls button { |
| width: 34px; |
| min-height: 30px; |
| padding: 4px; |
| } |
| .personal-stage .map-readout { |
| flex-direction: row; |
| gap: 14px; |
| } |
| .personal-stage .zoom-controls { |
| bottom: 110px; |
| } |
| .personal-stage .daylight-note { |
| bottom: 65px; |
| } |
| .personal-stage.has-telescope .heading-controls { |
| bottom: 64px; |
| } |
| .personal-stage.has-telescope .zoom-controls { |
| bottom: 148px; |
| } |
| .personal-stage.has-telescope .daylight-note { |
| bottom: 103px; |
| } |
| @media (max-width: 1000px) { |
| .view-switch button { |
| padding: 5px 5px; |
| font-size: 8px; |
| } |
| .search-box { |
| width: calc(100% - 184px); |
| } |
| .search-box kbd { |
| display: none; |
| } |
| .search-box { |
| gap: 4px; |
| } |
| .personal-stage .map-readout { |
| gap: 9px; |
| } |
| } |
|
|
| .terrain-controls { |
| position: absolute; |
| right: 0; |
| top: 36px; |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| .terrain-controls button { |
| font-size: 7px; |
| min-height: 21px; |
| padding: 4px 6px; |
| background: var(--paper); |
| } |
| .terrain-controls button[aria-pressed="true"] { |
| border-color: var(--border); |
| } |
| .terrain-controls span:not(:empty) { |
| position: absolute; |
| right: 0; |
| top: 26px; |
| width: 190px; |
| font-size: 7px; |
| text-align: right; |
| color: var(--muted); |
| background: var(--paper); |
| pointer-events: none; |
| } |
| .personal-stage .map-readout { |
| max-width: calc(100% - 112px); |
| flex-wrap: wrap; |
| } |
| .address-lookup { |
| margin: 20px 0; |
| } |
| .address-search-row { |
| display: flex; |
| gap: 8px; |
| margin-top: 7px; |
| } |
| .address-search-row input { |
| flex: 1; |
| min-width: 0; |
| margin-top: 0; |
| } |
| .address-search-row button { |
| flex: none; |
| font-size: 9px; |
| } |
| .address-results { |
| border-bottom: 1px solid var(--rule); |
| } |
| .address-results button { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| width: 100%; |
| text-align: left; |
| border: 0; |
| border-top: 1px solid var(--rule); |
| padding: 10px 4px; |
| font-size: 10px; |
| } |
| .lookup-elevation { |
| margin: -4px 0 16px; |
| font-size: 9px; |
| } |
| .terrain-obstruction { |
| font-size: 9px; |
| border-left: 2px solid var(--muted); |
| padding-left: 8px; |
| color: var(--muted); |
| } |
| .location-modal { |
| max-height: calc(100dvh - 40px); |
| overflow-y: auto; |
| } |
| @media (max-width: 760px) { |
| .personal-stage .map-readout { |
| gap: 4px 8px; |
| font-size: 7px; |
| } |
| .terrain-controls { |
| top: 34px; |
| } |
| .location-modal { |
| max-height: calc(100dvh - 24px); |
| } |
| } |
| .satellite-trails-control { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 8px; |
| margin-top: 10px; |
| font-size: 9px; |
| } |
| .satellite-trails-control [role="group"] { display: flex; } |
| .satellite-trails-control button { padding: 5px 8px; } |
| .satellite-trails-control button + button { margin-left: -1px; } |
| .satellite-trails-control button[aria-pressed="true"] { |
| background: var(--ink); |
| color: var(--paper); |
| border-color: var(--ink); |
| } |
| .star-cutoff { |
| margin: 12px 0 0; |
| padding-top: 10px; |
| border-top: 1px solid var(--rule); |
| } |
| .star-cutoff .range-heading { |
| margin-bottom: 7px; |
| font-size: 9px; |
| } |
| .star-cutoff output { |
| font-size: 10px; |
| color: var(--ink); |
| } |
| .star-cutoff input { |
| width: 100%; |
| } |
| .star-cutoff .small-note { |
| margin: 7px 0 0; |
| font-size: 8px; |
| line-height: 1.5; |
| } |
| .star-cutoff.disabled { |
| opacity: 0.5; |
| } |
|
|
| .deep-star-status button { |
| display: block; |
| width: 100%; |
| margin-top: 7px; |
| padding: 5px; |
| font-size: 8px; |
| } |
| .object-heading h2.catalogue-star-name { |
| font-size: 19px; |
| line-height: 1.4; |
| overflow-wrap: anywhere; |
| } |
|
|
| .galaxy-symbol { |
| display: inline-block; |
| width: 10px; |
| height: 10px; |
| border: 1px dashed currentColor; |
| border-radius: 50%; |
| vertical-align: -1px; |
| } |
|
|
| |
| .left-rail [hidden] { display: none; } |
| .sky-controls { display: flex; flex-direction: column; gap: inherit; } |
| .control-panel-tabs { display: flex; } |
| .control-panel-tabs button { flex: 1; font-size: 10px; padding: 7px 4px; } |
| .control-panel-tabs button + button { border-left: 0; } |
| .layer-row .object-symbol { flex: 0 0 21px; } |
| .layer-row .object-symbol svg { display: block; width: 17px; height: 17px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; } |
| .telescope-blueprint { margin: 12px 0 13px; } |
| .telescope-blueprint svg { display: block; width: 100%; } |
| .telescope-blueprint svg text { font: 9px Departure, monospace; fill: var(--muted); stroke: none; } |
| .blueprint-guide { fill: none; stroke: var(--rule); stroke-width: .65; stroke-dasharray: 2 4; } |
| .blueprint-surface { stroke: var(--muted); stroke-width: .75; stroke-linejoin: round; } |
| .blueprint-surface.tube { fill: var(--paper); stroke: var(--ink); stroke-width: 1.05; } |
| .blueprint-surface.metal, .blueprint-surface.leg { fill: var(--paper); } |
| .blueprint-surface.mount, .blueprint-surface.weight, .blueprint-surface.glass { fill: var(--faint); stroke: var(--ink); } |
| .blueprint-surface.dark { fill: var(--muted); stroke: var(--ink); } |
| .blueprint-surface.cap { stroke-width: .9; } |
| .blueprint-surface.detail { fill: none; stroke: var(--dim); stroke-width: .55; } |
| .blueprint-axis-readouts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); padding-top: 3px; } |
| .blueprint-axis-readouts > svg + svg { border-left: 1px solid var(--rule); } |
| .blueprint-dial { fill: none; stroke: var(--muted); stroke-width: .8; } |
| .blueprint-dial .dial-inner { stroke: var(--rule); stroke-width: .5; } |
| .blueprint-dial .motor-needle { stroke: var(--ink); stroke-width: 1.2; } |
| .blueprint-dial .motor-hub { fill: var(--paper); stroke: var(--ink); } |
| .blueprint-dial .axis-value { fill: var(--ink); font-size: 12px; } |
| .telescope-blueprint figcaption { display: flex; justify-content: space-between; font-size: 7px; color: var(--muted); margin-top: 3px; letter-spacing: .04em; } |
| .motor-buttons button { font-size: 9px; padding: 6px 3px; } |
| .motor-buttons button[aria-pressed="true"] { background: var(--faint); border-color: var(--border); } |
| .telescope-target { margin: 20px 0 9px; } |
| .telescope-target strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: normal; margin: 6px 0; } |
| .telescope-target small { color: var(--muted); font-size: 8px; } |
| .telescope-slew { width: 100%; display: flex; justify-content: space-between; font-size: 10px; } |
| .telescope-pointing { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 6px 0 14px; } |
| .telescope-pointing button { width: 100%; padding: 7px 3px; text-align: left; font-size: 9px; } |
| .telescope-readout { border-block: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 9px 0; margin: 0 0 15px; font-size: 9px; color: var(--muted); } |
| .telescope-readout span:last-child { width: 100%; font-size: 8px; } |
| :root[data-theme="dark"] { |
| --paper: #141513; |
| --ink: #e1e3da; |
| --muted: #aeb2a6; |
| --rule: #41473b; |
| --faint: #292d24; |
| --dark: #ecefe5; |
| --hover: #2c3027; |
| --border: #666e5e; |
| --dim: #93998b; |
| --muted-strong: #c0c5b9; |
| --button-hover-ink: #f0f2e9; |
| --grid: #383e32; |
| --soft-shadow: #00000066; |
| --backdrop: #0d100ddd; |
| color-scheme: dark; |
| } |
| .masthead { |
| grid-template-columns: 210px minmax(0, 1fr) auto 66px; |
| } |
| .theme-toggle { |
| min-height: 25px; |
| padding: 4px 5px; |
| font-size: 9px; |
| white-space: nowrap; |
| } |
| @media (max-width: 1250px) { |
| .masthead { |
| grid-template-columns: 185px minmax(0, 1fr) auto 66px; |
| } |
| } |
| @media (min-width: 761px) and (max-width: 1000px) { |
| .masthead { |
| grid-template-columns: 166px minmax(0, 1fr) auto 58px; |
| } |
| .location-top .eyebrow { |
| display: none; |
| } |
| } |
| @media (max-width: 760px) { |
| .masthead { |
| grid-template-columns: max-content minmax(0, 1fr) 58px; |
| } |
| .location-top { |
| min-width: 0; |
| max-width: 100%; |
| } |
| .location-top > span:not(.eyebrow) { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .brand { |
| align-items: flex-start; |
| } |
| } |
|
|
