/* Every color is sampled from the airfield panorama the demo flies over (Poly Haven's
   "Derelict Airfield 01", CC0): asphalt in shade for the page, worn asphalt for lines,
   cloud and runway paint for the text, the sky for controls and the telemetry title,
   and tree shade for ink on the sky and the instrument glass. Orange is the tube
   rings' safety band.
   The view fills the window; everything else is instrument glass laid over the photo,
   in Barlow (after airfield and highway signage), with readouts in its condensed cut. */
:root {
    --bg: #333237;           /* asphalt in shade */
    --surface: #454448;      /* asphalt */
    --hairline: #5a595d;     /* worn asphalt */
    --text: #cad7ed;         /* cloud */
    --text-2: #9d9ea1;       /* runway paint */
    --text-3: rgba(202, 215, 237, 0.6);
    --accent: #6090c8;       /* sky */
    --accent-ink: #171f16;   /* tree shade */
    --ring: #ff4808;         /* the rings' orange band */
    --glass: rgba(23, 31, 22, 0.66);
    --glass-edge: rgba(202, 215, 237, 0.12);
    --button: rgba(202, 215, 237, 0.1);
    --radio: #1d1d20;
    --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-readout: "Barlow Semi Condensed", "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
    --gutter: 14px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 var(--font);
}

a { color: inherit; text-underline-offset: 2px; }

/* --- The view */

.sim {
    position: fixed;
    inset: 0;
    background: #6597cd;
    overflow: hidden;
}

#view {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}
#view:active { cursor: grabbing; }

/* Overlays sit in the corners of a grid over the view; only controls take the pointer */
.hud-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: var(--gutter);
    padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
             max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    pointer-events: none;
}

