/**
 * Preflight Styles
 * Following DESIGN.md specification
 */

/* CSS Custom Properties (Design Tokens) */
:root {
    --color-primary: #0F172A;
    --color-secondary: #1E293B;
    --color-tertiary: #3B82F6;
    --color-accent: #F59E0B;
    --color-neutral: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-inverse: #FFFFFF;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-neutral);
    color: var(--color-text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* App Container */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ──────────────────────────────────────────── */
.app-header {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    font-weight: 600;
}

.logo svg { color: var(--color-tertiary); }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.icon-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: var(--color-text-inverse);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.icon-btn:hover { background: rgba(255,255,255,0.2); }

.unit-toggle {
    background: rgba(255,255,255,0.1);
    border: none;
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}
.unit-toggle:hover { background: rgba(255,255,255,0.2); }

/* ── Location Selector ───────────────────────────────── */
.location-selector {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: none;
}
.location-selector::-webkit-scrollbar { display: none; }

.location-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.location-tab:hover { border-color: var(--color-tertiary); }
.location-tab.active {
    background: var(--color-tertiary);
    color: var(--color-text-inverse);
}
.location-tab svg { flex-shrink: 0; }

.add-location {
    padding: var(--spacing-sm);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Locate button: spin the crosshair while a GPS fix is pending */
#locate-btn.locating svg {
    animation: locate-spin 1s linear infinite;
}
@keyframes locate-spin {
    to { transform: rotate(360deg); }
}

/* Transient geolocation feedback next to the tabs */
.geo-feedback {
    align-self: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    padding: 2px 10px;
    background: var(--color-neutral);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.geo-feedback.hidden { display: none; }

/* ── Offline Banner ──────────────────────────────────── */
.offline-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
    font-weight: 500;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
}
.offline-banner.hidden { display: none; }
.offline-age {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

/* ── Alert Banner ────────────────────────────────────── */
.alert-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    font-size: 0.875rem;
}
.alert-banner.warning { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.alert-banner.danger  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.alert-banner.info    { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.alert-banner.hidden  { display: none; }

/* ── Main Content Grid ───────────────────────────────── */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    flex: 1;
    min-width: 0;
}

/* Full-width spans */
.span-full {
    grid-column: 1 / -1;
}

/* ── Shared Card Base ────────────────────────────────── */
.weather-card,
.aviation-section,
.forecast-section,
.radar-section,
.metar-section,
.crosswind-section,
.airport-section,
.hourly-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

/* ── Current Weather Card ────────────────────────────── */
.current-weather {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.weather-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.weather-icon-container { flex-shrink: 0; }

.weather-icon {
    font-size: 4.5rem;
    line-height: 1;
}

.weather-info {
    flex: 1;
    min-width: 160px;
}

.location-name { margin-bottom: var(--spacing-sm); }

.location-name h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.timestamp {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.temperature-display {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.temp-value {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.temp-unit {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.condition-text {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 1px solid #E2E8F0;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Aviation Panel (standalone card) ───────────────── */
.aviation-section {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: var(--color-text-inverse);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-inverse);
}
.panel-title svg { color: var(--color-accent); }

.aviation-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.aviation-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.aviation-item .detail-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aviation-item .detail-value {
    color: var(--color-text-inverse);
    font-size: 1rem;
    font-weight: 600;
}

.metar-good    { color: var(--color-success) !important; }
.metar-marginal{ color: var(--color-warning) !important; }
.metar-bad     { color: var(--color-danger) !important; }

/* Wind Indicator (in aviation panel) */
.wind-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: auto;
}

.compass { flex-shrink: 0; }

.compass-rose {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255,255,255,0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compass-label {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}
.compass-label.n { top: 4px;    left: 50%;  transform: translateX(-50%); }
.compass-label.e { right: 4px;  top: 50%;   transform: translateY(-50%); }
.compass-label.s { bottom: 4px; left: 50%;  transform: translateX(-50%); }
.compass-label.w { left: 4px;   top: 50%;   transform: translateY(-50%); }

.wind-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 30px solid var(--color-accent);
    position: relative;
    transition: transform 0.5s ease;
    transform-origin: center bottom;
}

.wind-arrow::after {
    content: '';
    position: absolute;
    bottom: -34px;
    left: -4px;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}

.wind-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.wind-compass {
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-accent);
}

.wind-label {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
}

.wind-speed {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-inverse);
}

/* ── Section Header ──────────────────────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ── Forecast Toggle ─────────────────────────────────── */
.forecast-toggle {
    display: flex;
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: 4px;
}

.toggle-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.toggle-btn.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

/* ── Forecast Container ──────────────────────────────── */
.forecast-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.forecast-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--spacing-md);
}
/* When the Daily/Hourly toggle is set to Hourly, the same container holds the
   24-hour strip and scrolls horizontally instead of using the day-card grid. */
.forecast-container.as-hourly {
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
}

.forecast-day {
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}
.forecast-day:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.forecast-day .day-name    { font-size: 0.875rem; font-weight: 600; }
.forecast-day .day-date    { font-size: 0.75rem; color: var(--color-text-secondary); }
.forecast-day .forecast-icon { font-size: 1.75rem; line-height: 1; }
.forecast-day .temp-range  { display: flex; gap: var(--spacing-sm); align-items: center; }
.forecast-day .temp-high   { font-weight: 600; }
.forecast-day .temp-low    { color: var(--color-text-secondary); }
.forecast-day .condition   { font-size: 0.7rem; color: var(--color-text-secondary); }

/* ── Radar Section ───────────────────────────────────── */
.radar-container {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-secondary);
}
.radar-container iframe { display: block; border: none; }

.live-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-success);
}

.pulse {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: var(--radius-full);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.5; }
}

/* ── METAR Section ───────────────────────────────────── */
.metar-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }

.metar-container { display: grid; gap: var(--spacing-lg); }

.metar-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.metar-age {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--color-success);
    color: #fff;
    letter-spacing: 0.02em;
}
.metar-age.stale { background: var(--color-warning); }
.metar-age.old   { background: var(--color-danger); }

