/* ── Skip Link (accessibility) ───────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 100000; padding: 8px 16px; background: var(--cyan, #F47321); color: #000; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ── Focus Outline (keyboard navigation) ─────────────────── */ *:focus-visible { outline: 2px solid var(--cyan, #F47321); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════ TC-ATLAS theme system — light (default) + dark (opt-in). Theme is selected by `data-theme="dark"` on ; the toggle in the topbar persists to localStorage and respects the user's prefers-color-scheme on first visit. The light theme is the UM palette (white surfaces, UM green + orange accents). The dark theme is the original deep-navy / electric-blue / cyan palette retained from before the rebrand. ══════════════════════════════════════════════════════════════ */ :root { /* ── LIGHT (default) — UM palette ───────────────────────── */ --navy: #ffffff; --navy-mid: #f4f6f9; --navy-light: #eef1f5; --blue: #005030; --blue-light: #2e7a5b; --blue-glow: rgba(0, 80, 48, 0.10); --cyan: #F47321; --slate: #5b6573; --text: #0f1623; --text-dim: #6b7385; --surface: #f7f8fa; --surface-raised: #ffffff; --border: rgba(15, 22, 35, 0.06); --border-light: rgba(15, 22, 35, 0.12); --radius: 6px; --radius-lg: 8px; /* Map canvas — LIGHT (Positron basemap) */ --map-canvas: #f7f8fa; --map-canvas-mid: #eef1f5; --map-text: #0f1623; --map-text-dim: #6b7385; --map-border: var(--border-light); /* Muted text scale */ --text-muted: #6b7280; --text-faint: #8a93a3; --text-subtle: #9ca3af; /* UM brand-true (always available, theme-independent) */ --um-green: #005030; --um-green-deep: #003a22; --um-green-tint: rgba(0, 80, 48, 0.08); --um-orange: #F47321; --um-orange-deep: #d65f12; --um-orange-tint: rgba(244, 115, 33, 0.10); /* Plotly bridge — JS reads these via getComputedStyle so charts repaint correctly when theme flips. Don't reference these from CSS rules; CSS uses --surface-raised, --text, --border directly. */ --plot-paper: #ffffff; --plot-bg: #ffffff; --plot-text: #0f1623; --plot-grid: var(--border); --plot-axis: #5b6573; --plot-hover-bg: #ffffff; --plot-hover-border: rgba(15, 22, 35, 0.15); /* Basemap URL hint — JS reads `--basemap-variant` to choose light_all vs dark_all CARTO tiles. */ --basemap-variant: "light"; } /* ── DARK theme — neutral near-black with UM accent palette ─────── Background is a near-pure-black with a faint cool cast (Linear / Vercel / GitHub dark style) so the UM accent palette (emerald + orange) reads cleanly without a competing navy undertone. Primary accent (--blue) resolves to the same emerald as --um-green so all active states (tabs, focus borders, slider thumbs, primary CTAs) match. UM orange (--cyan) is the loud live/attention accent — consistent with light mode's semantic. */ :root[data-theme="dark"] { --navy: #0a0e14; /* page bg — near-black, slight cool */ --navy-mid: #11161f; /* slightly raised */ --navy-light: #1a2230; /* interactive control surface */ --blue: #4a9b6e; /* emerald primary accent */ --blue-light: #6db993; /* lighter emerald */ --blue-glow: rgba(74, 155, 110, 0.20); --cyan: #F47321; /* UM orange — live / attention */ --slate: #8a93a4; --text: #e6e8eb; --text-dim: #8a93a3; --surface: #11161f; /* section bg */ --surface-raised: #161b24; /* card / panel bg */ --border: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.10); --map-canvas: #0a0e14; --map-canvas-mid: #11161f; --map-text: #e6e8eb; --map-text-dim: #8a93a3; --map-border: rgba(255, 255, 255, 0.10); --text-muted: #9ca3af; --text-faint: #6b7280; --text-subtle: #64748b; /* UM tokens stay the same hue, brightened for dark-bg contrast */ --um-green: #4a9b6e; --um-green-deep: #2e7a5b; --um-green-tint: rgba(74, 155, 110, 0.16); --plot-paper: #0a0e14; --plot-bg: #0a0e14; --plot-text: #e6e8eb; --plot-grid: rgba(255, 255, 255, 0.06); --plot-axis: #8a93a3; --plot-hover-bg: #161b24; --plot-hover-border: rgba(255, 255, 255, 0.18); --basemap-variant: "dark"; } /* Smooth toggle transitions on common surfaces */ body, .topbar, .leaflet-container, .map-storm-card, .detail-panel, .ga-btn, .cs-btn, .overlay-pill, .ir-toggle-btn, .colorbar, .track-tooltip { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* Accent palette — grouped by DATA ROLE, not per-tool. Keep new widgets aligned to one of these buckets so the visual language stays legible: - Cyan (--cyan) → thermal satellite imagery (IR underlay) - Blue (--blue-*) → aircraft in-situ / recon (FL, Dropsondes) - Green (--accent-nexrad) → ground-based active radar (NEXRAD 88D) - Orange (--accent-mw) → external passive satellite sensing (microwave, SHIPS-derived products, shear-frame analyses) - Slate (rgba 148,163,184) → neutral kinematic overlays (Barbs, Tilt) - Purple/Mint/Amber → reserved tints for *derived* analytics (CFAD, Z* anomaly, VP scatter), each visually distinct to aid quick ID. */ --accent-mw: #fb923c; --accent-mw-text: #fdba74; --accent-nexrad: #22c55e; --accent-nexrad-text: #86efac; --accent-cfad: #a855f7; --accent-cfad-text: #c4b5fd; --accent-anomaly: #34d399; --accent-anomaly-text: #6ee7b7; --accent-vp: #fbbf24; --accent-vp-text: #fde68a; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; color: var(--text); background: var(--navy); } /* ── Top bar ─────────────────────────────────────── */ .topbar { background: var(--navy); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(12px); } .topbar-inner { max-width: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 52px; } .topbar-brand { display: flex; align-items: center; gap: 14px; } .topbar-icon { width: 28px; height: 28px; border-radius: 4px; } .topbar-logo { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--text); } .topbar-divider { width: 1px; height: 22px; background: var(--border-light); } .topbar-subtitle { font-size: 0.72rem; color: var(--slate); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .topbar-stats { display: flex; gap: 28px; align-items: center; } .topbar-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; } .topbar-stat-val { font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .topbar-stat-label { font-size: 0.6rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } .topbar-nav { display: flex; gap: 6px; list-style: none; align-items: center; flex-wrap: nowrap; } .topbar-nav li { flex: 0 0 auto; } .topbar-nav a { color: var(--slate); text-decoration: none; font-weight: 500; font-size: 0.8rem; padding: 6px 12px; border-radius: 6px; transition: all 0.2s; white-space: nowrap; } .topbar-nav a:hover { color: var(--text); background: var(--border); } .topbar-nav a.nav-active { color: #ffffff; background: var(--um-green); font-weight: 600; } .topbar-version { font-size: 0.65rem; color: #ffffff; background: var(--um-orange); padding: 2px 8px; border-radius: 20px; font-weight: 600; letter-spacing: 0.02em; } /* ── Theme toggle (sun ↔ moon) ──────────────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--slate); width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-left: 8px; flex-shrink: 0; transition: color 0.15s, background 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--text); background: var(--um-green-tint); border-color: var(--um-green); } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* Show the icon for the DESTINATION theme: in light mode the moon icon advertises "click to go dark"; in dark mode the sun advertises "click to go light". Same convention as GitHub, Notion, Apple. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ── Map section (hero) ──────────────────────────── */ #map-section { display: flex; flex-direction: column; min-height: calc(100vh - 52px); background: var(--navy); } /* ── Toolbar row ────────────────────────────────── */ .map-toolbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; z-index: 600; } .toolbar-group { display: flex; align-items: center; gap: 8px; } .toolbar-label { font-size: 0.68rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; white-space: nowrap; } .toolbar-select { background: var(--navy); color: var(--text); border: 1px solid var(--border-light); border-radius: 6px; padding: 5px 10px; font-size: 0.8rem; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: border-color 0.2s; } .toolbar-select:focus { outline: none; border-color: var(--blue); } .toolbar-select option { background: var(--navy); color: var(--text); } .toolbar-sep { width: 1px; height: 24px; background: var(--border-light); margin: 0 4px; } .toolbar-explore-btn { background: var(--blue); color: white; border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .toolbar-explore-btn:hover { background: #3a7a55; } .toolbar-explore-btn:disabled { opacity: 0.4; cursor: not-allowed; } .toolbar-count { font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--blue-light); white-space: nowrap; } .toolbar-reset { background: transparent; border: 1px solid var(--border-light); color: var(--slate); border-radius: 6px; padding: 5px 12px; font-size: 0.75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 500; transition: all 0.2s; } .toolbar-reset:hover { border-color: var(--blue); color: var(--text); } .filter-toggle-btn { background: transparent; border: 1px solid var(--border-light); color: var(--slate); border-radius: 6px; padding: 5px 12px; font-size: 0.75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 500; transition: all 0.2s; display: flex; align-items: center; gap: 5px; } .filter-toggle-btn:hover { border-color: var(--blue); color: var(--text); } .filter-toggle-btn.active { background: var(--blue); color: white; border-color: var(--blue); } /* ── Active-filter badge ─────────────────────────── */ .filter-toggle-btn { position: relative; } .filter-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; background: var(--cyan); color: var(--navy); font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); pointer-events: none; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.2s; } .filter-badge.visible { opacity: 1; transform: scale(1); } /* ── Case count highlight flash ──────────────────── */ @keyframes countFlash { 0% { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); } 100% { color: var(--blue-light); text-shadow: none; } } .toolbar-count.flash { animation: countFlash 0.6s ease-out; } /* ── Tooltip for Analysis dropdown ────────────────── */ .toolbar-select[title] { cursor: help; } /* ── Filter drawer ───────────────────────────────── */ .filter-drawer { background: var(--surface-raised); border-bottom: 1px solid var(--border); max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 20px; } .filter-drawer.open { max-height: 520px; padding: 16px 20px; } .filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; } .filter-group { display: flex; flex-direction: column; gap: 6px; } .filter-group label { font-size: 0.7rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group input[type="number"] { background: var(--navy); color: var(--text); border: 1px solid var(--border-light); border-radius: 6px; padding: 5px 8px; font-size: 0.85rem; width: 72px; font-variant-numeric: tabular-nums; } .filter-group input[type="number"]:focus { outline: none; border-color: var(--blue); } .slider-values { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--blue-light); font-variant-numeric: tabular-nums; font-weight: 500; } .slider-wrapper { position: relative; height: 28px; display: flex; align-items: center; } .slider-track { position: absolute; width: 100%; height: 4px; background: var(--navy); border-radius: 2px; top: 50%; transform: translateY(-50%); } .slider-range { position: absolute; height: 4px; background: var(--blue); border-radius: 2px; top: 50%; transform: translateY(-50%); } /* Scoped to .slider-wrapper — these rules are for the Explorer dual-handle filter sliders (two stacked range inputs with a coloured between-track). Without the prefix the `position: absolute; pointer-events: none` leaked to every range input across the site (Climatology Globe year/month sliders went invisible / detached because of this). */ .slider-wrapper input[type="range"] { position: absolute; width: 100%; height: 4px; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; margin: 0; padding: 0; top: 50%; transform: translateY(-50%); } .slider-wrapper input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--blue); border: 2px solid white; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); margin-top: -6px; } .slider-wrapper input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--blue); border: 2px solid white; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .slider-wrapper input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; border-radius: 2px; } .slider-wrapper input[type="range"]::-moz-range-track { height: 4px; background: transparent; border-radius: 2px; } /* ── Map + side panel ────────────────────────────── */ #map-wrapper { flex: 1; display: flex; position: relative; overflow: hidden; } #map-container { flex: 1; position: relative; min-width: 0; min-height: 400px; max-height: calc(100vh - 100px); transition: flex 0.35s ease; } #map { height: 100%; width: 100%; } .leaflet-container { background: var(--map-canvas); } #side-panel { width: 0; overflow: hidden; background: var(--surface); border-left: none; transition: width 0.35s ease, border 0.35s ease; display: flex; flex-direction: column; position: relative; z-index: 500; height: 100%; } #side-panel.open { width: 420px; border-left: 1px solid var(--border-light); } /* Focus mode: map shrinks, panel dominates */ #map-wrapper.focus-mode #map-container { flex: 0 0 30%; max-width: 30%; } #map-wrapper.focus-mode #side-panel.open { width: 70%; } #map-wrapper.focus-mode #side-panel-inner { width: 100%; } .focus-back-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; margin-bottom: 8px; background: var(--navy-mid); color: var(--slate); border: 1px solid var(--border-light); border-radius: 5px; font-size: 0.72rem; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s; } .focus-back-btn:hover { background: var(--blue); color: white; border-color: var(--blue); } .focus-back-btn svg { width: 12px; height: 12px; } .case-nav-bar { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; } .case-nav-btn { background: rgba(15, 22, 35,0.04); border: 1px solid rgba(15, 22, 35,0.1); color: #9ca3af; font-size: 9px; width: 22px; height: 22px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; line-height: 1; vertical-align: middle; } .case-nav-btn:hover:not(:disabled) { background: rgba(59,130,246,0.15); color: var(--blue); border-color: rgba(59,130,246,0.35); } .case-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .case-nav-pos { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--slate); white-space: nowrap; } #side-panel-inner { width: 420px; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; display: flex; flex-direction: column; flex: 1; min-height: 0; } #side-panel-close { position: absolute; top: 10px; right: 10px; background: var(--navy-mid); border: 1px solid var(--border-light); border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--slate); z-index: 10; line-height: 1; transition: all 0.2s; } #side-panel-close:hover { background: var(--blue); color: white; border-color: var(--blue); } .panel-storm-name { font-size: 16px; font-weight: 700; color: var(--text); padding-right: 32px; margin-bottom: 1px; } .panel-mission { font-size: 10px; color: var(--slate); font-variant-numeric: tabular-nums; margin-bottom: 8px; } /* ── "About this case" metadata panel ── */ .case-meta-panel { background: rgba(255, 255, 255,0.6); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; } .case-meta-section { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-items: baseline; } .case-meta-section-hdr { grid-column: 1 / -1; font-size: 8px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.09em; padding-bottom: 1px; border-bottom: 1px solid var(--border); margin-bottom: 0; margin-top: 2px; } .case-meta-section:first-child .case-meta-section-hdr { margin-top: 0; } .case-meta-cell { display: contents; } .case-meta-lbl { font-size: 9.5px; font-weight: 600; color: var(--slate); white-space: nowrap; line-height: 1.4; } .case-meta-val { font-size: 10.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .case-cat-badge { display: inline-block; color: var(--text); font-size: 9px; padding: 0 5px; border-radius: 3px; margin-right: 3px; vertical-align: middle; font-family: 'DM Sans', sans-serif; } a.case-meta-link { color: #60a5fa; text-decoration: none; border-bottom: 1px dotted #3b82f6; } a.case-meta-link:hover { color: #1d4ed8; border-bottom-color: #1d4ed8; } /* Two-column explorer layout (used in focus mode) */ .explorer-layout { display: flex; gap: 16px; flex: 1; } .explorer-display { flex: 1; min-width: 0; display: flex; flex-direction: column; } .explorer-controls { width: 280px; flex-shrink: 0; position: sticky; top: 8px; align-self: flex-start; max-height: calc(100vh - 80px); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--border); padding-left: 16px; scrollbar-width: thin; scrollbar-color: rgba(96,165,250,0.3) transparent; } .explorer-controls::-webkit-scrollbar { width: 6px; } .explorer-controls::-webkit-scrollbar-thumb { background: rgba(96,165,250,0.3); border-radius: 3px; } /* Fallback: narrow panel (non-focus) stacks vertically */ #side-panel:not(.focus-panel) .explorer-layout { flex-direction: column; } #side-panel:not(.focus-panel) .explorer-controls { width: 100%; position: static; max-height: none; border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 10px; } #display-area { margin-bottom: 6px; flex: 1 1 auto; min-height: 300px; display: flex; flex-direction: column; } /* ── Dual-panel split view ─────────────────────── */ .dual-panel-strip { font-size: 0.62rem; color: var(--slate); font-variant-numeric: tabular-nums; text-align: center; padding: 3px 0 1px; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .dual-panel-strip .meta-text { display: inline; } /* ── Shear/Motion compass widget ─────────────────── */ .shear-compass { display: inline-flex; align-items: center; gap: 8px; } .shear-compass svg { flex-shrink: 0; } .shear-compass .compass-labels { display: flex; flex-direction: column; gap: 1px; font-size: 0.62rem; font-variant-numeric: tabular-nums; line-height: 1.3; } .shear-compass .compass-labels .shear-lbl { color: #f59e0b; } .shear-compass .compass-labels .motion-lbl { color: #22d3ee; } .dual-panel-wrap { display: flex; gap: 6px; min-height: 320px; } .dual-panel-wrap > .dual-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dual-panel-wrap > .dual-pane .dual-pane-inner { flex: 1; border-radius: 6px; overflow: hidden; position: relative; } /* Push Plotly mode bar below the title area to prevent overlap */ .dual-pane-inner .modebar-container { top: 32px !important; } .dual-pane-inner .modebar-group { background: rgba(255, 255, 255,0.7) !important; border-radius: 4px; } .dual-panel-wrap > .dual-pane-divider { width: 1px; background: var(--border-light); flex-shrink: 0; cursor: col-resize; position: relative; } .dual-panel-wrap > .dual-pane-divider::after { content: '‹›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 9px; color: var(--slate); background: var(--surface-raised); padding: 6px 2px; border-radius: 3px; border: 1px solid var(--border-light); line-height: 1; } .dual-pane-label { font-size: 0.58rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; text-align: center; padding: 3px 0 2px; } /* Azimuthal mean placeholder in right pane */ .az-pane-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--slate); font-size: 0.75rem; font-style: italic; text-align: center; padding: 20px; } /* Collapse the right pane */ .dual-panel-wrap.collapsed > .dual-pane:last-of-type, .dual-panel-wrap.collapsed > .dual-pane-divider { display: none; } /* Narrow viewport: auto-collapse right pane to keep buttons visible */ @media (max-width: 1100px) { .dual-panel-wrap { } .dual-panel-wrap > .dual-pane:last-of-type, .dual-panel-wrap > .dual-pane-divider { display: none; } } .panel-image-wrap { width: 100%; max-height: 50vh; border-radius: var(--radius); overflow: hidden; background: var(--navy); cursor: pointer; border: 1px solid var(--border); } .panel-image-wrap img { width: 100%; height: auto; display: block; transition: opacity 0.2s; } .panel-image-wrap img:hover { opacity: 0.9; } .panel-image-label { font-size: 10px; color: var(--slate); text-align: center; margin-top: 4px; margin-bottom: 6px; } /* ── Overlay pill toggle strip ──────────────────── */ .overlay-strip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; padding: 6px 0; border-bottom: 1px solid rgba(15, 22, 35,0.05); } .overlay-strip-label { font-size: 0.55rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; flex-shrink: 0; } .overlay-pill { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; border: 1px solid var(--border-light); background: rgba(15, 22, 35,0.03); color: #64748b; transition: all 0.2s ease; white-space: nowrap; line-height: 1.3; } .overlay-pill:hover:not(:disabled) { background: var(--border); border-color: rgba(15, 22, 35,0.2); color: var(--text-dim); } .overlay-pill:disabled { opacity: 0.35; cursor: not-allowed; } /* Active states: light tint background + DARKER (saturated) text so the label reads against the tint on a white page. The earlier pastel text colors (#67e8f9, #fca5a5...) were tuned for dark bg. */ .overlay-pill.active[data-color="cyan"] { background: var(--um-orange-tint); border-color: var(--um-orange); color: var(--um-orange-deep); } .overlay-pill.active[data-color="red"] { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.55); color: #b91c1c; } .overlay-pill.active[data-color="blue"] { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.55); color: #1e40af; } .overlay-pill.active[data-color="green"] { background: var(--um-green-tint); border-color: var(--um-green); color: var(--um-green); } .overlay-pill.active[data-color="slate"] { background: rgba(71,85,105,0.10); border-color: rgba(71,85,105,0.45); color: #334155; } .overlay-pill.active[data-color="pink"] { background: rgba(202,138,4,0.10); border-color: rgba(202,138,4,0.50); color: #8a5a04; } .overlay-pill.active[data-color="emerald"] { background: var(--um-green-tint); border-color: var(--um-green); color: var(--um-green); } /* Loading state for pills (pulsing) */ .overlay-pill.fl-active:not(.active), .overlay-pill.sonde-active:not(.active) { animation: pill-pulse 1.2s ease-in-out infinite; } @keyframes pill-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Action section labels ─────────────────────── */ .action-section { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(15, 22, 35,0.05); } .action-section-label { display: block; font-size: 0.55rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .display-actions { display: flex; gap: 6px; margin-top: 0; flex-shrink: 0; flex-wrap: wrap; } .display-actions .cs-btn { flex: 1; margin-top: 0; font-size: 11px; padding: 7px 0; min-width: 0; } .explorer-divider { border: none; border-top: 1px solid var(--border-light); margin-bottom: 10px; } .explorer-title { font-size: 0.65rem; font-weight: 700; color: var(--um-green); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .explorer-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; } .explorer-row label { font-size: 0.6rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; } .explorer-select { width: 100%; padding: 5px 8px; border: 1px solid var(--border-light); border-radius: 6px; font-size: 12px; background: var(--navy); color: var(--text); font-family: 'DM Sans', sans-serif; } .explorer-select:focus { outline: none; border-color: var(--blue); } .explorer-select option { background: var(--navy); } .explorer-select optgroup { color: var(--blue-light); } .explorer-level-row { display: flex; align-items: center; gap: 8px; } .explorer-level-row input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: var(--navy); border-radius: 2px; position: static; pointer-events: auto; transform: none; top: auto; width: auto; } .explorer-level-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--blue); border: 2px solid white; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.12); margin-top: -5px; } .az-cov-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: var(--navy); border-radius: 2px; position: static !important; pointer-events: auto !important; transform: none !important; top: auto !important; width: auto !important; } .az-cov-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--blue); border: 2px solid white; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); margin-top: -5px; } .explorer-level-value { font-size: 12px; font-weight: 700; color: var(--text); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; } .generate-btn { width: 100%; padding: 8px 0; background: var(--blue); color: #ffffff; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.2s; margin-top: 4px; font-family: 'DM Sans', sans-serif; } .generate-btn:hover { background: var(--blue-light); } .generate-btn:hover { opacity: 0.9; } .generate-btn:disabled { opacity: 0.5; cursor: not-allowed; } .explorer-status { font-size: 11px; color: var(--slate); padding: 6px 0; } .explorer-status.loading { color: var(--blue-light); } .explorer-status.error { color: #f87171; } .anim-controls { display: flex; align-items: center; gap: 3px; margin-top: 4px; } .anim-btn { width: 28px; height: 26px; border: 1px solid var(--border-light); border-radius: 5px; background: var(--navy); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--slate); transition: all 0.15s; padding: 0; } .anim-btn:hover { background: var(--navy-mid); border-color: var(--blue); color: var(--blue-light); } .anim-btn.active { background: var(--blue); color: #ffffff; border-color: var(--blue); } .anim-speed { font-size: 9px; color: var(--slate); margin-left: auto; } .cs-btn { width: 100%; padding: 7px 0; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-light); border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; margin-top: 6px; font-family: 'DM Sans', sans-serif; } .cs-btn:hover:not(:disabled) { background: rgba(15,22,35,0.04); border-color: rgba(15,22,35,0.20); } .cs-btn.active { background: var(--um-green); color: #ffffff; border-color: var(--um-green); font-weight: 700; } .cs-btn:disabled { opacity: 0.4; cursor: not-allowed; } .cs-status { font-size: 10px; color: var(--slate); text-align: center; margin-top: 3px; } .cs-result { margin-top: 6px; } .explorer-result { margin-top: 6px; text-align: center; } /* ── Cite button & modal ─────────────────────────── */ .cite-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 10px; font-weight: 600; font-family: 'DM Sans', sans-serif; background: rgba(74, 155, 110,0.12); border: 1px solid rgba(74, 155, 110,0.35); border-radius: 4px; color: #1d4ed8; cursor: pointer; transition: all 0.2s; vertical-align: middle; margin-left: 8px; } .cite-btn:hover { background: rgba(74, 155, 110,0.25); border-color: rgba(74, 155, 110,0.6); color: #bfdbfe; } .cite-modal-overlay { display: none; position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,0.18); backdrop-filter: blur(4px); align-items: center; justify-content: center; } .cite-modal-overlay.active { display: flex; } .cite-modal-box { width: min(600px, 94vw); background: var(--navy); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: 0 16px 48px rgba(0,0,0,0.18); padding: 24px; position: relative; max-height: 90vh; overflow-y: auto; } .cite-modal-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 16px; padding-right: 32px; } .cite-modal-close { position: absolute; top: 14px; right: 14px; background: var(--border); border: 1px solid rgba(15, 22, 35,0.1); border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; color: var(--slate); display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .cite-modal-close:hover { background: var(--blue); color: white; border-color: var(--blue); } .cite-entry { background: rgba(15, 22, 35,0.03); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .cite-entry-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--um-green); margin-bottom: 6px; } .cite-entry-text { font-size: 11.5px; line-height: 1.6; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; word-break: break-word; } .cite-copy-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 10px; font-size: 10px; font-weight: 600; font-family: 'DM Sans', sans-serif; background: rgba(15, 22, 35,0.05); border: 1px solid var(--border-light); border-radius: 4px; color: var(--slate); cursor: pointer; transition: all 0.2s; } .cite-copy-btn:hover { background: rgba(74, 155, 110,0.18); border-color: rgba(74, 155, 110,0.4); color: #1d4ed8; } .cite-copy-btn.copied { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.4); color: #15803d; } .cite-bibtex-row { display: flex; justify-content: flex-end; margin-top: 4px; } .cite-bibtex-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 11px; font-weight: 700; font-family: 'DM Sans', sans-serif; background: rgba(168,85,247,0.14); border: 1px solid rgba(168,85,247,0.4); border-radius: 5px; color: #6d28d9; cursor: pointer; transition: all 0.2s; } .cite-bibtex-btn:hover { background: rgba(168,85,247,0.28); border-color: rgba(168,85,247,0.65); } .cite-bibtex-btn.copied { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.4); color: #15803d; } /* ── Plot modals ─────────────────────────────────── */ .plot-modal-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.18); backdrop-filter: blur(6px); align-items: center; justify-content: center; } .plot-modal-overlay.active { display: flex; } .plot-modal-box { width: 94vw; height: 92vh; background: var(--navy); border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.15); border: 1px solid var(--border-light); } .plot-modal-close { position: absolute; top: 10px; right: 14px; z-index: 10001; background: var(--border); border: none; color: #ccc; font-size: 22px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .plot-modal-close:hover { background: rgba(15, 22, 35,0.2); color: var(--text); } #plotly-fullscreen { width: 100%; height: 100%; } .plot-modal-box.split { overflow-y: auto; } .plot-modal-box.split #plotly-fullscreen { height: 55%; min-height: 300px; } .plot-modal-box.split #cs-fullscreen { height: 40%; min-height: 220px; width: 100%; } .plot-modal-box.split #az-fullscreen { height: 40%; min-height: 220px; width: 100%; } .plot-modal-box.split #sq-fullscreen { height: 42%; min-height: 260px; width: 100%; } .cs-full-divider { height: 1px; background: var(--border); margin: 4px 16px; } /* ── 3D Volume modal ─────────────────────────────── */ .vol3d-modal-box { width: 96vw; height: 94vh; background: #0d1117; border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.18); border: 1px solid var(--border-light); display: flex; flex-direction: column; } .vol3d-controls { display: flex; align-items: center; gap: 8px; padding: 8px 50px 6px 14px; background: rgba(15,20,30,0.95); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; z-index: 2; } .vol3d-controls label { font-size: 10px; color: #8899aa; font-weight: 600; white-space: nowrap; } .vol3d-controls input, .vol3d-controls select { padding: 3px 5px; font-size: 11px; border: 1px solid var(--border-light); border-radius: 4px; background: #161b22; color: var(--text); font-family: 'DM Sans', sans-serif; } .vol3d-toggle-btn { padding: 3px 10px; font-size: 10px; border: 1px solid var(--blue); border-radius: 4px; background: transparent; color: var(--blue-light); cursor: pointer; font-weight: 700; font-family: 'DM Sans', sans-serif; transition: all 0.15s; } .vol3d-toggle-btn.active { background: var(--blue); color: #ffffff; } .vol3d-toggle-btn:hover { background: rgba(37,99,235,0.15); } .vol3d-toggle-btn[data-accent="cfad"] { border-color: rgba(168,85,247,0.5); color: var(--accent-cfad-text); } .vol3d-toggle-btn[data-accent="anomaly"] { border-color: rgba(52,211,153,0.5); color: var(--accent-anomaly-text); } .vol3d-toggle-btn[data-accent="slate"] { border-color: rgba(148,163,184,0.5); color: #475569; } #vol-3d-chart { flex: 1; width: 100%; min-height: 0; } /* ── IR satellite map controls ──────────────────────────────── */ .ir-map-controls { position: absolute; bottom: 8px; left: 8px; z-index: 1000; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border: 1px solid var(--border-light); border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; } .ir-ctrl-row { display: flex; align-items: center; gap: 6px; } .ir-ctrl-btn { background: var(--border); border: 1px solid rgba(15, 22, 35,0.15); color: var(--text); font-size: 12px; padding: 3px 8px; border-radius: 5px; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .ir-ctrl-btn:hover { background: rgba(15, 22, 35,0.18); } .ir-slider { width: 100px; height: 4px; cursor: pointer; accent-color: #60a5fa; -webkit-appearance: none; appearance: none; background: var(--navy); border-radius: 2px; position: static !important; pointer-events: auto !important; transform: none !important; top: auto !important; } .ir-ctrl-disabled { opacity: 0.35; pointer-events: none; } .ir-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #60a5fa; border: 2px solid white; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); margin-top: -5px; } .ir-label { font-size: 10px; color: #1d4ed8; font-variant-numeric: tabular-nums; min-width: 160px; text-align: right; } /* ── ERA5 environment panel ─────────────────────────────── */ .env-field-dropdown { position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; background: var(--surface-raised); border: 1px solid var(--border-light); border-radius: 6px; padding: 4px 0; min-width: 220px; box-shadow: 0 -4px 16px rgba(0,0,0,0.1); z-index: 100; } .env-field-option { padding: 7px 14px; font-size: 11px; color: var(--text); cursor: pointer; transition: background 0.15s; } .env-field-option:hover { background: var(--border); } .env-field-option.active { color: var(--cyan); font-weight: 600; } .cs-btn#env-panel-btn.active { background: rgba(0, 180, 100, 0.2); border-color: rgba(0, 180, 100, 0.5); color: #15803d; } .cs-btn#ir-underlay-btn.active { background: rgba(59, 130, 246, 0.25); border-color: rgba(59, 130, 246, 0.5); color: #1d4ed8; } /* ── Environment Overlay Panel ───────────────────── */ .env-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000; background: rgba(8,15,30,0.98); backdrop-filter: blur(8px); overflow-y: auto; } .env-overlay.active { display: flex; align-items: flex-start; justify-content: center; padding: 20px; } .env-box { width: 100%; max-width: 1440px; background: var(--navy); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .env-ov-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border); background: rgba(15, 22, 35,0.02); } .env-ov-header-left { display: flex; align-items: center; gap: 10px; } .env-ov-logo { font-size: 20px; } .env-ov-title { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .env-ov-subtitle { font-size: 12px; color: #6b7280; margin-left: 4px; } .env-ov-close { background: none; border: 1px solid rgba(15, 22, 35,0.1); color: #9ca3af; font-size: 18px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .env-ov-close:hover { background: rgba(15, 22, 35,0.05); color: var(--text); } /* ── Case navigator in env overlay header ──────── */ .env-nav-bar { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; } .env-nav-btn { background: rgba(15, 22, 35,0.04); border: 1px solid rgba(15, 22, 35,0.1); color: #9ca3af; font-size: 11px; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; } .env-nav-btn:hover:not(:disabled) { background: rgba(34,211,238,0.12); color: var(--cyan); border-color: rgba(34,211,238,0.3); } .env-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .env-nav-select { background: rgba(15, 22, 35,0.04); border: 1px solid rgba(15, 22, 35,0.1); color: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; padding: 5px 24px 5px 8px; border-radius: 6px; max-width: 320px; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .env-nav-select:hover { border-color: rgba(34,211,238,0.3); } .env-nav-select:focus { outline: none; border-color: var(--cyan); } .env-nav-select option { background: var(--navy); color: var(--text); } .env-ov-body { display: flex; min-height: 640px; } .env-ov-controls { width: 280px; min-width: 280px; padding: 20px; border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 120px); } .env-ov-display { flex: 1; padding: 20px; overflow-y: auto; max-height: calc(100vh - 120px); } .env-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--um-green); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(34,211,238,0.15); } .env-ctrl-row { margin-bottom: 12px; } .env-ctrl-row label { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; margin-bottom: 3px; font-variant-numeric: tabular-nums; } .env-ctrl-select { width: 100%; padding: 6px 8px; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 6px; font-size: 12px; background: var(--navy); color: var(--text); font-family: 'DM Sans', sans-serif; } .env-ctrl-select option { background: var(--navy); } .env-slider-row { display: flex; align-items: center; gap: 8px; } .env-slider-row input[type="range"] { position: static; transform: none; flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: var(--navy-mid); border-radius: 2px; pointer-events: auto; } .env-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--cyan); border-radius: 50%; cursor: pointer; } .env-slider-val { font-size: 11px; font-weight: 600; color: var(--um-green); min-width: 52px; font-variant-numeric: tabular-nums; text-align: right; } .env-case-info { padding: 12px; background: rgba(34,211,238,0.05); border: 1px solid rgba(34,211,238,0.15); border-radius: 8px; margin-bottom: 16px; } .env-case-name { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .env-case-detail { font-size: 11px; color: #9ca3af; margin-top: 2px; font-variant-numeric: tabular-nums; } .env-domain-note { font-size: 10px; color: #6b7280; margin-top: 6px; padding: 6px 8px; background: rgba(15, 22, 35,0.02); border-radius: 4px; border: 1px solid rgba(15, 22, 35,0.04); line-height: 1.5; } .env-recompute-btn { width: 100%; padding: 8px; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; transition: all 0.15s; background: var(--cyan); color: var(--navy); margin-top: 8px; } .env-recompute-btn:hover { background: #67e8f9; } .env-recompute-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Dashboard grid inside display area ─────────── */ .env-dash-row { display: grid; gap: 16px; margin-bottom: 16px; } .env-dash-row.two-col { grid-template-columns: 1fr 1fr; } .env-dash-row.three-col { grid-template-columns: 1fr 1fr 1fr; } .env-dash-card { background: rgba(15, 22, 35,0.02); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .env-dash-card-header { padding: 10px 14px; border-bottom: 1px solid rgba(15, 22, 35,0.04); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--um-green); } .env-dash-card-body { padding: 12px; } /* ── Scalar diagnostic cards ────────────────────── */ .env-scalars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .env-scard { background: rgba(15, 22, 35,0.025); border: 1px solid var(--border); border-radius: 8px; padding: 14px 12px; text-align: center; transition: border-color 0.2s; } .env-scard:hover { border-color: var(--border-light); } .env-scard-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; } .env-scard-unit { font-size: 10px; font-weight: 500; color: #6b7280; margin-top: 2px; } .env-scard-label { font-size: 10px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; } .env-scard-sub { font-size: 9px; color: #6b7280; margin-top: 3px; font-variant-numeric: tabular-nums; } .env-scard.highlight-good { border-color: rgba(16,185,129,0.3); } .env-scard.highlight-warn { border-color: rgba(245,158,11,0.3); } .env-scard.highlight-bad { border-color: rgba(239,68,68,0.3); } .env-scard.highlight-good .env-scard-value { color: #34d399; } .env-scard.highlight-warn .env-scard-value { color: #fbbf24; } .env-scard.highlight-bad .env-scard-value { color: #f87171; } /* ── No-case prompt / loading state ─────────────── */ .env-no-case { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #4b5563; padding: 60px 20px; text-align: center; } .env-no-case-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; } .env-no-case-msg { font-size: 13px; max-width: 360px; line-height: 1.6; } /* Loading spinner for env overlay */ .env-loading-spinner { width: 48px; height: 48px; /* Neutral slate track at 40% alpha reads on both themes; the previous cyan-on-cyan-alpha disappeared on dark navy. */ border: 3px solid rgba(148, 163, 184, 0.4); border-top-color: var(--cyan); border-radius: 50%; animation: envSpin 0.8s linear infinite; margin-bottom: 16px; } @keyframes envSpin { to { transform: rotate(360deg); } } @keyframes envPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } @media (max-width: 1100px) { .env-scalars-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .env-ov-body { flex-direction: column; } .env-ov-controls { width: 100%; min-width: auto; border-right: none; border-bottom: 1px solid var(--border); max-height: none; } .env-ov-display { min-height: 500px; } .env-dash-row.two-col { grid-template-columns: 1fr; } .env-scalars-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Leaflet popups (dark) ────────────────────────── */ .leaflet-popup-content-wrapper { border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.12); background: var(--surface-raised); color: var(--text); } .leaflet-popup-tip { background: var(--surface-raised); } .leaflet-popup-content { margin: 14px; font-size: 13px; min-width: 240px; max-width: 300px; } .leaflet-popup { margin-bottom: 20px; } .leaflet-popup-close-button { color: var(--slate) !important; } .leaflet-popup-close-button:hover { color: var(--text) !important; } .popup-header { border-bottom: 2px solid var(--blue); padding-bottom: 8px; margin-bottom: 10px; } .popup-storm-name { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .popup-mission { font-size: 11px; color: var(--slate); font-variant-numeric: tabular-nums; } .popup-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); } .popup-row:last-child { border-bottom: none; } .popup-label { color: var(--slate); font-weight: 500; } .popup-value { color: var(--text); font-weight: 600; } .intensity-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: white; } .popup-explore-btn { display: block; width: 100%; margin-top: 12px; padding: 8px 0; background: var(--blue); color: #ffffff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; transition: background 0.2s; font-family: 'DM Sans', sans-serif; } .popup-explore-btn:hover { background: var(--blue-light); } .popup-explore-btn:hover { opacity: 0.9; } /* ── Legend ──────────────────────────────────────── */ .intensity-legend { background: var(--surface-raised); padding: 14px; border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,0.1); font-size: 12px; line-height: 1.6; border: 1px solid var(--border); color: var(--text); } .intensity-legend h4 { margin: 0 0 8px 0; font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; } .legend-item { display: flex; align-items: center; margin: 4px 0; } .legend-color { width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; border: 2px solid rgba(15, 22, 35,0.15); } .custom-marker { border-radius: 50%; border: 2px solid rgba(15, 22, 35,0.3); cursor: pointer; } /* ── Compact intensity legend ──────────────────── */ .intensity-legend.intensity-legend-compact { padding: 6px 10px; font-size: 10px; line-height: 1.4; } .intensity-legend-compact .legend-body { display: none; } .intensity-legend-compact.expanded .legend-body { display: block; margin-top: 4px; } .intensity-legend-compact.expanded .legend-toggle { transform: rotate(180deg); } .intensity-legend-compact .legend-item { margin: 2px 0; } .intensity-legend-compact .legend-color { width: 10px; height: 10px; margin-right: 5px; } .intensity-legend-compact .legend-item span { font-size: 9px; } /* ── Map colorbars (IR / MW on Leaflet) ───────── */ .map-colorbar { background: rgba(255, 255, 255,0.88); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(15, 22, 35,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.1); backdrop-filter: blur(6px); } .map-colorbar + .map-colorbar { margin-top: 6px; } /* ── Loading ─────────────────────────────────────── */ #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--surface-raised); padding: 30px 40px; border-radius: var(--radius-lg); box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 1000; text-align: center; color: var(--text); border: 1px solid var(--border); } .spinner { border: 3px solid rgba(148, 163, 184, 0.4); border-top: 3px solid var(--cyan); border-radius: 50%; width: 36px; height: 36px; animation: spin 1s linear infinite; margin: 0 auto 12px; } @keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } /* ── Below-fold sections ─────────────────────────── */ .content-section { max-width: 1100px; margin: 0 auto; padding: 5rem 24px; } .section-bg { background: var(--surface); } .section-title { font-size: 1.8rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; text-align: center; letter-spacing: -0.02em; } .section-title .accent { color: var(--um-green); } .section-desc { text-align: center; max-width: 700px; margin: 0 auto 2.5rem auto; font-size: 1rem; color: var(--slate); line-height: 1.8; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.5rem; } .feature-card { padding: 2rem; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border); transition: transform 0.3s, border-color 0.3s; } .feature-card:hover { transform: translateY(-3px); border-color: var(--blue); } .feature-icon { margin-bottom: 0.75rem; color: var(--um-green); line-height: 1; } .feature-icon svg { width: 2rem; height: 2rem; display: block; } .feature-card h3 { color: var(--text); margin-bottom: 0.5rem; font-size: 1.05rem; } .feature-card p { color: var(--slate); font-size: 0.9rem; } .variables-list { column-count: 2; column-gap: 3rem; margin: 1.5rem 0; line-height: 2.2; list-style: none; } .variables-list li { color: var(--text); font-size: 0.95rem; } .variables-list li::before { content: '\2192'; color: var(--um-green); margin-right: 8px; font-weight: 700; } .ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.25rem; margin-top: 1.5rem; } .ref-card { padding: 1.5rem; border-radius: var(--radius); background: var(--navy-mid); border: 1px solid var(--border); } .ref-card h4 { color: var(--blue-light); margin-bottom: 0.5rem; font-size: 0.95rem; } .ref-card p { color: var(--slate); font-size: 0.85rem; } .data-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.25rem; margin-top: 2rem; } .file-card { background: var(--surface-raised); border: 1px solid var(--border); padding: 2rem; border-radius: var(--radius-lg); text-align: center; transition: border-color 0.3s; } .file-card:hover { border-color: var(--blue); } .file-card h3 { color: var(--text); font-size: 1rem; } .file-card .file-period { color: var(--slate); font-size: 0.85rem; margin-top: 4px; } .file-size { font-size: 1.8rem; font-weight: 700; color: var(--text); margin: 1rem 0; font-variant-numeric: tabular-nums; } .download-btn { background: var(--blue); color: #ffffff; padding: 10px 24px; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.2s; font-family: 'DM Sans', sans-serif; } .download-btn:hover { background: var(--blue-light); } .download-btn:hover { opacity: 0.9; transform: scale(1.03); } .usage-policy { max-width: 750px; margin: 3rem auto; padding: 1.5rem 2rem; background: rgba(251, 191, 36, 0.08); border-radius: var(--radius); border-left: 3px solid #fbbf24; } .usage-policy h3 { color: #fbbf24; margin-bottom: 0.75rem; font-size: 1rem; } .usage-policy p { color: var(--slate); font-size: 0.9rem; } .usage-policy a { color: var(--blue-light); } .citation-box { background: var(--navy-mid); padding: 1.5rem 2rem; border-radius: var(--radius); border-left: 3px solid var(--blue); margin: 2rem 0; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--slate); line-height: 1.8; } .citation-box h3 { color: var(--blue-light); margin-bottom: 0.75rem; font-family: 'DM Sans', sans-serif; } .contact-section { background: var(--surface); border-top: 1px solid var(--border); text-align: center; padding: 4rem 24px; color: var(--text); } .contact-section .section-title { color: white; } .contact-info { max-width: 500px; margin: 2rem auto; background: var(--border); padding: 2rem; border-radius: var(--radius-lg); backdrop-filter: blur(10px); border: 1px solid var(--border-light); } .contact-info a { color: var(--um-green); } footer { background: var(--navy); border-top: 1px solid var(--border); text-align: center; padding: 2rem 0; color: var(--slate); font-size: 0.85rem; } footer a { color: var(--blue-light); text-decoration: none; } footer a:hover { text-decoration: underline; } .image-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.18); overflow: auto; } .image-modal-content { position: relative; margin: 2% auto; padding: 0; width: 90%; max-width: 1200px; } .modal-image { width: 100%; height: auto; border-radius: 6px; } .modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 10001; } .modal-close:hover { color: #bbb; } .modal-caption { text-align: center; color: var(--slate); padding: 10px 0; font-size: 14px; } .scroll-prompt { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; transition: opacity 0.3s; pointer-events: none; } .scroll-prompt span { font-size: 0.65rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .scroll-prompt .arrow { width: 20px; height: 20px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg); animation: bobDown 2s infinite; } @keyframes bobDown { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(4px); } } /* ── Composite Wizard ─────────────────────────────────── */ .wizard-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000; background: rgba(0,0,0,0.18); backdrop-filter: blur(8px); overflow-y: auto; } .wizard-overlay.active { display: flex; align-items: flex-start; justify-content: center; padding: 16px; } .wizard-box { width: 100%; max-width: 1200px; background: var(--navy); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.18); display: flex; flex-direction: column; max-height: calc(100vh - 32px); } .wizard-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border); background: rgba(15, 22, 35,0.02); flex-shrink: 0; } .wizard-header-left { display: flex; align-items: center; gap: 10px; } .wizard-header-logo { font-size: 20px; } .wizard-header-title { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .wizard-header-sub { font-size: 11px; color: #6b7280; margin-left: 4px; } .wizard-close { background: none; border: 1px solid rgba(15, 22, 35,0.1); color: #9ca3af; font-size: 18px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .wizard-close:hover { background: rgba(15, 22, 35,0.05); color: var(--text); } /* ── Step indicator ─────────────────────────────── */ .wizard-stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: 16px 24px 8px; flex-shrink: 0; } .wizard-step-item { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: background 0.2s; } .wizard-step-item:hover { background: rgba(15, 22, 35,0.04); } .wizard-step-item.disabled { opacity: 0.35; pointer-events: none; } .wizard-step-circle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(15, 22, 35,0.15); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; transition: all 0.25s; flex-shrink: 0; } .wizard-step-item.active .wizard-step-circle { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(244, 115, 33, 0.25); } .wizard-step-item.completed .wizard-step-circle { border-color: #10b981; background: #10b981; color: white; } .wizard-step-label { font-size: 12px; font-weight: 600; color: var(--slate); white-space: nowrap; transition: color 0.2s; } .wizard-step-item.active .wizard-step-label { color: var(--um-green); } .wizard-step-item.completed .wizard-step-label { color: #34d399; } .wizard-step-connector { width: 40px; height: 2px; background: var(--border); margin: 0 4px; flex-shrink: 0; } .wizard-step-connector.completed { background: #10b981; } /* ── Summary strip ──────────────────────────────── */ .wizard-summary { padding: 6px 24px 10px; font-size: 11px; color: var(--slate); font-variant-numeric: tabular-nums; text-align: center; border-bottom: 1px solid rgba(15, 22, 35,0.04); flex-shrink: 0; min-height: 28px; } .wizard-summary .ws-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(15, 22, 35,0.04); margin: 0 3px; font-size: 10px; border: 1px solid var(--border); } .wizard-summary .ws-tag.blue { border-color: rgba(74, 155, 110,0.3); color: var(--blue-light); } .wizard-summary .ws-tag.amber { border-color: rgba(245,158,11,0.3); color: #fbbf24; } .wizard-summary .ws-tag.green { border-color: rgba(16,185,129,0.3); color: #34d399; } .wizard-summary .ws-tag.cyan { border-color: rgba(0,80,48,0.3); color: var(--um-green); } /* ── Step content area ──────────────────────────── */ .wizard-body { flex: 1; overflow-y: auto; padding: 20px 28px; min-height: 400px; } .wizard-step-content { display: none; animation: wizFadeIn 0.25s ease; } .wizard-step-content.active { display: block; } @keyframes wizFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Bottom navigation ──────────────────────────── */ .wizard-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; border-top: 1px solid var(--border); background: rgba(15, 22, 35,0.015); flex-shrink: 0; } .wizard-nav-btn { padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; } .wizard-nav-btn.secondary { background: transparent; border: 1px solid var(--border-light); color: var(--slate); } .wizard-nav-btn.secondary:hover { border-color: var(--blue); color: var(--text); } .wizard-nav-btn.primary { background: var(--cyan); border: none; color: var(--navy); font-weight: 700; } .wizard-nav-btn.primary:hover { background: #67e8f9; } .wizard-nav-btn:disabled { opacity: 0.35; pointer-events: none; } /* ── Step 1: Mode & Output Selection ────────────── */ .wizard-mode-cards { display: flex; gap: 16px; margin-bottom: 24px; } .wizard-mode-card { flex: 1; padding: 20px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.25s; text-align: center; background: rgba(15, 22, 35,0.015); } .wizard-mode-card:hover { border-color: rgba(15, 22, 35,0.18); background: rgba(15, 22, 35,0.03); } .wizard-mode-card.selected { border-color: var(--um-green); background: var(--um-green-tint); } .wizard-mode-card.selected.diff { border-color: #f59e0b; background: rgba(245,158,11,0.06); } .wizard-mode-icon { font-size: 28px; margin-bottom: 8px; } .wizard-mode-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .wizard-mode-desc { font-size: 11px; color: var(--slate); line-height: 1.5; } .wizard-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--um-green); margin: 20px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* All section titles use the same UM green for consistency. The .env and .sat class hooks are kept (markup uses them) but resolve to the same color so categories don't compete for the eye. */ .wizard-section-title.env { color: var(--um-green); border-bottom-color: var(--border); } .wizard-section-title.sat { color: var(--um-green); border-bottom-color: var(--border); } .wizard-output-item.sat-item.checked { border-color: var(--um-green); background: var(--um-green-tint); } .wizard-output-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wizard-output-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s; background: rgba(15, 22, 35,0.015); } .wizard-output-item:hover { border-color: rgba(15, 22, 35,0.15); } .wizard-output-item.checked { border-color: var(--blue); background: rgba(74, 155, 110,0.08); } .wizard-output-item.env-item.checked { border-color: #10b981; background: rgba(16,185,129,0.08); } .wizard-output-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--um-green); cursor: pointer; flex-shrink: 0; } .wizard-output-item label { font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 1px; } .wizard-output-item label small { font-size: 10px; color: var(--slate); font-weight: 400; } .wizard-dtype-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .wizard-dtype-row label { font-size: 11px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; } .wizard-dtype-row select { padding: 5px 10px; border: 1px solid var(--border-light); border-radius: 6px; font-size: 12px; background: var(--navy); color: var(--text); font-family: 'DM Sans', sans-serif; } /* ── Step 2: Filter Cases ───────────────────────── */ .wizard-filter-columns { display: flex; gap: 20px; } .wizard-group-col { flex: 1; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: rgba(15, 22, 35,0.01); } .wizard-group-col.group-a { border-color: rgba(74, 155, 110,0.25); } .wizard-group-col.group-b { border-color: rgba(245,158,11,0.25); } .wizard-group-label { font-size: 13px; font-weight: 700; margin-bottom: 12px; font-variant-numeric: tabular-nums; } .wizard-group-col.group-a .wizard-group-label { color: var(--blue-light); } .wizard-group-col.group-b .wizard-group-label { color: #fbbf24; } .wizard-filter-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .wizard-filter-row .wf-label { font-size: 11px; font-weight: 600; color: var(--slate); min-width: 85px; font-variant-numeric: tabular-nums; } .wizard-filter-row input[type="number"] { width: 62px; padding: 4px 6px; font-size: 11px; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 4px; background: rgba(15, 22, 35,0.03); color: var(--text); font-variant-numeric: tabular-nums; text-align: center; } .wizard-filter-row .wf-sep { font-size: 10px; color: #6b7280; } .wizard-filter-row .wf-unit { font-size: 10px; color: #6b7280; min-width: 16px; } .wf-section-hdr { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin: 12px 0 6px; padding-top: 8px; border-top: 1px dashed rgba(148, 163, 184, 0.25); cursor: help; } /* Diff-result panel layout: grid of A / B / Δ panels. Default = stacked rows; .diff-cols flips to side-by-side 3-column layout. */ .diff-panel-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; } .diff-panel-grid.diff-cols { /* minmax(0, 1fr) overrides the implicit min-content floor so Plotly charts can shrink with the column instead of pushing siblings to 0px. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .diff-panel-grid.diff-cols .diff-panel-cell { min-height: 400px; min-width: 0; } /* Toolbar above the diff-panel grid: layout toggle + composite export */ .diff-panel-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 0 0 8px; background: rgba(15, 22, 35, 0.04); border: 1px solid rgba(15, 22, 35, 0.08); border-radius: 8px; font: 600 11px 'JetBrains Mono', monospace; } .diff-panel-toolbar .dpt-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; } .diff-panel-toolbar .dpt-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font: 600 11px 'JetBrains Mono', monospace; background: #ffffff; color: var(--slate); border: 1px solid rgba(15, 22, 35, 0.12); border-radius: 6px; cursor: pointer; transition: all 0.12s; } .diff-panel-toolbar .dpt-btn:hover:not(:disabled) { background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.4); color: #0891b2; } .diff-panel-toolbar .dpt-btn.is-active { background: rgba(34, 211, 238, 0.15); border-color: rgba(34, 211, 238, 0.5); color: #0e7490; } .diff-panel-toolbar .dpt-btn:disabled { opacity: 0.6; cursor: wait; } .diff-panel-toolbar .dpt-spacer { flex: 1; } .diff-panel-toolbar .dpt-btn .icon-inline { width: 13px; height: 13px; } .wizard-case-count { margin-top: 14px; padding: 12px; text-align: center; background: rgba(34,211,238,0.05); border: 1px solid rgba(34,211,238,0.15); border-radius: 8px; } .wizard-case-count .wcc-label { font-size: 11px; color: #9ca3af; } .wizard-case-count .wcc-num { font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .wizard-group-col.group-a .wizard-case-count { border-color: rgba(74, 155, 110,0.2); } .wizard-group-col.group-a .wizard-case-count .wcc-num { color: var(--blue-light); } .wizard-group-col.group-b .wizard-case-count { border-color: rgba(245,158,11,0.2); } .wizard-group-col.group-b .wizard-case-count .wcc-num { color: #fbbf24; } .wcc-cap-note { font-size: 10px; color: #9ca3af; line-height: 1.3; margin-top: 6px; padding: 6px 10px; border-radius: 4px; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.12); transition: color 0.2s, background 0.2s, border-color 0.2s; } .wcc-cap-note.capped { color: #fbbf24; background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.15); } /* ── Step 3: Configure ──────────────────────────── */ .wizard-config-cols { display: flex; gap: 20px; } .wizard-config-section { flex: 1; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: rgba(15, 22, 35,0.01); } .wizard-config-section-title { font-size: 12px; font-weight: 700; color: var(--um-green); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .wizard-config-section-title .wcs-icon { font-size: 14px; } .wizard-config-section-title .wcs-toggle { margin-left: auto; font-size: 10px; color: var(--slate); transition: transform 0.2s; } .wizard-config-section.collapsed .wizard-config-body { display: none; } .wizard-config-section.collapsed .wcs-toggle { transform: rotate(-90deg); } .wizard-config-row { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wizard-config-row > label { font-size: 11px; font-weight: 600; color: #9ca3af; font-variant-numeric: tabular-nums; min-width: 100px; flex-shrink: 0; } .wizard-config-row select { max-width: 260px; flex: 1; padding: 5px 8px; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 6px; font-size: 12px; background: var(--navy); color: var(--text); font-family: 'DM Sans', sans-serif; } .wizard-config-row select option { background: var(--navy); } .wizard-config-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--um-green); cursor: pointer; } .wizard-config-inline { display: flex; align-items: center; gap: 6px; } .wizard-config-inline label { margin-bottom: 0 !important; white-space: nowrap; cursor: pointer; } .wizard-slider-row { display: flex; align-items: center; gap: 8px; } .wizard-slider-row input[type="range"] { flex: 1; position: static; transform: none; pointer-events: auto; -webkit-appearance: none; appearance: none; height: 4px; background: var(--navy-mid); border-radius: 2px; } .wizard-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--cyan); border-radius: 50%; cursor: pointer; border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.12); margin-top: -5px; } .wizard-slider-val { font-size: 11px; font-weight: 600; color: var(--um-green); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; } .wizard-color-range { display: flex; align-items: center; gap: 4px; } .wizard-color-range input[type="number"] { width: 60px; padding: 3px 5px; font-size: 10px; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 4px; background: var(--navy); color: var(--text); } .wizard-color-range .wcr-sep { font-size: 10px; color: var(--slate); } .wizard-color-range button { padding: 2px 6px; font-size: 10px; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 4px; background: var(--navy); cursor: pointer; color: var(--slate); } /* ── Step 4: Results ────────────────────────────── */ .wizard-generate-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: rgba(15, 22, 35,0.02); border: 1px solid var(--border); border-radius: 10px; } .wizard-generate-btn { padding: 10px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: all 0.2s; background: var(--cyan); color: var(--navy); } .wizard-generate-btn:hover { background: #67e8f9; } .wizard-generate-btn:disabled { opacity: 0.4; cursor: not-allowed; } .wizard-generate-summary { font-size: 11px; color: var(--slate); } /* ── Inline shading toolbar on Step 4 ── */ .comp-shading-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 14px; margin-bottom: 10px; background: rgba(15, 22, 35,0.03); border: 1px solid var(--border); border-radius: 8px; font-variant-numeric: tabular-nums; } .cst-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cst-label { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .cst-select { padding: 3px 6px; font-size: 11px; border: 1px solid var(--border-light); border-radius: 5px; background: var(--navy); color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; } .cst-select:hover { border-color: rgba(15, 22, 35,0.2); } .cst-input { width: 58px; padding: 3px 6px; font-size: 11px; border: 1px solid var(--border-light); border-radius: 5px; background: var(--navy); color: var(--text); font-variant-numeric: tabular-nums; } .cst-input:focus { border-color: var(--cyan); outline: none; } .cst-to { font-size: 10px; color: var(--slate); } .cst-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; } .cst-reset { padding: 2px 7px; font-size: 11px; border: 1px solid var(--border-light); border-radius: 5px; background: var(--navy); color: var(--slate); cursor: pointer; font-variant-numeric: tabular-nums; } .cst-reset:hover { color: var(--text); border-color: rgba(15, 22, 35,0.2); } .wizard-results-area { } .wizard-result-section { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .wizard-result-header { padding: 10px 16px; background: rgba(15, 22, 35,0.02); border-bottom: 1px solid rgba(15, 22, 35,0.04); font-size: 12px; font-weight: 700; color: var(--um-green); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 1px; } .wizard-result-body { padding: 12px; } .wizard-result-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #4b5563; } .wizard-result-placeholder .wrp-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.35; } .wizard-result-placeholder .wrp-msg { font-size: 13px; text-align: center; max-width: 360px; line-height: 1.6; } .wizard-toolbar { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; } .wizard-tool-btn { padding: 5px 10px; font-size: 10px; font-weight: 600; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 5px; background: rgba(15, 22, 35,0.03); color: #9ca3af; cursor: pointer; font-variant-numeric: tabular-nums; transition: all 0.15s; } .wizard-tool-btn:hover { background: rgba(15, 22, 35,0.07); color: var(--text); } /* ── Wizard responsive ──────────────────────────── */ @media (max-width: 900px) { .wizard-box { max-width: 100%; border-radius: 8px; } .wizard-stepper { gap: 0; padding: 12px 12px 6px; flex-wrap: wrap; } .wizard-step-label { display: none; } .wizard-step-connector { width: 24px; } .wizard-body { padding: 16px; } .wizard-mode-cards { flex-direction: column; } .wizard-output-grid { grid-template-columns: 1fr 1fr; } .wizard-filter-columns { flex-direction: column; } .wizard-config-cols { flex-direction: column; } .wizard-generate-bar { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .wizard-output-grid { grid-template-columns: 1fr; } .wizard-stepper { padding: 10px 8px 4px; } .wizard-step-circle { width: 26px; height: 26px; font-size: 11px; } } /* ── Composite Environment Tab ────────────────────────── */ .comp-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 12px; } .comp-tab { background: none; border: none; color: var(--slate); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; padding: 8px 18px; cursor: pointer; position: relative; transition: color 0.2s; border-bottom: 2px solid transparent; margin-bottom: -2px; } .comp-tab:hover { color: var(--text); } .comp-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); } .comp-tab-content { display: block; } /* ── Environment composite section titles ──────── */ .comp-env-section-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 16px 0 8px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); letter-spacing: 0.01em; } /* ── Env composite scalar cards grid ───────────── */ .env-comp-scalars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; } .env-comp-scalars-grid .env-scard { cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .env-comp-scalars-grid .env-scard:hover { border-color: rgba(15, 22, 35,0.18); transform: translateY(-1px); } .env-comp-scalars-grid .env-scard .env-scard-sub { font-size: 9px; color: var(--slate); margin-top: 2px; } /* ── Box-whisker inline plot ───────────────────── */ .env-scalar-box-expanded { border-color: var(--cyan) !important; box-shadow: 0 0 8px rgba(244, 115, 33, 0.15); } /* ── Env composite thermo row (Skew-T + Hodograph) */ .comp-env-row { display: flex; gap: 12px; margin-top: 12px; } .comp-env-row > div { flex: 1; min-width: 0; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; } /* ── Env composite status messages ─────────────── */ #comp-env-status { padding: 12px 16px; border-radius: var(--radius); font-size: 12px; text-align: center; margin-bottom: 10px; } #comp-env-status.info { background: rgba(74, 155, 110, 0.1); border: 1px solid rgba(74, 155, 110, 0.25); color: var(--blue-light); } #comp-env-status.error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); color: #f87171; } #comp-env-status.success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25); color: #34d399; } /* ── Diff mode scalar comparison cards ─────────── */ .env-comp-scalars-grid .env-scard .diff-row { display: flex; justify-content: space-between; font-size: 10px; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--border); } .env-comp-scalars-grid .env-scard .diff-row span:first-child { color: var(--blue-light); } .env-comp-scalars-grid .env-scard .diff-row span:last-child { color: #fbbf24; } /* ── Environment composite controls section ────── */ .comp-env-controls-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .comp-env-controls-section .explorer-section-title { color: #15803d; font-size: 10px; } /* ── Tablet breakpoint ─────────────────────────── */ @media (max-width: 1024px) { #map-wrapper.focus-mode #map-container { flex: 0 0 35%; max-width: 35%; } #map-wrapper.focus-mode #side-panel.open { width: 65%; } .filter-group input[type="number"] { min-width: 60px; } .filter-grid { grid-template-columns: repeat(2, 1fr); } .filter-drawer.open { max-height: 520px; } } @media (max-width: 900px) { .topbar-stats { display: none; } .topbar-subtitle { display: none; } } @media (max-width: 768px) { .topbar-inner { height: 46px; padding: 0 14px; } .topbar-logo { font-size: 1.15rem; } .topbar-nav a { font-size: 0.7rem; padding: 5px 8px; } .topbar-version { display: none; } #map-section { height: calc(100vh - 46px); min-height: 500px; } .map-toolbar { padding: 8px 12px; gap: 8px; } .toolbar-group { flex: 1 1 auto; min-width: 0; } .toolbar-group .toolbar-select { width: 100%; min-width: 0 !important; } .toolbar-sep { display: none; } .filter-drawer.open { max-height: 600px; } .filter-grid { grid-template-columns: 1fr; } #map-wrapper { flex-direction: column; } #map-container { min-height: 300px; } #side-panel.open { width: 100%; border-left: none; border-top: 1px solid var(--border-light); height: auto; max-height: 65vh; } #side-panel-inner { width: 100%; padding: 12px; } #map-wrapper.focus-mode #map-container { flex: 0 0 150px; max-width: 100%; min-height: 150px; } #map-wrapper.focus-mode #side-panel.open { width: 100%; max-height: calc(100vh - 200px); overflow-y: auto; } .explorer-layout { flex-direction: column !important; } .explorer-controls { width: 100% !important; max-height: none !important; border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border); padding-top: 10px; } .content-section { padding: 3rem 16px; } .section-title { font-size: 1.4rem; } .plot-modal-box { width: 98vw; height: 96vh; border-radius: 6px; } .plot-modal-box.split #plotly-fullscreen { height: 50%; min-height: 200px; } .plot-modal-box.split #cs-fullscreen { height: 45%; min-height: 180px; } .plot-modal-box.split #az-fullscreen { height: 45%; min-height: 180px; } .plot-modal-box.split #sq-fullscreen { height: 45%; min-height: 220px; } .vol3d-modal-box { width: 100vw; height: 100vh; border-radius: 0; } .vol3d-controls { gap: 5px; padding: 6px 44px 5px 8px; } .ir-map-controls { padding: 4px 8px; } .ir-slider { width: 60px; } .ir-label { min-width: 100px; font-size: 9px; } .ir-ctrl-btn { font-size: 10px; padding: 2px 6px; } .env-field-dropdown { min-width: 180px; } .comp-env-row { flex-direction: column; } .env-comp-scalars-grid { grid-template-columns: repeat(2, 1fr); } .vol3d-controls label { font-size: 9px; } } /* ── Flight-Level Archive Overlay ──────────────────────────── */ #btn-archive-fl.fl-active { background: rgba(96,165,250,0.25) !important; border-color: rgba(96,165,250,0.6) !important; color: #60a5fa !important; box-shadow: 0 0 8px rgba(96,165,250,0.3); } .fl-archive-status { font-size: 10px; color: #fbbf24; padding: 2px 8px; line-height: 1.4; } .fl-archive-ts { margin-top: 10px; flex-shrink: 0; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(96, 165, 250, 0.12); border-radius: 8px; overflow: hidden; } .fl-archive-ts .fl-ts-header { display: flex; align-items: center; padding: 6px 12px; background: rgba(96, 165, 250, 0.08); border-bottom: 1px solid rgba(96, 165, 250, 0.15); } .fl-archive-ts .fl-ts-title { color: #1d4ed8; font-size: 13px; font-weight: 600; white-space: nowrap; flex: 1; } .fl-archive-ts .fl-ts-var-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 12px; background: rgba(96, 165, 250, 0.04); border-bottom: 1px solid rgba(96, 165, 250, 0.08); } .fl-archive-ts .fl-ts-var-btn { background: rgba(30, 40, 60, 0.8); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 4px; color: var(--text-dim); font-size: 10px; padding: 2px 8px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s; white-space: nowrap; } .fl-archive-ts .fl-ts-var-btn.active { background: rgba(96,165,250, 0.15); border-color: var(--var-color, rgba(96, 165, 250, 0.6)); color: var(--var-color, #93c5fd); } .fl-archive-ts .fl-ts-var-btn:hover { border-color: var(--var-color, rgba(96, 165, 250, 0.5)); color: var(--var-color, #93c5fd); } .fl-archive-ts .fl-ts-close { background: none; border: none; color: #888; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; flex-shrink: 0; } .fl-archive-ts .fl-ts-close:hover { color: var(--text); } .fl-archive-ts .fl-ts-res-group { display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-right: 4px; } .fl-archive-ts .fl-ts-res-btn { background: rgba(30, 40, 60, 0.8); border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 4px; color: #64748b; font-size: 10px; padding: 2px 7px; font-variant-numeric: tabular-nums; cursor: pointer; transition: all 0.15s; } .fl-archive-ts .fl-ts-res-btn.active { background: rgba(96, 165, 250, 0.2); border-color: rgba(96, 165, 250, 0.6); color: #1d4ed8; } .fl-archive-ts .fl-ts-res-btn:hover { border-color: rgba(96, 165, 250, 0.5); color: #1d4ed8; } .fl-archive-ts .fl-ts-info { font-size: 10px; color: var(--text-dim); padding: 4px 12px; line-height: 1.4; } .fl-ts-xbtn { font-size: 10px; padding: 2px 10px; border-radius: 4px; border: 1px solid rgba(15, 22, 35,0.1); background: rgba(15, 22, 35,0.04); color: var(--text-dim); cursor: pointer; transition: all 0.15s; } .fl-ts-xbtn:hover { background: var(--border); } .fl-ts-xbtn.active { background: rgba(96,165,250,0.2); border-color: rgba(96,165,250,0.4); color: #60a5fa; } /* Wind / W mode toggle in the FL time-series header */ .fl-archive-ts .fl-ts-mode-group { display: inline-flex; align-items: center; gap: 0; margin-right: 6px; border: 1px solid rgba(96,165,250,0.25); border-radius: 4px; overflow: hidden; } .fl-archive-ts .fl-ts-mode-btn { background: rgba(30,40,60,0.6); border: none; color: #64748b; font-size: 10px; padding: 2px 9px; font-variant-numeric: tabular-nums; cursor: pointer; transition: all 0.15s; } .fl-archive-ts .fl-ts-mode-btn + .fl-ts-mode-btn { border-left: 1px solid rgba(96,165,250,0.2); } .fl-archive-ts .fl-ts-mode-btn:hover { color: #1d4ed8; } .fl-archive-ts .fl-ts-mode-btn.active { background: rgba(96,165,250,0.22); color: #1d4ed8; } @media (max-width: 480px) { .topbar-nav { gap: 2px; } .topbar-nav a { padding: 4px 6px; font-size: 0.65rem; } #map-container { min-height: 250px; } #side-panel.open { max-height: 70vh; } .plot-modal-box { width: 100vw; height: 100vh; border-radius: 0; } .leaflet-popup-content { min-width: 180px; max-width: 240px; font-size: 12px; } } /* ══════════════════════════════════════════════════════════════ Mobile & Tablet Responsive Enhancements ══════════════════════════════════════════════════════════════ */ /* ── Nav text: full vs short labels ──────────────────────── */ .nav-short { display: none; } .nav-full { display: inline; } .nav-hamburger { display: none; } /* Intermediate desktop widths: switch to short nav labels only when the topbar would otherwise overflow. With the dataset stats moved out of the topbar, the nav fits comfortably down to ~1100 px. */ @media (max-width: 1100px) and (min-width: 769px) { .topbar-nav { gap: 3px; } .topbar-nav a { padding: 6px 9px; font-size: 0.76rem; } .nav-full { display: none; } .nav-short { display: inline; } } /* ── Dataset stats strip (replaces in-topbar stats) ──────── */ .dataset-stats-strip { background: var(--surface); border-bottom: 1px solid var(--border); padding: 5px 24px; font-size: 0.72rem; color: var(--slate); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.4; } .dataset-stats-strip .dataset-stat strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 3px; } .dataset-stats-strip .dataset-stat-sep { color: var(--border-light); font-weight: 700; } .dataset-stats-strip .dataset-version { margin-left: auto; background: rgba(0, 229, 255, 0.15); color: var(--cyan); padding: 1px 8px; border-radius: 10px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.02em; } @media (max-width: 600px) { .dataset-stats-strip { padding: 4px 14px; font-size: 0.68rem; gap: 6px; } } /* ── Mobile nav: hamburger menu ──────────────────────────── */ @media (max-width: 768px) { .nav-hamburger { display: block; background: none; border: 1px solid rgba(15, 22, 35,0.15); color: var(--text-dim); font-size: 1.2rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; line-height: 1; /* Skip iOS's 300 ms double-tap delay — common site-wide hamburger. */ touch-action: manipulation; } .nav-hamburger.open { color: var(--text); background: var(--border); } .topbar-inner { flex-wrap: nowrap; height: 46px; padding: 0 14px; gap: 8px; } .topbar-brand { flex: 1 1 auto; min-width: 0; } .topbar-nav { display: none !important; } .topbar-nav.mobile-open { display: flex !important; position: absolute; top: 46px; left: 0; right: 0; background: rgba(255, 255, 255,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 10px 14px; flex-wrap: wrap; gap: 4px 8px; justify-content: center; z-index: 999; } .topbar-nav a { font-size: 0.72rem; padding: 6px 10px; white-space: nowrap; } .nav-full { display: none !important; } .nav-short { display: inline !important; } } @media (max-width: 480px) { .topbar-logo { font-size: 1.05rem; } .topbar-divider { display: none; } .topbar-subtitle { display: none; } } /* ── Real-Time section header: tighter on mobile ─────────── */ @media (max-width: 768px) { .rt-header { padding: 16px 16px 10px; } .rt-header-title { font-size: 1.15rem; } .rt-header-desc { font-size: 0.82rem; } .rt-toolbar { padding: 8px 12px; gap: 6px; } .rt-meta-grid { grid-template-columns: 1fr 1fr; gap: 4px; } } @media (max-width: 480px) { .rt-header-title { font-size: 1rem; } } /* ── Plotly charts: prevent horizontal overflow ──────────── */ @media (max-width: 768px) { /* Force all Plotly containers to respect parent width */ .js-plotly-plot, .plot-container, .plotly { max-width: 100% !important; } /* Reduce fixed chart heights in composite results */ [id^="comp-az-chart"], [id^="comp-anom-chart"], [id^="comp-cfad-chart"], [id^="comp-pv-chart"] { height: 400px !important; } [id^="comp-sq-chart"] { height: 560px !important; } /* Diff-mode chart panels */ [id^="comp-diff-az-"], [id^="comp-diff-anom-"], [id^="comp-diff-cfad-"], [id^="comp-diff-pv-"] { height: 360px !important; } [id^="comp-diff-sq-"], [id^="comp-diff-cfadm-"] { height: 520px !important; } } /* ── Wizard overlay: full-width on mobile ────────────────── */ @media (max-width: 768px) { .wizard-overlay.active { padding: 8px; } .wizard-box { border-radius: 8px; } .wizard-body { padding: 12px; } } /* ── Wizard filter rows: stack vertically on narrow ──────── */ @media (max-width: 600px) { .wizard-filter-row { flex-wrap: wrap; gap: 4px; } .wizard-filter-row .wf-label { flex: 0 0 100%; margin-bottom: 2px; } .wizard-filter-row input[type="number"] { flex: 1; min-width: 0; } .wizard-filter-row select { flex: 1; min-width: 0; } .wizard-filter-columns { flex-direction: column !important; } } /* ── Shading controls: wrap gracefully ───────────────────── */ @media (max-width: 768px) { .comp-shading-toolbar { padding: 6px 10px; } .cst-row { gap: 4px; } .cst-select { max-width: 110px; font-size: 10px; } .cst-input { width: 50px; font-size: 10px; } .cst-label { font-size: 9px; } } /* ── Wizard generate bar: wrap buttons on mobile ─────────── */ @media (max-width: 768px) { .wizard-generate-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; } .wizard-generate-btn { font-size: 12px; padding: 8px 16px; } .wizard-generate-summary { flex-basis: 100%; text-align: center; } /* Composite action buttons row */ .wizard-toolbar { gap: 4px; } .wizard-tool-btn { font-size: 9px; padding: 4px 7px; } } /* ── Composite wizard Step 4 button grid ─────────────────── */ @media (max-width: 600px) { .wizard-output-grid { grid-template-columns: 1fr !important; } } /* ── Environmental overlay: stack on mobile ──────────────── */ @media (max-width: 768px) { .env-scalars-grid { grid-template-columns: repeat(2, 1fr) !important; } .env-comp-scalars-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Side panel Plotly in focus mode: full-width ─────────── */ @media (max-width: 768px) { #display-area .js-plotly-plot { max-width: 100% !important; } } /* ── Plotly modebar: avoid overlap with custom save/expand buttons ── */ .modebar-container { padding-right: 72px !important; /* clear save + expand buttons */ } @media (max-width: 768px) { .modebar-container { transform: scale(0.85); transform-origin: top right; } } /* ── Touch targets: ensure min tap size ──────────────────── */ @media (max-width: 768px) { .wizard-generate-btn, .wizard-tool-btn, .cst-reset, .cs-btn, .generate-btn { min-height: 36px; } .cst-select, .cst-input { min-height: 32px; } } /* ── Archive View Toggle (Clusters / Tracks) ──────────────── */ .view-toggle-group { margin-left: 4px; } .archive-view-toggle { display: flex; gap: 2px; background: rgba(15, 22, 35,0.04); border: 1px solid var(--border); border-radius: 6px; padding: 2px; } .archive-view-btn { display: flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 0.75rem; font-weight: 500; font-family: 'DM Sans', sans-serif; color: var(--slate); background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .archive-view-btn:hover { color: var(--text); background: var(--border); } .archive-view-btn.active { color: #ffffff; background: var(--blue); border-color: var(--blue); box-shadow: 0 1px 4px rgba(74, 155, 110,0.3); } .archive-view-btn svg { flex-shrink: 0; } /* Track tooltip — theme-aware glass card on map (hover info for fixes). In light mode: white glass + dark text. In dark mode: navy glass + light text. Uses tokens so the toggle flips both colors at once. */ .track-tooltip { background: var(--surface-raised) !important; color: var(--text) !important; border: 1px solid var(--border-light) !important; border-left: 3px solid var(--um-orange) !important; border-radius: 6px !important; padding: 6px 10px !important; font-size: 12px !important; font-family: 'DM Sans', sans-serif !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important; line-height: 1.4 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .track-tooltip .leaflet-tooltip-arrow { display: none; } /* Responsive: hide toggle text on small screens */ /* ── Storm intensity timeline + Hovmöller panels ── */ .storm-timeline-panel { margin-top: 8px; background: var(--surface-raised); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; } .storm-timeline-panel .fl-ts-header { display: flex; align-items: center; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); gap: 6px; } .storm-timeline-panel .fl-ts-title { color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; } .storm-timeline-panel .fl-ts-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; flex-shrink: 0; margin-left: auto; } .storm-timeline-panel .fl-ts-close:hover { color: var(--text); } @media (max-width: 900px) { .archive-view-btn { padding: 4px 8px; font-size: 0; } .archive-view-btn svg { font-size: initial; } } /* ── Mobile touch-target & layout fixes ────────────────────── */ /* These rules only apply on mobile — no effect on desktop. */ @media (max-width: 768px) { /* 1. Larger touch targets for analysis buttons (44px min). min-width keeps each cs-btn from squeezing to ~50 px and wrapping its label to 2-3 lines; with flex-wrap on the parent they now break to 2-3 per row at full width. */ .display-actions .cs-btn { padding: 10px 8px; font-size: 12px; min-height: 44px; min-width: 90px; } /* Larger touch targets for overlay pills */ .overlay-pill { padding: 6px 10px; font-size: 11px; min-height: 40px; } /* 2. Hide Plotly toolbar on mobile (buttons too small for touch) */ .modebar-container, .modebar { display: none !important; } /* 3. MW overpass panel: prevent cramped wrapping on small screens */ #mw-overpass-panel, #rt-mw-overpass-panel { font-size: 11px; } #mw-overpass-panel select, #rt-mw-overpass-panel select { min-width: 120px; font-size: 11px; padding: 6px 8px; } } /* ── Featured Cases strip (TC-RADAR Explorer onboarding) ─────────── */ .featured-cases { background: var(--um-green-tint); border-bottom: 1px solid rgba(74,155,110,0.22); padding: 14px 20px 16px; z-index: 500; animation: featuredCasesFadeIn 0.35s ease; } .featured-cases[hidden] { display: none; } @keyframes featuredCasesFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .featured-cases-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .featured-cases-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .featured-cases-kicker { font-size: 0.7rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-variant-numeric: tabular-nums; } .featured-cases-lead { font-size: 0.9rem; color: var(--text); font-weight: 500; } .featured-cases-dismiss { background: transparent; color: var(--slate); border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px; transition: all 0.15s; } .featured-cases-dismiss:hover { color: var(--text); background: var(--border); } .featured-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .featured-case-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; font-family: inherit; color: var(--text); transition: border-color 0.18s, background 0.18s, transform 0.18s; box-shadow: 0 1px 2px rgba(15,22,35,0.04); } .featured-case-card:hover { border-color: var(--um-green); background: var(--um-green-tint); transform: translateY(-1px); } .featured-case-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .featured-case-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .featured-case-name { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; } .featured-case-year { font-size: 0.72rem; color: var(--slate); font-variant-numeric: tabular-nums; } .featured-case-cat { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; color: #0b1e3d; letter-spacing: 0.02em; white-space: nowrap; } .featured-case-desc { font-size: 0.72rem; color: var(--text-dim); line-height: 1.35; } .featured-case-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; font-size: 0.68rem; color: var(--slate); font-variant-numeric: tabular-nums; } .featured-case-go { color: var(--cyan); font-weight: 600; } @media (max-width: 600px) { .featured-cases { padding: 12px 14px 14px; } .featured-cases-grid { grid-template-columns: 1fr 1fr; } .featured-case-card { padding: 8px 10px; } .featured-case-desc { display: none; } } /* ── Overlay pill accents (extending existing data-color system) ─── */ .overlay-pill.active[data-color="orange"] { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.55); color: #b8540d; } .overlay-pill.active[data-color="purple"] { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.50); color: #6d28d9; } .overlay-pill.active[data-color="yellow"] { background: rgba(202,138,4,0.10); border-color: rgba(202,138,4,0.50); color: #8a5a04; } /* ── RT Explorer sub-panels (MW / NEXRAD / CFAD) ────────────────── Shared shell; variant classes pull the accent border + label color from the --accent-* variable family. Keeps inline-style sprawl out of explorer.html. */ /* Panel visibility is still controlled by inline `display:none` + JS toggling to 'block' (existing pattern). Class only handles looks. */ .rt-sub-panel { margin-top: 6px; background: rgba(30,41,59,0.95); border: 1px solid var(--sub-panel-accent, var(--border-light)); border-radius: 8px; padding: 8px 12px; } .rt-sub-panel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rt-sub-panel-row + .rt-sub-panel-row { margin-top: 6px; } .rt-sub-panel-label { font-size: 10px; font-weight: 600; color: var(--sub-panel-label, var(--text-muted)); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .rt-sub-panel-sublabel { font-size: 10px; color: var(--text-muted); } .rt-sub-panel-select, .rt-sub-panel-input { font-size: 10px; padding: 4px 6px; border: 1px solid rgba(15, 22, 35,0.1); border-radius: 4px; background: var(--navy); color: var(--text); font-variant-numeric: tabular-nums; } .rt-sub-panel-select { min-width: 180px; } .rt-sub-panel-select.is-flex { flex: 1 1 180px; } .rt-sub-panel-input { padding: 3px 6px; } .rt-sub-panel-input.w-55 { width: 55px; } .rt-sub-panel-input.w-65 { width: 65px; } .rt-sub-panel-btn { font-size: 9px; padding: 2px 8px; background: var(--sub-panel-btn-bg, var(--border)); border: 1px solid var(--sub-panel-btn-border, var(--border-light)); border-radius: 4px; color: var(--sub-panel-label, var(--text-muted)); cursor: pointer; } .rt-sub-panel-status { font-size: 9px; color: var(--text-subtle); } .rt-sub-panel-source { font-size: 8px; color: var(--text-subtle); margin-left: auto; } .rt-sub-panel-source a { color: var(--text-dim); text-decoration: none; border-bottom: 1px dotted var(--text-subtle); } .rt-sub-panel-hint { font-size: 8px; color: var(--text-faint); } .rt-sub-panel-between { font-size: 9px; color: var(--text-faint); } .rt-sub-panel-field { display: flex; align-items: center; gap: 6px; } .rt-sub-panel-field label { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .rt-sub-panel-field label.w-70 { width: 70px; } .rt-sub-panel-field label.w-50 { width: 50px; } .rt-sub-panel-title { font-size: 10px; font-weight: 600; color: var(--sub-panel-label); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .rt-sub-panel-actions { display: flex; gap: 6px; margin-top: 10px; } .rt-sub-panel-primary { padding: 6px 16px; font-size: 11px; font-weight: 700; border: none; border-radius: 5px; background: var(--sub-panel-primary-bg, var(--blue)); color: var(--sub-panel-primary-text, #fff); cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.2s; } .rt-sub-panel-primary:hover { background: var(--sub-panel-primary-hover, var(--blue-light)); } .rt-sub-panel-cancel { padding: 6px 12px; font-size: 11px; font-weight: 700; border: 1px solid var(--border-light); border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; font-variant-numeric: tabular-nums; } /* Accent variants — set scoped vars consumed by the rules above */ .rt-sub-panel.accent-mw { --sub-panel-accent: rgba(251,146,60,0.35); --sub-panel-label: var(--accent-mw-text); } .rt-sub-panel.accent-nexrad { --sub-panel-accent: rgba(34,197,94,0.35); --sub-panel-label: var(--accent-nexrad-text); --sub-panel-btn-bg: rgba(34,197,94,0.2); --sub-panel-btn-border: rgba(34,197,94,0.4); } .rt-sub-panel.accent-cfad { --sub-panel-accent: rgba(168,85,247,0.35); --sub-panel-label: var(--accent-cfad-text); --sub-panel-primary-bg: rgba(168,85,247,0.5); --sub-panel-primary-hover: rgba(168,85,247,0.7); --sub-panel-primary-text: #e9d5ff; } /* Inline SVG icons (Lucide-style). Size follows font-size via 1em, inherits color via stroke:currentColor so pill/button accent colors tint the glyph automatically. */ .icon-inline { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; margin-right: 4px; stroke-width: 1.8; } /* Analysis-strip buttons (Shear Quads, Z* Anomaly, VP Scatter, CFAD). On the new light theme we keep the DEFAULT state neutral (no candy tints competing on white), and only paint the data-role accent on :hover and .active. The accent palette is preserved as a quick- identification cue for which analysis is running. */ .cs-btn.is-tinted { background: var(--surface-raised); border-color: var(--border-light); color: var(--text); } .cs-btn.is-tinted:hover:not(:disabled) { background: rgba(15,22,35,0.04); border-color: rgba(15,22,35,0.20); } /* Active state — paint with the data-role accent so it's immediately identifiable while the analysis is running. */ .cs-btn.is-tinted.active[data-accent="mw"] { background: rgba(251,146,60,0.16); border-color: rgba(251,146,60,0.55); color: #b8540d; } .cs-btn.is-tinted.active[data-accent="anomaly"] { background: rgba(0, 80, 48, 0.10); border-color: var(--um-green); color: var(--um-green); } .cs-btn.is-tinted.active[data-accent="vp"] { background: rgba(202,138,4,0.12); border-color: rgba(202,138,4,0.50); color: #8a5a04; } .cs-btn.is-tinted.active[data-accent="cfad"] { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.50); color: #6d28d9; } .cs-btn.is-tinted.active[data-accent="cyan"] { background: var(--um-orange-tint); border-color: var(--um-orange); color: var(--um-orange-deep); } /* === Shared touch + a11y ergonomics (applies to every page that loads tc_radar_styles.css; index.html carries an inline copy). === */ /* iOS Safari zooms the viewport when a focused form control is <16px. pointer:coarse scopes the rule to touch devices so dense desktop sidebars keep their compact metrics. */ @media (pointer: coarse) { input, select, textarea { font-size: 16px; } .basin-chip, .segmented button, .ir-popup-btn, .rt-model-toggle-btn { min-height: 40px; } } :focus-visible { outline: 2px solid var(--cyan, #F47321); outline-offset: 2px; } .leaflet-container :focus-visible, .modebar :focus-visible, .plotly :focus-visible { outline: none; } /* Extend pointer:coarse min-height to TC-RADAR Explorer's analysis + overlay pills (the prior block covered chips only). */ @media (pointer: coarse) { .cs-btn, .overlay-pill { min-height: 40px; } } /* Analysis-button label swap (TC-RADAR Explorer). Long labels ("Cross Section", "Shear Quads", "Z* Anomaly", ...) cause 2-3 line wrap when the .display-actions strip stacks to phone width. Swap to abbreviated forms at ≤480 px so each button stays one line at the now-larger min-width. */ .cs-btn-short { display: none; } @media (max-width: 480px) { .cs-btn-full { display: none; } .cs-btn-short { display: inline; } } /* Filter drawer (Explorer). Existing rules drop the grid to 1-col ≤768 px but keep max-height: 600 px on the open drawer with overflow: hidden — on phones with 6 stacked filter groups the bottom row gets clipped. Cap to 60vh with internal scroll so the full set is reachable. */ @media (max-width: 480px) { .filter-drawer.open { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* Skew-T row (RT TDR dropsonde panel). Sidebar info column sits at width: 260px next to a flex: 1 chart with height 450px on desktop. Stack to column on ≤768 px so the chart claims full viewport width and the info panel reflows below it. Plotly resizes to the container on window-resize events as long as the trace was rendered with responsive: true. !important needed because the heights/widths are inline on the children. */ @media (max-width: 768px) { .rt-skewt-row { flex-direction: column !important; } .rt-skewt-row > #rt-sonde-skewt { width: 100% !important; height: 380px !important; } .rt-skewt-row > #rt-sonde-skewt-info { width: 100% !important; height: auto !important; max-height: 220px !important; font-size: 12px !important; } }