/* ============================================================
   3D Flight Simulator - Styles
   ============================================================ */

/* ---- Weather Tokens ----

   Every themed color in this file is one of the tokens below, so the
   palette can be swapped wholesale from the local weather without
   touching a rule. Colors are stored as bare "r, g, b" triplets rather
   than complete colors, so a single token serves every alpha it is used
   at: rgba(var(--wx-accent-rgb), 0.3).

   weatherTheme.js overwrites these on <html> at load. The values here
   are the "medium / sunny / day" row of its tables, which is the palette
   the app shipped with, so the page still renders correctly if that
   script never runs.

   Three literals are deliberately not tokenized: the black drop shadows
   that keep the HUD readable over bright satellite imagery, and the red
   on .dest-message, which has to stay legible as an error in every
   weather.

   See local-weather-style/STYLE.md. */
:root {
    --wx-page-bg-rgb: 0, 0, 0;

    --wx-accent-rgb: 100, 200, 255;
    --wx-accent-alt-rgb: 120, 215, 255;
    --wx-text-rgb: 235, 246, 255;
    --wx-muted-rgb: 130, 170, 210;
    --wx-good-rgb: 100, 255, 180;
    --wx-warn-rgb: 255, 200, 100;

    --wx-panel-rgb: 0, 8, 24;
    --wx-control-rgb: 10, 20, 40;

    --wx-card-rgb: 238, 242, 245;
    --wx-card-ink-rgb: 22, 40, 63;
    --wx-field-rgb: 22, 40, 63;
    --wx-field-hi-rgb: 33, 57, 90;
    --wx-field-ink-rgb: 220, 234, 246;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: rgb(var(--wx-page-bg-rgb));
    color: rgb(var(--wx-text-rgb));
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* ---- Canvas Container ---- */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Top Bar ---- */

/*
   The selector panel and the location readout share one row. The bar
   mirrors the selector panel's measured width as right padding so the
   readout reads as centered in the panel rather than in the space left
   over beside the menu. When the panel is too narrow for both, app.js
   adds .stacked and the readout takes its own row underneath.

   --selector-width and --top-bar-height are published by app.js.
*/
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px;
    padding-right: calc(12px + var(--selector-width, 0px));
    pointer-events: none;
}

#top-bar.stacked {
    padding-right: 12px;
}

/* ---- Capital Selector ---- */
#selector-panel {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(var(--wx-panel-rgb), 0.65);
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.2);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

#selector-panel label {
    font-size: 0.75rem;
    color: rgb(var(--wx-muted-rgb));
    text-transform: uppercase;
    letter-spacing: 1px;
}

#capital-select {
    padding: 5px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.3);
    border-radius: 3px;
    background: rgba(var(--wx-control-rgb), 0.9);
    color: rgb(var(--wx-text-rgb));
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 100%;
    outline: none;
}

#capital-select:focus {
    border-color: rgba(var(--wx-accent-rgb), 0.6);
}

#capital-select optgroup {
    color: rgb(var(--wx-muted-rgb));
    font-weight: bold;
}

#capital-select option {
    color: rgb(var(--wx-text-rgb));
    background: rgb(var(--wx-control-rgb));
}

/* ---- HUD Overlay ---- */
#hud {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

/* Location display (lives in #top-bar; the flex basis below is mirrored
   by LOCATION_MIN_WIDTH in app.js, which decides when to stack) */
#hud-location {
    /* flex: 1 1 240px; */
    min-width: 0;
    text-align: center;
}

/* Both lines sit over bright satellite imagery, so they carry a hard
   1px drop shadow rather than a blurred glow. A blur radius spreads the
   dark halo through the glyphs themselves and softens the strokes, which
   is what made the coordinates unreadable against a pale sky. */
#hud-capital {
    font-size: calc(1rem + 2pt);
    color: rgb(var(--wx-text-rgb));
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* white-space: pre keeps the two spaces that separate the latitude from
   the longitude; normal whitespace handling would collapse them to one */
#hud-coords {
    font-size: calc(0.72rem + 2pt);
    color: rgba(var(--wx-text-rgb), 0.92);
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

