@font-face {
        font-family: "Departure Mono";
        src: url("../fonts/DepartureMono-Regular.woff2") format("woff2"),
                url("../fonts/DepartureMono-Regular.woff") format("woff");
        font-style: normal;
        font-weight: 400;
        font-display: swap;
}

:root {
        --paper: #fdfdfc;
        --surface-low: #f3f3f0;
        --ink: #3b372f;
        --line: #d9d9d3;
        --fg: var(--ink);
        --bg: var(--paper);
        --font-mono: "Departure Mono", monospace;
        --rule: "///////////////////////////////////////////////////////////////////////////////////////////////////////";
        --rule-line: "─────────────────────────────────────────────────────────────────────────────────────────────────────────";
        --sidebar-width: 24rem;
        --orbit: #dabb09;
        --orbit-past: rgba(218, 187, 9, 0.55);
        --globe-stage: #b0b0b0;
        --globe-base: #9a9a9a;
        --globe-land: #d8d8d8;
        --map-base: rgba(253, 253, 252, 0.6);
        --map-coast: rgba(253, 253, 252, 0.82);
        --map-graticule: rgba(253, 253, 252, 0.26);
        --map-range: rgba(253, 253, 252, 0.42);
        --station-area: rgba(111, 143, 99, 0.26);
        --station-bg: #6f8f63;
        --satellite-bg: #3f78b0;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
        margin: 0;
        padding: 44px;
        padding-right: calc(var(--sidebar-width) + 44px);
        background: var(--bg);
        color: var(--fg);
        color-scheme: light;
        font: 15px/1.45 var(--font-mono);
        text-transform: uppercase;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

::selection { color: var(--bg); background: var(--fg); }

.ov { width: 100%; max-width: 1200px; margin: 0 auto; }
.ov p, .ov pre { margin: 0; text-align: left; }
.ov a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ov a:hover, .ov a:focus-visible { color: var(--paper); background: var(--ink); text-decoration-color: transparent; }
.ov :focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.ov-label { padding-bottom: 1em; }

.ov-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 11px 22px;
        padding-bottom: 22px;
        margin-bottom: 44px;
        border-bottom: 1px dashed var(--line);
}

.ov-header-brand { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0.08em; }
.ov-header-tagline { font-size: 10px; letter-spacing: 0.04em; }

.ov-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "map" "controls";
        gap: 44px;
        align-items: start;
}

.ov-map-panel { grid-area: map; min-width: 0; }

.ov-map-frame {
        --fg: var(--paper);
        --bg: var(--ink);
        position: relative;
        padding: 1.2em 0;
        background: var(--bg);
        color: var(--fg);
}

.ov-map-frame::before,
.ov-map-frame::after {
        content: var(--rule);
        position: absolute;
        right: 0;
        left: 0;
        display: block;
        overflow: hidden;
        line-height: 1;
        white-space: nowrap;
}

.ov-map-frame::before { top: 0; }
.ov-map-frame::after { content: var(--rule); bottom: 0; }

.ov-ascii-layer {
        position: absolute;
        inset: 0;
        margin: 0;
        font-family: var(--font-mono);
        line-height: 1;
        white-space: pre;
        user-select: text;
        font-weight: 500;
}

.ov-map-stage {
        position: relative;
        width: 100%;
        aspect-ratio: 2 / 1;
        container-type: inline-size;
        overflow: hidden;
        background: var(--bg);
}

.ov-map-grid { font-size: 8px; font-size: calc(100cqw / 101.818); color: var(--map-base); }

.map-graticule { color: var(--map-graticule); }
.map-gs-area { background: var(--station-area); }
.map-coast { color: var(--map-coast); }
.map-orbit-past { color: var(--orbit-past); }
.map-orbit-future { background: var(--orbit); color: var(--bg); }
.map-range { color: var(--map-range); }
.map-gs { background: var(--station-bg); color: var(--bg); }
.map-sat { background: var(--satellite-bg); color: var(--fg); }

.ov-controls {
        grid-area: controls;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        min-width: 0;
}

.ov-controls > .ov-label { grid-column: 1 / -1; padding-bottom: 0; }
.ov-tle-panel { grid-column: 1 / -1; }
.ov-controls .ov-field label,
.ov-controls .ov-field output,
.ov-controls .ov-gs label,
.ov-controls .ov-panel input { font-size: 13px; }
.ov-controls .ov-panel textarea { min-height: 52px; padding: 4px 6px; font-size: 11px; }
.ov-controls .ov-hint { font-size: 11px; }

.ov-sidebar {
        --fg: var(--paper);
        --bg: var(--ink);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: var(--sidebar-width);
        overflow-y: auto;
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 28px 20px;
        background: var(--bg);
        color: var(--fg);
}

.ov-sidebar .ov-label { padding-bottom: 0.5em; }
.ov-panel { padding: 0; background: none; border: 0; }