.metar-text {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    background: var(--color-neutral);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    word-break: break-all;
    min-height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metar-decoded { display: grid; gap: var(--spacing-sm); }

.decoded-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.875rem;
}
.decoded-row:last-child { border-bottom: none; }
.decoded-label  { color: var(--color-text-secondary); }
.decoded-value  { font-weight: 600; }

.flight-status {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.875rem;
}
.flight-status:last-child { border-bottom: none; }
.status-label { color: var(--color-text-secondary); }
.status-value { font-weight: 600; }

/* ── Crosswind Calculator Section ───────────────────── */
.crosswind-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
}

.crosswind-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-lg);
    align-items: start;
}

/* ── Landscape Runway Scene ──────────────────────────── */
.runway-visual-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.runway-scene {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid #E2E8F0;
}

.sky-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, #4A90C4 0%, #87CEEB 50%, #C8E8F5 100%);
}

.ground-background {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, #7BC67E 0%, #4A8C4E 50%, #2D6B31 100%);
}

/* Horizon line */
.runway-scene::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.25);
    z-index: 1;
    pointer-events: none;
}

.compass-ring {
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 2;
}

.compass-rose-label {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.compass-rose-label.n { top: 10px;    left: 50%;  transform: translateX(-50%); }
.compass-rose-label.e { right: 12px;  top: 50%;   transform: translateY(-50%); }
.compass-rose-label.s { bottom: 10px; left: 50%;  transform: translateX(-50%); }
.compass-rose-label.w { left: 12px;   top: 50%;   transform: translateY(-50%); }

/* ── Runway Strip ────────────────────────────────────── */
.runways-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.runway-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 56px;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease;
}

.runway-strip {
    width: 100%;
    height: 100%;
    background: #2C2C2C;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Pavement edge stripes */
.runway-strip::before,
.runway-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,0.35) 6px,
        rgba(255,255,255,0.35) 12px
    );
}
.runway-strip::before { left: 10px; }
.runway-strip::after  { right: 10px; }

.runway-markings {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.threshold {
    width: 6px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 2px;
}

.centerline {
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(90deg, #FFF 0px, #FFF 18px, transparent 18px, transparent 36px);
    margin: 0 16px;
}

.runway-numbers {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px;
    pointer-events: none;
}

.runway-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFF;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}

.runway-secondary {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 40px;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    transition: all 0.5s ease;
}
.runway-secondary .runway-strip  { background: #555; height: 100%; border-radius: 3px; }
.runway-secondary .runway-markings { padding: 0 12px; }
.runway-secondary .threshold     { width: 5px; height: 28px; }
.runway-secondary .centerline    { margin: 0 12px; }
.runway-secondary .runway-numbers{ padding: 0 16px; }
.runway-secondary .runway-number { font-size: 0.9rem; }

.runway-active .runway-strip {
    box-shadow: 0 0 20px rgba(59,130,246,0.5);
    border: 2px solid var(--color-tertiary);
}

/* ── Wind Arrow Overlay ──────────────────────────────── */
.wind-arrow-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.5s ease;
    z-index: 5;
}

.wind-arrow-visual {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-head {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 36px solid var(--color-accent);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.arrow-shaft {
    width: 4px;
    height: 55px;
    background: var(--color-accent);
    margin-top: -2px;
    border-radius: 2px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.arrow-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.97);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    text-align: center;
    line-height: 1.4;
}

.arrow-speed {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* ── Aircraft on Final ───────────────────────────────── */
.aircraft-container {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    /* Only transition opacity — JS sets position, animation must not override top/left */
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 10;
}
.aircraft-container.visible { opacity: 1; }

/* Approach animation: fade + scale in from small (distant) to full size.
   Does NOT touch top/left so it respects the JS-set approach position. */
.aircraft-container.landing {
    animation: aircraft-land 2.5s ease-out forwards;
}
@keyframes aircraft-land {
    0%   { opacity: 0.2; transform: translateX(-50%) scale(0.5); }
    40%  { opacity: 1; }
    100% { opacity: 1;   transform: translateX(-50%) scale(1); }
}

/* Grumman Tiger SVG aircraft — drop shadow applied to whole element */
.aircraft {
    width: 44px;
    height: 60px;
    overflow: visible;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
    flex-shrink: 0;
}

.flight-path {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 80px;
    background: repeating-linear-gradient(
        180deg,
        var(--color-tertiary) 0px, var(--color-tertiary) 8px,
        transparent 8px, transparent 16px
    );
    opacity: 0.5;
    animation: flight-path-pulse 2s ease-in-out infinite;
}
@keyframes flight-path-pulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.7; }
}

.approach-label {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-text-inverse);
    padding: 3px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    letter-spacing: 0.02em;
}
.approach-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-secondary);
}

.wind-indicator-aircraft {
    position: absolute;
    top: -18px;
    right: -38px;
    background: rgba(255,255,255,0.97);
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.aircraft-container:hover .wind-indicator-aircraft { opacity: 1; }

/* Runway landing zone pulse */
.runway-strip.landing-zone {
    animation: runway-pulse 2s ease-in-out infinite;
}
@keyframes runway-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(59,130,246,0.3); }
    50%       { box-shadow: 0 0 30px rgba(59,130,246,0.6); }
}