/* Heading: sits under the top bar at whatever height it settled on */
#hud-heading {
    position: absolute;
    top: calc(var(--top-bar-height, 56px) + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(var(--wx-panel-rgb), 0.35);
    padding: 3px 16px;
    border-radius: 3px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.15);
}

#hud-heading-value {
    font-size: 0.9rem;
    color: rgba(var(--wx-accent-alt-rgb), 0.85);
    text-shadow: 0 0 6px rgba(var(--wx-accent-rgb), 0.3);
}

/* Speed (left side) */
#hud-speed {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background: rgba(var(--wx-panel-rgb), 0.35);
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.15);
}

#hud-speed .hud-label {
    font-size: 0.65rem;
    color: rgba(var(--wx-accent-rgb), 0.5);
    letter-spacing: 2px;
    margin-bottom: 4px;
}

#hud-speed-value {
    font-size: 1.6rem;
    color: rgba(var(--wx-good-rgb), 0.9);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(var(--wx-good-rgb), 0.3);
}

#hud-speed .hud-unit {
    font-size: 0.6rem;
    color: rgba(var(--wx-accent-rgb), 0.4);
    margin-top: 2px;
}

/* Altitude (right side) */
#hud-altitude {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background: rgba(var(--wx-panel-rgb), 0.35);
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.15);
}

#hud-altitude .hud-label {
    font-size: 0.65rem;
    color: rgba(var(--wx-accent-rgb), 0.5);
    letter-spacing: 2px;
    margin-bottom: 4px;
}

#hud-altitude-value {
    font-size: 1.6rem;
    color: rgba(var(--wx-warn-rgb), 0.9);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(var(--wx-warn-rgb), 0.3);
}

#hud-altitude .hud-unit {
    font-size: 0.6rem;
    color: rgba(var(--wx-accent-rgb), 0.4);
    margin-top: 2px;
}

/* Crosshair */
#hud-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: rgba(var(--wx-text-rgb), 0.4);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

/* Pitch indicator */
#hud-pitch {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(80px);
    text-align: center;
}

#hud-pitch-value {
    font-size: 0.75rem;
    color: rgba(var(--wx-muted-rgb), 0.6);
}

/* ---- Click to Fly Prompt ---- */
#fly-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 80;
    text-align: center;
    pointer-events: none;
}

#fly-prompt .prompt-text {
    font-size: 1.8rem;
    color: rgba(var(--wx-text-rgb), 0.9);
    text-shadow: 0 0 20px rgba(var(--wx-accent-rgb), 0.5);
    animation: pulse 2s ease-in-out infinite;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#fly-prompt .prompt-hint {
    margin-top: 8px;
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: rgba(var(--wx-muted-rgb), 0.6);
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ---- Controls Help ---- */
#controls-help {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    text-align: center;
    background: rgba(var(--wx-panel-rgb), 0.5);
    padding: 8px 20px;
    border-radius: 6px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.15);
    pointer-events: none;
    font-size: 0.72rem;
    color: rgba(var(--wx-muted-rgb), 0.8);
    line-height: 1.6;
    transition: opacity 2s ease;
}

#controls-help.fade-out {
    opacity: 0;
}

/* ---- Static Controls List ---- */
#controls-list {
    position: fixed;
    left: 12px;
    bottom: 20px;
    z-index: 60;
    background: rgba(var(--wx-panel-rgb), 0.3);
    border: 1px solid rgba(var(--wx-accent-rgb), 0.1);
    border-radius: 4px;
    padding: 8px 12px;
    pointer-events: none;
    font-size: 0.62rem;
    color: rgba(var(--wx-muted-rgb), 0.6);
}

#controls-list .controls-title {
    font-size: 0.58rem;
    color: rgba(var(--wx-muted-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

#controls-list ul {
    list-style: none;
}

#controls-list li {
    line-height: 1.55;
    white-space: nowrap;
}

#controls-list li span {
    display: inline-block;
    width: 52px;
    color: rgba(var(--wx-accent-alt-rgb), 0.7);
}

/* ---- Pause Indicator ---- */
#pause-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 95;
    background: rgba(var(--wx-panel-rgb), 0.45);
    padding: 12px 28px;
    border-radius: 8px;
    border: 1px solid rgba(var(--wx-warn-rgb), 0.3);
    pointer-events: none;
    font-size: 1.6rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(var(--wx-warn-rgb), 0.9);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/* ---- Loading Overlay ---- */
#loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 90;
    text-align: center;
    background: rgba(var(--wx-panel-rgb), 0.85);
    padding: 30px 50px;
    border-radius: 10px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.2);
    backdrop-filter: blur(10px);
}

#loading-text {
    font-size: 1rem;
    color: rgba(var(--wx-muted-rgb), 0.9);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#loading-bar-container {
    width: 240px;
    height: 4px;
    background: rgba(var(--wx-muted-rgb), 0.28);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

#loading-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--wx-accent-rgb), 0.7), rgb(var(--wx-accent-alt-rgb)));
    border-radius: 2px;
    transition: width 0.3s ease;
}

#loading-progress {
    font-size: 0.8rem;
    color: rgba(var(--wx-muted-rgb), 0.7);
    margin-top: 8px;
}

/* ---- Welcome Screen ---- */
#welcome {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    text-align: center;
    pointer-events: none;
}

#welcome h1 {
    font-size: 2.2rem;
    color: rgba(var(--wx-text-rgb), 0.9);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(var(--wx-accent-rgb), 0.3);
    margin-bottom: 8px;
}

#welcome p {
    font-size: 0.85rem;
    color: rgba(var(--wx-muted-rgb), 0.6);
    letter-spacing: 1px;
}

#welcome .welcome-hint {
    margin-top: 20px;
    font-size: 0.75rem;
    color: rgba(var(--wx-muted-rgb), 0.5);
    animation: pulse 3s ease-in-out infinite;
}

/* ---- Agent Status ---- */

/* Clears the controls help that sits at the bottom edge, so both can be
   on screen during the five seconds before the help fades */
#agent-status {
    position: fixed;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    max-width: min(560px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(var(--wx-panel-rgb), 0.8);
    border: 1px solid rgba(var(--wx-accent-rgb), 0.25);
    font-size: 0.75rem;
    color: rgba(var(--wx-text-rgb), 0.9);
    pointer-events: none;
}

#agent-status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--wx-good-rgb));
    animation: pulse 1.6s ease-in-out infinite;
}

/* A finished job leaves the last status readable but stops the pulse */
#agent-status.idle #agent-status-dot {
    background: rgba(var(--wx-muted-rgb), 0.5);
    animation: none;
}

#agent-status-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#agent-status-tokens {
    flex: 0 0 auto;
    color: rgba(var(--wx-accent-alt-rgb), 0.65);
}

#agent-status-tokens:empty {
    display: none;
}

/* ---- Utility ---- */
.hidden {
    display: none !important;
}

/* ---- Destination Input Dialog ---- */

/* The "Input Destination" entry is the only action in the menu, so it
   is set apart from the capitals listed under it. */
#opt-input-destination {
    background: rgb(var(--wx-card-rgb));
    color: rgb(var(--wx-field-rgb));
    font-weight: bold;
}

/* Sits above the top bar so the dialog is never partly behind the menu,
   and covers the canvas so a click cannot engage flight behind it. The
   card hangs from just under the bar rather than centering, so it stays
   next to the menu entry that opened it. */
#destination-dialog {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    padding-top: calc(var(--top-bar-height, 56px) + 16px);
    background: rgba(var(--wx-panel-rgb), 0.45);
}

.destination-card {
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - var(--top-bar-height, 56px) - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(var(--wx-card-rgb), 0.97);
    border: 1px solid rgba(var(--wx-card-ink-rgb), 0.3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

#destination-form,
#destination-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dest-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Fixed basis keeps the three fields on one left edge regardless of
   how wide the individual label text is */
.dest-label {
    flex: 0 0 92px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(var(--wx-card-ink-rgb), 0.18);
    color: rgb(var(--wx-card-ink-rgb));
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-align: center;
}

.dest-row input,
.dest-row select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.35);
    background: rgb(var(--wx-field-rgb));
    color: rgb(var(--wx-field-ink-rgb));
    outline: none;
}

.dest-row input::placeholder {
    color: rgba(var(--wx-field-ink-rgb), 0.55);
}

