/* Light theme. An inline script in always resolves a concrete theme onto (stored preference, else the OS setting), so this needs no duplicate prefers-color-scheme block — the attribute is the single switch. Two structural choices drive the whole palette: 1. The page is a hue-less off-white while text and rules carry a cool cast. A uniformly blue-tinted light theme reads cheap; a uniformly grey one reads dead. Splitting them is what makes it feel considered. 2. Panels are pure white *above* an off-white page, so cards separate by being lighter than their surroundings — the inverse of the dark theme, where panels are lighter than a near-black page. Same relationship, opposite direction. Values are not mechanical inversions of the dark set: saturated colors that read well on near-black wash out on white, so everything darkens here. */ :root[data-theme="light"] { color-scheme: light; --bg: #fafafa; --surface-inset: #eeeff1; --panel: #ffffff; --surface-overlay: #e9eaed; --ink: #21242c; --ink-soft: #434956; --ink-mute: #6c727f; --ink-faint: #8b919c; --hairline-ghost: #ebedef; --hairline: #d5d7dd; --hairline-strong: #b0b5bf; /* Light Monokai: lime, magenta, orange, teal and violet pulled from the classic dark-editor palette, each darkened past its own reference lightness to clear contrast on a light page — same exercise the old emerald/red pair did, just with Monokai's hues instead. */ --gain: #4d7c0f; --gain-soft: #6b8e23; --loss: #c81361; --loss-soft: #d6266f; /* Monokai's cyan, darkened for text/link contrast rather than the desaturated slate this used to be — still restrained, just with hue. */ --accent: #0e7490; --alert: #b5540a; --success: #4d7c0f; --success-strong: #6b8e23; --success-hover: #4d7c0f; --danger: #c81361; --danger-strong: #e0177f; --danger-deep: #7a0f3f; --warning: #b5540a; --warning-soft: #c96a12; --on-accent: #ffffff; --on-success: #ffffff; --on-warning: #ffffff; --on-warning-soft: #422006; --chrome-bg: #ffffff; --field-bg: #ffffff; --field-placeholder: #8b919c; /* Raised surfaces go lighter than the #fafafa page; inset surfaces go darker. This is the pair that inverts between themes. */ --panel-raised: #ffffff; --panel-raised-deep: #f6f7f9; --panel-inset: #f1f2f5; --panel-inset-deep: #e9ebef; --panel-scrim: #eceef1; --chart-surface: #ffffff; --chart-axis-text: #6c727f; --chart-border: #d5d7dd; --grid-line: rgba(33, 36, 44, 0.07); --chart-crosshair: rgba(108, 114, 127, 0.7); --chart-overlay: #6c727f; --chart-ma50: #7c3aed; --chart-level: #8b919c; --chart-band-fallback: #8b919c; --chart-alert: #b5540a; --chart-alert-pending: #c96a12; /* Per-ticker identity, re-picked for the light surface rather than inverted — same reasoning as the rest of this file's palette. Validated against this theme's own gain/loss/accent/warning/ma50, not the dark set's numbers. */ --ticker-1: #009880; --ticker-2: #712f7d; --ticker-3: #0089fc; --ticker-4: #b383c6; } * { box-sizing: border-box; } /* Was a two-tone radial wash here (accent top-left, alert bottom-right). Cut it: charts and panels cover the page edge-to-edge on every screen that matters, so there was rarely enough bare page left to show it. Same two tones now live on .site-bar/.site-rail instead — the one surface every page actually leaves visible. */ body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font); background: var(--bg); color: var(--text); } .site-shell { min-height: 100vh; min-height: 100dvh; padding-top: calc(var(--bar-height) + var(--rail-strip-height)); padding-left: var(--rail-width); box-sizing: border-box; transition: padding-right 0.22s ease; } /* Push page content over for the Ask Scout rail instead of overlaying it — only once there's enough width left over to be worth it (rail + drawer already claim ~33rem at their widest; below this it overlays instead, see indicator_and_scout.css). Reserved unconditionally, same as the left rail's padding-left, since the rail is persistent chrome at this width — --scout-drawer-width itself shrinks to the collapsed value there. Skipped on the homepage: body[data-hide-ask-scout] hides the drawer there too (see indicator_and_scout.css's .site-ai rule) since the hero's own chat already is Scout — reserving width for chrome that never renders left a dead strip on the right of the page. */ @media (min-width: 1080px) { body:not([data-hide-ask-scout]) .site-shell { padding-right: var(--scout-drawer-width); } } /* min-height, not height: a short dashboard (the default 5 tiles) should still fill the screen like the old fixed 2/4-chart layout did, but the grid's content height is now user-controlled (drag/resize/add tiles) and can exceed one viewport. A hard height clipped that overflow instead of growing the page — tiles dragged into the lower rows visually bled past the footer instead of pushing it down. */ .metrics { max-width: var(--shell-max); width: 100%; margin: 0 auto; padding: 0.15rem 0.3rem 0.2rem; display: grid; gap: 0.2rem; min-height: calc(100vh - var(--bar-height) - var(--rail-strip-height)); min-height: calc(100dvh - var(--bar-height) - var(--rail-strip-height)); grid-template-rows: auto minmax(0, 1fr) auto; box-sizing: border-box; } .metrics__header { margin: 0; display: flex; flex-direction: column; gap: 0; position: relative; } .metrics__top { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem 0.65rem; } .metrics__intro { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; } .site-signin { display: inline-flex; align-items: center; padding: 0.22rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-inset); color: var(--text); font-size: 0.72rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none; white-space: nowrap; } .site-signin:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .site-signin--quiet { background: transparent; cursor: pointer; font: inherit; } .site-bar__account { /* No margin-left: auto here — .site-bar__end (indicator_and_scout.css) already right-aligns its contents via justify-content, as part of centering .stock-search between it and .site-bar__start. */ display: inline-flex; align-items: center; gap: 0.4rem; } .site-bar__account > form { margin: 0; display: inline-flex; } .site-bar__theme { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--ink-mute); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .site-bar__theme:hover { color: var(--ink); border-color: var(--hairline); background: var(--surface-overlay); } .site-bar__theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Both glyphs ship in the markup; the active theme picks one. Swapping in CSS keeps the icon correct on the very first paint. */ .site-bar__theme-icon--sun { display: none; } :root[data-theme="light"] .site-bar__theme-icon--moon { display: none; } :root[data-theme="light"] .site-bar__theme-icon--sun { display: inline; } .alerts-page { max-width: 36rem; } .alerts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .alerts-list__group { display: grid; gap: 0.5rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-inset); } .alerts-list__group-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .alerts-list__group-count { flex: 0 0 auto; color: var(--muted); font-size: 0.75rem; font-family: "IBM Plex Mono", ui-monospace, monospace; } .alerts-list__series { min-width: 0; color: var(--text); font-weight: 600; font-size: 0.95rem; text-decoration: none; } a.alerts-list__series:hover { color: var(--accent); } .alerts-list__conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .alerts-list__condition { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.35rem; border-top: 1px solid var(--border); } .alerts-list__condition:first-child { padding-top: 0; border-top: none; } .alerts-list__levels { margin: 0; color: var(--muted); font-size: 0.8rem; font-family: "IBM Plex Mono", ui-monospace, monospace; } .alerts-list__remove { flex: 0 0 auto; padding: 0.35rem 0.65rem; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: 8px; background: transparent; color: var(--danger); font-size: 0.75rem; cursor: pointer; } .alerts-list__remove:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger-strong) 14%, transparent); } .alerts-list__remove-form { margin: 0; } .alerts-page__empty { margin: 0; padding: 0.85rem 0.9rem; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 0.9rem; } .watchlists-page { max-width: 36rem; } /* Signed-in scan view: wider than the guest/auth shell. */ .auth.watchlists-page--wide { width: min(100% - 1.25rem, 64rem); max-width: none; } .watchlists-create { margin: 0 0 1.25rem; } .watchlists-create__row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .watchlists-create__input { flex: 1 1 12rem; min-width: 0; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-inset); color: var(--text); font: inherit; font-size: 0.9rem; } .watchlists-create__input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); } .watchlists-create__submit { padding: 0.65rem 1rem; border: 1px solid var(--success-strong); border-radius: 8px; background: var(--success-strong); color: var(--on-success); font-size: 0.88rem; font-weight: 600; cursor: pointer; } .watchlists-create__submit:hover { background: var(--success-hover); border-color: var(--success-hover); } .watchlists-themes { margin: 0 0 1.25rem; } .watchlists-themes__title { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .watchlists-themes__hint { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.82rem; } .watchlists-themes__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .watchlists-themes__form { margin: 0; } .watchlists-themes__chip { margin: 0; padding: 0.4rem 0.85rem; border: 1px solid var(--hairline, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--ink-soft, var(--text)); font: inherit; font-size: 0.8rem; font-weight: 550; letter-spacing: -0.01em; cursor: pointer; } .watchlists-themes__chip:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline, var(--border))); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); } .watchlists-themes__save-btn { margin: 0; padding: 0; border: none; background: none; color: var(--accent); font: inherit; font-size: 0.76rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .watchlists-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } /* [hidden] alone loses to the class's own `display: grid` in the cascade — toggled by watchlists_panel_controller.js when the last/first card is removed/added without a page reload. */ .watchlists-list[hidden] { display: none; } .watchlists-list__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-inset); } .watchlists-list__item--stack { display: grid; gap: 0.7rem; } .watchlists-rsi { margin: 0 0 1.25rem; padding: 0.85rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-inset-deep); } .watchlists-rsi__title { margin: 0; font-size: 1rem; letter-spacing: -0.02em; } .watchlists-rsi__lead, .watchlists-rsi__meta { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.4; } .watchlists-rsi__form { margin-top: 0.75rem; display: grid; gap: 0.7rem; } .watchlists-rsi__levels { display: flex; flex-wrap: wrap; gap: 0.55rem 0.9rem; } .watchlists-rsi__check { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); font-size: 0.88rem; cursor: pointer; } .watchlists-rsi__submit { justify-self: start; padding: 0.6rem 0.9rem; border: 1px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .watchlists-rsi__submit:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 28%, transparent); } .watchlists-rsi__submit:disabled { opacity: 0.45; cursor: not-allowed; } .watchlists-add-ticker { display: flex; flex-wrap: wrap; gap: 0.45rem; } .watchlists-add-ticker__input { flex: 1 1 7rem; min-width: 0; max-width: 10rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); font-family: var(--mono); font-size: 0.82rem; text-transform: uppercase; } .watchlists-add-ticker__submit { padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .watchlists-add-ticker__submit:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); } .watchlists-tickers__sort { display: flex; justify-content: flex-end; margin: 0 0 0.35rem; } .watchlists-tickers__sort-btn { padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted); font-size: 0.72rem; font-family: var(--mono); cursor: pointer; } .watchlists-tickers__sort-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); } .watchlists-tickers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .watchlists-tickers__item { display: grid; grid-template-columns: 4.25rem 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem 0.65rem; padding: 0.2rem 0; } .watchlists-tickers__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); font-family: var(--mono); font-size: 0.88rem; font-weight: 500; text-decoration: none; } .watchlists-tickers__link:hover { text-decoration: underline; } /* The ticker's identity color — same swatch this symbol gets in the compare picker/chip and on its line if it's ever overlaid on a price chart. A scanning aid across rows and, once you've compared a ticker, a link back to it: not a status signal, so it stays off the gain/loss axis. */ .watchlists-tickers__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; } .watchlists-tickers__spark { display: block; width: 72px; height: 22px; color: var(--gain-soft); } .watchlists-tickers__spark.is-down { color: var(--loss-soft); } .watchlists-tickers__spark--empty { width: 72px; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--border) 55%, transparent); } .watchlists-tickers__stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem; min-width: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); } .watchlists-tickers__price { color: var(--text); font-size: 0.8rem; font-weight: 500; } .watchlists-tickers__sma.is-up { color: var(--gain-soft); } .watchlists-tickers__sma.is-down { color: var(--loss-soft); } .watchlists-tickers__sma-label { color: var(--muted); font-size: 0.68rem; } .watchlists-tickers__alerts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .watchlists-tickers__alert { padding: 0.12rem 0.35rem; border: 1px solid var(--border); border-radius: 4px; background: color-mix(in srgb, var(--panel-inset) 70%, transparent); color: var(--muted); font-size: 0.68rem; font-weight: 500; line-height: 1.2; text-decoration: none; } .watchlists-tickers__alert:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--text); } .watchlists-tickers__alert--price { color: var(--text); } .watchlists-tickers__alert--rsi { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent); } .watchlists-tickers__alert--sma { border-color: color-mix(in srgb, var(--chart-ma50, #a78bfa) 40%, var(--border)); } .watchlists-tickers__alert--move { border-color: color-mix(in srgb, var(--warning, #f59e0b) 40%, var(--border)); } .watchlists-tickers__remove { padding: 0.2rem 0.5rem; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 6px; background: transparent; color: var(--danger); font-size: 0.7rem; cursor: pointer; } .watchlists-tickers__remove-form { margin: 0; } @media (max-width: 560px) { .watchlists-tickers__item { grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-areas: "ticker stats remove" "spark stats remove"; } .watchlists-tickers__link { grid-area: ticker; } .watchlists-tickers__spark, .watchlists-tickers__spark--empty { grid-area: spark; } .watchlists-tickers__stats { grid-area: stats; } .watchlists-tickers__remove-form { grid-area: remove; } } .watchlists-list__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.55rem 0.85rem; } .watchlists-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; flex: 1 1 14rem; } .watchlists-rename__input { flex: 1 1 10rem; min-width: 0; max-width: 18rem; padding: 0.4rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; } .watchlists-rename__input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); } .watchlists-rename__submit { padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .watchlists-rename__submit:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); } .watchlists-list__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.75rem; } .watchlists-list__meta { margin: 0; color: var(--muted); font-size: 0.8rem; font-family: var(--mono); } .watchlists-list__delete { padding: 0.3rem 0.55rem; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 6px; background: transparent; color: var(--danger); font-size: 0.72rem; cursor: pointer; } .watchlists-list__delete:hover { border-color: var(--danger); } .watchlists-list__delete-form { margin: 0; } .watchlists-page--wide .watchlists-tickers__item { grid-template-columns: 5rem 4.5rem minmax(12rem, 1fr) auto; } .watchlists-gate__header { text-align: center; } .watchlists-gate__header .auth__lead { max-width: 28rem; margin-left: auto; margin-right: auto; } .watchlists-gate { display: grid; justify-items: center; gap: 0.65rem; margin: 0 0 1.75rem; } .watchlists-gate__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 0.95rem; font-weight: 600; text-decoration: none; } .watchlists-gate__cta:hover { background: color-mix(in srgb, var(--text) 88%, var(--accent)); } .watchlists-gate__note { margin: 0; color: var(--muted); font-size: 0.8rem; } .watchlists-gate__preview { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, transparent), transparent), var(--panel-scrim); opacity: 0.92; pointer-events: none; user-select: none; } .watchlists-gate__preview-card { border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); overflow: hidden; } .watchlists-gate__preview-top { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; } .watchlists-gate__preview-list { list-style: none; margin: 0; padding: 0; } .watchlists-gate__preview-list li { display: grid; grid-template-columns: 3.5rem 2.5rem 3.2rem 3.6rem 1fr; align-items: center; gap: 0.45rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-family: var(--mono); font-size: 0.78rem; color: var(--muted); } .watchlists-gate__preview-list li:last-child { border-bottom: 0; } .watchlists-gate__preview-list li > span:first-child { color: var(--text); font-weight: 500; } .watchlists-gate__preview-spark { width: 2.5rem; height: 0.55rem; border-radius: 999px; background: linear-gradient(90deg, transparent, currentColor); opacity: 0.85; } .watchlists-gate__preview-list .is-up { color: var(--gain); } .watchlists-gate__preview-list .is-down { color: var(--loss); } .alerts-gate__header { text-align: center; } .alerts-gate__header .auth__lead { max-width: 28rem; margin-left: auto; margin-right: auto; } .alerts-gate { display: grid; justify-items: center; gap: 0.65rem; margin: 0 0 1.75rem; } .alerts-gate__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 0.95rem; font-weight: 600; text-decoration: none; } .alerts-gate__cta:hover { background: color-mix(in srgb, var(--text) 88%, var(--accent)); } .alerts-gate__note { margin: 0; color: var(--muted); font-size: 0.8rem; } .alerts-gate__preview { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, transparent), transparent), var(--panel-scrim); opacity: 0.92; pointer-events: none; user-select: none; } .alerts-gate__preview-card { border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); overflow: hidden; } .alerts-gate__preview-top { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; } .alerts-gate__preview-list { list-style: none; margin: 0; padding: 0; } .alerts-gate__preview-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-family: var(--mono); font-size: 0.78rem; color: var(--muted); } .alerts-gate__preview-list li:last-child { border-bottom: 0; } .alerts-gate__preview-list li > span:first-child { color: var(--text); font-weight: 500; } .metrics__toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem 0.55rem; flex: 0 1 auto; min-width: 0; }