/* Touchdown effect */
.touchdown-effect {
    position: absolute;
    bottom: 48%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.8) 0%, transparent 70%);
    opacity: 0;
    animation: touchdown-puff 0.5s ease-out forwards;
}
@keyframes touchdown-puff {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
    50%  { opacity: 1; transform: translateX(-50%) scale(1.2); }
    100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

/* ── Wind Sock ───────────────────────────────────────── */
.wind-sock-container {
    position: absolute;
    bottom: 18%;
    right: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 6;
}

.wind-sock-pole {
    width: 4px;
    height: 52px;
    background: linear-gradient(180deg, #555 0%, #888 100%);
    border-radius: 2px;
}

/* Single tapered cone: wide opening at top (pole), narrow tail sweeps downwind */
.wind-sock {
    position: relative;
    width: 26px;
    height: 44px;
    transform-origin: top center;
    transition: transform 0.5s ease;
    clip-path: polygon(5% 0%, 95% 0%, 58% 100%, 42% 100%);
    background: repeating-linear-gradient(
        180deg,
        var(--color-danger)  0px,
        var(--color-danger)  8px,
        var(--color-warning) 8px,
        var(--color-warning) 16px
    );
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    animation: sock-flutter 2s ease-in-out infinite;
}
.sock-opening, .sock-body, .sock-tail { display: none; }

@keyframes sock-flutter {
    0%, 100% { clip-path: polygon(5% 0%, 95% 0%, 58% 100%, 42% 100%); }
    50%       { clip-path: polygon(5% 0%, 95% 0%, 62% 100%, 38% 100%); }
}

/* ── Runway Selector Overlay ─────────────────────────── */
.runway-selector-overlay {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.97);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs) var(--spacing-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 8;
}

.selector-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.runway-options { display: flex; gap: var(--spacing-xs); }

.runway-option {
    padding: 4px 10px;
    border: 2px solid #E2E8F0;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: 'Courier New', monospace;
}
.runway-option:hover  { border-color: var(--color-tertiary); background: var(--color-neutral); }
.runway-option.active { border-color: var(--color-tertiary); background: var(--color-tertiary); color: var(--color-text-inverse); }
.runway-option.calm   { border-color: var(--color-success); color: var(--color-success); }
.runway-option.caution{ border-color: var(--color-warning); color: var(--color-warning); }
.runway-option.danger { border-color: var(--color-danger);  color: var(--color-danger); }

/* ── Wind Info Panel ─────────────────────────────────── */
.wind-info-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-neutral);
    border-radius: var(--radius-md);
}

.wind-panel-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    text-align: center;
}

