:root { --bg: #07090f; --bg-2: #0b0f18; --panel: rgba(18, 24, 36, 0.72); --panel-solid: #111826; --panel-border: rgba(84, 110, 145, 0.22); --panel-border-hi: rgba(124, 158, 202, 0.38); --text: #e6edf6; --muted: #8598b0; --accent: #39d98a; --accent-2: #7c6cff; --bull: #39d98a; --bear: #ff5d55; --neutral: #e5b84a; /* secondary text tints — softer than --text, brighter than --muted */ --text-soft: #c3d0e0; --text-warm: #e8dcc0; --text-bear-soft: #f0d5d3; --text-bull-soft: #cfe9dc; /* surfaces sunk below the panel level: inputs, code chips, floating dropdowns */ --surface-sunken: #0a0d15; --surface-tint: rgba(255, 255, 255, 0.02); --input-bg: rgba(10, 15, 24, 0.8); --surface-dropdown: rgba(13, 18, 28, 0.97); --surface-btn: rgba(30, 42, 60, 0.8); --code-bg: rgba(10, 15, 24, 0.7); --topbar-bg: rgba(7, 9, 15, 0.82); --scrollbar-thumb: rgba(84, 110, 145, 0.35); /* Chart.js reads this at canvas-render time via getComputedStyle — see cssVar()/chartGridColor() in app.js */ --chart-grid: rgba(133, 152, 176, 0.14); /* tooltips are always a dark chip regardless of theme, so they don't flip colors on top of whatever's underneath — keep these two unthemed */ --tooltip-bg: #0d1420; --tooltip-fg: #e6edf6; --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "Space Grotesk", var(--sans); --radius: 12px; color-scheme: dark; } /* ---------- light theme ---------- Toggled by setting data-theme="light" on (see app.js applyTheme()). Only the palette changes; every component below reads these custom properties rather than literal colors, so light mode falls out of this one block instead of a second copy of every rule. */ :root[data-theme="light"] { --bg: #f2f4f8; --bg-2: #e8ecf3; --panel: rgba(255, 255, 255, 0.82); --panel-solid: #ffffff; --panel-border: rgba(15, 23, 42, 0.12); --panel-border-hi: rgba(15, 23, 42, 0.26); --text: #101826; --muted: #55637a; --accent: #0e9d61; --accent-2: #6355e0; --bull: #148a5a; --bear: #c8352c; --neutral: #96690a; --text-soft: #2f3f56; --text-warm: #6b5424; --text-bear-soft: #7a2621; --text-bull-soft: #0f5e3d; --surface-sunken: #eef1f6; --surface-tint: rgba(15, 23, 42, 0.03); --input-bg: #ffffff; --surface-dropdown: #ffffff; --surface-btn: #eef1f6; --code-bg: rgba(15, 23, 42, 0.055); --topbar-bg: rgba(255, 255, 255, 0.82); --scrollbar-thumb: rgba(15, 23, 42, 0.2); --chart-grid: rgba(15, 23, 42, 0.1); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.55; min-height: 100vh; transition: background-color 0.15s ease, color 0.15s ease; } /* ambient aurora background */ .aurora { position: fixed; inset: 0; z-index: -1; background: radial-gradient(52rem 30rem at 12% -6%, rgba(124, 108, 255, 0.14), transparent 60%), radial-gradient(46rem 28rem at 88% 4%, rgba(57, 217, 138, 0.10), transparent 60%), radial-gradient(40rem 30rem at 50% 110%, rgba(45, 122, 255, 0.08), transparent 60%), var(--bg); } .view[hidden] { display: none; } .tab-panel[hidden] { display: none; } /* ---------- shared bits ---------- */ .glass { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .brand { font-family: var(--display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.55rem; letter-spacing: 0.01em; } .brand-mark { font-family: var(--mono); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #05130c; padding: 0.14rem 0.45rem; border-radius: 7px; font-weight: 700; } .btn { padding: 0.6rem 1.1rem; border-radius: 9px; border: 1px solid var(--panel-border); background: var(--surface-btn); color: var(--text); cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 500; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .btn:hover:not(:disabled) { border-color: var(--panel-border-hi); transform: translateY(-1px); } .btn--primary { background: linear-gradient(135deg, var(--accent), #2bb877); color: #04120b; font-weight: 700; border: none; box-shadow: 0 4px 18px rgba(57, 217, 138, 0.25); } .btn--primary:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(57, 217, 138, 0.4); } .btn--ghost { background: transparent; } .btn--full { width: 100%; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .field { display: block; margin-bottom: 0.85rem; } .field-row { display: flex; gap: 0.7rem; } .field-row .field { flex: 1; } .field-row[hidden] { display: none; } .field > span { display: block; font-size: 0.74rem; color: var(--muted); margin-bottom: 0.32rem; text-transform: uppercase; letter-spacing: 0.07em; } .field input, .field select, .field textarea { width: 100%; padding: 0.6rem 0.7rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 9px; color: var(--text); font-family: var(--mono); font-size: 0.9rem; transition: border-color 0.12s ease; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .form-error { color: var(--bear); font-size: 0.85rem; } .hint { color: var(--muted); font-size: 0.8rem; margin: 0.4rem 0 0; } .credit-limit-banner { border: 1px solid rgba(255,93,85,0.35); background: rgba(255,93,85,0.08); border-radius: 12px; padding: 0.9rem 1rem; max-width: 480px; } .credit-limit-banner .clb-message { margin: 0 0 0.7rem; font-size: 0.88rem; color: var(--text); } .credit-limit-banner .clb-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .credit-limit-banner .clb-timer { font-size: 0.8rem; color: var(--muted); } .credit-limit-banner .clb-countdown { font-family: var(--mono); color: var(--text); } .pulse { animation: pulse 1.4s ease-in-out infinite; color: var(--muted); } @keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .error-text { color: var(--bear); } /* ---------- topbar (utility bar only — nav lives in the sidebar) ---------- */ .topbar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: 0.85rem 1.6rem; border-bottom: 1px solid var(--panel-border); position: sticky; top: 0; z-index: 40; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .topbar--landing { border-bottom: none; background: transparent; position: static; justify-content: space-between; } /* ---------- app shell: collapsible left sidebar + main column ---------- */ .app-shell { display: flex; align-items: stretch; min-height: 100vh; } .app-sidebar { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--topbar-bg); border-right: 1px solid var(--panel-border); position: sticky; top: 0; height: 100vh; /* Deliberately NOT a scroll/clip container: any overflow value other than visible would clip the [data-tooltip] popups of the nav items and the credit pill at the sidebar's edge — and in the collapsed icon rail those tooltips are the ONLY labels, so clipping them makes the rail unusable. The nav is a fixed handful of items inside 100vh, so it never needs to scroll; .sidebar-label uses display:none when collapsed, so nothing spills during the width transition either. */ overflow: visible; transition: width 0.18s ease; z-index: 50; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1rem 0.6rem; } .sidebar-label { transition: opacity 0.12s ease; white-space: nowrap; } .sidebar-collapse-btn { background: none; border: 1px solid var(--panel-border); border-radius: 7px; color: var(--muted); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .sidebar-collapse-btn:hover { color: var(--text); border-color: var(--panel-border-hi); } .sidebar-collapse-btn svg { width: 14px; height: 14px; transition: transform 0.18s ease; } .app-sidebar .nav-tabs { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.7rem; overflow: visible; } .app-sidebar .nav-tab { display: flex; align-items: center; gap: 0.7rem; justify-content: flex-start; padding: 0.55rem 0.7rem; border-radius: 9px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 500; font-size: 0.88rem; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; } .nav-tab:hover { color: var(--text); } .nav-tab.is-active { color: var(--text); background: rgba(57, 217, 138, 0.1); border-color: rgba(57, 217, 138, 0.35); } .sidebar-foot { margin-top: auto; padding: 0.7rem; border-top: 1px solid var(--panel-border); } .sidebar-foot .credit-pill { width: 100%; justify-content: flex-start; } /* Deliberately NOT display:flex — its children (.topbar, each .layout tab-panel) already stack fine as plain block elements, and making them flex items breaks .layout's `margin: 0 auto` centering: flexbox disables stretch on items with auto cross-axis margins and sizes them to content instead, so any tab whose content doesn't happen to need the full 1120px (Compare, Advisor) renders narrower than tabs that do. */ .app-main { flex: 1; min-width: 0; } .sidebar-hamburger { display: none; background: none; border: 1px solid var(--panel-border); border-radius: 8px; color: var(--muted); width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer; margin-right: auto; } .sidebar-hamburger svg { width: 18px; height: 18px; } .sidebar-hamburger:hover { color: var(--text); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(5, 8, 14, 0.6); z-index: 49; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } /* ---------- collapsed state (desktop) — icon rail ---------- */ .app-sidebar.is-collapsed { width: 68px; } .app-sidebar.is-collapsed .sidebar-label { display: none; } .app-sidebar.is-collapsed .sidebar-head { justify-content: center; padding: 1rem 0.5rem 0.6rem; } .app-sidebar.is-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } .app-sidebar.is-collapsed .nav-tab { justify-content: center; padding: 0.6rem; } .app-sidebar.is-collapsed .sidebar-foot .credit-pill { justify-content: center; padding: 0.5rem; } /* ---------- mobile: sidebar becomes a slide-in drawer over a backdrop ---------- */ @media (max-width: 860px) { .app-sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: 240px; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 0 0 48px rgba(0, 0, 0, 0.5); } .app-sidebar.is-open { transform: translateX(0); } /* The desktop collapse state is irrelevant once the sidebar becomes a drawer — always full width with labels when it's open on mobile. */ .app-sidebar.is-collapsed { width: 240px; } .app-sidebar.is-collapsed .sidebar-label { display: inline; } .app-sidebar.is-collapsed .sidebar-head { justify-content: space-between; padding: 1rem 1rem 0.6rem; } .app-sidebar.is-collapsed .nav-tab { justify-content: flex-start; padding: 0.55rem 0.7rem; } .app-sidebar.is-collapsed .sidebar-foot .credit-pill { justify-content: flex-start; padding: 0.55rem 0.8rem; } .sidebar-collapse-btn { display: none; } .sidebar-hamburger { display: flex; } .sidebar-backdrop { display: block; } .sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; } } /* ---------- landing / hero ---------- */ .hero { max-width: 1120px; margin: 0 auto; padding: 4.5rem 1.6rem 3rem; display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; min-height: calc(100vh - 140px); } @media (max-width: 880px) { .hero { grid-template-columns: 1fr; min-height: unset; padding-top: 2.5rem; } } .hero-kicker { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1rem; } .hero h1 { font-family: var(--display); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0 0 1.1rem; letter-spacing: -0.015em; } .grad-text { background: linear-gradient(100deg, var(--accent) 10%, #4ed0ff 55%, var(--accent-2) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { color: var(--muted); font-size: 1.02rem; max-width: 34rem; margin: 0 0 1.4rem; } .hero-proof { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .hero-proof li { display: flex; gap: 0.6rem; align-items: baseline; color: var(--text-soft); font-size: 0.95rem; } .hero-proof .tick { color: var(--accent); font-size: 0.7rem; } .auth-card { padding: 1.5rem; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); } .auth-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; } .auth-tab { flex: 1; padding: 0.55rem; background: transparent; border: 1px solid var(--panel-border); color: var(--muted); border-radius: 9px; cursor: pointer; font-family: var(--display); font-weight: 500; } .auth-tab.is-active { color: var(--text); border-color: var(--accent); background: rgba(57, 217, 138, 0.07); } .auth-fineprint { color: var(--muted); font-size: 0.75rem; text-align: center; margin: 0.9rem 0 0; } .auth-card-title { margin: 0 0 1rem; font-family: var(--display); font-size: 1.15rem; } /* ============ consent gate ============ */ #view-consent .auth-wrap { max-width: 640px; margin: 3rem auto; padding: 0 1.2rem; } .consent-scroll { max-height: 320px; overflow-y: auto; margin-bottom: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--code-bg); } .consent-scroll h4 { margin: 0.9rem 0 0.3rem; font-size: 0.8rem; color: var(--text); } .consent-scroll h4:first-child { margin-top: 0; } .consent-scroll p { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--text-soft); line-height: 1.5; } .consent-checkbox { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1rem; cursor: pointer; } .consent-checkbox input { margin-top: 0.2rem; flex: none; } .consent-checkbox span { font-size: 0.84rem; color: var(--text-soft); } #link-sent .hint { font-size: 0.82rem; margin: 0 0 0.6rem; } #link-sent #link-resend { display: inline; width: auto; margin: 0; padding: 0; } #link-sent #link-back { width: auto; margin: 0.4rem 0 0; text-align: left; } /* ---------- app layout ---------- */ .layout { max-width: 1120px; margin: 0 auto; padding: 1.6rem; } .layout--narrow { max-width: 780px; } .panel { padding: 1.1rem 1.2rem; } .panel-title { margin: 0 0 0.8rem; font-family: var(--display); font-size: 1rem; } /* backdrop-filter on .glass creates a stacking context, so the picker dropdown's z-index is scoped to this panel — lift the whole panel above .results or the empty-state cards paint over the open dropdown. */ .search-panel { display: flex; gap: 0.9rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.3rem; position: relative; z-index: 30; } .search-panel .field { margin-bottom: 0; } .field--country { width: 200px; } .field--symbol { flex: 1; min-width: 260px; } /* ---------- ticker picker ---------- */ .picker { position: relative; } .picker-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 380px; overflow-y: auto; background: var(--surface-dropdown); border: 1px solid var(--panel-border-hi); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); } .picker-label { margin: 0; padding: 0.55rem 0.85rem 0.25rem; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; } .picker-list { list-style: none; margin: 0; padding: 0.15rem 0.35rem 0.4rem; } .picker-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.5rem; border-radius: 7px; cursor: pointer; } .picker-row:hover, .picker-row.is-hi { background: rgba(57, 217, 138, 0.09); } .picker-row .pt { font-family: var(--mono); font-size: 0.84rem; min-width: 108px; color: var(--text); } .picker-row .pn { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .fav-btn { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 5px; line-height: 1; } .fav-btn:hover { color: var(--neutral); } .fav-btn.is-fav { color: var(--neutral); } .picker-empty { color: var(--muted); padding: 0.6rem 0.85rem; font-size: 0.85rem; } /* ---------- trending strip (Analyze / Research / Founder Desk) ---------- For people who don't know what to search for yet — today's biggest movers among a fixed watchlist of large, liquid names (not a live index feed, see src/data/trending.py). Clicking a chip just picks that stock into the tab's own search box, same as picking it from the dropdown. */ .trend-strip { margin: 0 0 1.2rem; } .trend-strip[hidden] { display: none; } .trend-strip-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.55rem; } .trend-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .trend-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--surface-tint); border: 1px solid var(--panel-border); border-radius: 999px; padding: 0.38rem 0.75rem; font-family: var(--mono); font-size: 0.78rem; cursor: pointer; color: var(--text); transition: border-color 0.12s ease, transform 0.12s ease; } .trend-chip:hover { border-color: var(--panel-border-hi); transform: translateY(-1px); } .trend-chip .tc-change { font-weight: 700; } .trend-chip--up .tc-change { color: var(--bull); } .trend-chip--down .tc-change { color: var(--bear); } /* ---------- analyze: states ---------- */ .empty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 760px) { .empty-grid { grid-template-columns: 1fr; } } .empty-card { padding: 1.1rem; } .empty-card b { font-family: var(--mono); color: var(--accent); display: block; margin-bottom: 0.4rem; } .empty-card p { margin: 0; color: var(--muted); } .progress-steps { padding: 1.2rem 1.4rem; display: grid; gap: 0.75rem; max-width: 560px; } .pstep { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-size: 0.9rem; transition: color 0.2s; } .pstep-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-border-hi); flex: none; } .pstep.is-active { color: var(--text); } .pstep.is-active .pstep-dot { background: var(--accent); box-shadow: 0 0 10px rgba(57, 217, 138, 0.8); animation: pulse 1.2s infinite; } .pstep.is-done { color: var(--text-soft); } .pstep.is-done .pstep-dot { background: var(--accent); } /* ---------- verdicts ---------- */ .verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; } @media (max-width: 640px) { .verdict-grid { grid-template-columns: 1fr; } } .verdict-card { position: relative; padding: 1.1rem 1.2rem; } /* overflow:hidden used to live on .verdict-card itself to keep this bar's square corners from poking past the card's rounded ones — but that also clipped every [data-tooltip] popup inside the card the moment it grew wider than the card (composite/confidence/conviction, all near an edge). Rounding the bar's own corners gets the same visual result without clipping anything else. */ .verdict-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.7; border-radius: var(--radius) var(--radius) 0 0; } .verdict-card h3 { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .action-badge { display: inline-block; font-family: var(--mono); font-weight: 700; padding: 0.22rem 0.7rem; border-radius: 7px; font-size: 1rem; margin-bottom: 0.55rem; } .action-STRONG_BUY, .action-ACCUMULATE { background: rgba(57, 217, 138, 0.14); color: var(--bull); } .action-HOLD, .action-ABSTAIN { background: rgba(229, 184, 74, 0.14); color: var(--neutral); } .action-REDUCE, .action-AVOID { background: rgba(255, 93, 85, 0.14); color: var(--bear); } .metric-row { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--mono); font-size: 0.83rem; color: var(--muted); margin-bottom: 0.55rem; } .metric-row b { color: var(--text); } .abstain-reason { color: var(--neutral); font-size: 0.85rem; } /* ---------- divergence explainer ---------- */ .divergence-panel { margin-bottom: 1.2rem; } .divergence-row { padding: 0.5rem 0; border-top: 1px solid var(--border); } .divergence-row:first-of-type { border-top: none; padding-top: 0; } .dv-pillar { font-family: var(--mono); font-weight: 700; font-size: 0.83rem; margin-right: 0.6rem; } .dv-pull { font-family: var(--mono); font-size: 0.78rem; margin-right: 0.6rem; } .dv-pull.pos { color: var(--bull); } .dv-pull.neg { color: var(--bear); } /* ---------- run all research ---------- */ .run-all-section { padding: 1.1rem 0; border-top: 1px solid var(--panel-border); } .run-all-section:first-child { border-top: none; padding-top: 0; } .run-all-section-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; } .run-all-section-head .run-all-icon { font-size: 1.2rem; } .run-all-section-head h3 { margin: 0; font-size: 1rem; font-family: var(--display); } /* ---------- decision layer ---------- */ .decision-layer-section { margin-bottom: 1.2rem; } .decision-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 700px) { .decision-tools-grid { grid-template-columns: 1fr; } } .decision-tool-card { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; } .dt-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.88rem; } .stance-badge { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 0.74rem; padding: 0.16rem 0.5rem; border-radius: 6px; background: rgba(124,108,255,0.14); color: var(--accent-2); } /* ---------- exit strategy ---------- */ .exit-strategy-section { margin-bottom: 1.2rem; } .exit-strategy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .exit-strategy-grid { grid-template-columns: 1fr; } } .exit-horizon-card { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; } .exit-horizon-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .exit-stance { font-family: var(--mono); font-weight: 700; font-size: 0.76rem; padding: 0.18rem 0.55rem; border-radius: 6px; white-space: nowrap; } .exit-stance-HOLD { background: rgba(229, 184, 74, 0.14); color: var(--neutral); } .exit-stance-TRIM, .exit-stance-EXIT_NOW { background: rgba(255, 93, 85, 0.14); color: var(--bear); } .exit-stance-ADD_ON_WEAKNESS { background: rgba(57, 217, 138, 0.14); color: var(--bull); } .exit-stance-INSUFFICIENT_DATA { background: rgba(148, 148, 148, 0.14); color: var(--muted); } .exit-subhead { margin: 0.8rem 0 0.3rem; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; } .exit-level-row { padding: 0.4rem 0 0.4rem 0.6rem; border-left: 2px solid var(--border); margin-bottom: 0.4rem; } .exit-level-row .el-label { font-family: var(--mono); font-weight: 700; font-size: 0.83rem; } .exit-level-row .el-condition { margin: 0.15rem 0; font-size: 0.85rem; } /* ---------- outcome projector: bear/base/bull scenario cards ---------- */ .scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } @media (max-width: 480px) { .scenario-grid { grid-template-columns: 1fr; } } .scenario-card { border-radius: 8px; padding: 0.6rem 0.7rem; background: var(--surface-tint); border-top: 3px solid var(--border); } .scenario-bear { border-top-color: var(--bear); } .scenario-base { border-top-color: var(--neutral); } .scenario-bull { border-top-color: var(--bull); } .scenario-card .sc-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .scenario-card .sc-pct { font-family: var(--mono); font-weight: 700; font-size: 1rem; margin-top: 0.15rem; } .scenario-bear .sc-pct { color: var(--bear); } .scenario-base .sc-pct { color: var(--neutral); } .scenario-bull .sc-pct { color: var(--bull); } .scenario-card .sc-value { font-family: var(--mono); font-size: 0.8rem; color: var(--text-soft); margin-top: 0.1rem; } /* ---------- sector screener: table pick-button ---------- */ .screener-pick { width: auto; margin: 0; white-space: nowrap; font-size: 0.78rem; } /* ---------- picker clear button (Research company field) ---------- */ /* Selector is .picker .picker-clear, not just .picker-clear, on purpose: this button also carries data-tooltip, and `[data-tooltip] { position: relative }` further down has identical (0,1,0) specificity — so as a bare class it LOST on source order and the button fell back into normal flow, landing under the input instead of inside it. The descendant selector (0,2,0) wins outright. Anything absolutely positioned that also has a tooltip needs the same treatment. */ .picker--clearable input { padding-right: 2.4rem; } .picker .picker-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0.3rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .picker .picker-clear:hover { color: var(--bear); background: rgba(255, 93, 85, 0.13); } .picker .picker-clear[hidden] { display: none; } /* ---------- toast notifications (background job completion) ---------- */ .toast-stack { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; display: flex; flex-direction: column-reverse; gap: 0.6rem; max-width: min(380px, calc(100vw - 2.2rem)); pointer-events: none; } .toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: start; background: var(--panel); border: 1px solid var(--panel-border-hi); border-radius: 12px; padding: 0.85rem 0.9rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } .toast.is-leaving { animation: toast-out 0.18s ease forwards; } @keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } } .toast-icon { font-size: 1.1rem; line-height: 1.3; } .toast-body { min-width: 0; } .toast-title { font-family: var(--display); font-weight: 600; font-size: 0.9rem; margin: 0 0 0.15rem; } .toast-msg { color: var(--muted); font-size: 0.8rem; margin: 0; line-height: 1.45; } .toast-action { margin-top: 0.5rem; background: rgba(57, 217, 138, 0.13); border: 1px solid rgba(57, 217, 138, 0.35); color: var(--accent); font-family: var(--display); font-weight: 600; font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 7px; cursor: pointer; } .toast-action:hover { background: rgba(57, 217, 138, 0.2); } .toast-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.2rem; line-height: 1; } .toast-close:hover { color: var(--text); } .toast--error { border-color: rgba(255, 93, 85, 0.4); } .toast--error .toast-title { color: var(--bear); } /* ---------- run-in-background button inside the busy modal ---------- */ .modal-busy-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; } /* The sector ) silently widens the whole tab past the viewport instead of scrolling inside its own container. Same fix as .chart-grid. */ .side-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; } .side-layout.has-sidebar { grid-template-columns: 250px minmax(0, 1fr); } @media (max-width: 900px) { .side-layout.has-sidebar { grid-template-columns: minmax(0, 1fr); } .side-layout .side-recent { position: static; max-height: 240px; } } .side-main { min-width: 0; } .side-recent { padding: 0.9rem; position: sticky; top: 86px; max-height: calc(100vh - 106px); overflow-y: auto; overflow-x: hidden; } .side-recent[hidden] { display: none; } .side-recent .section-head { margin: 0 0 0.7rem; } .side-recent .section-head h3 { margin: 0 0 0.2rem; font-size: 0.8rem; } /* minmax(0, 1fr), not plain 1fr — a grid track's implicit minimum is "auto" (its content's natural width), so a long recent-card title would otherwise force this 250px column wider than the sidebar, which is what was producing the horizontal scrollbar. */ .side-recent .recent-list { grid-template-columns: minmax(0, 1fr); } /* ============ advisor: sessions + rich messages ============ */ .advisor-shell { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; } @media (max-width: 820px) { .advisor-shell { grid-template-columns: 1fr; } .chat-sidebar { max-height: 200px; } } .chat-sidebar { padding: 0.8rem; overflow-y: auto; max-height: calc(100vh - 175px); } .chat-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.3rem; } .chat-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.55rem; border-radius: 8px; cursor: pointer; font-size: 0.83rem; color: var(--muted); } .chat-item:hover { background: rgba(57,217,138,0.08); color: var(--text); } .chat-item.is-active { background: rgba(57,217,138,0.13); color: var(--text); border: 1px solid rgba(57,217,138,0.3); } .chat-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-item-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; opacity: 0; } .chat-item:hover .chat-item-del { opacity: 1; } .chat-item-del:hover { color: var(--bear); } .chat-shell { display: flex; flex-direction: column; height: calc(100vh - 175px); min-height: 440px; overflow: hidden; } .chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem 0.75rem; border-bottom: 1px solid var(--panel-border); } .chat-head h2 { margin: 0; font-family: var(--display); font-size: 1.02rem; } .chat-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; } .chat-msg { max-width: 88%; padding: 0.7rem 0.9rem; border-radius: 13px; font-size: 0.92rem; white-space: pre-wrap; word-wrap: break-word; } .chat-msg--bot { background: var(--surface-btn); border: 1px solid var(--panel-border); align-self: flex-start; border-bottom-left-radius: 4px; } .chat-msg--user { background: rgba(57,217,138,0.13); border: 1px solid rgba(57,217,138,0.3); align-self: flex-end; border-bottom-right-radius: 4px; } .chat-msg--thinking { color: var(--muted); display: flex; align-items: center; gap: 0.5rem; } .typing-dots { display: inline-flex; gap: 3px; align-items: center; } .typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: typing-bounce 1.1s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: 0.15s; } .typing-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .msg-block { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 0.4rem; } .deep-badge { display: inline-block; font-size: 0.63rem; font-family: var(--mono); color: var(--accent-2); border: 1px solid rgba(124,108,255,0.4); background: rgba(124,108,255,0.1); border-radius: 4px; padding: 0.05rem 0.35rem; margin-bottom: 0.3rem; } .msg-citations { display: flex; flex-wrap: wrap; gap: 0.3rem; } .cite-chip { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 5px; padding: 0.1rem 0.4rem; text-decoration: none; } a.cite-chip:hover { color: var(--accent); border-color: var(--accent); } .msg-actions { display: flex; gap: 0.35rem; align-items: center; } .msg-btn { background: none; border: 1px solid var(--panel-border); color: var(--muted); border-radius: 6px; padding: 0.15rem 0.45rem; font-size: 0.72rem; cursor: pointer; font-family: inherit; } .msg-btn:hover { color: var(--text); border-color: var(--panel-border-hi); } .msg-btn.is-on { color: var(--accent); border-color: var(--accent); } .msg-btn.is-down.is-on { color: var(--bear); border-color: var(--bear); } .followups { display: flex; flex-wrap: wrap; gap: 0.35rem; } .followup-chip { background: rgba(124,108,255,0.09); border: 1px solid rgba(124,108,255,0.3); color: var(--text-soft); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.78rem; cursor: pointer; font-family: inherit; text-align: left; } .followup-chip:hover { border-color: var(--accent-2); color: var(--text); } .msg-chart-wrap { position: relative; height: 210px; background: var(--code-bg); border: 1px solid var(--panel-border); border-radius: 9px; padding: 0.5rem; } .feedback-reasons { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; } .feedback-sent-note { font-size: 0.72rem; color: var(--bull); font-family: var(--mono); animation: pulse 1.4s ease-in-out 1; } .reason-chip { background: rgba(255,93,85,0.08); border: 1px solid rgba(255,93,85,0.28); color: var(--text-soft); border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.72rem; cursor: pointer; font-family: inherit; } .reason-chip:hover, .reason-chip.is-on { background: rgba(255,93,85,0.2); color: var(--text); } .chat-inputbar { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 1.2rem; border-top: 1px solid var(--panel-border); } .chat-input-row { display: flex; gap: 0.6rem; } .chat-input-row input { flex: 1; padding: 0.65rem 0.8rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 0.92rem; } .chat-input-row input:focus { outline: none; border-color: var(--accent); } .deep-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8rem; color: var(--muted); } .deep-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .deep-switch { width: 34px; height: 19px; border-radius: 999px; background: rgba(133,152,176,0.28); position: relative; transition: background 0.15s; flex: none; } .deep-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform 0.15s; } .deep-toggle input:checked + .deep-switch { background: var(--accent-2); } .deep-toggle input:checked + .deep-switch::after { transform: translateX(15px); } .deep-toggle input:checked ~ .deep-label { color: var(--text); } /* ============ quote header ============ */ .quote-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .quote-head h2 { margin: 0; font-family: var(--display); font-size: 1.5rem; } .quote-price { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; } .quote-change { font-family: var(--mono); font-size: 0.95rem; font-weight: 600; } .quote-change.pos { color: var(--bull); } .quote-change.neg { color: var(--bear); } .quote-meta { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); } .market-badge { font-size: 0.65rem; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .market-badge.is-open { color: var(--bull); border-color: rgba(57,217,138,0.4); background: rgba(57,217,138,0.08); } .live-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; margin-right: 0.1rem; } .live-pulse-dot.is-open { background: var(--bull); box-shadow: 0 0 8px rgba(57, 217, 138, 0.75); animation: pulse 1.6s infinite; } .quote-refresh-btn { background: none; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--muted); font-size: 0.85rem; line-height: 1; padding: 0.15rem 0.4rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .quote-refresh-btn:hover:not(:disabled) { color: var(--text); border-color: var(--panel-border-hi); } .quote-refresh-btn:disabled { cursor: default; opacity: 0.6; } .quote-refresh-btn.is-spinning { animation: spin 0.7s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .quote-updated { font-size: 0.68rem; color: var(--muted); font-family: var(--mono); } .quote-range { display: flex; align-items: center; gap: 0.55rem; margin: -0.3rem 0 0.9rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .quote-range[hidden] { display: none; } .quote-range-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; cursor: help; } .quote-range-val { color: var(--text); white-space: nowrap; } .quote-range-track { position: relative; flex: 1; min-width: 80px; max-width: 220px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--bear), var(--neutral), var(--bull)); opacity: 0.5; } /* .quote-range-track prefix, not a bare class: this marker carries data-tooltip, and [data-tooltip]{position:relative} has equal specificity but comes later in the file — as a bare class it lost, and the marker stopped tracking the 52-week price position. See .picker-clear. */ .quote-range-track .quote-range-marker { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--text); border: 2px solid var(--bg); transform: translate(-50%, -50%); cursor: help; } .data-quality-line { display: flex; align-items: center; gap: 0.5rem; margin: -0.5rem 0 1rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); flex-wrap: wrap; } .dq-badge { display: inline-flex; align-items: center; padding: 0.08rem 0.5rem; border-radius: 999px; border: 1px solid var(--panel-border); cursor: help; } .dq-badge--ok { color: var(--bull); border-color: rgba(57,217,138,0.35); } .dq-badge--warn { color: var(--neutral); border-color: rgba(229,184,74,0.4); } .chart-toolbar { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; } .chart-toolbar .hint { margin: 0 0 0 auto; font-size: 0.7rem; } /* ============ tax lots ============ */ .taxlot-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .taxlot-table th, .taxlot-table td { text-align: left; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--panel-border); } .taxlot-table th { color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 0.67rem; letter-spacing: 0.05em; } .taxlot-table td.num { font-family: var(--mono); } .lot-LONG_TERM { color: var(--bull); font-family: var(--mono); font-size: 0.75rem; } .lot-SHORT_TERM { color: var(--neutral); font-family: var(--mono); font-size: 0.75rem; } .lt-alert { background: rgba(229,184,74,0.1); border: 1px solid rgba(229,184,74,0.35); border-radius: 9px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; font-size: 0.84rem; color: var(--text-warm); } /* ============ back button ============ */ .back-btn { margin-bottom: 0.9rem; } /* ============ founder desk ============ */ .desk-shell { display: flex; flex-direction: column; overflow: visible; } .desk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem 0.8rem; border-bottom: 1px solid var(--panel-border); } .desk-head h2 { margin: 0; font-family: var(--display); font-size: 1.05rem; } /* Bottom padding clears the sticky composer so the last sources/follow-ups aren't hidden underneath it. */ .desk-scroll { padding: 1.1rem 1.2rem 4.5rem; display: flex; flex-direction: column; gap: 1rem; } /* Composer stays reachable while reading a long answer. */ .desk-inputbar { padding: 0.85rem 1.2rem; border-top: 1px solid var(--panel-border); position: sticky; bottom: 0; z-index: 20; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 0 0 var(--radius) var(--radius); } .desk-head { position: sticky; top: 61px; z-index: 20; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius) var(--radius) 0 0; } .trust-badge { font-family: var(--mono); font-size: 0.7rem; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; } .trust-high { background: rgba(57,217,138,0.13); color: var(--bull); border: 1px solid rgba(57,217,138,0.4); } .trust-mid { background: rgba(229,184,74,0.13); color: var(--neutral); border: 1px solid rgba(229,184,74,0.4); } .trust-low { background: rgba(255,93,85,0.13); color: var(--bear); border: 1px solid rgba(255,93,85,0.4); } .desk-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } @media (max-width: 720px) { .desk-intro { grid-template-columns: 1fr; } } .desk-intro-card { background: var(--code-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.9rem 1rem; } .desk-intro-card h4 { margin: 0 0 0.4rem; font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } .desk-intro-card p { margin: 0; color: var(--muted); font-size: 0.85rem; } .desk-starters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .desk-starters[hidden] { display: none; } .starter-chip { background: rgba(124,108,255,0.09); border: 1px solid rgba(124,108,255,0.3); color: var(--text-soft); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; cursor: pointer; font-family: inherit; } .starter-chip:hover { border-color: var(--accent-2); color: var(--text); } .desk-msg { max-width: 88%; padding: 0.7rem 0.9rem; border-radius: 13px; font-size: 0.92rem; } .desk-msg--user { background: rgba(57,217,138,0.13); border: 1px solid rgba(57,217,138,0.3); align-self: flex-end; border-bottom-right-radius: 4px; white-space: pre-wrap; } .desk-answer { align-self: flex-start; width: 100%; display: flex; flex-direction: column; gap: 0.7rem; } .desk-bubble { background: var(--surface-btn); border: 1px solid var(--panel-border); border-radius: 13px; border-bottom-left-radius: 4px; padding: 0.85rem 1rem; } .quote-card { border-left: 3px solid var(--accent); background: rgba(57,217,138,0.06); border-radius: 0 9px 9px 0; padding: 0.7rem 0.9rem; } .quote-card blockquote { margin: 0 0 0.4rem; font-style: italic; color: var(--text-soft); } .quote-attrib { font-size: 0.78rem; color: var(--muted); } .quote-attrib b { color: var(--text); font-style: normal; } .verbatim-tag { font-family: var(--mono); font-size: 0.6rem; background: rgba(57,217,138,0.15); color: var(--accent); border-radius: 4px; padding: 0.05rem 0.35rem; margin-left: 0.4rem; } .desk-chart-wrap { position: relative; height: 230px; background: var(--code-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.6rem; } .chart-caption { font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0; } .source-list { display: grid; gap: 0.35rem; } .source-row { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.78rem; } .source-kind { font-family: var(--mono); font-size: 0.62rem; padding: 0.05rem 0.35rem; border-radius: 4px; background: rgba(124,108,255,0.12); color: var(--accent-2); border: 1px solid rgba(124,108,255,0.3); white-space: nowrap; } .source-row a { color: var(--muted); text-decoration: none; } .source-row a:hover { color: var(--accent); } .verification-note { font-size: 0.74rem; color: var(--neutral); font-family: var(--mono); } .claims-toggle { background: none; border: none; color: var(--muted); font-size: 0.75rem; cursor: pointer; text-align: left; padding: 0; text-decoration: underline; } .claims-toggle:hover { color: var(--accent); } .claim-line { font-size: 0.8rem; color: var(--text-soft); padding: 0.3rem 0; border-bottom: 1px solid var(--panel-border); } .claim-line .cite-chip { margin-left: 0.35rem; } /* ============ markdown-formatted chat answers ============ */ .md-body { white-space: normal; } .md-body p { margin: 0 0 0.6rem; } .md-body p:last-child { margin-bottom: 0; } .md-body ul, .md-body ol { margin: 0 0 0.6rem; padding-left: 1.2rem; display: grid; gap: 0.25rem; } .md-body li { margin: 0; } .md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-family: var(--display); font-size: 0.95rem; margin: 0.7rem 0 0.4rem; color: var(--text); } .md-body code { font-family: var(--mono); font-size: 0.84em; background: var(--input-bg); padding: 0.05rem 0.3rem; border-radius: 4px; } .md-body pre { background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.6rem 0.7rem; overflow-x: auto; } .md-body pre code { background: none; padding: 0; } .md-body table { border-collapse: collapse; width: 100%; font-size: 0.84rem; margin: 0 0 0.6rem; display: block; overflow-x: auto; } .md-body th, .md-body td { border: 1px solid var(--panel-border); padding: 0.35rem 0.5rem; text-align: left; } .md-body th { background: var(--code-bg); color: var(--muted); font-weight: 500; } .md-body strong { color: var(--text); } .md-body blockquote { border-left: 3px solid var(--panel-border-hi); margin: 0 0 0.6rem; padding-left: 0.7rem; color: var(--muted); } .md-body a { color: var(--accent); } /* ============ risk panel ============ */ .risk-flags { display: grid; gap: 0.5rem; margin-bottom: 1rem; } .risk-flag { background: rgba(255,93,85,0.08); border: 1px solid rgba(255,93,85,0.3); border-radius: 9px; padding: 0.55rem 0.8rem; font-size: 0.85rem; color: var(--text-bear-soft); } .risk-flag.is-ok { background: rgba(57,217,138,0.07); border-color: rgba(57,217,138,0.28); color: var(--text-bull-soft); } .risk-note { font-size: 0.78rem; color: var(--muted); } .risk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin-bottom: 1rem; } .risk-stat { background: var(--code-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.6rem 0.8rem; } .risk-stat .k { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; } .risk-stat .v { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; margin-top: 0.15rem; } .expo-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 0.35rem 0 0.5rem; } .expo-seg { height: 100%; } .expo-legend { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: 0.76rem; color: var(--muted); } .expo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.3rem; } /* ============ premortem ============ */ #premortem-block textarea { width: 100%; padding: 0.6rem 0.7rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 0.88rem; resize: vertical; } #premortem-block textarea:focus { outline: none; border-color: var(--accent-2); } .premortem-recall { background: rgba(229,184,74,0.09); border: 1px solid rgba(229,184,74,0.32); border-radius: 9px; padding: 0.7rem 0.85rem; margin-bottom: 0.8rem; font-size: 0.85rem; } .premortem-recall h4 { margin: 0 0 0.35rem; font-size: 0.7rem; color: var(--neutral); text-transform: uppercase; letter-spacing: 0.07em; } .premortem-recall blockquote { margin: 0.3rem 0 0; font-style: italic; color: var(--text-warm); border-left: 2px solid rgba(229,184,74,0.5); padding-left: 0.6rem; } /* ============ explain move ============ */ .explain-btn { margin-left: 0.5rem; } .explain-card { border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 1rem; background: var(--code-bg); } .explain-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .explain-head h4 { margin: 0; font-size: 0.95rem; } .move-class { font-family: var(--mono); font-size: 0.66rem; padding: 0.15rem 0.5rem; border-radius: 999px; } .move-THESIS_CHANGING { background: rgba(255,93,85,0.15); color: var(--bear); border: 1px solid rgba(255,93,85,0.4); } .move-MATERIAL_BUT_CONTAINED { background: rgba(229,184,74,0.15); color: var(--neutral); border: 1px solid rgba(229,184,74,0.4); } .move-NOISE { background: rgba(133,152,176,0.15); color: var(--muted); border: 1px solid var(--panel-border); } .move-UNCLEAR { background: rgba(133,152,176,0.15); color: var(--muted); border: 1px solid var(--panel-border); } .watch-list { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.84rem; color: var(--text-soft); display: grid; gap: 0.25rem; } .reason-label { font-size: 0.72rem; color: var(--muted); margin-right: 0.15rem; align-self: center; } .reason-chip--up { background: rgba(57,217,138,0.08); border-color: rgba(57,217,138,0.3); } .reason-chip--up:hover, .reason-chip--up.is-on { background: rgba(57,217,138,0.2); } /* ============ about modal ============ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1rem 0; } @media (max-width: 700px) { .about-grid { grid-template-columns: 1fr; } } .about-card { background: var(--code-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.9rem 1rem; } .about-card h4 { margin: 0 0 0.35rem; font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } .about-card p { margin: 0; color: var(--muted); font-size: 0.85rem; } .about-author { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, rgba(57,217,138,0.08), rgba(124,108,255,0.08)); border: 1px solid var(--panel-border); border-radius: 11px; padding: 1rem; margin-bottom: 1rem; } .about-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; object-position: center 15%; border: 2px solid var(--panel-border-hi); } .disclaimer a { color: var(--muted); } .disclaimer a:hover { color: var(--accent); } /* ============ what's new ============ */ .whatsnew-list { max-height: 60vh; overflow-y: auto; padding-right: 0.3rem; } .whatsnew-entry { padding: 0.9rem 0; border-bottom: 1px solid var(--panel-border); } .whatsnew-entry:last-child { border-bottom: none; } .whatsnew-meta { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; } .whatsnew-version { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 0.85rem; } .whatsnew-date { font-size: 0.76rem; color: var(--muted); } .whatsnew-entry ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; } .whatsnew-entry li { font-size: 0.87rem; color: var(--text-soft); } /* ============ research desk ============ */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; } .tool-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 11px; padding: 0.95rem 1rem; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; display: flex; flex-direction: column; gap: 0.3rem; } .tool-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 26px rgba(0,0,0,0.35); } .tool-card:disabled { opacity: 0.5; cursor: not-allowed; } .tool-card .tc-icon { font-size: 1.25rem; } .tool-card .tc-name { font-family: var(--display); font-weight: 700; font-size: 0.95rem; } .tool-card .tc-blurb { color: var(--muted); font-size: 0.8rem; } .tool-card .tc-cost { font-family: var(--mono); font-size: 0.66rem; color: var(--accent); margin-top: 0.25rem; } .tool-card.is-featured { border-color: rgba(124,108,255,0.45); background: linear-gradient(135deg, rgba(124,108,255,0.09), rgba(57,217,138,0.05)); } .recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; } .recent-card { display: flex; align-items: center; gap: 0.55rem; min-width: 0; background: var(--surface-tint); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.6rem 0.75rem; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: border-color 0.12s ease; } .recent-card:hover { border-color: var(--panel-border-hi); } .recent-card .rc-icon { font-size: 1.1rem; flex: none; } /* display:flex + column, not the default inline span behavior — title and time only *happened* to stack on separate lines before because a long, nowrap title consumed the whole line; that's incidental, not a real constraint, and text-overflow:ellipsis doesn't reliably apply to a plain inline element in the first place (it needs a block-level box). Explicit layout here is what actually guarantees the title truncates with an ellipsis instead of silently overflowing or getting hard-clipped by an ancestor's overflow:hidden. */ .recent-card .rc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .recent-card .rc-title { display: block; font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-card .rc-time { font-size: 0.7rem; color: var(--muted); } .recent-card .rc-delete { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.2rem; } .recent-card .rc-delete:hover { color: var(--bear); } .conf-badge { font-family: var(--mono); font-size: 0.68rem; padding: 0.18rem 0.55rem; border-radius: 999px; } .conf-HIGH { background: rgba(57,217,138,0.14); color: var(--bull); border: 1px solid rgba(57,217,138,0.4); } .conf-MEDIUM { background: rgba(229,184,74,0.14); color: var(--neutral); border: 1px solid rgba(229,184,74,0.4); } .conf-LOW { background: rgba(255,93,85,0.14); color: var(--bear); border: 1px solid rgba(255,93,85,0.4); } .finding { border-left: 3px solid var(--panel-border); padding: 0.55rem 0.85rem; margin-bottom: 0.6rem; background: var(--code-bg); border-radius: 0 8px 8px 0; } .finding h5 { margin: 0 0 0.25rem; font-size: 0.9rem; } .finding p { margin: 0; color: var(--muted); font-size: 0.85rem; } .finding.sev-POSITIVE { border-left-color: var(--bull); } .finding.sev-CONCERN { border-left-color: var(--bear); } .finding.sev-WATCH { border-left-color: var(--neutral); } .sev-tag { font-family: var(--mono); font-size: 0.6rem; padding: 0.05rem 0.35rem; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle; } .sev-tag.sev-POSITIVE { background: rgba(57,217,138,0.15); color: var(--bull); } .sev-tag.sev-CONCERN { background: rgba(255,93,85,0.15); color: var(--bear); } .sev-tag.sev-WATCH { background: rgba(229,184,74,0.15); color: var(--neutral); } .sev-tag.sev-NEUTRAL { background: rgba(133,152,176,0.15); color: var(--muted); } .score-rows { display: grid; gap: 0.5rem; margin: 0.8rem 0; } .score-row { display: grid; grid-template-columns: 150px 1fr 44px; gap: 0.6rem; align-items: center; font-size: 0.82rem; } .score-row .sr-label { color: var(--muted); } /* Unscoped on purpose: this bar is reused by .score-row (research tool scores), .trait-row (Stock DNA's nine traits) and the admin usage chart. While it was scoped to .score-row, the DNA trait bars rendered as blank gaps between the label and the value — the markup was there, the styling simply never matched. */ .sr-track { height: 7px; background: rgba(133,152,176,0.22); border-radius: 4px; overflow: hidden; } .sr-fill { height: 100%; border-radius: 4px; } .score-row .sr-val { font-family: var(--mono); text-align: right; } .admin-stat-row { display: flex; gap: 0.8rem; margin: 0.6rem 0 1rem; } .admin-stat { flex: 1; text-align: center; background: rgba(133,152,176,0.1); border-radius: 10px; padding: 0.7rem 0.4rem; } .admin-stat b { display: block; font-size: 1.4rem; font-family: var(--mono); } .admin-stat span { font-size: 0.75rem; color: var(--muted); } .feedback-list { display: grid; gap: 0.5rem; max-height: 240px; overflow-y: auto; } .feedback-item { background: var(--surface-tint); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.6rem 0.7rem; } .feedback-item p { margin: 0 0 0.3rem; font-size: 0.85rem; white-space: pre-wrap; } .admin-search-row { display: flex; gap: 0.5rem; margin: 0.9rem 0; } .admin-search-row input { flex: 1; padding: 0.5rem 0.7rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text); font-family: var(--mono); font-size: 0.85rem; } .admin-search-row select { padding: 0.5rem 0.6rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text); font-size: 0.82rem; } #tr-horizon { padding: 0.4rem 0.6rem; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 8px; color: var(--text); font-size: 0.82rem; } .admin-search-results { display: grid; gap: 0.5rem; max-height: 280px; overflow-y: auto; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); } .admin-result { background: var(--surface-tint); border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.55rem 0.7rem; font-size: 0.82rem; } .admin-result .ar-head { display: flex; justify-content: space-between; gap: 0.6rem; color: var(--muted); font-size: 0.72rem; margin-bottom: 0.2rem; } .admin-result .ar-event { font-family: var(--mono); color: var(--accent); } .admin-result .ar-detail { white-space: pre-wrap; word-break: break-word; } .score-reason { grid-column: 1 / -1; color: var(--muted); font-size: 0.76rem; margin: -0.15rem 0 0.2rem; } /* debate */ .debate-flow { display: grid; gap: 0.9rem; } .debate-turn { border-radius: 11px; padding: 1rem 1.1rem; border: 1px solid var(--panel-border); } .debate-turn.bull { border-left: 4px solid var(--bull); background: rgba(57,217,138,0.05); } .debate-turn.bear { border-left: 4px solid var(--bear); background: rgba(255,93,85,0.05); } .debate-turn h4 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .debate-turn.bull h4 { color: var(--bull); } .debate-turn.bear h4 { color: var(--bear); } .steelman { background: var(--code-bg); border: 1px dashed var(--panel-border-hi); border-radius: 8px; padding: 0.5rem 0.7rem; margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-soft); } .steelman b { color: var(--text); } .verdict-banner { border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; border: 1px solid var(--panel-border-hi); background: linear-gradient(135deg, rgba(124,108,255,0.12), rgba(57,217,138,0.06)); } .verdict-winner { font-family: var(--display); font-size: 1.5rem; font-weight: 700; } .winner-BULL { color: var(--bull); } .winner-BEAR { color: var(--bear); } .winner-TOO_CLOSE { color: var(--neutral); } .settle-list { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.84rem; color: var(--text-soft); display: grid; gap: 0.25rem; } /* stock dna */ .dna-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1rem; } @media (max-width: 780px) { .dna-wrap { grid-template-columns: 1fr; } } .dna-radar-wrap { position: relative; height: 340px; } .archetype-badge { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 1.15rem; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .trait-row { display: grid; grid-template-columns: 130px 1fr 52px; gap: 0.6rem; align-items: center; font-size: 0.82rem; padding: 0.25rem 0; } .trait-row .t-label { color: var(--muted); } /* ---------- landing page: nav + sections ---------- */ .topbar--landing { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem 1.6rem; max-width: 1120px; margin: 0 auto; } .topbar--landing .brand { margin-right: auto; } .landing-nav { display: flex; gap: 1.4rem; } .landing-nav a { color: var(--muted); font-size: 0.88rem; text-decoration: none; transition: color 0.15s ease; } .landing-nav a:hover { color: var(--text); } @media (max-width: 780px) { .landing-nav { display: none; } } .lp-section { max-width: 1120px; margin: 0 auto; padding: 3.5rem 1.6rem; border-top: 1px solid var(--panel-border); } .lp-h2 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; } .lp-sub { color: var(--muted); max-width: 42rem; margin: 0 0 2rem; } .lp-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 1000px) { .lp-feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .lp-feature-grid { grid-template-columns: 1fr; } } .lp-feature-card { background: var(--surface-tint); border: 1px solid var(--panel-border); border-radius: 14px; padding: 1.3rem; } .lp-feature-card:hover { border-color: var(--panel-border-hi); } .lp-feature-icon { font-size: 1.6rem; display: block; margin-bottom: 0.6rem; } .lp-feature-card h3 { font-family: var(--display); font-size: 1.02rem; margin: 0 0 0.45rem; } .lp-feature-card p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin: 0; } .lp-shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media (max-width: 980px) { .lp-shot-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .lp-shot-grid { grid-template-columns: 1fr; } } .lp-shot { display: block; border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--surface-sunken); transition: border-color 0.15s ease, transform 0.15s ease; } .lp-shot:hover { border-color: var(--panel-border-hi); transform: translateY(-2px); } .lp-shot img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: top; background: var(--surface-sunken); } .lp-shot-cap { display: block; padding: 0.7rem 0.85rem; font-size: 0.78rem; color: var(--text-soft); border-top: 1px solid var(--panel-border); } .lp-steps { display: grid; gap: 1rem; } .lp-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--panel-border); } .lp-step:last-child { border-bottom: none; } .lp-step-n { font-family: var(--mono); font-size: 1.1rem; color: var(--accent); opacity: 0.7; } .lp-step h3 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 0.4rem; } .lp-step p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin: 0; max-width: 46rem; } .trait-row .t-raw { font-family: var(--mono); text-align: right; font-size: 0.76rem; color: var(--muted); } /* ---------- hover tooltips ---------- */ /* A styled, discoverable "what does this mean" hint, used on scores/badges/ jargon throughout the app instead of the browser's unstyled, delayed native title tooltip. Pure CSS (no JS wiring per element needed) — just add data-tooltip="..." to any element, plus .tooltip-below near the top of the viewport where an upward tooltip would clip off-screen. */ [data-tooltip] { position: relative; cursor: help; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-fg); border: 1px solid var(--panel-border-hi); padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.74rem; font-weight: 400; font-family: var(--sans, inherit); white-space: normal; width: max-content; max-width: 240px; text-align: left; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,0.45); /* display:none, not visibility:hidden — a hidden-but-laid-out absolutely positioned box still counts toward its scroll container's scrollWidth, so on a phone every off-screen tooltip (up to 240px wide, centred on its trigger) silently widened the whole page. Costs the fade-in; worth it. */ display: none; pointer-events: none; z-index: 300; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { display: block; } [data-tooltip].tooltip-below::after { bottom: auto; top: calc(100% + 8px); } [data-tooltip].tooltip-left::after { left: auto; right: 0; transform: none; } [data-tooltip].tooltip-right::after { left: 0; transform: none; } /* ============================================================ PHONE REFINEMENTS The breakpoints above handle "does it fit"; these handle "does it feel right at 390px" — reclaiming horizontal space eaten by desktop padding, making inputs and primary actions full-bleed and thumb-sized, and stopping desktop-scale headings from dominating a small screen. ============================================================ */ @media (max-width: 640px) { .layout { padding: 1rem 0.9rem 1.4rem; } .panel { padding: 0.95rem 1rem; } /* Desktop fixes a 200px market select next to a flexible symbol field; on a phone that reads as a broken half-width control. Stack both full-bleed instead. */ .field--country { width: 100%; } .field--symbol { min-width: 0; flex: 1 1 100%; } .search-panel { gap: 0.75rem; margin-bottom: 1rem; } .search-panel .btn, #screener-body .search-panel .btn { width: 100%; justify-content: center; } #screener-body .search-panel .field { flex: 1 1 100%; } /* Headings: desktop sizes swallow a phone screen. */ .section-head { margin: 1.2rem 0 0.7rem; } .section-head h2 { font-size: 1.02rem; } .section-head h3, #screener-panel h3 { font-size: 0.98rem; line-height: 1.35; } .panel-title { font-size: 0.95rem; } /* Tool cards: one per row beats a cramped two-up grid. */ .tool-grid { grid-template-columns: 1fr; } /* Modals should use the full screen rather than floating in a margin. */ .modal { padding: 1rem 0.95rem; border-radius: 14px; } .modal-backdrop { padding: 0.6rem; } /* Toasts span the width so the action button is comfortably tappable. */ .toast-stack { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; max-width: none; } /* Tables stay readable rather than shrinking to illegibility. */ .screener-table { font-size: 0.82rem; } .screener-summary { gap: 0.6rem; } .screener-summary-actions { width: 100%; } .screener-summary-actions .btn { flex: 1; justify-content: center; } } /* ============================================================ GRID/FLEX OVERFLOW GUARD A `1fr` track resolves its minimum to the item's min-content width, and a grid/flex item defaults to min-width:auto — so a single wide child (a table, a chart canvas, a long unbroken string) silently widens its whole track past the viewport instead of scrolling inside its own container. This bit the Research tab (.side-layout) and the Journal tab (.journal-grid) independently; rather than wait to be bitten a third time, every panel and scroll wrapper opts out of min-content sizing here, once. ============================================================ */ .panel, .side-main, .table-scroll, .chart-panel, .msg-chart-wrap { min-width: 0; } .journal-grid > *, .dna-wrap > *, .advisor-shell > *, .chart-grid > *, .research-grid > *, .thesis-grid > *, .exit-strategy-grid > *, .decision-tools-grid > *, .verdict-grid > *, .pn-grid > *, .desk-intro > *, .about-grid > *, .empty-grid > *, .scenario-grid > *, .side-layout > *, .tool-grid > *, .recent-list > *, .pnl-cards > *, .risk-stats > *, .tier-grid > * { min-width: 0; }