.dest-row input:focus,
.dest-row select:focus {
    border-color: rgba(var(--wx-accent-alt-rgb), 0.85);
}

.dest-row select option {
    background: rgb(var(--wx-field-rgb));
    color: rgb(var(--wx-field-ink-rgb));
}

#dest-result-list {
    list-style: none;
    max-height: 210px;
    overflow-y: auto;
    padding: 6px 4px;
    border-radius: 10px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.35);
    background: rgb(var(--wx-field-rgb));
    outline: none;
}

#dest-result-list:focus {
    border-color: rgba(var(--wx-accent-alt-rgb), 0.85);
}

/* The dashed rule between rows is a bottom border on every row but the
   last, so the list reads as separated entries rather than a paragraph */
.dest-result {
    padding: 9px 10px;
    border-radius: 6px;
    color: rgb(var(--wx-field-ink-rgb));
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px dashed rgba(var(--wx-field-ink-rgb), 0.35);
}

.dest-result:last-child {
    border-bottom: none;
}

.dest-result:hover {
    background: rgba(var(--wx-accent-rgb), 0.25);
}

.dest-result.active {
    background: rgba(var(--wx-accent-rgb), 0.45);
    color: rgb(var(--wx-field-ink-rgb));
}

.dest-message {
    min-height: 1em;
    font-size: 0.72rem;
    color: #7a1f1f;
}

#dest-results-message {
    color: rgba(var(--wx-card-ink-rgb), 0.85);
}

.dest-actions {
    display: flex;
    gap: 12px;
}

.dest-actions button {
    flex: 1 1 0;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.35);
    background: rgb(var(--wx-field-rgb));
    color: rgb(var(--wx-field-ink-rgb));
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.dest-actions button:hover:not(:disabled) {
    background: rgb(var(--wx-field-hi-rgb));
    border-color: rgba(var(--wx-accent-alt-rgb), 0.7);
}

.dest-actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---- Selector Panel Buttons ---- */
#selector-panel button {
    padding: 5px 12px;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.3);
    border-radius: 3px;
    background: rgba(var(--wx-control-rgb), 0.9);
    color: rgb(var(--wx-text-rgb));
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: border-color 0.2s, background 0.2s;
}

#selector-panel button:hover {
    border-color: rgba(var(--wx-accent-rgb), 0.6);
    background: rgba(var(--wx-accent-rgb), 0.22);
}

#btn-export-json {
    color: rgb(var(--wx-good-rgb)) !important;
    border-color: rgba(var(--wx-good-rgb), 0.3) !important;
}

#btn-export-json:hover {
    border-color: rgba(var(--wx-good-rgb), 0.6) !important;
}

/* ---- Render Config Panel ---- */
#config-panel {
    position: fixed;
    top: calc(var(--top-bar-height, 56px) + 12px);
    left: 12px;
    z-index: 100;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - var(--top-bar-height, 56px) - 36px);
    overflow-y: auto;
    background: rgba(var(--wx-panel-rgb), 0.88);
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid rgba(var(--wx-accent-rgb), 0.2);
    backdrop-filter: blur(10px);
    font-size: 0.72rem;
}

#config-panel h3 {
    font-size: 0.85rem;
    color: rgba(var(--wx-text-rgb), 0.9);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

#config-panel .config-hint {
    font-size: 0.65rem;
    color: rgba(var(--wx-muted-rgb), 0.6);
    margin-bottom: 12px;
    line-height: 1.4;
}

#config-panel fieldset {
    border: 1px solid rgba(var(--wx-accent-rgb), 0.12);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

#config-panel legend {
    font-size: 0.7rem;
    color: rgb(var(--wx-muted-rgb));
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 6px;
}

.cfg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.cfg-row label {
    flex: 0 0 100px;
    font-size: 0.68rem;
    color: rgba(var(--wx-muted-rgb), 0.8);
    text-align: right;
}

/* A control whose data-config-requires setting is off. renderConfig.js
   marks the row so the label and the value readout dim with the input,
   rather than a live-looking label sitting beside a dead control. */
.cfg-row.disabled label,
.cfg-row.disabled span {
    opacity: 0.35;
}

.cfg-row input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cfg-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(var(--wx-muted-rgb), 0.28);
    border-radius: 2px;
    outline: none;
}

