/* ============================================================================ Lynn Data Dive — Maps page styles Layered on top of the global maxwellhowegis.com style.css ============================================================================ */ :root { --lehs-navy: #0A1F44; --lehs-gold: #FFB81C; --panel-bg: rgba(255, 255, 255, 0.96); --panel-border: rgba(10, 31, 68, 0.08); --panel-shadow: 0 2px 16px rgba(10, 31, 68, 0.12); --legend-bg: rgba(255, 255, 255, 0.95); --nav-height: 64px; --panel-width: 320px; /* Semantic theme tokens — light values here; flipped under [data-theme=dark]. --text-strong replaces inherited / hard-coded navy text so panel, legend and control copy can lighten in dark mode while navy BACKGROUND pills and headers (which keep white text on them) stay navy. The embedding portfolio site's global sheet sets a near-white body color, so any text that merely inherits would be invisible here — always color panel/legend text with var(--text-strong) (or --text-muted for secondary copy). */ --text-strong: #0A1F44; --text-muted: #607D8B; --link: #0A1F44; /* in-panel cross-links — navy in light */ --surface-1: #ffffff; /* cards, modals, inputs */ --surface-2: #f1f5fa; /* subtle fills, tracks, hovers */ --surface-hover: rgba(10, 31, 68, 0.06); --input-bg: #ffffff; } /* ── DARK THEME — flip the tokens; navy BACKGROUND pills/headers stay navy. ── Applied when . Only repoints custom properties + re-skins a handful of surfaces that hard-code light backgrounds. Light mode is untouched. Theme set/persisted in app.js (applyTheme/initTheme). */ :root[data-theme="dark"] { --panel-bg: rgba(22, 28, 38, 0.97); --legend-bg: rgba(22, 28, 38, 0.96); --panel-border: rgba(255, 255, 255, 0.12); --panel-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); --text-strong: #e7ecf3; --text-muted: #9aa7b5; --link: #7db4ff; /* in-panel cross-links — bright blue on dark panel */ --surface-1: #1b2230; --surface-2: #232c3c; --surface-hover: rgba(255, 255, 255, 0.08); --input-bg: #232c3c; } /* The maps page is full-bleed below the site nav */ body.maps-page { margin: 0; padding: 0; overflow: hidden; background: #fafafa; font-family: 'Inter', sans-serif; } .maps-main { position: relative; height: calc(100vh - var(--nav-height)); width: 100%; overflow: hidden; margin: 0; padding: 0; } /* ============================================================================ Map container — fills the entire viewport below nav ============================================================================ */ .map-container { position: absolute; inset: 0; width: 100%; height: 100%; } /* MapLibre attribution: tuck into bottom-left, away from legend */ .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, 0.85); font-size: 10px; } .maplibregl-ctrl-bottom-right { bottom: 110px !important; /* lift above legend */ right: 12px !important; } .maplibregl-ctrl-bottom-left { left: calc(var(--panel-width) + 16px); } @media (max-width: 768px) { .maplibregl-ctrl-bottom-left { left: 12px; } } /* ============================================================================ Control panel (left side) — collapsible ============================================================================ */ .control-panel { position: absolute; top: 12px; left: 12px; width: var(--panel-width); max-height: calc(100vh - var(--nav-height) - 24px); overflow-y: auto; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--panel-shadow); z-index: 10; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.25s ease; } .control-panel.collapsed { transform: translateX(calc(-1 * var(--panel-width) - 24px)); } .control-panel.collapsed .panel-toggle { transform: translateX(calc(var(--panel-width) + 12px)); } .panel-toggle { position: absolute; top: 16px; right: 12px; width: 28px; height: 28px; background: transparent; border: 1px solid var(--panel-border); border-radius: 6px; cursor: pointer; padding: 0; transition: transform 0.25s ease, background 0.15s; } .panel-toggle:hover { background: rgba(10, 31, 68, 0.06); } .panel-toggle span { display: block; width: 14px; height: 2px; background: var(--lehs-navy); margin: 3px auto; } .panel-section { padding: 16px 18px; border-bottom: 1px solid var(--panel-border); } .panel-section:last-child { border-bottom: none; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .panel-header .section-label { color: var(--text-strong); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; opacity: 0.65; } .back-link { font-size: 11px; color: var(--text-strong); text-decoration: none; opacity: 0.7; } .back-link:hover { opacity: 1; text-decoration: underline; } /* In-panel cross-links (e.g. "MA Education Atlas →"). Previously these were inline-styled with hard-coded navy text, which vanished against the dark panel in dark mode (the inherited-text trap). Route through a theme-aware token: navy in light, a bright link blue in dark, so the link always reads on its panel. */ .panel-link { color: var(--link); font-weight: 600; text-decoration: none; } .panel-link:hover { text-decoration: underline; } .panel-title { font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 4px 0 8px; letter-spacing: -0.3px; } .panel-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; } .panel-h2 { font-size: 11px; font-weight: 600; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 10px; } /* Quick view buttons */ .view-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .view-btn { flex: 1 1 auto; min-width: 70px; padding: 7px 10px; font-size: 11px; font-family: 'Inter', sans-serif; background: white; border: 1px solid var(--panel-border); border-radius: 6px; cursor: pointer; transition: all 0.15s; color: var(--text-strong); } .view-btn:hover { background: rgba(255, 184, 28, 0.1); border-color: var(--lehs-gold); } .view-btn.active { background: var(--lehs-navy); color: white; border-color: var(--lehs-navy); } /* Layer rows */ .layer-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--text-strong); } .layer-row input[type="checkbox"] { accent-color: var(--lehs-navy); width: 14px; height: 14px; margin: 0; cursor: pointer; } .layer-swatch { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); } .swatch-schools { background: var(--lehs-gold); border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,184,28,0.4); } .swatch-gateway { background: rgba(156, 39, 176, 0.25); border: 2px solid #6a1b9a; } .swatch-muni-outline { background: transparent; border: 1.5px solid #78909c; } .swatch-academic-outline{ background: transparent; border: 1.8px solid #1a3a6b; } .swatch-voctech-overlay { background: rgba(106, 27, 154, 0.15); border: 1.5px dashed #6a1b9a; } .swatch-charter-overlay { background: rgba(0, 137, 123, 0.15); border: 1.3px dotted #00695C; } .swatch-ma-schools { background: #1976D2; border-radius: 50%; } .swatch-lynn { background: rgba(255, 184, 28, 0.3); border: 2px solid var(--lehs-navy); } /* ============================================================================ SCHOOL CENTERPIECE — color-mode control, size legend, color legend The school dots are the star of this Lynn map, so their controls get a dedicated, slightly-recessed block under the "Lynn schools" toggle. ============================================================================ */ .schools-controls { margin: 4px 0 10px 24px; padding: 10px 12px; background: rgba(10, 31, 68, 0.035); border: 1px solid var(--panel-border); border-left: 3px solid var(--lehs-gold); border-radius: 0 6px 6px 0; } .schools-ctrl-label { font-size: 10px; font-weight: 600; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; } .schools-ctrl-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); } .select-input--sm { padding: 6px 9px; font-size: 12px; } .schools-ctrl-note { margin-top: 9px; font-size: 10.5px; line-height: 1.45; color: var(--text-muted); } .lehs-key-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lehs-gold); box-shadow: 0 0 0 2px rgba(255,184,28,0.45); vertical-align: middle; margin: 0 1px; } /* Color legend — categorical chips OR a sequential gradient bar */ .school-color-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; } .scl-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-strong); white-space: nowrap; } .scl-sw { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.18); } .scl-sw--lehs { background: var(--lehs-gold); box-shadow: 0 0 0 2px rgba(255,184,28,0.5); } .scl-bar { width: 100%; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); } .scl-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-muted); margin-top: 3px; } .scl-axis span:nth-child(2) { font-weight: 600; color: var(--text-strong); } .scl-note { font-size: 9.5px; font-style: italic; color: var(--text-muted); margin-top: 3px; } /* Graduated-dot SIZE legend — grey dots keyed to enrollment. Diameters set inline by renderSchoolSizeLegend() to match the on-map dots at current zoom. */ .schools-size-legend { display: flex; align-items: flex-end; gap: 16px; padding: 4px 2px 0; min-height: calc(var(--ssl-h, 16px) + 2px); } .ssl-item { display: flex; flex-direction: column; align-items: center; gap: 3px; } .ssl-dot-wrap { height: var(--ssl-h, 16px); display: flex; align-items: flex-end; } .ssl-dot { display: block; border-radius: 50%; background: #607D8B; border: 1px solid #ffffff; box-shadow: 0 0 0 0.6px rgba(10, 31, 68, 0.35); } .ssl-label { font-size: 10px; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; } /* Form labels for select inputs */ .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; } /* Radio group */ .radio-group { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .radio-group label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-strong); cursor: pointer; padding: 2px 0; } .radio-group input[type="radio"] { accent-color: var(--lehs-navy); width: 13px; height: 13px; margin: 0; } /* Year slider */ .year-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .year-play { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--lehs-navy); color: var(--lehs-gold); border: none; font-size: 11px; line-height: 1; cursor: pointer; transition: background 0.15s, transform 0.1s; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .year-play:hover { background: #1a3a6b; transform: scale(1.05); } .year-play.playing{ background: var(--lehs-gold); color: var(--lehs-navy); } .year-slider { flex: 1; accent-color: var(--lehs-navy); } .year-label { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-strong); min-width: 40px; text-align: right; } .year-note { margin-top: 6px; font-size: 10px; font-style: italic; color: var(--text-muted); line-height: 1.4; } /* Metric summary below choropleth section */ .metric-summary { margin-top: 12px; padding: 10px 12px; background: rgba(10, 31, 68, 0.04); border-radius: 6px; font-size: 11px; } .summary-row { display: flex; justify-content: space-between; padding: 2px 0; } .summary-row strong { color: var(--text-strong); } .summary-row span:first-child { color: var(--text-muted); } /* Classed legend rows */ .legend-class { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 11px; } .legend-class-swatch { width: 22px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; } .legend-class-range { color: var(--text-strong); } .legend-meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--panel-border); font-size: 10px; color: var(--text-muted); } /* "No data" swatch in legend meta */ .legend-null { display: flex; align-items: center; gap: 6px; } .legend-null-swatch { display: inline-block; width: 18px; height: 12px; background: #f0eee8; border: 1px solid #c0b8aa; border-radius: 2px; flex-shrink: 0; background-image: repeating-linear-gradient( 45deg, transparent, transparent 3px, rgba(180, 168, 140, 0.45) 3px, rgba(180, 168, 140, 0.45) 4px ); } .legend-null strong { color: var(--text-strong); } /* Mini histogram in the legend */ .hist { display: flex; align-items: flex-end; gap: 1px; height: 32px; margin-bottom: 8px; padding: 2px 0; border-bottom: 1px solid var(--panel-border); } .hist-bar { flex: 1; min-height: 2px; border-radius: 1px 1px 0 0; opacity: 0.95; } /* Hover tooltip floating over the map */ .map-tooltip { position: absolute; display: none; pointer-events: none; background: var(--lehs-navy); color: white; padding: 8px 12px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); font-size: 12px; font-family: 'Inter', sans-serif; line-height: 1.4; z-index: 50; max-width: 280px; } .tooltip-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; } .tooltip-value { font-size: 11px; color: rgba(255, 255, 255, 0.85); } .tooltip-value strong { color: var(--lehs-gold); font-weight: 600; } /* ============================================================================ Right side feature-detail panel (sticky on click) ============================================================================ */ .feature-panel { position: absolute; top: 12px; right: 12px; width: 360px; max-height: calc(100vh - var(--nav-height) - 24px); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; box-shadow: var(--panel-shadow); z-index: 8; backdrop-filter: blur(8px); display: none; flex-direction: column; overflow: hidden; font-family: 'Inter', sans-serif; } .feature-panel.open { display: flex; } .feature-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--panel-border); background: var(--lehs-navy); color: white; border-radius: 10px 10px 0 0; } .feature-panel-title { font-size: 14px; font-weight: 600; margin: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feature-panel-close { background: transparent; border: none; color: white; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; opacity: 0.8; } .feature-panel-close:hover { opacity: 1; } .feature-panel-body { padding: 12px 14px; overflow-y: auto; flex: 1; } .feature-panel-tag { display: inline-block; padding: 3px 9px; background: rgba(255, 184, 28, 0.18); color: var(--text-strong); border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; margin-bottom: 10px; text-transform: uppercase; } .feature-panel-section { padding: 10px 0; border-top: 1px solid var(--panel-border); } .feature-panel-section:first-child { border-top: none; } .feature-panel-section h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--text-strong); letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.85; } .feature-panel-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; } .feature-panel-row .label { color: var(--text-muted); } .feature-panel-row .value { color: var(--text-strong); font-weight: 500; } .feature-panel-row .value.highlight { background: rgba(255, 184, 28, 0.25); padding: 1px 6px; border-radius: 3px; font-weight: 600; } /* ── Rich SCHOOL detail card ────────────────────────────────────────────── */ .feature-panel-tag.lehs-badge { background: var(--lehs-gold); color: var(--text-strong); box-shadow: 0 1px 6px rgba(255, 184, 28, 0.5); } .school-type-pill { display: inline-block; padding: 3px 10px; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; } .school-headline .feature-panel-row .value { text-align: right; } .school-enroll { margin-top: 8px; padding: 8px 10px; background: rgba(10, 31, 68, 0.05); border-radius: 6px; text-align: center; } .school-enroll-num { font-size: 26px; font-weight: 700; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; } .school-enroll-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* Labeled composition bars */ .fp-bar-row { margin: 6px 0; } .fp-bar-head { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; } .fp-bar-label { color: var(--text-muted); } .fp-bar-val { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .fp-bar-track { height: 8px; background: rgba(10, 31, 68, 0.08); border-radius: 4px; overflow: hidden; } .fp-bar-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; transition: width 0.3s ease; } /* Stacked race/ethnicity bar */ .fp-stack { display: flex; height: 16px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } .fp-stack-seg { display: block; height: 100%; } .fp-stack-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 7px; } .fp-stack-key { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } .fp-stack-sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } @media (max-width: 768px) { .feature-panel { right: 8px; left: 8px; width: auto; max-height: 45vh; } } .layer-name { flex: 1; } /* Toggle rows (visual mode) */ .toggle-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: 12px; color: var(--text-strong); } .toggle-row input[type="checkbox"] { accent-color: var(--lehs-navy); width: 14px; height: 14px; margin: 0; cursor: pointer; } /* Variable selectors */ .select-input { width: 100%; padding: 8px 10px; font-size: 13px; font-family: 'Inter', sans-serif; background: white; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--text-strong); cursor: pointer; } .select-input:focus { outline: none; border-color: var(--lehs-navy); } /* Footer attribution */ .panel-footer { padding-top: 10px; } .attribution { font-size: 10px; color: var(--text-muted); line-height: 1.6; } .attribution strong { color: var(--text-strong); } .attribution a { color: var(--text-strong); } /* ============================================================================ Legend (bottom-right floating) ============================================================================ */ .legend { position: absolute; bottom: 16px; right: 16px; min-width: 200px; max-width: 280px; padding: 12px 14px; background: var(--legend-bg); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--panel-shadow); z-index: 5; font-size: 12px; color: var(--text-strong); backdrop-filter: blur(8px); /* --legend-scale (default 1 = no-op) lets the −/+ buttons and corner grip scale the whole card. Origin top-left keeps scaling anchored to the JS left/top position so the on-screen clamp math stays simple. */ transform: scale(var(--legend-scale, 1)); transform-origin: top left; } .legend-title { font-weight: 600; margin-bottom: 0; /* spacing now lives on .legend-header */ font-size: 13px; flex: 1 1 auto; min-width: 0; } /* ── Legend customization: draggable header + resize controls ─────────────── The header doubles as a drag handle; the −/+/⟲ buttons and the bottom-right grip stay out of the way until you hover/focus the card. Hidden on mobile (the legend docks full-width there). Behavior: setupLegendCustomization(). */ .legend-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; cursor: move; touch-action: none; /* pointer-drag shouldn't scroll the page on touch */ border-radius: 4px; } .legend-header:focus-visible { outline: 2px solid var(--lehs-gold); outline-offset: 2px; } .legend-tools { display: flex; gap: 3px; flex: 0 0 auto; opacity: 0; /* revealed on hover/focus to keep the card clean */ transition: opacity 0.15s ease; } .legend:hover .legend-tools, .legend:focus-within .legend-tools { opacity: 1; } .legend-tool { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; line-height: 1; color: var(--text-strong); background: rgba(10, 31, 68, 0.06); border: 1px solid var(--panel-border); border-radius: 4px; cursor: pointer; -webkit-user-select: none; user-select: none; } .legend-tool:hover { background: rgba(10, 31, 68, 0.14); } .legend-tool:active { background: rgba(10, 31, 68, 0.22); } #legendReset { font-size: 12px; } /* Bottom-right resize grip — diagonal hatch, revealed on hover/focus. */ .legend-resize { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity 0.15s ease; background: repeating-linear-gradient( 135deg, var(--lehs-navy) 0, var(--lehs-navy) 1px, transparent 1px, transparent 3px ); } .legend:hover .legend-resize, .legend:focus-within .legend-resize { opacity: 0.45; } .legend-resize:hover { opacity: 0.85; } /* Suppress text selection across the page while dragging/resizing. */ body.legend-busy { -webkit-user-select: none; user-select: none; } /* Plain-language "how to read the colors" caption + insight line. */ .legend-caption { font-size: 11.5px; color: var(--text-strong); margin-top: 6px; line-height: 1.35; } .legend-caption[hidden] { display: none; } .legend-stops { display: flex; flex-direction: column; gap: 4px; } .legend-row { display: flex; align-items: center; gap: 8px; font-size: 11px; } .legend-bar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .legend-bar-stop { flex: 1; } .legend-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); } /* ============================================================================ BIVARIATE (compare two metrics) — panel controls + the 3×3 legend grid. The grid replaces the normal legend stops while bivariate mode is on; it's drawn scatter-style (top row = high A, right col = high B). Token-based so it flips cleanly in dark mode. Ported from the statewide atlas's bivar-* rules. ============================================================================ */ .bivar-controls { margin-top: 8px; padding: 10px 12px; background: rgba(10, 31, 68, 0.035); border: 1px solid var(--panel-border); border-left: 3px solid var(--lehs-gold); border-radius: 0 6px 6px 0; } [data-theme="dark"] .bivar-controls { background: rgba(255, 255, 255, 0.04); } .bivar-wrap { display: grid; grid-template-columns: 16px 1fr; grid-template-rows: auto 16px; grid-template-areas: "ylab grid" ". xlab"; gap: 4px; width: 100%; margin: 4px 0 8px; } .bivar-ylabel { grid-area: ylab; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; color: var(--text-strong); text-align: center; line-height: 16px; letter-spacing: 0.02em; overflow: hidden; } .bivar-xlabel { grid-area: xlab; font-size: 10px; color: var(--text-strong); text-align: center; letter-spacing: 0.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bivar-grid { grid-area: grid; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; aspect-ratio: 1 / 1; /* fill the legend width, stay square */ max-width: 132px; gap: 1px; border: 1px solid var(--panel-border); } .bivar-cell { display: block; width: 100%; height: 100%; } .bivar-cuts { font-size: 10.5px; color: var(--text-strong); line-height: 1.4; margin-top: 6px; } .bivar-cuts b { font-weight: 600; } /* ============================================================================ PNG EXPORT MODAL — preview + overlay-edit controls. Mirrors the help modal's surface/token treatment so it flips cleanly in dark mode (every text element resolves to var(--text-strong)/--text-muted). ============================================================================ */ .export-modal { position: absolute; inset: 0; background: rgba(10, 31, 68, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 102; /* above help modal (101) + loading (100) */ padding: 20px; } .export-modal.open { display: flex; } .export-modal-inner { position: relative; max-width: 880px; width: 100%; max-height: min(90vh, 760px); overflow-y: auto; background: var(--surface-1); color: var(--text-strong); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 18px 50px rgba(10, 31, 68, 0.35); padding: 24px 26px 20px; font-family: 'Inter', sans-serif; } .export-modal-inner h2 { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: var(--text-strong); } .export-modal-close { position: absolute; top: 12px; right: 14px; background: var(--surface-2); border: 1px solid var(--panel-border); color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; padding: 1px 8px; } .export-modal-close:hover { color: var(--text-strong); background: var(--surface-hover); } .export-modal-grid { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; } .export-preview-frame { position: relative; background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px; min-height: 220px; display: flex; align-items: center; justify-content: center; } .export-preview-canvas { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .export-preview-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-muted); } .export-preview-busy[hidden] { display: none; } .export-controls .form-label:first-child { margin-top: 0; } .export-res-group { margin-top: 4px; } .export-modal-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-border); } .export-download-btn { width: 100%; padding: 10px 14px; background: var(--lehs-navy); color: var(--lehs-gold); border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s; } .export-download-btn:hover { background: #1a3a6b; } .export-download-btn:active { transform: translateY(1px); } @media (max-width: 768px) { .export-modal-grid { grid-template-columns: 1fr; } .export-modal-inner { padding: 20px 16px 16px; } } /* ============================================================================ Loading overlay ============================================================================ */ .map-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.95); padding: 24px 36px; border-radius: 8px; box-shadow: var(--panel-shadow); text-align: center; color: var(--text-strong); z-index: 100; font-size: 13px; } .map-loading.hidden { display: none; } .map-loading-spinner { width: 32px; height: 32px; margin: 0 auto 12px; border: 3px solid #e0e0e0; border-top-color: var(--lehs-navy); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ Popup styling — overrides MapLibre's defaults ============================================================================ */ .maplibregl-popup-content { padding: 14px 18px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; box-shadow: var(--panel-shadow); max-width: 320px; } .popup-title { font-size: 14px; font-weight: 600; color: var(--text-strong); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-border); } .popup-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12px; } .popup-row .label { color: var(--text-muted); } .popup-row .value { color: var(--text-strong); font-weight: 500; } /* ============================================================================ Floating toggle (FAB) — desktop hidden, mobile shows it to re-open the drawer ============================================================================ */ .panel-fab { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--lehs-navy); color: var(--lehs-gold); border: none; box-shadow: 0 3px 12px rgba(10, 31, 68, 0.35); cursor: pointer; z-index: 20; display: none; align-items: center; justify-content: center; padding: 0; } .panel-fab:hover { background: #1a3a6b; } .export-csv-btn { width: 100%; padding: 9px 12px; background: var(--lehs-navy); color: var(--lehs-gold); border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .export-csv-btn:hover { background: #1a3a6b; } .export-csv-btn:active { transform: translateY(1px); } .panel-fab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; } /* ============================================================================ Mobile responsiveness — < 768px ============================================================================ */ @media (max-width: 768px) { .panel-fab { display: inline-flex; } .control-panel .panel-toggle { display: none; } .control-panel { top: 0; left: 0; width: 88vw; max-width: 360px; height: calc(100vh - var(--nav-height)); max-height: calc(100vh - var(--nav-height)); border-radius: 0 12px 12px 0; z-index: 30; transform: translateX(-100%); transition: transform 0.28s ease; } .control-panel.open { transform: translateX(0); } .control-panel.collapsed { transform: translateX(-100%); } .panel-backdrop { position: absolute; inset: 0; background: rgba(10, 31, 68, 0.35); z-index: 25; display: none; } .panel-backdrop.open { display: block; } .view-btn { min-width: 0; flex: 1 1 calc(50% - 6px); } .radio-group label, .layer-row, .toggle-row { padding: 8px 0; font-size: 13px; } .radio-group input[type="radio"], .layer-row input[type="checkbox"], .toggle-row input[type="checkbox"] { width: 18px; height: 18px; } .select-input { padding: 10px 12px; font-size: 14px; min-height: 44px; } .year-play { width: 38px; height: 38px; font-size: 14px; } .year-slider { height: 28px; } .year-slider::-webkit-slider-thumb { width: 22px; height: 22px; } .feature-panel { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: none; max-height: 60vh; border-radius: 14px 14px 0 0; transform: translateY(110%); transition: transform 0.28s ease; display: flex; } .feature-panel.open { transform: translateY(0); } /* Help pill → round icon on phones so it can't cover the full-width legend. Fixed so it stays above iOS Safari's address bar. */ .help-fab { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; } .help-fab-label { display: none; } .help-fab-icon { width: 22px; height: 22px; } .help-hd { padding: 18px 18px 12px; } .help-body { padding: 14px 18px 6px; } .help-footer { padding: 12px 18px; } .help-tour-btn, .help-got-it { padding-left: 14px; padding-right: 14px; } .help-key { min-width: 104px; font-size: 11px; } .legend { bottom: 12px; left: 12px; right: 12px; max-width: none; font-size: 11px; padding: 10px 12px; /* Drop any saved drag/scale — the legend docks full-width on mobile. */ transform: none; } .legend-header { cursor: default; } .legend-tools, .legend-resize { display: none; } .hist { height: 26px; } .maplibregl-ctrl-group button { width: 38px !important; height: 38px !important; } .maplibregl-ctrl-bottom-left { left: 12px !important; bottom: 78px !important; } .maplibregl-ctrl-bottom-right { right: 12px !important; bottom: 78px !important; } .export-csv-btn { font-size: 14px; padding: 10px; } /* Bigger, more discoverable FAB on mobile + soft pulse on first paint. */ .panel-fab { width: 52px; height: 52px; box-shadow: 0 6px 18px rgba(10, 31, 68, 0.45); animation: fab-pulse-lynn 1.6s ease-out 0.4s 2; } @keyframes fab-pulse-lynn { 0% { box-shadow: 0 6px 18px rgba(10, 31, 68, 0.45), 0 0 0 0 rgba(255, 184, 28, 0.55); } 70% { box-shadow: 0 6px 18px rgba(10, 31, 68, 0.45), 0 0 0 14px rgba(255, 184, 28, 0); } 100% { box-shadow: 0 6px 18px rgba(10, 31, 68, 0.45), 0 0 0 0 rgba(255, 184, 28, 0); } } } @media (max-width: 480px) { .panel-title { font-size: 18px; } .help-modal-inner h2 { font-size: 17px; } .legend { font-size: 10px; } .view-btn { font-size: 10px; padding: 9px 8px; } } /* ============================================================================ Panel header icon buttons (theme toggle + reset), beside the back-link. ============================================================================ */ .panel-header-actions { display: flex; align-items: center; gap: 6px; } .panel-icon-btn { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--text-strong); font-size: 15px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; padding: 0; } .panel-icon-btn:hover { background: var(--surface-hover); border-color: rgba(10, 31, 68, 0.22); } .panel-icon-btn svg { width: 15px; height: 15px; } /* Home / reset-view control — matches the other MapLibre top-right buttons. */ .maplibregl-ctrl-home { display: flex; align-items: center; justify-content: center; color: #333; background: transparent; border: none; cursor: pointer; } .maplibregl-ctrl-home svg { display: block; } /* ============================================================================ HELP & GUIDE — a labeled pill that opens a tabbed help hub (controls cheat- sheet · how-to · glossary) + launches the interactive guided tour, plus the tour spotlight overlay. Token-based so every surface + text element flips cleanly in dark mode (text resolves to var(--text-strong)/--text-muted — no inheritance from the near-white global body color, the inherited-text trap). Adapted from the statewide atlas help hub; re-scoped to THIS map's controls. ============================================================================ */ /* ── Launcher pill ───────────────────────────────────────────────────────── */ .help-fab { position: absolute; bottom: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: none; border-radius: 999px; background: var(--lehs-navy); color: #fff; box-shadow: 0 3px 14px rgba(10, 31, 68, 0.38); cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.01em; z-index: 6; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .help-fab:hover { transform: translateY(-1px); background: #1a3a6b; box-shadow: 0 6px 20px rgba(10, 31, 68, 0.5); } .help-fab:active { transform: translateY(0); } .help-fab-icon { width: 20px; height: 20px; color: var(--lehs-gold); flex-shrink: 0; } .help-fab-label { white-space: nowrap; } /* One-time discoverability pulse for first-time visitors (JS removes it on the first open). Subtle gold ring — no popup, no screen real-estate. */ .help-fab.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: helpFabPulse 2.2s ease-out infinite; } @keyframes helpFabPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(255, 184, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0); } } /* ── Hub modal ───────────────────────────────────────────────────────────── */ .help-modal { position: absolute; inset: 0; background: rgba(10, 31, 68, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 101; /* above the loading overlay (100) */ padding: 20px; } .help-modal.open { display: flex; } .help-modal-inner { position: relative; max-width: 540px; width: 100%; max-height: min(86vh, 720px); display: flex; flex-direction: column; background: var(--surface-1); color: var(--text-strong); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: 0 18px 50px rgba(10, 31, 68, 0.35); font-family: 'Inter', sans-serif; overflow: hidden; animation: helpModalIn 0.2s ease; } @keyframes helpModalIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } } .help-hd { padding: 22px 26px 14px; background: var(--surface-2); border-bottom: 1px solid var(--panel-border); } .help-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: #b8860b; font-weight: 500; } .help-modal-inner h2 { margin: 4px 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); } .help-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); } .help-modal-close { position: absolute; top: 12px; right: 14px; background: var(--surface-2); border: 1px solid var(--panel-border); color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; padding: 1px 8px; z-index: 2; } .help-modal-close:hover { color: var(--text-strong); background: var(--surface-hover); } /* Tabs */ .help-tabs { display: flex; gap: 4px; padding: 12px 18px 0; border-bottom: 1px solid var(--panel-border); } .help-tab { appearance: none; border: none; background: transparent; padding: 9px 14px; margin-bottom: -1px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2.5px solid transparent; transition: color 0.12s, border-color 0.12s; } .help-tab:hover { color: var(--text-strong); } .help-tab.active { color: var(--text-strong); border-bottom-color: var(--lehs-gold); } /* Scrollable body */ .help-body { padding: 18px 26px 8px; overflow-y: auto; flex: 1; } .help-pane { animation: helpModalIn 0.18s ease; } .help-pane[hidden] { display: none; } /* Map-controls cards */ .help-card { margin-bottom: 16px; } .help-card:last-child { margin-bottom: 4px; } .help-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .help-card-ico { font-size: 14px; } .help-row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.5; padding: 3px 0; color: var(--text-strong); } .help-key { display: inline-block; flex-shrink: 0; min-width: 132px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-strong); text-align: center; } /* How-to pane */ .help-quickstart { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; } .help-quickstart li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 150px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-strong); } .help-qs-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--lehs-navy); color: var(--lehs-gold); font-size: 12px; font-weight: 700; } .help-howto { display: grid; gap: 4px; } .help-howto-item { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--panel-border); } .help-howto-item:last-child { border-bottom: none; } .help-howto-ico { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); font-size: 16px; } .help-howto-item > div { font-size: 13px; line-height: 1.5; color: var(--text-muted); } .help-howto-item strong { display: block; font-size: 13.5px; color: var(--text-strong); margin-bottom: 1px; } .help-note { margin: 14px 0 4px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; font-size: 12px; line-height: 1.5; color: var(--text-muted); } /* Glossary */ .help-terms { margin: 0; } .help-term { padding: 9px 0; border-bottom: 1px solid var(--panel-border); } .help-term:last-child { border-bottom: none; } .help-term dt { font-size: 13px; font-weight: 700; color: var(--text-strong); } .help-term dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } /* Footer */ .help-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 26px; border-top: 1px solid var(--panel-border); background: var(--surface-2); } .help-tour-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--lehs-gold); color: #0A1F44; /* always navy text on the gold pill (legible in both themes) */ border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter 0.15s, transform 0.15s; } .help-tour-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } .help-tour-play { font-size: 10px; } .help-got-it { padding: 9px 20px; background: var(--lehs-navy); color: #fff; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; } .help-got-it:hover { background: #1a3a6b; } /* ── Guided tour overlay ─────────────────────────────────────────────────── */ .tour { position: fixed; inset: 0; z-index: 120; display: none; } .tour.open { display: block; } .tour-blocker { position: absolute; inset: 0; cursor: default; } .tour-spotlight { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 31, 68, 0.6), 0 0 0 3px var(--lehs-gold); pointer-events: none; transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease; } .tour-coach { position: absolute; width: min(340px, calc(100vw - 32px)); background: var(--surface-1); color: var(--text-strong); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: 0 16px 44px rgba(10, 31, 68, 0.4); padding: 16px 18px 14px; font-family: 'Inter', sans-serif; transition: top 0.25s ease, left 0.25s ease; } .tour-coach-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .tour-step { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; } .tour-x { background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .tour-x:hover { color: var(--text-strong); } .tour-coach-title { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: var(--text-strong); } .tour-coach-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); } .tour-dots { display: flex; gap: 5px; margin: 12px 0 0; } .tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-hover); transition: background 0.2s, transform 0.2s; } .tour-dot.on { background: var(--lehs-gold); transform: scale(1.25); } .tour-coach-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .tour-nav { display: flex; gap: 8px; } .tour-skip { background: transparent; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-muted); padding: 6px 2px; } .tour-skip:hover { color: var(--text-strong); text-decoration: underline; } .tour-back, .tour-next { padding: 7px 14px; border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; } .tour-back { background: var(--surface-1); color: var(--text-strong); border: 1px solid var(--panel-border); } .tour-back:hover { background: var(--surface-2); } .tour-back[disabled] { opacity: 0; pointer-events: none; } .tour-next { background: var(--lehs-navy); color: #fff; border: 1px solid var(--lehs-navy); } .tour-next:hover { background: #1a3a6b; border-color: #1a3a6b; } /* ============================================================================ DARK THEME — repoint surfaces that hard-code LIGHT backgrounds at the dark tokens, and keep the native MapLibre controls / popups readable on the dark base. The token swaps above already lightened all panel/legend TEXT; this block fixes elements whose background stayed white so flipped text wouldn't sit light-on-light. Light mode is untouched. ============================================================================ */ [data-theme="dark"] body.maps-page { background: #0d1118; } /* Form inputs + native dropdown option list. */ [data-theme="dark"] .select-input, [data-theme="dark"] input[type="text"].select-input { background: var(--input-bg); color: var(--text-strong); border-color: var(--panel-border); } [data-theme="dark"] .select-input option { background: #1b2230; color: var(--text-strong); } /* Buttons / pills that hard-code a white background. */ [data-theme="dark"] .view-btn { background: var(--surface-2); color: var(--text-strong); border-color: var(--panel-border); } [data-theme="dark"] .view-btn:hover { background: var(--surface-hover); } /* Panel toggle hamburger bars + the panel-toggle hover. */ [data-theme="dark"] .panel-toggle span { background: var(--text-strong); } [data-theme="dark"] .panel-toggle:hover { background: var(--surface-hover); } /* Recessed school-controls block — its translucent navy wash reads as a light smudge over the dark panel; flip to a translucent light wash. */ [data-theme="dark"] .schools-controls { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .metric-summary { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .school-enroll { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .fp-bar-track { background: rgba(255, 255, 255, 0.12); } /* Loading overlay card. */ [data-theme="dark"] .map-loading { background: rgba(22, 28, 38, 0.96); } /* Legend resize/move tooling on the dark card. */ [data-theme="dark"] .legend-tool { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .legend-tool:hover { background: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .legend-resize { background: repeating-linear-gradient( 135deg, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 1px, transparent 1px, transparent 3px ); } [data-theme="dark"] .legend-insight strong { color: var(--text-strong); } /* MapLibre native controls + scale + attribution on the dark base. */ [data-theme="dark"] .maplibregl-ctrl-group { background: #232c3c; } [data-theme="dark"] .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,0.12); } [data-theme="dark"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg) brightness(1.1); } [data-theme="dark"] .maplibregl-ctrl-home { color: #e7ecf3; } [data-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(22, 28, 38, 0.85); } [data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--text-muted); } /* MapLibre popup (the MA-wide schools popup) — give it a dark surface so the token-lightened popup text stays legible. */ [data-theme="dark"] .maplibregl-popup-content { background: var(--surface-1); } [data-theme="dark"] .maplibregl-popup-tip { border-top-color: var(--surface-1); border-bottom-color: var(--surface-1); } /* The embedding site nav is dark in dark mode — brighten its logo + links. */ [data-theme="dark"] .nav-logo { color: #dbe6ff; } [data-theme="dark"] .nav-links a { color: #c2cfe0; } [data-theme="dark"] .nav-links a:hover { color: #fff; } /* Legend insight line (secondary text on the dark legend). */ [data-theme="dark"] .legend-insight { color: var(--text-muted); } /* Legend insight (light mode) — secondary caption styling. */ .legend-insight { margin-top: 7px; font-size: 11px; line-height: 1.4; color: var(--text-muted); } .legend-insight strong { color: var(--text-strong); font-weight: 600; } .legend-insight[hidden] { display: none; } /* ============================================================================ HELP & GUIDE / TOUR — dark-theme tweaks + keyboard focus rings. The hub and tour surfaces are already token-based (flip automatically); these only brighten the gold eyebrow and re-skin the tour "Back" button (which uses the light surface token) so it reads on the dark coach card. ============================================================================ */ [data-theme="dark"] .help-eyebrow { color: var(--lehs-gold); } [data-theme="dark"] .tour-back { background: var(--surface-2); } [data-theme="dark"] .tour-back:hover { background: var(--surface-hover); } /* Visible keyboard-focus ring on the new interactive controls (mirrors the project convention; only shows for keyboard users via :focus-visible). */ .help-fab:focus-visible, .help-tab:focus-visible, .help-tour-btn:focus-visible, .help-got-it:focus-visible, .help-modal-close:focus-visible, .tour-next:focus-visible, .tour-back:focus-visible, .tour-skip:focus-visible, .tour-x:focus-visible { outline: 2px solid var(--lehs-gold); outline-offset: 2px; } /* Honour reduced-motion: drop the pill pulse + spotlight glide for users who ask for less animation. */ @media (prefers-reduced-motion: reduce) { .help-fab.pulse::after { animation: none; } .tour-spotlight { transition: none; } .help-modal-inner, .help-pane { animation: none; } }