/* ══════════════════════════════════════════════════════════ Cross-browser / mobile base optimizations ══════════════════════════════════════════════════════════ */ /* Smooth text rendering on macOS Safari + Chrome; stop iOS from auto-adjusting text size on orientation change. */ html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent iOS Safari from auto-zooming into form fields on focus. iOS triggers zoom whenever a TEXT input's computed font-size is below 16px. Applied only to text-editable fields (not buttons/ chips/selects where we want compact typography). Font-family inherits so Archivo is preserved. */ input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], textarea { font-size: var(--text-md); font-family: inherit; } /* Remove iOS default gray tap-flash on interactive elements — looks unpolished on modern UIs. Replace with explicit :active states where we want feedback. */ a, button, input, select, textarea, .view-tab, .chart-view-tab, .toggle-chip, .filter-chip, .region-chip, .category-qs-btn, .year-mode-btn, .export-btn, .reset-zoom-btn, .chart-title-btn, .autocomplete-item, .autocomplete-item *, .ac-exclude-btn, .theme-toggle, .legend-item, .legend-mfr-header { -webkit-tap-highlight-color: transparent; } /* touch-action: manipulation removes the iOS 300ms click delay AND disables double-tap-zoom on these interactive elements — critical for our dblclick-to-isolate gestures on chips/tabs, otherwise iOS would zoom the page before our dblclick handler fires. Limited to small interactive surfaces, not applied to the page or chart canvas (which needs pan-y for scroll and our own drag). */ button, .view-tab, .toggle-chip, .filter-chip, .region-chip, .category-qs-btn, .year-mode-btn, .export-btn, .reset-zoom-btn, .chart-title-btn, .autocomplete-item, .ac-exclude-btn, .theme-toggle, .legend-item { touch-action: manipulation; } /* Chart canvas: allow page pan-y (vertical scroll) to pass through, but block the browser's horizontal-pan gesture so our measurement drag gets the horizontal movement. pinch-zoom still works for accessibility. */ #timeChart { touch-action: pan-y pinch-zoom; } /* Build 20260508zzzzzzzq: mobile gesture separation. At mobile widths the JS drag-to-measure is suppressed for touch input (app.js onDown, see the MEASURE_TOUCH_DRAG_MAX_W block) — measurement moves to the two-tap "Measure from here" flow — so the canvas no longer needs to steal the horizontal-pan gesture. Hand it back: `manipulation` restores native panning on BOTH axes and keeps pinch-zoom, while still removing the iOS 300ms delay and double-tap-zoom (which would otherwise fire between the two measure taps). Scoped to coarse+narrow so it mirrors the JS gate exactly: a cursor at ANY width — including a narrow desktop window — keeps `pan-y pinch-zoom` and the drag, unchanged. */ @media (pointer: coarse) and (max-width: 720px) { #timeChart { touch-action: manipulation; } /* Build 20260508zzzzzzzs: make the HOVER tooltip's CTA row tappable on touch. The tooltip itself stays `pointer-events: none` (so taps on its body still reach the bars underneath, as on desktop) — only the button row opts back in. Without this, "Click to expand" is a button-shaped label that falls through to whatever bar sits under the tooltip, selecting the wrong year. Paired with _wireHoverExpandForTouch() in app.js, which forwards the tap to the bar the tooltip is describing; the two are scoped to the SAME coarse+narrow query and must stay in sync. */ .chart-tooltip .v8x-tt-ctas { pointer-events: auto; } /* 2026-10-19: the hover's × (paired with the delegated handler in app.js) — shown and tappable here only */ .chart-tooltip:not(.frozen) .v8x-tt-hclose { display: inline-flex; pointer-events: auto; } /* Build 20260508zzzzzzzt: while a two-tap measure is ARMED, hand the gesture back to the chart so a finger slide drives the bracket instead of panning the page. Scoped to the armed window only — `.measure-armed` is set by primeFrom() and cleared by completeAt()/clear()/onUp(), so ordinary scrolling over the chart keeps `manipulation` (above) the rest of the time. */ #timeChartWrap.measure-armed #timeChart { touch-action: none; } } /* Year slider track + thumbs: disable all touch-action so drag gestures don't fight with page scroll. Specific to these small interactive targets. */ .year-range-slider, .year-range-thumb, .year-range-selected, .year-range-track { touch-action: none; } /* Smooth momentum scrolling on iOS for any scroll containers */ .table-container, .customer-autocomplete { -webkit-overflow-scrolling: touch; } /* iOS / Android sticky-hover fix — on touch-only devices, :hover states persist after tap until the user taps elsewhere, making chips/buttons/tabs appear permanently hovered. This media query block neutralizes hover-scale and hover-brightness effects on devices without fine-pointer hover capability. Our :active styles continue to provide tap feedback. Explicit background-change hovers (for subtle UI cues like autocomplete-item) are left in place — they cause less visual confusion than transform effects. */ @media (hover: none) { /* Transform-based hovers that stick noticeably on touch */ .toggle-chip:hover, .filter-chip:hover, .region-chip:hover, .category-qs-btn:hover, .year-mode-btn:hover:not(.active), .view-tab:hover, .theme-toggle:hover, .chart-title-btn:hover, .tooltip-close:hover, .mp-close:hover, .export-btn:hover, .reset-zoom-btn:hover, .variant-toggle-btn-inline:hover, .filter-bar-toggle:hover, .ac-exclude-btn:hover { /* Reset any hover-applied transforms and filters — let the element's base state show through on touch devices. */ transform: none; filter: none; box-shadow: inherit; } } @font-face { font-family: 'Elza'; src: url('https://use.typekit.net/af/e2bf85/00000000000000007735a17e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Elza'; src: url('https://use.typekit.net/af/9f7ad5/00000000000000007735a182/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Elza'; src: url('https://use.typekit.net/af/d7d16c/00000000000000007735a186/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3') format('woff2'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Elza'; src: url('https://use.typekit.net/af/5765a8/00000000000000007735a18a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('woff2'); font-weight: 700; font-style: normal; } :root { /* TAC Brand Colors */ --tac-blue: #1870ff; --tac-gold: #feab40; /* Semantic — change indicators (measurement tool, deltas) */ --positive: #0a9f3b; --negative: #c6341e; /* Grays */ --gray-light: #BDBDBD; --gray-pale: #E0E0E0; /* UI Colors */ --bg: #FAFAFA; --card: #FFFFFF; --border: #E0E0E0; --text: #212121; --text-muted: #616161; /* Chart colors (used by JS via getComputedStyle) */ --chart-grid: #E0E0E0; --chart-tick: #616161; --chart-label: #333333; --chart-bar-border: rgba(255,255,255,0.9); /* Surface variants */ --surface-hover: #f5f5f5; --surface-selected: #e3f2fd; --surface-dim: #f8f9fa; --surface-inset: #f0f0f0; --border-subtle: #f0f0f0; /* Tooltip — build zzzzzzzzn: light mode now uses the app's FLOATING PANEL language (card surface + hairline border + elevation), matching .measurement-panel instead of the old dark-glass slab. Dark mode keeps its light-glass treatment below. */ --tooltip-bg: rgba(255, 255, 255, 0.98); --tooltip-text: #131313; --tooltip-border: rgba(19, 19, 19, 0.12); --tooltip-tier-bg: rgba(19, 19, 19, 0.035); --tooltip-muted: #5c5c5c; --tooltip-shadow: 0 4px 16px rgba(19,19,19,0.10), 0 1px 3px rgba(19,19,19,0.08); --tooltip-shadow-frozen: 0 10px 32px rgba(19,19,19,0.18), 0 2px 6px rgba(19,19,19,0.10); --tooltip-ring-bg: rgba(254, 171, 64, 0.16); /* CTA inks: raw gold (~1.9:1) and raw blue (~3.7:1) both fail on a white surface — deepen for light, keep brand hues on dark. Mirrors the --v8-accent-segment-ink precedent (light-a11y build). */ --tooltip-ink-gold: #9a5c00; /* release QA F-05 (2026-10-18): 5.4:1 on white, 5.1:1 on the page (#a86400 was 4.5 / 4.3) */ --tooltip-ink-accent: #0059eb; --link-ink: #0059eb; /* release QA F-14 (2026-10-18): small blue TEXT on light — 5.8:1 on white, 5.5:1 on the page (the raw blue reads 4.4 / 4.2) */ /* Warnings / notes */ --warning-bg: #FFF8E1; --warning-text: #F9A825; --warning-note-bg: #fff3cd; --warning-note-text: #856404; /* Export */ --export-bg: #ffffff; --export-title: #1a1a2e; --export-subtitle: #666666; --export-legend-text: #333333; /* Shadow intensity */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 1px 3px rgba(0,0,0,0.08); --shadow-lg: 0 20px 60px rgba(0,0,0,0.3); /* ── Spacing scale (Pass 1 polish) ──────────────────────── Single source of truth for gap / padding / margin. All existing one-off rem values across the file collapse to one of these. 4px base. The hairs (3px/2px) are kept as literals only inside chip internals where the chip's own border-radius rounding constraints make 4px too loose. */ --space-1: 4px; /* hairline gap (chip-color dot ↔ label) */ --space-2: 8px; /* default control-internal gap */ --space-3: 12px; /* between related controls in a row */ --space-4: 16px; /* between unrelated controls / panel padding */ --space-5: 24px; /* between sub-sections inside a panel */ --space-6: 32px; /* between top-level sections */ --space-7: 48px; /* page-level vertical rhythm */ /* Common control padding shorthands — inline for convenience */ --pad-chip: 4px 12px; /* toggle chips, region pills, count badges */ --pad-control: 8px 12px; /* dropdowns, search inputs, segmented controls */ --pad-button: 8px 16px; /* Reset View, Export, primary actions */ --pad-tab: 6px 12px; /* view tabs, breakdown tabs */ --pad-cell: 6px 10px; /* table cells, small grid cells */ --pad-panel: 16px; /* card / panel inner padding */ --pad-section: 24px; /* outer section padding */ /* ── Type scale (Pass 2 polish) ────────────────────────── Single source of truth for font sizes. 32 distinct values existed across the file before this pass; they collapse to these 10 tokens. The scale is roughly 1.15× each step in the body range (sm → base → md), looser at the display end where size differences need to read clearly. Mental map: 2xs / xs metadata, microbadges, hints sm / base default UI text and body copy md / lg section titles, sub-headings xl / 2xl card titles, stat values 3xl / 4xl page-level emphasis, hero count */ --text-2xs: 10px; /* microbadges (ISO codes, role tags) */ --text-xs: 11px; /* hint text, dropdown items, hover labels */ --text-sm: 12px; /* default UI text — chips, controls, table body */ --text-base: 13px; /* comfortable body, comments, prose */ --text-md: 15px; /* sub-headings, large body */ --text-lg: 17px; /* section titles */ --text-xl: 20px; /* card titles, panel headers */ --text-2xl: 24px; /* stat values, modal titles */ --text-3xl: 28px; /* page-level emphasis */ --text-4xl: 48px; /* hero count, the headline number */ /* Standard line-heights — pair with the sizes above */ --leading-tight: 1.15; /* display sizes, tight headlines */ --leading-snug: 1.35; /* UI labels, controls */ --leading-normal: 1.5; /* body copy */ --leading-loose: 1.7; /* tooltip body, prose */ /* Font families — three roles. Body inherits --font-body from the body rule below; UI surfaces use --font-ui. The mono token covers chart-export legend numerals. */ --font-body: 'Elza', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Courier New', ui-monospace, SFMono-Regular, Consolas, monospace; /* ── Corner radii (Pass 3 polish) ──────────────────────── Tokens mapped 1:1 to the existing radius values across the file. The point of this pass is to make corner radii adjustable from one place, NOT to redesign the corner system. If we later want a tighter/looser feel overall, change these tokens centrally. Mental map (and the actual current values): xs 2px micro elements (chip color dot, tight badge) sm 3px small badges, ISO chips, role tags md 4px default — chips, buttons, inputs, dropdowns lg 6px panel headers, secondary surfaces xl 8px cards, the chart container interior surfaces 2xl 12px primary chart container, modals Compound radii (e.g. "0 0 6px 6px" for tab caps) and 50% for circles stay as literals — they're shape decisions, not visual-system choices. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 12px; /* ── Wave D Build 20 (xk, 2026-05-28): V8 semantic theme tokens. One role-named token per V8 surface/border/state. Defined here in :root with LIGHT values, overridden in [data-theme="dark"] (V8 bluer) and [data-theme="dusk"] (V7-gray surfaces). All V8 component CSS pulls from these so the same ruleset paints every theme — only the values swap. Typography is universal (Archivo + the eyebrow/body/muted scale we've established). --v8-accent-x / --v8-accent-segment are the role-meaning colors (blue = "what's on the x-axis", gold = "segment / scope / engaged filter"); they stay constant across all three themes per Jon's Q2 / Q3. -------------------------------------------------------- */ /* Surfaces: container is the section frame (gold-bordered SCOPE + blue-bordered VIEW). control is the pill/chip/button surface nested inside the section. dropdown is the floating menu. */ --v8-surface-section: #FFFFFF; --v8-surface-control: #F4F6F8; --v8-surface-dropdown: #FFFFFF; /* Borders: soft = component edges (alpha-low). strong = active or emphasis edges. */ --v8-border-soft: rgba(15, 23, 42, 0.10); --v8-border-strong: rgba(15, 23, 42, 0.20); /* Text */ --v8-text-primary: #1a1a1a; --v8-text-secondary: #4a4a4a; --v8-text-muted: #6b6b6b; --v8-text-disabled: #a0a0a0; /* Accents (role-meaningful, constant across themes) */ --v8-accent-x: var(--tac-blue); --v8-accent-segment: var(--tac-gold); /* Gold TEXT ink — the raw gold is unreadable on light surfaces (~1.9:1), so gold text uses a darker amber in light mode. Fills, swatches, and borders keep --v8-accent-segment. */ --v8-accent-segment-ink: #9a5c00; /* release QA F-05 (2026-10-18): ≥ 5.1:1 on every light surface (#a86400 read 4.5 on white, 4.3 on #f8f9fa) */ /* States */ --v8-chip-active-bg: var(--tac-blue); --v8-chip-active-text: #FFFFFF; --v8-pill-engaged-bg: rgba(254, 171, 64, 0.12); --v8-pill-engaged-border: rgba(254, 171, 64, 0.55); --v8-control-hover: rgba(0, 0, 0, 0.04); /* Shadows for dropdowns */ --v8-shadow-dropdown: 0 8px 20px rgba(0, 0, 0, 0.10); } /* ── Dark Theme ─────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --tac-blue: #4DA6FF; /* Gold unchanged — hits contrast against dark bg already */ --positive: #2ecc5a; --negative: #e85a42; --gray-light: #555555; --gray-pale: #2A2A2A; --bg: #141414; --card: #1E1E1E; --border: #333333; --text: #E8E8E8; --text-muted: #999999; --chart-grid: #333333; --chart-tick: #999999; --chart-label: #CCCCCC; --chart-bar-border: rgba(0,0,0,0.4); --surface-hover: #2A2A2A; --surface-selected: #1a3a5c; --surface-dim: #1A1A1A; --surface-inset: #252525; --border-subtle: #2A2A2A; --tooltip-bg: rgba(30, 30, 30, 0.95); --tooltip-text: #E8E8E8; --tooltip-border: rgba(255,255,255,0.1); --tooltip-tier-bg: rgba(255,255,255,0.06); --tooltip-muted: rgba(255,255,255,0.7); --tooltip-shadow: 0 4px 16px rgba(0,0,0,0.35); --tooltip-shadow-frozen: 0 4px 20px rgba(0,0,0,0.4); --tooltip-ring-bg: rgba(254, 171, 64, 0.08); --tooltip-ink-gold: var(--tac-gold); --tooltip-ink-accent: var(--tac-blue); --link-ink: var(--tac-blue); --warning-bg: #2A2200; --warning-text: #F9A825; --warning-note-bg: #2A2200; --warning-note-text: #F9A825; --export-bg: #1E1E1E; --export-title: #E8E8E8; --export-subtitle: #999999; --export-legend-text: #CCCCCC; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 20px 60px rgba(0,0,0,0.6); /* xk: V8 bluer dark — the signature V8 default */ --v8-surface-section: #161c24; --v8-surface-control: #0d1117; --v8-surface-dropdown: #161b22; --v8-border-soft: rgba(255, 255, 255, 0.06); --v8-border-strong: rgba(255, 255, 255, 0.10); --v8-text-primary: #eeeeee; --v8-text-secondary: #c3c3c3; --v8-text-muted: #959595; --v8-text-disabled: #5c5c5c; --v8-pill-engaged-bg: rgba(254, 171, 64, 0.06); --v8-pill-engaged-border: rgba(254, 171, 64, 0.30); --v8-accent-segment-ink: var(--tac-gold); --v8-control-hover: rgba(255, 255, 255, 0.04); --v8-shadow-dropdown: 0 8px 20px rgba(0, 0, 0, 0.55); } /* ── Dusk Theme — V7 dark gray flavor poured through V8 components. Same V8 layout, typography, and accent meanings (gold / blue); surfaces use V7's gray ramp (#1E1E1E / #141414) and borders go solid mid-gray instead of alpha-white. xk (2026-05-28). */ [data-theme="dusk"] { color-scheme: dark; --tac-blue: #4DA6FF; --positive: #2ecc5a; --negative: #e85a42; --gray-light: #555555; --gray-pale: #2A2A2A; --bg: #141414; --card: #1E1E1E; --border: #333333; --text: #E8E8E8; --text-muted: #999999; --chart-grid: #333333; --chart-tick: #999999; --chart-label: #CCCCCC; --chart-bar-border: rgba(0,0,0,0.4); --surface-hover: #2A2A2A; --surface-selected: #1a3a5c; --surface-dim: #1A1A1A; --surface-inset: #252525; --border-subtle: #2A2A2A; --tooltip-bg: rgba(30, 30, 30, 0.95); --tooltip-text: #E8E8E8; --tooltip-border: rgba(255,255,255,0.1); --tooltip-tier-bg: rgba(255,255,255,0.06); --tooltip-muted: rgba(255,255,255,0.7); --tooltip-shadow: 0 4px 16px rgba(0,0,0,0.35); --tooltip-shadow-frozen: 0 4px 20px rgba(0,0,0,0.4); --tooltip-ring-bg: rgba(254, 171, 64, 0.08); --tooltip-ink-gold: var(--tac-gold); --tooltip-ink-accent: var(--tac-blue); --link-ink: var(--tac-blue); --warning-bg: #2A2200; --warning-text: #F9A825; --warning-note-bg: #2A2200; --warning-note-text: #F9A825; --export-bg: #1E1E1E; --export-title: #E8E8E8; --export-subtitle: #999999; --export-legend-text: #CCCCCC; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 1px 3px rgba(0,0,0,0.4); --shadow-lg: 0 20px 60px rgba(0,0,0,0.6); /* V8 tokens — V7 gray flavored. Surfaces use V7's #1E1E1E/#141414 card/page ramp; borders go solid #333 instead of alpha-white; text uses V7's slightly cooler tonality. Accents stay vivid. */ --v8-surface-section: #1E1E1E; --v8-surface-control: #141414; --v8-surface-dropdown: #1E1E1E; --v8-border-soft: #2A2A2A; --v8-border-strong: #333333; --v8-text-primary: #E8E8E8; --v8-text-secondary: #CCCCCC; --v8-text-muted: #999999; --v8-text-disabled: #555555; --v8-pill-engaged-bg: rgba(254, 171, 64, 0.08); --v8-pill-engaged-border: rgba(254, 171, 64, 0.35); --v8-accent-segment-ink: var(--tac-gold); --v8-control-hover: rgba(255, 255, 255, 0.05); --v8-shadow-dropdown: 0 8px 20px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); /* 100dvh (dynamic viewport height) accounts for mobile browser chrome (address bar showing/hiding) so the page doesn't initially render taller than the visible area. Falls back to 100vh on browsers without dvh support. */ min-height: 100vh; min-height: 100dvh; /* Safe-area insets: respect iOS notches and home indicators. max() ensures we never go below our design padding. */ padding: var(--space-5); padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } /* ══════════════════════════════════════════════════════════════════ Page header — editorial masthead with split layout. Left: gold-bulleted eyebrow + title. Right: year range as prominent numeric with "Coverage" caption. All colors use theme variables so dark mode adapts automatically. ══════════════════════════════════════════════════════════════════ */ .header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); /* 14px = the space above the headline ticker, matched to the scoreboard → chart gap (.v8-tallies margin-bottom). */ margin-bottom: 14px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .header-left { min-width: 0; /* allow flex child to shrink */ flex: 1; } .header-eyebrow { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); line-height: 1; } .header-eyebrow .eyebrow-sep { color: var(--gray-light); font-weight: 400; margin: 0 var(--space-2); } /* Brand word+logo mark replaces the gold dot + "The Air Current" text (same source images as the chart branding; light for light themes, white for dark/dusk). "/ Aviation Data" is enlarged to sit at the wordmark's cap height. */ .header-eyebrow .eyebrow-logo { display: inline-flex; align-items: center; } .header-eyebrow .eyebrow-logo img { height: 19px; width: auto; } /* Display is owned by the theme toggle only — do NOT set display on the img rule above, or its higher specificity (…img) would defeat the .logo-dark{display:none} default and show both marks in light theme. */ .header-eyebrow .logo-light { display: block; } .header-eyebrow .logo-dark { display: none; } [data-theme="dark"] .header-eyebrow .logo-light, [data-theme="dusk"] .header-eyebrow .logo-light { display: none; } [data-theme="dark"] .header-eyebrow .logo-dark, [data-theme="dusk"] .header-eyebrow .logo-dark { display: block; } .header-eyebrow .eyebrow-sep, .header-eyebrow .eyebrow-aviation { font-size: 15px; } .header h1 { font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: 700; margin: 0; color: var(--text); letter-spacing: -0.016em; line-height: 1.1; } /* ── Live headline ticker — The Air Current RSS ───────────────────── Sits below the header rule, above the stats grid. Rotating headline (single line, ellipsis on overflow) links to its article; gold Subscribe button pinned right. Revealed by JS once the feed loads. */ .tac-ticker { display: flex; align-items: center; gap: var(--space-4); /* 14px below (top gap comes from .header margin-bottom) = the scoreboard → chart gap, so the ticker sits in matching rhythm. */ margin: 0 0 14px; padding: var(--space-3) var(--space-4); /* The V8 section surface — the same tokens the chart container paints with in V8 mode (xk/xm precedent above the .chart-container rule): white in light, V7 gray #1E1E1E in dusk, the bluer #161c24 in dark. Jon 2026-10-09: the strip must follow the page's body surface in the bluer theme, where --card stays V7 gray. Radius and elevation follow the scoreboard cards. (Was --surface-dim with a smaller radius and no shadow — a different, dimmer tile.) */ background: var(--v8-surface-section); border: 1px solid var(--v8-border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); min-width: 0; opacity: 0; transition: opacity 0.4s ease; } .tac-ticker.tac-ticker-in { opacity: 1; } .tac-ticker[hidden] { display: none; } .tac-ticker-brand { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; } .tac-ticker-brand:hover { color: var(--text); } .tac-ticker-live { width: 7px; height: 7px; border-radius: 50%; background: var(--tac-gold); flex-shrink: 0; animation: tac-ticker-pulse 2.4s ease-out infinite; } @keyframes tac-ticker-pulse { 0% { box-shadow: 0 0 0 0 rgba(254,171,64,0.55); } 70% { box-shadow: 0 0 0 6px rgba(254,171,64,0); } 100% { box-shadow: 0 0 0 0 rgba(254,171,64,0); } } .tac-ticker-headline { flex: 1 1 auto; min-width: 0; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease, color 0.15s ease; } .tac-ticker-headline:hover { color: var(--tac-blue); } .tac-ticker-headline.tac-fade { opacity: 0; } .tac-subscribe-btn { flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; color: #1a1206; /* dark ink on gold — AA contrast */ background: var(--tac-gold); padding: var(--pad-button); border-radius: var(--radius-md); text-decoration: none; white-space: nowrap; transition: filter 0.15s ease, transform 0.05s ease; } .tac-subscribe-btn:hover { filter: brightness(1.06); } .tac-subscribe-btn:active { transform: translateY(1px); } @media (max-width: 520px) { .tac-ticker { gap: var(--space-3); padding: var(--space-2) var(--space-3); } .tac-ticker-brand-txt { display: none; } /* keep the pulse dot, drop the word */ .tac-ticker-headline { font-size: var(--text-sm); } .tac-subscribe-btn { font-size: var(--text-xs); padding: var(--pad-tab); } } @media (prefers-reduced-motion: reduce) { .tac-ticker-live { animation: none; } .tac-ticker, .tac-ticker-headline { transition: none; } } /* Theme toggle */ /* Wave D Build 19 (xj, 2026-05-27): 3-state segmented theme control. Light · Legacy · Dark. Active segment fills with TAC blue; inactive segments are transparent with muted icon. Sized to fit the same fixed top-right slot the single button occupied; ~108px wide so three 34px segments + container padding fit. */ .theme-toggle { position: fixed; top: 1rem; right: 1.5rem; z-index: 500; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2px; display: inline-flex; align-items: center; gap: 1px; box-shadow: var(--shadow-sm); transition: border-color 0.2s, background 0.2s; } .theme-toggle:hover { border-color: var(--tac-blue); } .theme-toggle .theme-opt { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: calc(var(--radius-xl) - 4px); cursor: pointer; font-size: 14px; line-height: 1; color: var(--text-muted); opacity: 0.55; transition: background 150ms, opacity 150ms, color 150ms; padding: 0; } .theme-toggle .theme-opt:hover { opacity: 0.85; } .theme-toggle .theme-opt.active { background: var(--tac-blue); opacity: 1; color: white; /* The emoji glyphs render in their own colors regardless of `color:`, so the active fill behind them is what carries the selection signal. */ } .theme-toggle .theme-opt:focus-visible { outline: 2px solid var(--tac-blue); outline-offset: 2px; } /* Wave D Build 22 (xm, 2026-05-28): Logo swap must fire for BOTH dark moon modes (V8 bluer dark + V7 gray dusk). Pre-xm only [data-theme="dark"] flipped to the white-text logo; dusk fell back to the default black-text logo on a dark surface, which rendered as invisible. Both moon states now use logo-dark (the white-text TAC mark). */ .chart-branding .logo-dark { display: none; } [data-theme="dark"] .chart-branding .logo-light, [data-theme="dusk"] .chart-branding .logo-light { display: none; } [data-theme="dark"] .chart-branding .logo-dark, [data-theme="dusk"] .chart-branding .logo-dark { display: inline-block; } .controls { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); align-items: center; justify-content: center; } .control-group { display: flex; align-items: center; gap: var(--space-2); } .control-group label { color: var(--text-muted); font-size: var(--text-sm); font-family: var(--font-ui); } .control-group-row { display: flex; align-items: center; gap: var(--space-2); } /* ── Control Tier System ─────────────────────────────────── */ /* Tier 1 "Compact": chips, tabs, toggle btns, action btns */ /* height ~28px — padding 0.3rem 0.6rem — font 0.75rem */ /* Tier 2 "Standard": primary selects, text inputs */ /* height ~32px — padding 0.4rem 0.75rem — font 0.85rem */ /* All interactive controls use Archivo for visual unity */ select, input[type="range"] { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-base); font-family: var(--font-ui); } select:focus, input:focus { outline: none; border-color: var(--tac-blue); } /* Compact select variant for secondary rows */ select.select-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-md); } input[type="text"], input[type="search"] { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-base); font-family: var(--font-ui); /* Strip Safari's default search-input styling (rounded, gradient, no border) so type="search" inputs match type="text" appearance. The native clear-X that shows when the field has content remains visible. */ -webkit-appearance: none; appearance: none; } input[type="text"]:focus, input[type="search"]:focus { outline: none; border-color: var(--tac-blue); } /* Hide WebKit's results decoration but keep the clear button visible */ input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Hide native search clear-X — we use our own custom .customer-search-clear button so the visual treatment is consistent across all input types and browsers. WebKit/Safari/Chrome all render slightly different X icons natively, which would clash with our design language. */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-4); text-align: center; box-shadow: var(--shadow-sm); } .stat-card .value { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-1); color: var(--text); } .stat-card .label { font-family: var(--font-ui); color: var(--text-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.5px; } .chart-container { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--shadow-md); position: relative; } /* The chart container reserves space at the top for the view-tabs that visually overlap it (positioned absolute, bottom: calc(100%-1px)). Originally used :has(.view-tabs) — switched to unconditional margin since every chart-container in this app does contain view-tabs, and this avoids :has() compatibility gaps on older Safari < 15.4 and Firefox < 121. The redundant rule below targets browsers that DO support :has() and is harmless elsewhere. */ .chart-container { margin-top: var(--space-6); } .chart-container:has(.view-tabs) { margin-top: var(--space-6); } .chart-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } /* V8.1 #4: subhead is its own line below the title group; its edit/reset pencils sit at the END of the line (hover-revealed, like the title's). */ .chart-subhead-row { display: flex; align-items: center; gap: var(--space-1); min-width: 0; } .chart-subhead { font-size: 0.82rem; font-weight: 400; line-height: 1.4; color: var(--text-muted); } .chart-subhead-row .chart-title-btn { font-size: var(--text-sm); padding: 2px var(--space-1); } .chart-subhead-row:hover .chart-title-btn { opacity: 0.7; } .data-availability-note { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-muted); background: var(--bg); border-left: 2px solid var(--tac-gold); border-radius: var(--radius-xs); line-height: 1.4; font-style: italic; } .chart-header h2 { font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: 600; } .chart-title-group { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .chart-title-group h2 #chartTitle { cursor: default; } .chart-title-actions { display: flex; gap: var(--space-1); flex-shrink: 0; } .chart-title-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: var(--text-base); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); line-height: 1; opacity: 0.35; transition: opacity 0.15s, background 0.15s, border-color 0.15s; } .chart-title-group:hover .chart-title-btn, .chart-title-btn.visible { opacity: 0.7; } .chart-title-btn:hover { opacity: 1; background: var(--surface-inset); border-color: var(--border); color: var(--text); } .chart-title-reset { color: var(--tac-blue); } /* V8.1 #4: tiny text labels on the title/subhead action buttons — "sub" distinguishes the subhead pencil; "reset" names the restore-default buttons. Scope words gold (=scope), overlay ref italic. */ .chart-title-btn .csb-lbl { font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; margin-left: 2px; vertical-align: 0.1em; opacity: 0.85; } /* A reset with an active override is a real affordance, not hover chrome — keep it clearly legible until clicked. */ .chart-title-reset.visible { opacity: 0.85; } #periodTotal .subhead-scope { color: var(--tac-gold); } #periodTotal .subhead-ref { color: var(--text-muted); font-style: italic; } /* Controls Row Layout */ .controls-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; flex-wrap: wrap; } .controls-row-secondary { background: var(--gray-pale); margin: 0 -1.5rem; padding: var(--space-2) var(--space-5); border-top: 1px solid var(--border); } .controls-row-label { font-size: var(--text-sm); font-weight: 600; font-family: var(--font-ui); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-right: var(--space-3); } .controls-section { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; } .controls-actions { align-items: center; gap: var(--space-2); } .view-tabs { position: absolute; bottom: calc(100% - 1px); left: 1.5rem; right: 1.5rem; display: flex; gap: 0; background: transparent; padding: 0; border-radius: 0; z-index: 2; /* Chart-view-toggle sits at the LEFT (Manufacturers/Customers). The chart-type tabs (Stacked toggle + Area/Bars/Lines/Share %/ Compare) cluster to the RIGHT, separated by a flex spacer so the two groups visually + spatially distinguish their roles. */ justify-content: flex-start; align-items: flex-end; } .view-tabs .chart-view-toggle { /* No special positioning — first child, naturally left-aligned. */ } .view-tabs .view-tabs-spacer { flex: 1 1 auto; min-width: 1.5rem; } .view-tab, .chart-view-tab { font-family: var(--font-ui); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-bottom: none; background: var(--card); color: var(--text-muted); cursor: pointer; border-radius: 8px 8px 0 0; font-size: var(--text-sm); font-weight: 500; transition: color 0.15s, background 0.15s; margin-left: -1px; position: relative; } .view-tab:first-child, .chart-view-tab:first-child { margin-left: 0; } .view-tab:hover, .chart-view-tab:hover { color: var(--text); background: var(--surface-inset); } .view-tab.active, .chart-view-tab.active { color: var(--text); font-weight: 600; background: var(--card); z-index: 1; box-shadow: none; } /* ── Bar layout sub-toggle (shown only when Bars view is active) ─── A pair of pill buttons that switches between stacked vertical bars and side-by-side grouped bars. Universal across all Group By breakdowns. Sits to the LEFT of the main 5 tabs so the main tab positions don't shift when this toggle appears/disappears. */ .bar-layout-toggle { display: none; /* hidden by default; .visible class toggles in JS */ align-items: center; gap: var(--space-1); margin-right: var(--space-2); padding-right: var(--space-2); } .bar-layout-toggle.visible { display: inline-flex; } .bar-layout-divider { width: 1px; height: 1.1rem; background: var(--border); margin-left: var(--space-2); } /* ── Chart View toggle (Manufacturers / Customers) ───────────────── Top-level dichotomy at the left of the chart-tab row, separated from the Bars/Stacked/Lines tabs by a vertical divider. Always visible — unlike bar-layout-toggle which only appears in Bars view. Tabs themselves use the existing .view-tab styling so they look identical to the chart-type tabs (per design spec — same pill style, opposite position). The .chart-view-tab class is reserved for future style differentiation if we want to bump prominence later. */ .chart-view-toggle { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-2); padding-right: var(--space-2); } .chart-view-divider { /* Visually unused now — the flex spacer between chart-view-toggle and the chart-type tabs provides the separation. Keeping the element in markup so we can re-enable later if needed. */ display: none; } .bar-layout-btn { font-family: var(--font-ui); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); background: var(--card); color: var(--text-muted); cursor: pointer; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 500; transition: color 0.15s, background 0.15s, border-color 0.15s; min-height: 28px; } .bar-layout-btn:hover { color: var(--text); background: var(--surface-inset); } .bar-layout-btn.active { color: #ffffff; background: var(--tac-blue); border-color: var(--tac-blue); font-weight: 600; } .chart-wrap { position: relative; height: 520px; cursor: pointer; } .chart-branding { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; flex-wrap: wrap; gap: var(--space-2); } .chart-branding a { display: flex; align-items: center; opacity: 0.7; transition: opacity 0.2s; } .chart-branding a:hover { opacity: 1; } .chart-branding img { width: 210px; height: auto; display: block; } /* External chart tooltip */ .chart-tooltip { position: absolute; background: var(--tooltip-bg); border: 1px solid var(--tooltip-border); box-shadow: var(--tooltip-shadow); border-radius: var(--radius-lg); color: var(--tooltip-text); font-size: var(--text-base); padding: 0; pointer-events: none; transform: translate(-50%, -100%); transition: opacity 0.15s ease; z-index: 100; min-width: 180px; max-width: 300px; margin-top: -10px; } .chart-tooltip.frozen { pointer-events: auto; box-shadow: var(--tooltip-shadow-frozen); } /* ───── Measurement tool (drag across bars to see % change) ───── */ /* Subtle translucent gold shade spanning the measured region. Sits below everything else so chart bars remain fully readable. */ .measurement-region { position: absolute; background: rgba(254, 171, 64, 0.07); border-left: 1px dashed rgba(254, 171, 64, 0.35); border-right: 1px dashed rgba(254, 171, 64, 0.35); pointer-events: none; z-index: 6; } /* Endpoint highlights — short gold caps at the top of each endpoint bar, visually integrated with the bracket stems. */ .measurement-endpoint { position: absolute; background: rgba(254, 171, 64, 0.22); border: 2px solid var(--tac-gold); border-radius: var(--radius-xs); pointer-events: none; z-index: 8; box-sizing: border-box; } /* Two-tap measure: the lone armed anchor pulses to invite the second tap. */ .measurement-endpoint.measurement-primed { background: rgba(254, 171, 64, 0.32); z-index: 9; animation: mp-primed-pulse 1.1s ease-in-out infinite; } @keyframes mp-primed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .measurement-endpoint.measurement-primed { animation: none; } } /* "Measuring from