/* ============================================================================= dashboard-v2 — shared styles ============================================================================= Dark, dense, information-first. Founder tier uses the full palette; Insider tier uses a variant selector (`body[data-tier="insider"]`) to swap to the warmer narrative theme required by Architecture doc §8. Owner: Dashboard Chat — Session 5 (11 Apr 2026) ============================================================================= */ /* --- reset --- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; color: var(--fg); background: var(--bg); min-height: 100vh; } /* --- palette (Founder default — dark, dense) --- Light-mode overrides live under [data-theme="light"] below. The toggle button writes data-theme on (see assets/theme.js). Tier skinning is orthogonal — insider still gets its warmer accent via body[data-tier]. */ :root { --bg: #0b0d11; --bg-panel: #14171d; --bg-panel-hi: #1b1f27; --fg: #e6ebf4; --fg-dim: #8a93a4; --fg-muted: #5a6170; --accent: #00c9a7; /* teal — matches skynexus.voyage landing */ --accent-hi: #5eedc8; --green: #3ecf6b; --amber: #f4b740; --red: #ef5a5a; --border: #222732; --border-hi: #2d3340; --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.4); --radius: 8px; --gap: 14px; color-scheme: dark; } /* --- Light mode — ported from skynexus.voyage landing page palette --- */ html[data-theme="light"] { --bg: #f4f5f7; --bg-panel: #ffffff; --bg-panel-hi: #eaedf2; --fg: #12141d; --fg-dim: #5a5f73; --fg-muted: #80849a; --accent: #00a386; --accent-hi: #00c9a7; --green: #1f9d50; --amber: #c98a10; --red: #c73a3a; --border: #d8dce5; --border-hi: #b8c0d0; --shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px rgba(18,20,29,0.08); color-scheme: light; } /* --- Insider palette — warmer, narrative --- */ body[data-tier="insider"] { --bg: #0d0b12; --bg-panel: #181420; --bg-panel-hi: #201a2a; --accent: #e8a76a; /* warm amber accent */ --accent-hi: #ffcf95; --border: #2a2335; /* Map palette — warm amber ramp, dark variant (b0 = land fill) */ --map-ocean: #0a0810; --map-b0: #1f1a2a; /* land fill */ --map-b1: #3b2d1e; --map-b2: #5a3e20; --map-b3: #8a5a2a; --map-b4: #b87230; --map-b5: #e89040; --map-b6: #ffb860; --map-country-stroke: #2a2335; } /* Insider + light mode — warm amber retained, surfaces lightened. */ html[data-theme="light"] body[data-tier="insider"] { --bg: #f7f4ef; --bg-panel: #ffffff; --bg-panel-hi: #f0ece4; --accent: #b8791f; --accent-hi: #d8933a; --border: #e5ddcd; /* Map palette — warm amber ramp, light variant (b0 = land fill) */ --map-ocean: #eae4d6; --map-b0: #f0ece4; /* land fill */ --map-b1: #f0dfc0; --map-b2: #e8ca94; --map-b3: #dcb06a; --map-b4: #c8902f; --map-b5: #a8711a; --map-b6: #7e5210; --map-country-stroke: #d8c9a8; } /* --- header --- */ .dash-header { padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: var(--bg-panel); } .dash-brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .dash-logo { display: block; flex-shrink: 0; width: 86px; height: 32px; color: var(--accent); /* primary arc */ } .dash-logo .logo-arc-primary { stroke: currentColor; } .dash-logo .logo-dot { fill: currentColor; } .dash-logo .logo-arc-secondary { stroke: var(--fg); opacity: 0.35; } .dash-logo .logo-text-fill { fill: var(--fg); } .dash-title { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-title .tier { color: var(--accent); margin-left: 8px; font-weight: 500; } .dash-meta { color: var(--fg-dim); font-size: 12px; font-variant-numeric: tabular-nums; } .dash-header-right { display: flex; align-items: center; gap: 14px; } /* --- theme toggle (ported from skynexus.voyage landing) --- */ .theme-toggle { display: flex; align-items: center; gap: 8px; } .theme-toggle .toggle-icon { display: flex; align-items: center; color: var(--fg-muted); transition: color 200ms ease; } .theme-toggle .toggle-icon svg { width: 14px; height: 14px; } html[data-theme="light"] .theme-toggle .toggle-icon.icon-light, html:not([data-theme="light"]) .theme-toggle .toggle-icon.icon-dark { color: var(--accent); } .toggle-btn { position: relative; width: 44px; height: 24px; background: var(--bg-panel-hi); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; padding: 0; flex-shrink: 0; } .toggle-btn:hover { border-color: var(--border-hi); } .toggle-btn::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; transition: transform 260ms ease, background 200ms ease; } html[data-theme="light"] .toggle-btn::after { transform: translateX(20px); } .toggle-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; } /* Mobile — collapse header to two rows, shrink logo */ @media (max-width: 600px) { .dash-header { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; } .dash-logo { width: 72px; height: 28px; } .dash-title { font-size: 13px; } .dash-meta { font-size: 11px; } .dash-header-right { gap: 10px; } } /* --- error banner --- */ #error-banner { background: var(--red); color: #1a0606; padding: 10px 18px; font-size: 13px; font-weight: 500; border-bottom: 1px solid #8a2323; } #error-banner.hidden { display: none; } /* --- main layout --- */ main { padding: 18px 22px 24px; max-width: 1400px; margin: 0 auto; } .group { margin-bottom: 24px; } .group-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } /* Session 9 (16 Apr 2026): optional sub-title for groups that need to annotate a one-off data movement (e.g. Pipeline Health reclassifications on 16–17 Apr). Wraps to a new line below the title + toggle via flex-wrap on the parent. */ .group-note { flex-basis: 100%; margin: 0; padding-top: 2px; font-size: 11px; font-style: italic; color: var(--fg-dim); opacity: 0.85; } .group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); font-weight: 600; margin: 0; } .group-toggle { background: none; border: 1px solid var(--border); color: var(--fg-dim); padding: 2px 8px; font-size: 11px; border-radius: 4px; cursor: pointer; font-family: inherit; } .group-toggle:hover { border-color: var(--border-hi); color: var(--fg); } .group.collapsed .tiles { display: none; } .tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Hero row is a fixed 4-column layout on wide viewports */ .group-hero .tiles { grid-template-columns: repeat(4, 1fr); } @media (max-width: 800px) { .group-hero .tiles { grid-template-columns: repeat(2, 1fr); } } /* iPhone-class viewport — hero collapses to 1-col so tile values never overflow their container regardless of digit count. Also tightens tile-value font across both tiers so compact-formatted numbers ("230.7M") render proportionally rather than dwarfing the tile. */ @media (max-width: 600px) { :root { --gap: 12px; } .group-hero .tiles { grid-template-columns: 1fr; } .tile.wide { grid-column: span 1; } .tile-value { font-size: 24px; } .tile-hero .tile-value { font-size: 28px; } body[data-tier="insider"] .tile-value { font-size: 30px; } .tile { min-height: 84px; padding: 12px 14px; } /* Stop horizontal page scroll even if a descendant misbehaves */ html, body { overflow-x: hidden; } main { overflow-x: hidden; } .tile-value { overflow-wrap: anywhere; word-break: break-word; } } /* --- tile card --- */ .tile { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; position: relative; box-shadow: var(--shadow); } .tile.wide { grid-column: span 2; } .tile-full { grid-column: 1 / -1; } .tile.tall { min-height: 180px; } .tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); font-weight: 600; margin: 0 0 8px 0; display: flex; justify-content: space-between; align-items: center; } .tile-link { color: var(--accent); text-decoration: none; font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 400; } .tile-link:hover { color: var(--accent-hi); } .tile-value { font-size: 30px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; transition: color 200ms ease; } .tile-hero .tile-value { font-size: 38px; } .tile-sub { font-size: 12px; color: var(--fg-dim); margin-top: 4px; font-variant-numeric: tabular-nums; } /* --- Upcoming Fairs tile (tile 4) — compact multi-row countdown --- */ .tile-fairs .tile-value { font-size: inherit; display: flex; flex-direction: column; gap: 6px; } .fair-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.3; } .fair-countdown { flex-shrink: 0; min-width: 52px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); } .fair-countdown.fair-today { color: hsl(130, 55%, 45%); } .fair-detail { display: flex; flex-direction: column; } .fair-name { font-weight: 500; color: var(--fg); } .fair-meta { font-size: 11px; color: var(--fg-dim); } .fair-empty { font-size: 13px; color: var(--fg-dim); } /* --- Insider tile overrides — slightly warmer, bigger numbers, narrative feel --- */ body[data-tier="insider"] .tile-value { font-size: 42px; color: var(--accent-hi); font-weight: 500; } body[data-tier="insider"] .tile-label { color: var(--fg-dim); } body[data-tier="insider"] .tile { padding: 20px 22px; min-height: 130px; } /* --- flash animation for delta-vs-prev --- */ @keyframes tile-flash { 0% { background-color: var(--accent); color: #0b0d11; } 100% { background-color: transparent; color: var(--fg); } } .flash { animation: tile-flash 700ms ease-out; } /* --- bar chart --- */ .bar-row { display: grid; grid-template-columns: 52px 1fr 72px; gap: 8px; align-items: center; margin: 3px 0; } .bar-label { color: var(--fg-dim); font-size: 11px; } .bar-track { background: var(--bg-panel-hi); height: 10px; border-radius: 2px; overflow: hidden; } .bar-fill { background: var(--accent); height: 100%; transition: width 400ms ease; } .bar-count { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--fg); } /* --- gauge --- Session 8 (16 Apr 2026): tightened row spacing and pinned label to nowrap so PIPELINE_DISPLAY[key].name (e.g. "Eurostat", "Stats NZ") never wraps onto two lines. Label column widened from 80 → 92px to absorb the longest bare name ("Eurostat") with margin to spare at 12px / system-font. */ .gauge-row { display: grid; grid-template-columns: 92px 1fr 60px; gap: 8px; align-items: center; padding: 4px 6px; font-size: 11px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); } .gauge-row:last-child { border-bottom: none; } .gauge-label { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gauge-track { background: var(--bg-panel-hi); height: 8px; border-radius: 2px; overflow: hidden; } .gauge-fill { height: 100%; transition: width 400ms ease; } .gauge-fill.green { background: var(--green); } .gauge-fill.amber { background: var(--amber); } .gauge-fill.red { background: var(--red); } .gauge-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); } .gauge-big { background: var(--bg-panel-hi); height: 14px; border-radius: 3px; overflow: hidden; margin: 8px 0; } .gauge-big-fill { height: 100%; transition: width 400ms ease; } .gauge-big.green .gauge-big-fill { background: var(--green); } .gauge-big.amber .gauge-big-fill { background: var(--amber); } .gauge-big.red .gauge-big-fill { background: var(--red); } .gauge-big-label { font-size: 12px; color: var(--fg-dim); margin: 4px 0 0 0; font-variant-numeric: tabular-nums; } /* --- mini-table --- */ .mini-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; } .mini-table th, .mini-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); } .mini-table th { color: var(--fg-dim); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; } .mini-table .status-completed { color: var(--green); } .mini-table .status-failed { color: var(--red); } .mini-table .status-partial { color: var(--amber); } /* --- health chip (tile 10, data-age indicator) — Task 32, 26 May 2026 --- The chip surfaces get_ingestion_health() v3's `health` band as a coloured pill with the days-since-last-run value. Bands map to the existing palette tokens so the visual language matches the rest of the dashboard (the .status-* classes above). 'unknown' is for stub pipelines that have never run (merged in from pipelineDisplay). */ .health-chip { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; min-width: 28px; text-align: center; } .health-ok { background: rgba(0, 200, 0, 0.18); color: var(--green); } .health-aging { background: rgba(255, 170, 0, 0.18); color: var(--amber); } .health-stale { background: rgba(220, 60, 60, 0.20); color: var(--red); } .health-failing { background: rgba(220, 60, 60, 0.38); color: var(--red); font-weight: 700; } .health-unknown { background: rgba(160, 160, 160, 0.12); color: var(--fg-dim); } /* --- freshness heatmap (tile 9) --- */ .freshness-grid { width: 100%; border-collapse: collapse; font-size: 12px; } .freshness-grid th, .freshness-grid td { padding: 4px 6px; text-align: center; } .freshness-grid th { color: var(--fg-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; } .freshness-decade { text-align: right !important; font-variant-numeric: tabular-nums; color: var(--fg-dim); white-space: nowrap; } .freshness-cell { font-variant-numeric: tabular-nums; border-radius: 3px; min-width: 44px; } .freshness-cell.fresh-active { background: hsla(160, 65%, 50%, var(--cell-opacity)); color: var(--fg); } .freshness-cell.fresh-recent { background: hsla(200, 60%, 55%, var(--cell-opacity)); color: var(--fg); } .freshness-cell.fresh-aging { background: hsla( 35, 70%, 55%, var(--cell-opacity)); color: var(--fg); } .freshness-cell.fresh-historical { background: hsla( 0, 50%, 55%, var(--cell-opacity)); color: var(--fg); } /* Reference: neutral desaturated — "seed/reference route, never operated". Visually distinct from the operational hue ramp so the eye reads it as a separate category, not another decay stage. */ .freshness-cell.fresh-reference { background: hsla(220, 10%, 55%, var(--cell-opacity)); color: var(--fg); } /* Light mode: bump saturation slightly for legibility */ html[data-theme="light"] .freshness-cell.fresh-active { background: hsla(160, 55%, 45%, var(--cell-opacity)); } html[data-theme="light"] .freshness-cell.fresh-recent { background: hsla(200, 50%, 50%, var(--cell-opacity)); } html[data-theme="light"] .freshness-cell.fresh-aging { background: hsla( 35, 60%, 50%, var(--cell-opacity)); } html[data-theme="light"] .freshness-cell.fresh-historical { background: hsla( 0, 45%, 50%, var(--cell-opacity)); } html[data-theme="light"] .freshness-cell.fresh-reference { background: hsla(220, 8%, 50%, var(--cell-opacity)); } /* --- timetable acquisition heatmap (tile-timetable-heatmap) --- */ .tt-scroll { overflow-x: auto; max-width: 100%; padding-bottom: 6px; } .tt-heatmap { border-collapse: collapse; font-size: 12px; } .tt-heatmap th, .tt-heatmap td { padding: 4px 6px; text-align: center; } .tt-heatmap th { color: var(--fg-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .tt-airline { text-align: right !important; font-variant-numeric: tabular-nums; color: var(--fg-dim); white-space: nowrap; position: sticky; left: 0; background: var(--bg-panel); z-index: 2; padding-right: 10px !important; /* Solid shadow to mask colour bleed from cells scrolling behind */ box-shadow: 8px 0 6px -4px var(--bg-panel); } .tt-cell { min-width: 44px; font-variant-numeric: tabular-nums; border-radius: 3px; } /* Match Route Freshness colour palette exactly: full = fresh-active hsla(160, 65%, 50%) green partial = fresh-aging hsla( 35, 70%, 55%) amber empty = fresh-historical hsla( 0, 50%, 55%) red inactive= fresh-reference hsla(220, 10%, 55%) grey */ .tt-cell.tt-full { background: hsla(160, 65%, 50%, 0.85); color: var(--fg); } .tt-cell.tt-partial { background: hsla( 35, 70%, 55%, 0.85); color: var(--fg); } .tt-cell.tt-empty { background: hsla( 0, 50%, 55%, 0.85); color: var(--fg); } .tt-cell.tt-inactive { background: hsla(220, 10%, 55%, 0.40); color: var(--fg); } html[data-theme="light"] .tt-cell.tt-full { background: hsla(160, 55%, 45%, 0.85); } html[data-theme="light"] .tt-cell.tt-partial { background: hsla( 35, 60%, 50%, 0.85); } html[data-theme="light"] .tt-cell.tt-empty { background: hsla( 0, 45%, 50%, 0.85); } html[data-theme="light"] .tt-cell.tt-inactive { background: hsla(220, 8%, 50%, 0.40); } /* Legend */ .tt-legend { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-size: 10px; color: var(--fg-dim); } .tt-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 3px; vertical-align: middle; } /* --- sparkline --- */ .sparkline { display: flex; align-items: flex-end; height: 50px; gap: 4px; margin: 4px 0; } .spark-bar { flex: 1; background: var(--accent); min-height: 2px; border-radius: 2px 2px 0 0; transition: height 400ms ease; } .spark-total { font-size: 11px; color: var(--fg-dim); margin: 4px 0 0 0; } /* --- donut chart (tile 17) --- */ .donut-wrap { display: flex; align-items: center; gap: 20px; } .donut { width: 130px; height: 130px; border-radius: 50%; flex-shrink: 0; position: relative; } .donut::after { content: ''; position: absolute; inset: 32px; border-radius: 50%; background: var(--bg-panel); } .donut-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11px; } .donut-row { display: flex; align-items: center; gap: 6px; } .donut-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .donut-label { color: var(--fg-dim); min-width: 80px; } .donut-amount { font-variant-numeric: tabular-nums; color: var(--fg); } /* --- RAID pills --- */ .raid-stack { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .raid-pill { padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .raid-pill.crit { background: var(--red); color: #1a0606; } .raid-pill.high { background: var(--amber); color: #1a0f00; } .raid-pill.med { background: var(--accent); color: #0b0d11; } .raid-pill.low { background: var(--bg-panel-hi); color: var(--fg-dim); } /* --- insider activity tile --- */ .insider-summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 8px 0; } .insider-stat { font-size: 12px; font-weight: 600; color: var(--fg-dim); font-variant-numeric: tabular-nums; } .insider-stat.insider-active { color: var(--green); } .insider-presence { text-align: center; font-size: 10px; line-height: 1; width: 20px; } .insider-presence.online { color: var(--green); } .insider-presence.offline { color: var(--fg-muted); } .insider-scroll { max-height: 340px; overflow-y: auto; } .insider-scroll thead { position: sticky; top: 0; z-index: 1; background: var(--bg-panel); } /* --- worker rows --- */ .worker-row { display: grid; grid-template-columns: 1fr 60px 80px; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; } .worker-name { color: var(--fg); } .worker-status { font-weight: 500; text-align: center; } .worker-status.green { color: var(--green); } .worker-status.amber { color: var(--amber); } .worker-status.red { color: var(--red); } .worker-requests { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-dim); } /* --- pending / placeholder states --- */ .tile-pending, .tile-placeholder { color: var(--fg-muted); font-size: 12px; font-style: italic; margin: 4px 0 0 0; } .tile-placeholder { padding: 8px; background: var(--bg-panel-hi); border-radius: 4px; } .tile-pending code { background: var(--bg-panel-hi); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; font-style: normal; color: var(--accent); } /* --- footer --- */ .dash-footer { max-width: 1400px; margin: 24px auto 0; padding: 14px 22px 22px; color: var(--fg-muted); font-size: 11px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; } /* ============================================================================= Insider flight animation — Compliance Chat Session 16 APPROVED WITH CONDITIONS. Map host, country paths, and tooltip are shared with the base map. Flight arcs, markers, info overlay, and departures board are animation-specific. Palette tokens (--map-ocean, --map-b0, --map-country-stroke) live in the insider tier blocks above. ============================================================================= */ .group-insider-map { margin-top: 28px; } .group-insider-map .group-header { margin-bottom: 12px; } /* --- Map host --- */ .insider-map-host { position: relative; width: 100%; background: var(--map-ocean); border: 1px solid var(--border); border-radius: 10px 10px 0 0; overflow: hidden; min-height: 320px; } .insider-map-host.ready .map-loading { display: none; } .map-loading, .map-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-size: 13px; } .map-error { color: #e86060; } .insider-map-svg { display: block; width: 100%; height: auto; } .map-ocean { fill: var(--map-ocean); } .country-path { stroke: var(--map-country-stroke); stroke-width: 0.4; stroke-linejoin: round; cursor: default; fill: var(--map-b0); } .insider-map-tooltip { position: absolute; top: 0; left: 0; pointer-events: none; background: var(--bg-panel); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 120ms ease; z-index: 2; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .insider-map-tooltip.visible { opacity: 1; } /* --- Flight arcs --- */ .flight-arc { fill: none; stroke-linecap: round; } .flight-arc.hero { stroke: var(--accent-hi); stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--accent)); } .flight-arc.departure { stroke: var(--accent); stroke-width: 1; opacity: 0.6; } /* --- Flight markers (origin/destination dots) --- */ .flight-marker { fill: var(--accent-hi); stroke: var(--bg); stroke-width: 1; } .flight-marker.origin { r: 4; } .flight-marker.destination { r: 3; } .flight-marker.departure-dest { r: 2; fill: var(--accent); opacity: 0.7; } /* --- Arcs group fade transition --- */ .arcs-group { transition: opacity 600ms ease; } .arcs-group.fading { opacity: 0; } /* --- Flight info overlay --- */ .flight-info { position: absolute; bottom: 14px; left: 14px; background: rgba(11, 13, 17, 0.85); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; font-size: 12px; color: var(--fg); opacity: 0; transition: opacity 400ms ease; z-index: 3; max-width: 320px; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html[data-theme="light"] .flight-info { background: rgba(244, 245, 247, 0.88); } .flight-info.visible { opacity: 1; } .flight-info-date { font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .flight-info-route { font-size: 16px; font-weight: 600; color: var(--accent-hi); margin-bottom: 4px; letter-spacing: 0.02em; } .flight-info-detail { font-size: 12px; color: var(--fg); line-height: 1.5; } .flight-info-source { font-size: 10px; color: var(--fg-muted); margin-top: 6px; font-style: italic; } /* --- Flight-card tiles (Oldest / Newest / Last Ingested) --- Mirrors .flight-info-* hero styles so the dashboard tiles read the same as the map's hero flight card. Lives inside .tile-value so inherits tile padding; no absolute positioning. */ .flight-card-date { font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .flight-card-route { font-size: 18px; font-weight: 600; color: var(--accent-hi); margin-bottom: 4px; letter-spacing: 0.02em; } .flight-card-detail { font-size: 12px; color: var(--fg); line-height: 1.5; } .flight-card-cities { color: var(--fg-dim); } .flight-card-source { font-size: 10px; color: var(--fg-muted); margin-top: 6px; font-style: italic; } /* --- Corpus snapshot rows --------------------------------------------------- Session 8 (16 Apr 2026). Two rows of three "snapshot" tiles — route-level on top, flight-level below. The default .tiles auto-fit grid leaves them drifting to a second wrap on narrower viewports; .tiles-row force-pins three equal columns and uses a tighter gap so both rows visually match the width of the tile groups above. */ .group.compact { margin-bottom: 18px; } .group.compact .group-header { padding-bottom: 6px; margin-bottom: 8px; } .group.compact .tiles-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; } .group.compact .tiles-row:last-child { margin-bottom: 0; } .tile-snapshot { padding: 10px 12px; min-height: 0; } .tile-snapshot .tile-label { margin-bottom: 4px; } .tile-snapshot .tile-sub { margin-top: 4px; } .tile-snapshot .flight-card-date { margin-bottom: 2px; } .tile-snapshot .flight-card-route { font-size: 16px; margin-bottom: 2px; } .tile-snapshot .flight-card-detail { font-size: 11px; line-height: 1.4; } .tile-snapshot .flight-card-source { margin-top: 4px; font-size: 9.5px; } @media (max-width: 800px) { .group.compact .tiles-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .group.compact .tiles-row { grid-template-columns: 1fr; } } /* --- Departures board --- */ .departures-board { background: var(--bg-panel); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding: 0; opacity: 0; transition: opacity 500ms ease; /* Fixed height — 9 rows + thead + header. Prevents layout reflow when the map refreshes and the board re-populates with a different row count. */ height: 340px; overflow-y: auto; overflow-x: hidden; } .departures-board.visible { opacity: 1; } .departures-board.fading { opacity: 0; } .departures-header { padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--accent-hi); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); background: var(--bg-panel-hi); position: sticky; top: 0; z-index: 2; } .departures-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .departures-table thead { background: var(--bg-panel-hi); position: sticky; top: 0; z-index: 1; } .departures-table th { padding: 6px 12px; text-align: left; color: var(--fg-muted); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } .departures-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); color: var(--fg); } .departures-table tbody tr { opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms ease; } .departures-table tbody tr.visible { opacity: 1; transform: translateY(0); } /* Column widths */ .dep-time { width: 70px; } .dep-flight { width: 90px; color: var(--accent); font-weight: 500; } .dep-dest { } .dep-airline { color: var(--fg-dim); } .dep-aircraft { color: var(--fg-dim); font-size: 11px; } /* Departures board — styled td columns */ .departures-table td.dep-flight { color: var(--accent); font-weight: 500; } .departures-table td.dep-airline { color: var(--fg-dim); } .departures-table td.dep-aircraft { color: var(--fg-dim); font-size: 11px; } .dep-source { color: var(--fg-muted); font-size: 11px; font-style: italic; } .departures-table td.dep-source { color: var(--fg-muted); font-size: 11px; font-style: italic; } /* Airline IATA badge — deterministic colour from --badge-hue custom prop */ .iata-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; padding: 2px 5px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; background: hsl(var(--badge-hue, 0) 50% 25%); color: hsl(var(--badge-hue, 0) 60% 80%); border: 1px solid hsl(var(--badge-hue, 0) 40% 35%); } html[data-theme="light"] .iata-badge { background: hsl(var(--badge-hue, 0) 55% 92%); color: hsl(var(--badge-hue, 0) 55% 30%); border: 1px solid hsl(var(--badge-hue, 0) 40% 78%); } .departures-empty { padding: 16px; text-align: center; color: var(--fg-muted); font-size: 12px; font-style: italic; display: none; } .departures-empty.visible { display: block; } /* --- Caveat text (shared) --- */ .insider-map-caveat { margin: 12px 0 0; padding: 0 4px; font-size: 11px; line-height: 1.5; color: var(--fg-muted); font-style: italic; } /* --- Mobile adjustments --- */ @media (max-width: 700px) { .flight-info { bottom: 8px; left: 8px; padding: 8px 12px; max-width: 260px; } .flight-info-route { font-size: 14px; } .departures-table { font-size: 11px; } .departures-table th, .departures-table td { padding: 5px 8px; } /* Hide aircraft column on narrow screens */ .dep-aircraft { display: none; } } /* ============================================================================= Manual data pulls (Tile 24) — Infrastructure Chat 28 Apr 2026 Traffic-light list of upcoming + overdue manual ingestion windows. ============================================================================= */ .manual-pulls-list { list-style: none; padding: 0; margin: 0; } .manual-pull-row { display: grid; grid-template-columns: 14px 1fr 1.4fr 1.6fr auto; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--rule, rgba(255,255,255,0.06)); font-size: 13px; line-height: 1.4; } .manual-pull-row:last-child { border-bottom: none; } .manual-pull-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .manual-pull-row.traffic-green .manual-pull-dot { background: #2d6a4f; } .manual-pull-row.traffic-amber .manual-pull-dot { background: #b8860b; } .manual-pull-row.traffic-red .manual-pull-dot { background: #8b2a2a; } .manual-pull-label { font-weight: 500; } .manual-pull-cadence { opacity: 0.7; font-size: 12px; } .manual-pull-due { font-variant-numeric: tabular-nums; opacity: 0.85; } .manual-pull-time { font-variant-numeric: tabular-nums; text-align: right; min-width: 110px; } .manual-pull-row.traffic-red .manual-pull-time { color: #c46060; font-weight: 600; } .manual-pull-meta { grid-column: 2 / -1; font-size: 11px; opacity: 0.6; margin-top: 2px; } .manual-pull-note { font-style: italic; } @media (max-width: 720px) { .manual-pull-row { grid-template-columns: 14px 1fr auto; grid-template-areas: "dot label time" ". cadence cadence" ". due due"; gap: 4px 12px; } .manual-pull-dot { grid-area: dot; } .manual-pull-label { grid-area: label; } .manual-pull-time { grid-area: time; min-width: 0; } .manual-pull-cadence { grid-area: cadence; } .manual-pull-due { grid-area: due; font-size: 12px; } }