/* ============================================================================ chart-tooltip.css — pro custom tooltip for Portfolio Performance + Individual Stock charts. Treemap-tooltip aesthetic, theme-aware, mobile-responsive. Single floating element appended to ; positioning is handled in js/charts/chartTooltip.js. 2026-05-08 build. ============================================================================ */ .fl-tt { position: absolute; top: 0; left: 0; z-index: 99998; min-width: 240px; max-width: 360px; padding: 12px 14px; background: #ffffff; border: 1px solid #e8e6e1; border-radius: 12px; box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.18), 0 4px 8px -2px rgba(15, 23, 42, 0.08); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; color: #1e293b; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease; /* Will be promoted into its own layer for smooth follow */ will-change: transform; } .fl-tt.fl-tt-visible { opacity: 1; visibility: visible; } /* --- Header --------------------------------------------------------- */ .fl-tt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .fl-tt-date { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; font-variant-numeric: tabular-nums; } .fl-tt-day { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; } .fl-tt-sub { font-size: 10.5px; font-weight: 500; color: #94a3b8; letter-spacing: 0.02em; margin-bottom: 10px; font-variant-numeric: tabular-nums; } /* Trade banner — buy/sell event annotation between header and subtitle. Surfaces "Bought 50 sh @ $24.50" prominently on event-day hovers. */ .fl-tt-trade { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin: 4px 0 6px; padding: 6px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; } .fl-tt-trade-buy { background: rgba(34, 197, 94, 0.10); color: #16a34a; } .fl-tt-trade-sell { background: rgba(239, 68, 68, 0.10); color: #dc2626; } .fl-tt-trade-arrow { font-size: 12px; font-weight: 700; line-height: 1; } .fl-tt-trade-verb { font-weight: 700; letter-spacing: -0.005em; } .fl-tt-trade-shares { font-weight: 600; } .fl-tt-trade-sep { opacity: 0.55; font-weight: 400; font-size: 10.5px; } .fl-tt-trade-price { font-weight: 700; } .fl-tt-trade-amt { margin-left: auto; font-weight: 600; opacity: 0.82; } @media (max-width: 380px) { .fl-tt-trade { font-size: 11px; padding: 5px 8px; gap: 4px; } .fl-tt-trade-amt { display: none; } } /* Optional pill in header (used by Individual Stock for ticker chip) */ .fl-tt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: rgba(59, 130, 246, 0.10); color: #2563eb; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* --- Rows ----------------------------------------------------------- */ .fl-tt-rows { display: flex; flex-direction: column; gap: 6px; } .fl-tt-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 0 10px; } .fl-tt-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .fl-tt-dot.fl-tt-dot-dashed { background: repeating-linear-gradient( 90deg, var(--dot-color, #94a3b8) 0, var(--dot-color, #94a3b8) 3px, transparent 3px, transparent 5px ); background-color: transparent; } .fl-tt-label { font-size: 11.5px; font-weight: 600; color: #1e293b; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-tt-label-sub { display: block; font-size: 10px; font-weight: 500; color: #94a3b8; margin-top: 1px; letter-spacing: 0.01em; text-transform: none; } .fl-tt-val { font-size: 12px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; text-align: right; letter-spacing: -0.01em; } .fl-tt-val-meta { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; font-size: 10px; font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .fl-tt-meta-sep { color: #cbd5e1; font-weight: 400; letter-spacing: 0; opacity: 0.7; } body.dark-mode .fl-tt-meta-sep, .fl-tt.fl-tt-dark .fl-tt-meta-sep { color: #475569; } .fl-tt-meta-total, .fl-tt-meta-yr { font-variant-numeric: tabular-nums; } /* Slightly de-emphasize annualized so total reads as primary at a glance */ .fl-tt-meta-yr { opacity: 0.85; } /* "Total · Annualized" mini-legend above rows */ .fl-tt-legend { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 0 10px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px dashed transparent; } .fl-tt-legend-meta { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; text-align: right; } body.dark-mode .fl-tt-legend-meta, .fl-tt.fl-tt-dark .fl-tt-legend-meta { color: #64748b; } .fl-tt-pos { color: #16a34a; } .fl-tt-neg { color: #dc2626; } .fl-tt-flat { color: #94a3b8; } /* ─── Headline + Baseline row variants — Individual Stock chart ───── The tooltip reads top→bottom answering the user's questions in priority order: "how much did I make?" (Profit, headline) → "which line is where right now?" (value rows, sorted by chart Y) → "where's break-even?" (Net Invested, baseline). Visual weight scales with importance: headline gets bigger value font + hairline separator below; baseline gets muted italic label + hairline above. ───────────────────────────────────────────────────────────────── */ .fl-tt-row--headline { padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 4px; } .fl-tt-row--headline .fl-tt-label { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; } .fl-tt-row--headline .fl-tt-val { font-size: 14px; font-weight: 800; letter-spacing: -0.015em; } .fl-tt-row--headline .fl-tt-val-meta { font-size: 10.5px; font-weight: 700; } .fl-tt-row--baseline { padding-top: 6px; border-top: 1px dashed #e2e8f0; margin-top: 4px; opacity: 0.78; } .fl-tt-row--baseline .fl-tt-label { font-style: italic; font-weight: 500; font-size: 11px; color: #64748b; } .fl-tt-row--baseline .fl-tt-label-sub { font-style: normal; font-size: 9.5px; } .fl-tt-row--baseline .fl-tt-val { font-size: 11px; font-weight: 600; color: #475569; } /* Dark mode — same visual contract, dark surface */ body.dark-mode .fl-tt-row--headline, .fl-tt.fl-tt-dark .fl-tt-row--headline { border-bottom-color: rgba(176, 200, 244, 0.08); } body.dark-mode .fl-tt-row--baseline, .fl-tt.fl-tt-dark .fl-tt-row--baseline { border-top-color: rgba(176, 200, 244, 0.08); } body.dark-mode .fl-tt-row--baseline .fl-tt-label, .fl-tt.fl-tt-dark .fl-tt-row--baseline .fl-tt-label { color: #94a3b8; } body.dark-mode .fl-tt-row--baseline .fl-tt-val, .fl-tt.fl-tt-dark .fl-tt-row--baseline .fl-tt-val { color: #cbd5e1; } /* --- Footer (vs benchmark callouts — supports multi-row) ----------- */ .fl-tt-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 500; color: #64748b; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .fl-tt-foot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .fl-tt-foot-label { flex-shrink: 0; } /* Headline row: label + big value + short tag, allowed to wrap so a long compare string can never spill outside the 360px box (/watch-video 2026-05-19 — "it's outside of the actual hover tooltip"). */ .fl-tt-foot-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; } .fl-tt-foot-tag { font-size: 10px; font-weight: 500; opacity: 0.85; white-space: normal; } /* Secondary detail line — its own full-width row, free to wrap. */ .fl-tt-foot-sub { display: block; width: 100%; margin-top: 2px; font-size: 10px; font-weight: 500; opacity: 0.7; line-height: 1.4; white-space: normal; } /* Legacy meta (kept for any other caller) — wrap instead of overflow. */ .fl-tt-foot-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: normal; } .fl-tt-foot-strong { font-weight: 700; font-variant-numeric: tabular-nums; } /* --- Mobile (≤ 640px) ----------------------------------------------- */ @media (max-width: 640px) { .fl-tt { min-width: 200px; max-width: calc(100vw - 24px); padding: 10px 12px; font-size: 11.5px; border-radius: 10px; } .fl-tt-date { font-size: 12px; } .fl-tt-day { font-size: 10px; } .fl-tt-sub { font-size: 10px; margin-bottom: 8px; } .fl-tt-rows { gap: 5px; } .fl-tt-label { font-size: 11px; } .fl-tt-label-sub { font-size: 9.5px; } .fl-tt-val { font-size: 11.5px; } .fl-tt-val-meta { font-size: 9.5px; } .fl-tt-foot { font-size: 10px; } } /* --- Tighter mobile (≤ 380px) for very small phones ----------------- */ @media (max-width: 380px) { .fl-tt { min-width: 180px; padding: 8px 10px; } /* Hide secondary value meta on tightest screens to keep one-line rows */ .fl-tt-val-meta { display: none; } .fl-tt-label-sub { display: none; } } /* ============================================================================ Dark mode ============================================================================ */ body.dark-mode .fl-tt, .fl-tt.fl-tt-dark { background: rgba(15, 23, 42, 0.97); border-color: rgba(176, 200, 244, 0.08); color: #f1f5f9; box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.dark-mode .fl-tt-date, .fl-tt.fl-tt-dark .fl-tt-date { color: #f8fafc; } body.dark-mode .fl-tt-day, .fl-tt.fl-tt-dark .fl-tt-day { color: #94a3b8; } body.dark-mode .fl-tt-sub, .fl-tt.fl-tt-dark .fl-tt-sub { color: #64748b; } body.dark-mode .fl-tt-chip, .fl-tt.fl-tt-dark .fl-tt-chip { background: rgba(96, 165, 250, 0.16); color: #93c5fd; } body.dark-mode .fl-tt-label, .fl-tt.fl-tt-dark .fl-tt-label { color: #e2e8f0; } body.dark-mode .fl-tt-label-sub, .fl-tt.fl-tt-dark .fl-tt-label-sub { color: #64748b; } body.dark-mode .fl-tt-val, .fl-tt.fl-tt-dark .fl-tt-val { color: #f8fafc; } body.dark-mode .fl-tt-pos, .fl-tt.fl-tt-dark .fl-tt-pos { color: #4ade80; } body.dark-mode .fl-tt-neg, .fl-tt.fl-tt-dark .fl-tt-neg { color: #f87171; } body.dark-mode .fl-tt-flat, .fl-tt.fl-tt-dark .fl-tt-flat { color: #64748b; } body.dark-mode .fl-tt-foot, .fl-tt.fl-tt-dark .fl-tt-foot { border-top-color: rgba(176, 200, 244, 0.06); color: #94a3b8; } /* Trade banner — dark mode */ body.dark-mode .fl-tt-trade-buy, .fl-tt.fl-tt-dark .fl-tt-trade-buy { background: rgba(34, 197, 94, 0.16); color: #4ade80; } body.dark-mode .fl-tt-trade-sell, .fl-tt.fl-tt-dark .fl-tt-trade-sell { background: rgba(239, 68, 68, 0.16); color: #f87171; }