.wind-panel-item .panel-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.wind-panel-item .panel-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Crosswind Side Panel ────────────────────────────── */
.crosswind-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.crosswind-calculator {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.runway-input {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.runway-input label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.runway-input select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 0.875rem;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.2s;
    width: 100%;
}
.runway-input select:focus { outline: none; border-color: var(--color-tertiary); }

.runway-toggle-btn {
    padding: var(--spacing-sm);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: all 0.2s;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.runway-toggle-btn:hover {
    border-color: var(--color-tertiary);
    color: var(--color-tertiary);
    background: var(--color-neutral);
}

.crosswind-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.wind-component {
    text-align: center;
    padding: var(--spacing-sm);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

.component-label {
    display: block;
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.component-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.crosswind-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid #E2E8F0;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.meta-label { color: var(--color-text-secondary); }
.meta-value { font-weight: 600; }

.crosswind-status.safe    { color: var(--color-success); }
.crosswind-status.caution { color: var(--color-warning); }
.crosswind-status.danger  { color: var(--color-danger); }

.landing-recommendation {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid #E2E8F0;
}

/* ── Runway Legend ───────────────────────────────────── */
.runway-legend {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-neutral);
    border-radius: var(--radius-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.headwind-legend { background: var(--color-success); }
.crosswind-legend{ background: var(--color-warning); }
.tailwind-legend { background: var(--color-danger); }

/* ── Airport Section ─────────────────────────────────── */
.airport-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }

.airport-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

.airport-card {
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}
.airport-card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--spacing-sm); }

.airport-detail {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.8rem;
}
.airport-detail:last-child { border-bottom: none; }
.airport-label { color: var(--color-text-secondary); }
.airport-value { font-weight: 500; }

/* ── Hourly Section ──────────────────────────────────── */
.hourly-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }
.hourly-empty { color: var(--color-text-secondary); font-size: 0.9rem; padding: var(--spacing-md) 0; }

/* ── Decoded TAF periods ── */
.taf-decoded { margin-top: var(--spacing-sm); display: flex; flex-direction: column; gap: 6px; }
.taf-period {
    background: var(--color-neutral);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}
.taf-period.taf-tempo, .taf-period.taf-prob { border-left-style: dashed; opacity: 0.92; }
.taf-period-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.taf-period-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-primary); }
.taf-cat-chip {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
    color: #fff; padding: 1px 7px; border-radius: var(--radius-full);
    background: var(--color-text-secondary);
}
.taf-cat-chip.cat-vfr  { background: var(--color-success); }
.taf-cat-chip.cat-mvfr { background: var(--color-info); }
.taf-cat-chip.cat-ifr  { background: var(--color-danger); }
.taf-cat-chip.cat-lifr { background: #8B5CF6; }
.taf-period-cond { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.5; }

/* Shown under a panel when it's rendering last-good cached data because the
   live fetch failed (see fetchWithResilience) */
.stale-note {
    margin-top: var(--spacing-sm);
    padding: 4px 10px;
    font-size: 0.75rem;
    color: #92400E;
    background: #FEF3C7;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.hourly-container {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-secondary) transparent;
}
.hourly-container::-webkit-scrollbar { height: 5px; }
.hourly-container::-webkit-scrollbar-track  { background: transparent; }
.hourly-container::-webkit-scrollbar-thumb  { background: var(--color-text-secondary); border-radius: var(--radius-full); }

.hourly-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    min-width: 72px;
    border-radius: var(--radius-md);
    background: var(--color-neutral);
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.hourly-item:hover { background: #E2E8F0; }
.hourly-item .hour      { font-size: 0.8rem;  font-weight: 600; }
.hourly-item .hour-icon { font-size: 1.4rem;  line-height: 1; }
.hourly-item .hour-temp { font-size: 0.9rem;  font-weight: 600; }
.hourly-item .hour-precip{ font-size: 0.7rem; color: var(--color-info); }

/* ── Footer ──────────────────────────────────────────── */
.app-footer {
    text-align: center;
    padding: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}
.footer-note { margin-top: var(--spacing-xs); font-size: 0.75rem; }

/* ── Modal ───────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}
.modal.hidden { display: none; }

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid #E2E8F0;
}
.modal-header h3 { font-size: 1.25rem; font-weight: 600; }

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
}
.modal-close:hover { background: var(--color-neutral); }

.modal-body { padding: var(--spacing-lg); }

.search-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color 0.2s;
}
.search-input:focus { outline: none; border-color: var(--color-tertiary); }

.search-results { margin-top: var(--spacing-md); max-height: 300px; overflow-y: auto; }

.search-result-item {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.search-result-item:hover { background: var(--color-neutral); }
.search-result-item .result-name { font-weight: 500; }
.search-result-item .result-location { font-size: 0.875rem; color: var(--color-text-secondary); }

/* ── Loading ─────────────────────────────────────────── */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-neutral);
    border-top-color: var(--color-tertiary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

/* ── Responsive: Tablet (< 960px) ───────────────────── */
@media (max-width: 960px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .span-full {
        grid-column: 1;
    }

    .crosswind-body {
        grid-template-columns: 1fr;
    }

    .runway-legend {
        flex-direction: row;
    }

    .aviation-details {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Responsive: Mobile (< 600px) ───────────────────── */
@media (max-width: 600px) {
    .app-container {
        padding: var(--spacing-sm);
    }

    .main-content {
        gap: var(--spacing-md);
    }

    .weather-main {
        flex-direction: column;
        text-align: center;
    }

    .temp-value { font-size: 3rem; }

    .weather-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .aviation-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .runway-scene { height: 220px; }

    .wind-info-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .crosswind-results {
        grid-template-columns: 1fr;
    }

    .forecast-container {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
}

/* ── Aviation details: expand to 3 columns ──────────── */
.aviation-details {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ── TAF text (wider mono block) ─────────────────────── */
.taf-text {
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Winds Aloft Section ─────────────────────────────── */
.winds-aloft-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}
.winds-aloft-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }

.winds-aloft-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.winds-aloft-row {
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.wa-altitude {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 52px;
}

.wa-arrow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.wa-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.wa-wind {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.wa-temp {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.winds-aloft-loading {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    padding: var(--spacing-md);
}

/* ── Nearby Airports Section ─────────────────────────── */
.nearby-airports-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}
.nearby-airports-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }

.nearby-airports-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
}

.nearby-airport-card {
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-left: 4px solid transparent;
}
.nearby-airport-card.cat-vfr  { border-left-color: var(--color-success); }
.nearby-airport-card.cat-mvfr { border-left-color: var(--color-info); }
.nearby-airport-card.cat-ifr  { border-left-color: var(--color-danger); }
.nearby-airport-card.cat-lifr { border-left-color: #8B5CF6; }

.nearby-airport-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.nearby-airport-code {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: 'Courier New', monospace;
}

.nearby-airport-name {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex: 1;
}

.nearby-cat-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    color: #fff;
    flex-shrink: 0;
}
.nearby-cat-badge.cat-vfr  { background: var(--color-success); }
.nearby-cat-badge.cat-mvfr { background: var(--color-info); }
.nearby-cat-badge.cat-ifr  { background: var(--color-danger); }
.nearby-cat-badge.cat-lifr { background: #8B5CF6; }

.nearby-airport-metar {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    word-break: break-all;
    line-height: 1.5;
}

.nearby-airport-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
}

.nearby-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nearby-detail-label { font-size: 0.6rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.nearby-detail-value { font-size: 0.8rem; font-weight: 600; color: var(--color-text-primary); }

.nearby-loading {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    padding: var(--spacing-md);
}

/* ── METAR Status Bar ────────────────────────────────── */
.status-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.status-tile {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform 0.2s;
    min-width: 0;
}
.status-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.tile-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tile-sub {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.status-tile.tile-vfr  { background: var(--color-success); }
.status-tile.tile-mvfr { background: var(--color-info); }
.status-tile.tile-ifr  { background: var(--color-danger); }
.status-tile.tile-lifr { background: #8B5CF6; }

.status-tile.tile-vfr .tile-value,
.status-tile.tile-mvfr .tile-value,
.status-tile.tile-ifr .tile-value,
.status-tile.tile-lifr .tile-value { color: #fff; }

.status-tile.tile-vfr .tile-sub,
.status-tile.tile-mvfr .tile-sub,
.status-tile.tile-ifr .tile-sub,
.status-tile.tile-lifr .tile-sub { color: rgba(255,255,255,0.78); }

.status-tile.tile-warn  .tile-value  { color: var(--color-warning); }
.status-tile.tile-good  .tile-value  { color: var(--color-success); }
.status-tile.tile-alert .tile-value  { color: var(--color-danger); }

/* ── Aviation Instruments ────────────────────────────── */
.instruments-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.instrument-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
}

.instrument-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wind-gauge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: var(--spacing-sm) 0;
}

.wind-gauge-svg {
    width: 100%;
    max-width: 220px;
    max-height: 180px;
    display: block;
    margin: 0 auto;
}

.ceiling-chart-container {
    flex: 1;
    display: flex;
    align-items: stretch;
}
.ceiling-chart-container svg { width: 100%; height: auto; display: block; }

/* ── Trend Sparklines ────────────────────────────────── */
.trends-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}
.trends-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }

.trends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.trend-card {
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trend-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trend-unit {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.sparkline {
    width: 100%;
    height: 60px;
    overflow: visible;
    display: block;
}

.sparkline-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Location Tab Improvements ───────────────────────── */
.tab-name { pointer-events: none; }

.tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: currentColor;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    vertical-align: middle;
}
.location-tab:hover .tab-remove { opacity: 0.6; }
.tab-remove:hover { opacity: 1 !important; background: rgba(0,0,0,0.15); }

/* ── Pressure Trend ──────────────────────────────────── */
.pressure-trend {
    font-size: 0.95em;
    font-weight: 700;
    margin-left: 3px;
}
.trend-rising  { color: var(--color-success); }
.trend-falling { color: var(--color-danger); }

/* ── SIGMETs / AIRMETs ───────────────────────────────── */
.advisories-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.advisories-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.adv-none {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-success);
    font-weight: 500;
    font-size: 0.9rem;
    padding: var(--spacing-sm) 0;
}
.adv-clear-icon { font-size: 1.1rem; }
.adv-loading, .adv-empty { color: var(--color-text-secondary); font-size: 0.875rem; }
.adv-empty a { color: var(--color-info); }

.adv-card {
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 4px solid transparent;
    font-size: 0.85rem;
}
.adv-sigmet { background: #FEF2F2; border-left-color: var(--color-danger); }
.adv-airmet { background: #FFFBEB; border-left-color: var(--color-warning); }
.adv-svr.adv-airmet { background: #FEF2F2; border-left-color: var(--color-danger); }

.adv-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.adv-type-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.badge-sigmet { background: var(--color-danger); color: white; }
.badge-airmet { background: var(--color-warning); color: #1C1917; }

.adv-hazard { font-weight: 600; color: var(--color-text-primary); }
.adv-sev    { font-size: 0.75rem; color: var(--color-text-secondary); }
.adv-valid  { margin-left: auto; font-size: 0.75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.adv-alts   { font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: 3px; }
.adv-raw    { font-family: 'Courier New', monospace; font-size: 0.68rem; color: var(--color-text-secondary); word-break: break-all; margin-top: 4px; }

/* ── Search Modal Mode Toggle ────────────────────────── */
.search-mode-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: var(--spacing-md);
    background: #F1F5F9;
    border-radius: var(--radius-md);
    padding: 3px;
}

.search-mode-btn {
    flex: 1;
    padding: 6px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.search-mode-btn.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.search-no-results {
    padding: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    text-align: center;
}

/* ── Go / No-Go Card ─────────────────────────────────── */
.gonogo-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gonogo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.gonogo-edit-btn {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid #CBD5E1;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.gonogo-edit-btn:hover { background: #F1F5F9; color: var(--color-text-primary); }

.gonogo-card { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.gonogo-loading { color: var(--color-text-secondary); font-size: 0.875rem; }

.gonogo-verdict {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}
.gonogo-go      { background: #D1FAE5; color: #065F46; }
.gonogo-marginal { background: #FEF3C7; color: #78350F; }
.gonogo-nogo    { background: #FEE2E2; color: #7F1D1D; }

.gonogo-badge {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.gonogo-sub { font-size: 0.85rem; font-weight: 500; }

.gonogo-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gonogo-row {
    display: grid;
    grid-template-columns: 20px 140px 1fr 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 7px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}
.gonogo-row-go      { background: #F0FDF4; }
.gonogo-row-marginal { background: #FFFBEB; }
.gonogo-row-nogo    { background: #FFF1F2; }

.gonogo-icon { font-weight: 700; text-align: center; }
.gonogo-icon-go      { color: #059669; }
.gonogo-icon-marginal { color: #D97706; }
.gonogo-icon-nogo    { color: #DC2626; }

.gonogo-name { font-weight: 600; color: var(--color-text-primary); }
.gonogo-val  { font-variant-numeric: tabular-nums; font-weight: 500; }
.gonogo-detail { font-size: 0.78rem; color: var(--color-text-secondary); text-align: right; }

/* Minimums editor */
.gonogo-minimums { margin-top: var(--spacing-md); }
.gonogo-minimums.hidden { display: none; }

.minimums-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: #F8FAFC;
    border-radius: var(--radius-md);
    border: 1px solid #E2E8F0;
}

.minimum-row { display: flex; flex-direction: column; gap: 4px; }
.minimum-row label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

.minimum-input {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.minimum-input input {
    width: 80px;
    padding: 5px 8px;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
    background: var(--color-surface);
}
.minimum-unit { font-size: 0.8rem; color: var(--color-text-secondary); }

.gonogo-save-btn {
    padding: 8px 20px;
    background: var(--color-tertiary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.gonogo-save-btn:hover { opacity: 0.88; }

/* ── Airport Diagram ─────────────────────────────────── */
.airport-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.airport-diagram { flex-shrink: 0; }

.airport-diagram-svg {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
}

@media (max-width: 760px) {
    .airport-layout { grid-template-columns: 1fr; }
}

/* ── Wind Component Table ────────────────────────────── */
.wind-table-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.wind-component-table { margin-top: var(--spacing-md); }

.wct-runway-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

.wct-scroll { overflow-x: auto; }

.wct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.wct-table th {
    text-align: left;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid #E2E8F0;
}

.wct-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #F1F5F9;
    color: var(--color-text-primary);
}

.wct-now-row td { background: #EFF6FF; font-weight: 600; }
.wct-now-row td:first-child::after { content: ' ◀ now'; font-size: 0.7rem; color: var(--color-info); }

.wct-headwind { color: var(--color-success); }
.wct-tailwind { color: var(--color-warning); }

.wct-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-success);
}
.wct-dot.wct-ok      { background: var(--color-success); }
.wct-dot.wct-caution { background: var(--color-warning); }
.wct-dot.wct-danger  { background: var(--color-danger); }

.wct-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    align-items: center;
}
.wct-legend .wct-dot { margin-right: 4px; }

.wct-loading { color: var(--color-text-secondary); font-size: 0.875rem; }

/* ── PIREPs ──────────────────────────────────────────── */
.pireps-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pireps-radius {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: var(--spacing-sm);
}

.pireps-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    max-height: 480px;
    overflow-y: auto;
}

.pirep-card {
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #F8FAFC;
    font-size: 0.8rem;
}

.pirep-card.pirep-flagged {
    border-left: 3px solid var(--color-warning);
    background: #FFFBEB;
}

.pirep-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: baseline;
    margin-bottom: 4px;
}

.pirep-alt {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.pirep-aircraft {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.pirep-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pirep-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.pirep-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    background: #E2E8F0;
    color: var(--color-text-primary);
}

.pirep-tag.pirep-lgt { background: #D1FAE5; color: #065F46; }
.pirep-tag.pirep-mod { background: #FEF3C7; color: #92400E; }
.pirep-tag.pirep-svr { background: #FEE2E2; color: #991B1B; }
.pirep-tag.pirep-sky { background: #DBEAFE; color: #1E40AF; }

.pirep-extra {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
}

.pirep-raw {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
    word-break: break-all;
}

.pireps-loading, .pireps-empty {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    padding: var(--spacing-sm) 0;
}
.pireps-empty a { color: var(--color-info); }

/* ── Performance Calculator ──────────────────────────── */
.perf-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.perf-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.perf-aircraft-name {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.perf-loading, .perf-na {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.perf-da-banner {
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.perf-ok      { background: #F0FDF4; color: #065F46; }
.perf-caution { background: #ECFDF5; color: #065F46; }
.perf-warn    { background: #FFFBEB; color: #78350F; }
.perf-danger  { background: #FEF2F2; color: #7F1D1D; }

.perf-da-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.perf-da-label { font-size: 0.85rem; font-weight: 500; }

.perf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.perf-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.perf-card-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.perf-card-value {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.perf-card-sub {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.perf-increase { color: var(--color-danger); font-weight: 600; }
.perf-decrease { color: var(--color-success); font-weight: 600; }

.perf-disclaimer {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-style: italic;
    border-top: 1px solid #E2E8F0;
    padding-top: var(--spacing-sm);
}

@media (max-width: 760px) {
    .perf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── METAR History ───────────────────────────────────── */
.metar-history-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--spacing-sm);
}

.mh-loading, .mh-empty {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.mh-row {
    display: grid;
    grid-template-columns: 58px 44px 64px 1fr;
    align-items: start;
    gap: var(--spacing-sm);
    padding: 5px 4px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.mh-latest { background: #EFF6FF; font-weight: 500; }

.mh-time { color: var(--color-text-secondary); white-space: nowrap; }
.mh-ceil { color: var(--color-text-secondary); }

.mh-cat {
    font-weight: 700;
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    text-align: center;
}
.mh-vfr  { background: #D1FAE5; color: #065F46; }
.mh-mvfr { background: #DBEAFE; color: #1E40AF; }
.mh-ifr  { background: #FEE2E2; color: #991B1B; }
.mh-lifr { background: #F5D0FE; color: #701A75; }

.mh-raw {
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    word-break: break-all;
    line-height: 1.4;
}

/* ── Mobile / Responsive improvements ───────────────── */
@media (max-width: 600px) {
    /* Stack navigation tabs vertically on very small screens */
    .location-selector {
        gap: 4px;
        flex-wrap: wrap;
    }

    /* Status bar: 2 columns on small screens */
    .status-bar { grid-template-columns: repeat(2, 1fr) !important; }
    .status-tile { padding: var(--spacing-sm); }
    .tile-value { font-size: 1.1rem; }

    /* Go/No-Go: collapse detail column */
    .gonogo-row {
        grid-template-columns: 20px 1fr auto;
    }
    .gonogo-detail { display: none; }
    .gonogo-badge { font-size: 1.2rem; }

    /* Performance grid: single column */
    .perf-grid { grid-template-columns: 1fr 1fr; }
    .perf-da-value { font-size: 1.4rem; }

    /* Airport layout: stack */
    .airport-layout { grid-template-columns: 1fr; }

    /* Wind component table: hide detail column */
    .wct-table th:nth-child(2),
    .wct-table td:nth-child(2) { display: none; }

    /* METAR history: hide raw on small screens */
    .mh-row { grid-template-columns: 52px 38px 58px; }
    .mh-raw { display: none; }

    /* Crosswind section stacks naturally */
    .crosswind-body { flex-direction: column; }
}

@media (max-width: 480px) {
    .app-container { padding: var(--spacing-sm); }

    /* Header — tighter on very small screens */
    .app-header { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); }
    .logo { font-size: 1.1rem; }
    .logo svg { width: 24px; height: 24px; }
    .icon-btn { width: 34px; height: 34px; }

    /* Status bar — 3 columns so all 6 tiles fit in 2 rows */
    .status-bar { grid-template-columns: repeat(3, 1fr) !important; }
    .tile-value { font-size: 1rem; }

    /* Main weather card — smaller temp */
    .temp-value { font-size: 2.5rem; }
    .weather-details { grid-template-columns: 1fr 1fr; }

    /* Aviation panel — single column */
    .aviation-details { grid-template-columns: 1fr 1fr !important; }

    /* Go/No-Go */
    .gonogo-row { grid-template-columns: 20px 1fr auto; font-size: 0.8rem; }
    .gonogo-detail { display: none; }

    /* Performance grid — single column */
    .perf-grid { grid-template-columns: 1fr 1fr; }
    .perf-card-value { font-size: 1.2rem; }

    /* METAR text — prevent horizontal overflow */
    .metar-text, .taf-text { font-size: 0.7rem; overflow-x: auto; }
    .metar-container { grid-template-columns: 1fr !important; }

    /* Winds aloft — single column */
    .winds-aloft-table { grid-template-columns: 1fr !important; }

    /* Forecast scroll */
    .forecast-container { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; }

    /* Trends — single column */
    .trends-grid { grid-template-columns: 1fr !important; }

    /* Instrument cards — stack */
    .instruments-section { grid-template-columns: 1fr !important; }

    /* Crosswind calculator form */
    .aircraft-form-grid { grid-template-columns: 1fr !important; }

    /* Location tabs — smaller text */
    .location-tab { font-size: 0.8rem; padding: 6px 10px; }

    /* Section headings — tighter */
    .section-header { flex-wrap: wrap; gap: var(--spacing-sm); }
    .forecast-toggle { width: 100%; justify-content: flex-end; }
}

/* ── Copy Button ─────────────────────────────────────── */
.copy-btn {
    display: inline-block;
    margin-left: var(--spacing-sm);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    vertical-align: middle;
}
.copy-btn:hover { background: #F1F5F9; color: var(--color-text-primary); }
.copy-btn.copied { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }

/* ── Footer refresh ──────────────────────────────────── */
.app-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-lg);
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.footer-refresh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.refresh-countdown {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.refresh-bar-track {
    height: 3px;
    background: #E2E8F0;
    border-radius: 2px;
    overflow: hidden;
}

.refresh-bar {
    height: 100%;
    width: 0%;
    background: var(--color-tertiary);
    border-radius: 2px;
    transition: width 1s linear;
}

.print-brief-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity 0.15s;
}
.print-brief-btn:hover { opacity: 0.85; }

/* ── Responsive additions ────────────────────────────── */
@media (max-width: 960px) {
    .status-bar          { grid-template-columns: repeat(3, 1fr); }
    .instruments-section { grid-template-columns: 1fr; }
    .trends-grid         { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .status-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ── Dark Mode ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --color-neutral: #0F172A;
        --color-surface: #1E293B;
        --color-text-primary: #F8FAFC;
        --color-text-secondary: #94A3B8;
    }

    .weather-card,
    .forecast-section,
    .radar-section,
    .metar-section,
    .crosswind-section,
    .airport-section,
    .hourly-section {
        background: var(--color-surface);
    }

    .forecast-day,
    .hourly-item,
    .crosswind-calculator,
    .runway-legend,
    .wind-info-panel {
        background: #0F172A;
    }

    .hourly-item:hover { background: #1E293B; }

    .weather-details,
    .decoded-row,
    .flight-status,
    .meta-row,
    .crosswind-meta { border-color: #334155; }

    .runway-input select {
        background: var(--color-secondary);
        border-color: #334155;
        color: var(--color-text-primary);
    }

    .wind-component { background: #0F172A; }

    .instrument-card,
    .trends-section,
    .winds-aloft-section,
    .nearby-airports-section,
    .wind-table-section,
    .pireps-section { background: var(--color-surface); }

    .wct-table th { border-bottom-color: #334155; }
    .wct-table td { border-bottom-color: #1E293B; }
    .wct-now-row td { background: #1E3A5F; }
    .pirep-card { background: #0F172A; border-color: #334155; }
    .pirep-card.pirep-flagged { background: #1C1A0A; border-left-color: var(--color-warning); }
    .pirep-tag { background: #1E293B; color: var(--color-text-primary); }

    .advisories-section { background: var(--color-surface); }
    .adv-sigmet { background: #2d0b0b; }
    .adv-airmet { background: #271d05; }
    .adv-svr.adv-airmet { background: #2d0b0b; }
    .search-mode-toggle { background: #0F172A; }
    .search-mode-btn.active { background: #1E293B; color: var(--color-text-primary); }
    .gonogo-section { background: var(--color-surface); }
    .gonogo-go      { background: #052e1a; color: #6ee7b7; }
    .gonogo-marginal { background: #271d05; color: #fcd34d; }
    .gonogo-nogo    { background: #2d0b0b; color: #fca5a5; }
    .gonogo-row-go      { background: #0a1f15; }
    .gonogo-row-marginal { background: #1e1507; }
    .gonogo-row-nogo    { background: #1f0a0a; }
    .minimums-grid { background: #0F172A; border-color: #334155; }
    .minimum-input input { background: #1E293B; border-color: #334155; color: var(--color-text-primary); }

    .perf-section { background: var(--color-surface); }
    .perf-ok      { background: #052e1a; color: #6ee7b7; }
    .perf-caution { background: #052e1a; color: #6ee7b7; }
    .perf-warn    { background: #271d05; color: #fcd34d; }
    .perf-danger  { background: #2d0b0b; color: #fca5a5; }
    .perf-card    { background: #0F172A; border-color: #334155; }
    .perf-disclaimer { border-top-color: #334155; }
    .mh-latest    { background: #1E3A5F; }
    .mh-row:not(.mh-latest):hover { background: #0F172A; }

    .trend-card,
    .winds-aloft-row,
    .nearby-airport-card { background: #0F172A; }

    .status-tile:not([class*="tile-vfr"]):not([class*="tile-mvfr"]):not([class*="tile-ifr"]):not([class*="tile-lifr"]) {
        background: var(--color-surface);
    }

    .search-input {
        background: var(--color-secondary);
        border-color: #334155;
        color: var(--color-text-primary);
    }

    .modal-header { border-bottom-color: #334155; }

    .compass-ring { border-color: rgba(255,255,255,0.15); }

    .landing-recommendation {
        background: var(--color-secondary);
        border-color: #334155;
    }

    /* ── Route Weather (dark) ── */
    .route-section { background: var(--color-surface); }
    .route-map { border-color: #334155; background: #0B1629; }
    .route-field input {
        background: var(--color-secondary);
        border-color: #334155;
        color: var(--color-text-primary);
    }
    .route-card { background: #0F172A; }
    .route-card-endpoint { background: var(--color-secondary); border-color: #334155; }
    .route-line { background: #334155; }
    .route-msg { color: var(--color-text-secondary); }
    .route-card-forecast { border-top-color: #818CF8; }
    .route-card-forecast-badge, .route-card-eta { color: #818CF8; }

    /* ── TFR Section (dark) ── */
    .tfr-section { background: var(--color-surface); }
    .tfr-fallback {
        background: #1c1507;
        border-color: #713f12;
    }
    .tfr-fallback-title { color: var(--color-text-primary); }
    .tfr-ext-link-secondary {
        background: var(--color-secondary);
        color: var(--color-text-primary);
        border-color: #334155;
    }
    .tfr-ext-link-secondary:hover { background: #334155; }

    /* ── Custom Aircraft Form (dark) ── */
    .aircraft-form-field input {
        background: var(--color-secondary);
        border-color: #334155;
        color: var(--color-text-primary);
    }
    .custom-aircraft-row { background: #0F172A; }
    .custom-aircraft-list { border-top-color: #334155; }

    /* ── Offline Banner (dark) ── */
    .offline-banner {
        background: #271d05;
        border-color: #713f12;
        color: #fcd34d;
    }
}

/* ── Route Weather ───────────────────────────────────── */
.route-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.route-section h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); }

.route-inputs {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.route-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.route-field label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.route-field input {
    width: 90px;
    padding: 8px 12px;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-neutral);
    color: var(--color-text-primary);
}

.route-field input:focus {
    outline: none;
    border-color: var(--color-tertiary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.route-arrow {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    padding-bottom: 4px;
}

.route-go-btn {
    padding: 8px 20px;
    background: var(--color-tertiary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background 0.2s;
}
.route-go-btn:hover { background: #2563EB; }

.route-meta {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.route-cards {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    gap: 0;
}

.route-card {
    background: var(--color-neutral);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.route-card-endpoint {
    background: var(--color-surface);
    border: 2px solid #E2E8F0;
    box-shadow: var(--shadow-sm);
}

.route-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.route-fltcat {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-bottom: 4px;
    width: fit-content;
}

.rfcat-vfr  { background: #D1FAE5; color: #065F46; }
.rfcat-mvfr { background: #DBEAFE; color: #1E40AF; }
.rfcat-ifr  { background: #FEE2E2; color: #991B1B; }
.rfcat-lifr { background: #EDE9FE; color: #4C1D95; }
.rfcat-unkn { background: #F1F5F9; color: #64748B; }

.route-card-row {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.route-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    min-width: 44px;
}

.route-connector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 4px;
}

.route-line {
    width: 32px;
    height: 2px;
    background: #CBD5E1;
}

.route-map {
    height: 340px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    border: 1px solid #E2E8F0;
    background: #E5E7EB;
}

/* Keep Leaflet popups readable */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    font-family: var(--font-family) !important;
}
.leaflet-popup-content { margin: 12px 14px !important; }

.route-popup-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.route-popup-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.route-popup-row {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 2px 6px;
    font-size: 0.8rem;
    line-height: 1.5;
}
.route-popup-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748B;
}
.route-popup-raw {
    font-family: monospace;
    font-size: 0.65rem;
    color: #94A3B8;
    word-break: break-all;
    margin-top: 6px;
    border-top: 1px solid #E2E8F0;
    padding-top: 6px;
}

.route-msg {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding: 4px 0;
}
.route-loading { font-style: italic; }

.route-time-row {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.route-time-row .route-field input {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.route-field input[type="datetime-local"] { width: 190px; }
.route-field-sm input[type="number"] { width: 68px; }

.route-field-unit {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.route-time-hint {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    align-self: flex-end;
    padding-bottom: 10px;
}

.route-card-eta {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366F1;
    margin-bottom: 2px;
}

.route-card-forecast {
    border-top: 2px solid #6366F1;
}

.route-card-forecast-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6366F1;
    margin-top: 4px;
}

/* Trouble-spot card borders */
.route-card-mvfr { border-left: 3px solid #3B82F6; }
.route-card-ifr  { border-left: 3px solid #EF4444; }
.route-card-lifr { border-left: 3px solid #8B5CF6; }

/* Route Go/No-Go verdict banner */
.route-verdict {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid transparent;
}
.verdict-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.verdict-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.verdict-sub {
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.85;
}
.route-verdict-go     { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; flex-direction: row; align-items: center; }
.route-verdict-go .verdict-badge     { background: #10B981; color: #fff; }
.route-verdict-caution { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.route-verdict-caution .verdict-badge { background: #F59E0B; color: #fff; }
.route-verdict-nogo   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.route-verdict-nogo .verdict-badge   { background: #EF4444; color: #fff; }

/* Trouble chips shared by caution/nogo */
.trouble-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.trouble-item {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}
.trouble-lifr { background: #EDE9FE; color: #4C1D95; }
.trouble-ifr  { background: #FEE2E2; color: #991B1B; }
.trouble-mvfr { background: #DBEAFE; color: #1E40AF; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .route-verdict-go      { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); color: #6EE7B7; }
    .route-verdict-caution { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: #FCD34D; }
    .route-verdict-nogo    { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.35);  color: #FCA5A5; }
    .trouble-lifr { background: rgba(139,92,246,0.2); color: #C4B5FD; }
    .trouble-ifr  { background: rgba(239,68,68,0.2);  color: #FCA5A5; }
    .trouble-mvfr { background: rgba(59,130,246,0.2); color: #93C5FD; }
}

@media (max-width: 600px) {
    .route-inputs { gap: var(--spacing-sm); }
    .route-field input { width: 80px; font-size: 0.9rem; }
    .route-field input[type="datetime-local"] { width: 160px; }
    .route-map { height: 260px; }
}

/* ── TFR Section ─────────────────────────────────────── */
.tfr-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.tfr-section h2 { font-size: 1.25rem; font-weight: 600; }

.tfr-faa-link {
    font-size: 0.8rem;
    color: var(--color-tertiary);
    text-decoration: none;
    white-space: nowrap;
}
.tfr-faa-link:hover { text-decoration: underline; }

.tfr-map-container {
    margin-top: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #0B1629;
    position: relative;
    min-height: 200px;
}

.tfr-map-container iframe {
    display: block;
    border-radius: var(--radius-md);
}

.tfr-fallback {
    display: none;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl) var(--spacing-xl);
    background: #FFF8F0;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-md);
}

.tfr-fallback-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    color: var(--color-accent);
}

.tfr-fallback-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.tfr-fallback-sub {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.tfr-fallback-links {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tfr-ext-link {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-tertiary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s;
}
.tfr-ext-link:hover { background: #2563EB; }

.tfr-ext-link-secondary {
    background: var(--color-neutral);
    color: var(--color-text-primary);
    border: 1px solid #E2E8F0;
}
.tfr-ext-link-secondary:hover { background: #E2E8F0; }

/* ── Custom Aircraft Form ─────────────────────────────── */
.aircraft-form-row {
    margin-bottom: var(--spacing-md);
}

.aircraft-form-row label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.aircraft-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.aircraft-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aircraft-form-field label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.aircraft-form-field input {
    padding: 6px 10px;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: var(--font-family);
    background: var(--color-surface);
    color: var(--color-text-primary);
    width: 100%;
}

.aircraft-form-field input:focus {
    outline: none;
    border-color: var(--color-tertiary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.custom-aircraft-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-neutral);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.custom-aircraft-list {
    border-top: 1px solid #E2E8F0;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
}