.ov-table-frame { font-size: 13px; }
.ov-table { line-height: 1.45; }
.ov-table-edge { display: flex; line-height: 1; }
.ov-table-rule { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.ov-table-rule::before { content: var(--rule-line); }
.ov-table-row { display: grid; align-items: baseline; }
.ov-table-row::before { content: "│"; }
.ov-table-row::after { content: "│"; }

.status-row { grid-template-columns: 1ch 15ch minmax(0, 1fr) 1ch; }
.status-row span:first-child { padding-left: 1ch; }

.status-row span:last-child {
        overflow: hidden;
        padding-right: 1ch;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.ov-globe-stage { width: fit-content; margin-right: auto; margin-left: auto; padding: 2px; }
.ov-globe-stage .stage { position: relative; color: var(--globe-base); font: 6px/1 var(--font-mono); }
.ov-globe-grid { position: relative; color: var(--globe-base); text-shadow: 0 0 14px #ffffff14; }
.globe-land { color: var(--globe-land); text-shadow: 0 0 10px #ffffff24; }
.globe-orbit { color: var(--orbit); text-shadow: 0 0 10px rgba(255, 228, 92, 0.3); }
/* Same marker treatment as the map satellite. */
.globe-satellite { background: var(--satellite-bg); color: var(--fg); }

.ov-globe-note {
        margin-top: 4px;
        color: var(--globe-stage);
        font-size: 9px;
        line-height: 1.4;
        text-align: center;
}

.telemetry-row { grid-template-columns: 1ch 16ch minmax(0, 1fr) 8ch 1ch; }
.telemetry-row span:first-child { padding-left: 1ch; }
.telemetry-row span:nth-child(2) { text-align: right; }
.telemetry-row span:nth-child(3) { padding-right: 1ch; padding-left: 2ch; }

.ov-field label { display: flex; justify-content: space-between; margin-bottom: 2px; font-size: 15px; }
.ov-field label > span:first-child { margin-right: auto; }
.ov-field output { font-size: 15px; }
.ov-gs { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: 4px 11px; align-items: baseline; }
.ov-gs label { font-size: 15px; }

.ov button, .ov input, .ov textarea { font: inherit; }

.ov input[type="number"],
.ov textarea {
        display: block;
        width: 100%;
        padding: 3px 0;
        background: transparent;
        border: 0;
        border-bottom: 1px dashed var(--line);
        border-radius: 0;
        color: var(--ink);
        outline: none;
}

.ov input:focus,
.ov textarea:focus { border-bottom-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; }
.ov input[aria-invalid="true"] { border-bottom: 2px solid var(--ink); }

.ov input[type="range"] {
        width: 100%;
        height: 16px;
        margin: 4px 0 5px;
        background: transparent;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
}

.ov input[type="range"]::-webkit-slider-runnable-track,
.ov input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }

.ov input[type="range"]::-webkit-slider-thumb {
        width: 9px;
        height: 9px;
        margin-top: -4px;
        background: var(--ink);
        border: 0;
        border-radius: 0;
        -webkit-appearance: none;
        appearance: none;
}

.ov input[type="range"]::-moz-range-thumb {
        width: 9px;
        height: 9px;
        background: var(--ink);
        border: 0;
        border-radius: 0;
}

.ov-hint { margin-top: 6px !important; font-size: 10px; line-height: 1.5; }
.ov textarea { min-height: 66px; padding: 8px 11px; background: var(--surface-low); resize: vertical; border-bottom: 0; }
.ov textarea::placeholder { color: var(--ink); opacity: 0.55; }
.ov-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 11px; }

.ov button {
        padding: 0;
        background: none;
        border: 0;
        color: var(--ink);
        cursor: pointer;
        font-size: 10px;
        letter-spacing: 0.1em;
}

.ov button::before { content: "["; margin-right: 4px; }
.ov button::after { content: "]"; margin-left: 4px; }
.ov button:hover { color: var(--paper); background: var(--ink); }

.ov-message { flex-basis: 100%; min-height: 1.4em; font-size: 10px; }
.ov-message.is-error::before { content: "! "; }
.ov-message.is-success::before { content: "ok "; }

.ov-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 11px 22px; margin-top: 33px; }
.ov-footer p { font-size: 10px; letter-spacing: 0.04em; }

.ov-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
}

.ov-noscript { max-width: 1200px; margin: 22px auto; font-size: 10px; }

@media (max-width: 920px) {
        body { padding: 22px; }
        .ov-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "controls" "sidebar"; gap: 22px; }
        .ov-sidebar {
                position: static;
                width: auto;
                overflow: visible;
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 16px;
                padding: 18px 14px;
        }
}

@media (max-width: 720px) {
        body { padding: 16px; }
        .ov-controls { grid-template-columns: minmax(0, 1fr); }
        .ov-controls .ov-panel textarea { font-size: 10px; }
        .ov-actions { gap: 11px; }
}