.glass {
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.title-card {
    grid-area: 1 / 1;
    align-self: start;
    max-width: 330px;
    padding: 12px 16px 13px;
    border-radius: 8px;
    pointer-events: auto;
}
.title-card .site { display: inline-block; font-size: 13px; color: var(--text-3); text-decoration: none; }
.title-card .site:hover { color: var(--text); }
.title-card h1 { margin: 1px 0 4px; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.description { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: var(--text-2); }

button.link {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: 500 15px/1.4 var(--font);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(96, 144, 200, 0.5);
    cursor: pointer;
}
button.link:hover { color: var(--text); text-decoration-color: currentColor; }

.status {
    grid-area: 1 / 2;
    justify-self: center;
    align-self: start;
    margin-top: 4px;
    padding: 5px 14px;
    border-radius: 6px;
    background: var(--glass);
    font: 500 15px var(--font);
    white-space: nowrap;
    pointer-events: none;
}
.status[hidden] { display: none; }

/* Telemetry, top right */
.hud { grid-area: 1 / 3; align-self: start; pointer-events: none; }
.telemetry {
    min-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    font: 500 15px/1.45 var(--font-readout);
}
.telemetry-title { background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 3px 12px; }
.telemetry dl { display: grid; grid-template-columns: auto auto; gap: 0 16px; margin: 0; padding: 6px 12px 8px; }
.telemetry dt { color: var(--text-2); }
.telemetry dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* Track, camera and toggles, bottom left */
.dock {
    grid-area: 3 / 1;
    align-self: end;
    width: 520px;
    max-width: 100%;
    padding: 12px 14px 12px;
    border-radius: 8px;
    pointer-events: auto;
}
.row { display: flex; align-items: baseline; gap: 12px; }
.row-label { flex: 0 0 56px; font-size: 14px; color: var(--text-2); }
.choices { display: flex; flex-wrap: wrap; gap: 4px; }
.note {
    margin: 3px 0 10px 68px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-3);
    min-height: 1.35em;
    /* one line, so switching views or tracks never moves the buttons */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toggles { gap: 4px; padding-left: 68px; }

.dock button {
    font: 500 14px/1.2 var(--font);
    padding: 6px 11px;
    border: none;
    border-radius: 4px;
    background: var(--button);
    color: var(--text);
    cursor: pointer;
}
.dock button:hover { background: rgba(202, 215, 237, 0.18); }
.dock button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* The radio, bottom right */
.radio-box { grid-area: 3 / 3; align-self: end; width: min(24vw, 280px); margin: 0 -4px -6px 0; pointer-events: none; }
.radio { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45)); }
.radio .antenna { fill: #111113; }
.radio .body { fill: var(--radio); stroke: #3a3a3f; stroke-width: 1; }
.radio .bevel { fill: none; stroke: #4a4a50; stroke-width: 1.2; }
.radio .switch-base { fill: #8d9096; }
.radio .switch { fill: #c9ccd2; }
.radio .lcd { fill: #a9b6ac; stroke: #0d0d0e; stroke-width: 1.5; }
.radio .lcd-text { font: 600 7px var(--font-readout); fill: #1d241f; letter-spacing: 0.3px; }
.radio .lcd-text.small { font-weight: 500; font-variant-numeric: tabular-nums; }
.radio .bezel { fill: #2b2b30; stroke: #45454b; stroke-width: 1; }
.radio .well { fill: #0b0b0c; }
.radio .tick { stroke: #5c5f66; stroke-width: 1.2; }
.radio .pivot { fill: #3b3d42; }
.radio .shaft { stroke: #b9bcc2; stroke-width: 3.2; stroke-linecap: round; }
.radio .tip { fill: var(--ring); stroke: #7a2204; stroke-width: 1; }
.radio .tip-dot { fill: rgba(255, 255, 255, 0.5); }
.radio .label { font: 600 6.2px var(--font-readout); fill: #7d8088; letter-spacing: 0.6px; }

/* --- How it works: a panel over the left of the view, which keeps running */

.about {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: min(500px, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(51, 50, 55, 0.97);
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.4);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 240ms;
}
.about.open { transform: none; visibility: visible; transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }

.about .close {
    position: sticky;
    top: 10px;
    float: right;
    margin: 10px 10px 0 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font: 24px/1 var(--font);
    cursor: pointer;
}
.about .close:hover { background: var(--hairline); }

.prose { padding: 28px max(28px, env(safe-area-inset-left)) 64px; color: var(--text-2); font-size: 16.5px; line-height: 1.6; }
.prose .lede { margin: 0 32px 8px 0; font-size: 19px; line-height: 1.45; color: var(--text); }
.prose h2 { color: var(--text); font-size: 22px; font-weight: 600; margin: 32px 0 8px; line-height: 1.3; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin: 0 0 6px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose .credits { margin-top: 32px; font-size: 14px; line-height: 1.5; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
    .about, .about.open { transition: none; }
}

/* --- Phones: title and telemetry across the top, controls across the bottom */

@media (max-width: 640px) {
    :root { --gutter: 8px; }
    .hud-layer {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto 1fr auto auto;
    }
    .title-card { grid-area: 1 / 1; padding: 8px 12px 9px; }
    .title-card h1 { font-size: 22px; margin: 0 0 2px; }
    .title-card .site, .description { display: none; }
    button.link { font-size: 14px; }
    .status { grid-area: 2 / 1 / 3 / 3; margin-top: 0; font-size: 14px; }
    .hud { grid-area: 1 / 2; }
    .telemetry { min-width: 0; font-size: 12.5px; line-height: 1.35; }
    .telemetry-title { padding: 2px 8px; }
    .telemetry dl { padding: 4px 8px 5px; gap: 0 10px; }
    .radio-box { grid-area: 4 / 2; width: 42vw; margin: 0 -2px -4px 0; }
    .dock { grid-area: 5 / 1 / 6 / 3; width: auto; padding: 9px 10px 10px; }
    .row-label, #course-note { display: none; }
    .note { margin: 3px 0 7px; font-size: 12.5px; }
    .toggles { padding-left: 0; }
    .dock .row:first-child { margin-bottom: 5px; }
    .dock button { font-size: 13.5px; padding: 6px 8px; }
}

/* --- Short screens (phones held sideways): title, telemetry and dock compact, no hints */

@media (max-height: 520px) {
    :root { --gutter: 8px; }
    .title-card { padding: 8px 12px 9px; }
    .title-card h1 { font-size: 22px; margin: 0 0 2px; }
    .title-card .site, .description, .note { display: none; }
    .telemetry { min-width: 0; font-size: 12.5px; line-height: 1.35; }
    .telemetry-title { padding: 2px 8px; }
    .telemetry dl { padding: 4px 8px 5px; gap: 0 10px; }
    .dock { width: auto; padding: 8px 10px; }
    .row-label { display: none; }
    .row { margin-bottom: 6px; }
    .row:last-child { margin-bottom: 0; }
    .toggles { padding-left: 0; }
    .dock button { font-size: 13.5px; padding: 5px 8px; }
    .radio-box { width: min(22vw, 190px); }
}