.cfg-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--wx-accent-alt-rgb));
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.cfg-row input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--wx-accent-alt-rgb));
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.cfg-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: rgb(var(--wx-accent-alt-rgb));
}

.cfg-row span {
    flex: 0 0 50px;
    font-size: 0.65rem;
    color: rgba(var(--wx-accent-alt-rgb), 0.85);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Scrollbar has styling for config panel */
#config-panel::-webkit-scrollbar {
    width: 4px;
}

#config-panel::-webkit-scrollbar-track {
    background: transparent;
}

#config-panel::-webkit-scrollbar-thumb {
    background: rgba(var(--wx-accent-rgb), 0.2);
    border-radius: 2px;
}

/* ---- Weather Conditions Badge ----

   The assets the weather server ships are used here, and only here. The
   images are referenced from this stylesheet rather than from the markup
   because the VS Code panel rewrites only <script> and <link> URLs into
   webview URIs; a relative <img src> would not resolve under the panel's
   content security policy, while a relative url() in this file resolves
   against the stylesheet's own webview URI and works in both hosts.

   weatherTheme.js sets the data attributes that pick the layers. A layer
   whose asset has not been copied into media/assets/ yet simply renders
   nothing, so an unused condition costs a missing image and no error. */
/* Bottom right is the only corner nothing else claims: the controls list
   holds bottom left, the controls help holds bottom center, and the top
   bar grows rightward as the selector widens. */
#wx-conditions {
    position: fixed;
    bottom: 20px;
    right: 12px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    border-radius: 6px;
    background: rgba(var(--wx-panel-rgb), 0.68);
    border: 1px solid rgba(var(--wx-accent-rgb), 0.22);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

/* Fixed stage so the three layers can be positioned against each other
   rather than reflowed by whichever of them is currently visible */
#wx-conditions-stage {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 36px;
}

.wx-layer {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#wx-body {
    top: 0;
    right: 0;
    width: 21px;
    height: 21px;
}

[data-body="sun"] #wx-body {
    background-image: url("assets/sun.svg");
}

[data-body="moon"] #wx-body {
    background-image: url("assets/moon.svg");
}

/* Sits in front of the sun or moon, so an overcast sky reads as the
   body being covered rather than as two icons side by side */
#wx-cloud {
    left: 0;
    bottom: 7px;
    width: 34px;
    height: 22px;
    background-image: url("assets/cloud.svg");
}

[data-cloud="off"] #wx-cloud {
    display: none;
}

#wx-precip {
    left: 15px;
    bottom: 0;
    width: 8px;
    height: 11px;
}

[data-precip="rain"] #wx-precip {
    background-image: url("assets/rain.svg");
    animation: wx-fall 0.9s linear infinite;
}

/* Snow falls at a fraction of the speed of rain */
[data-precip="snow"] #wx-precip {
    background-image: url("assets/snow.svg");
    animation: wx-fall 2.6s linear infinite;
}

[data-precip="none"] #wx-precip {
    display: none;
}

@keyframes wx-fall {
    0%   { transform: translateY(-4px); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(8px); opacity: 0; }
}

#wx-conditions-text {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#wx-conditions-label {
    font-size: 0.58rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(var(--wx-muted-rgb), 0.8);
    white-space: nowrap;
}

/* Names where the reading came from: the service that answered, or
   "configured" when the categories are being set rather than read */
#wx-conditions-source {
    font-size: 0.52rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(var(--wx-accent-rgb), 0.65);
    white-space: nowrap;
}

#wx-conditions-source:empty {
    display: none;
}

/* ---- Overcast Vignette ----

   Closes the frame in as the precipitation axis does, which is what sells
   heavy weather at eye level; the fog alone only reads at distance. It
   sits above the canvas and below the HUD so the readouts stay crisp, and
   never takes pointer events so it cannot swallow a click to fly. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(var(--wx-page-bg-rgb), 0) 45%,
        rgba(var(--wx-page-bg-rgb), 0.6) 100%);
}

:root[data-wx-precipitation="cloudy"] body::after {
    opacity: 0.5;
}

:root[data-wx-precipitation="stormy"] body::after {
    opacity: 1;
}