/* ============================================================================= Theme tokens — clean minimalist blue & white, financial-terminal format. Dark is the default; switches. Both modes are deliberately low-chroma: blue is the only hue that carries brand, everything else is neutral so the data does the talking. ============================================================================= */ :root{ color-scheme: dark; --page: #0a0e14; --surface: #111720; --surface-2: #171e29; --surface-3: #212a37; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.13); --ink: #f2f5f9; --ink-2: #9dadc0; /* 5.94:1 on --surface. Was #617083 at 3.56:1, which fails WCAG 1.4.3 AA (4.5:1 for body text) — and this token carries hint text, empty states, "NA" cells, timestamps and every placeholder in the app. Measured, not eyeballed; see mockups/accessibility-preview.html. */ --ink-muted: #8496ac; --invite: #a97bf0; --invite-bg: rgba(169,123,240,0.10); --invite-bg-hover: rgba(169,123,240,0.17); --brand-50: #101c30; --brand-100: #16263f; --brand-300: #7cb0f2; --brand-500: #3d87ea; --brand-600: #2f76d6; --brand-700: #7cb0f2; /* on dark, "strong" reads brighter, not darker */ --brand-900: #cfe3fb; --good: #16a34a; --good-bg: rgba(22,163,74,0.13); --bad: #ef5f5f; --bad-bg: rgba(239,95,95,0.13); --warn: #eab308; --warn-bg: rgba(234,179,8,0.13); /* NOT-VERIFIED orange. The trust split is the one distinction on this app that has to survive a glance, and grey did not carry it: grey is what every muted thing on the page already is, so a typed-in holding read as "quiet" rather than as "this does not count". Orange is the only hue left that says caution without saying loss — green and red are taken by P/L and must never be spent on provenance. These are the same two values .earn-cal-tbd already used; naming them here makes it ONE orange instead of two that drift apart. */ --unv: #fb923c; --unv-bg: rgba(251,146,60,0.14); /* Channel-manager role accent. The role badges use one hue each — admin green, lecturer yellow, user brand-blue — and purple was the hue left that reads as "elevated" without colliding with good/bad/warn. */ --role-manager: #a78bfa; --role-manager-bg: rgba(167,139,250,0.14); --radius: 10px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(0,0,0,0.4); --font: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace; } :root[data-theme="light"]{ color-scheme: light; --page: #f6f8fb; --surface: #ffffff; --surface-2: #f2f6fb; --surface-3: #e6eef8; --border: rgba(15,23,42,0.09); --border-2: rgba(15,23,42,0.16); --ink: #0f172a; --ink-2: #4b5a6d; /* 5.14:1 on white. Was #8494a8 at 3.10:1 — the worse of the two failures. */ --ink-muted: #5f6f83; --invite: #7c3aed; --invite-bg: rgba(124,58,237,0.08); --invite-bg-hover: rgba(124,58,237,0.14); --brand-50: #eef4fd; --brand-100: #dbe8fb; --brand-300: #7cb0f2; --brand-500: #2563eb; --brand-600: #1d4fd0; --brand-700: #17408f; --brand-900: #0d2a5e; --good: #12813c; --good-bg: #e7f6ec; --bad: #c62f2f; --bad-bg: #fdecec; --warn: #a86a00; --warn-bg: #fdf3dd; /* A dark-friendly orange washes out on white — the same reason .earn-cal-tbd carried a light override. Darker, not just less bright. */ --unv: #d9670d; --unv-bg: #fdeee0; --role-manager: #7c5cd6; --role-manager-bg: #efe9fb; --shadow: 0 1px 2px rgba(15,23,42,0.05); } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; font-family:var(--font); background:var(--page); color:var(--ink); font-size:14px; line-height:1.5; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px;} ::-webkit-scrollbar-thumb:hover{background:var(--ink-muted);} /* Numerals align in columns — the terminal tell */ .mono, .val, .chg, .kv .v, .metric .v, .earn-when .d, .trend-table td, .wl-table td{font-variant-numeric:tabular-nums;} /* ===== Layout ===== */ /* 100dvh, with 100vh kept above it as the fallback for browsers that do not know the unit (they ignore the second line and keep the first). --------------------------------------------------------------------------- On a phone, 100vh is the LARGE viewport: the height the page would have if the browser's address bar were hidden. It does not shrink when the bar is showing, so a 100vh box is always taller than what you can actually see, and its last ~60-100px start life underneath the browser chrome. dvh is the DYNAMIC viewport — the height available right now — which is what a full-height app shell actually wants. */ #app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;} /* The wrapper carries the stickiness, not the bar itself: a sticky element is confined to its parent's box, and #topbar is exactly as tall as .topbar — so sticking the inner element gives it zero room to travel and it scrolls away. */ #topbar{ position:sticky;top:0;z-index:60; } /* Single source of truth for the bar's height — the sidebar offsets from it, and a hardcoded guess left a 3px seam. */ :root{ --topbar-h: 52px; /* The phone tab bar's height, matching .tabbar-btn's min-height. Everything that has to keep clear of the bar reads this instead of guessing, because the guess is what gets forgotten: the bar is fixed to the bottom of the viewport and it covers whatever is under it, silently, on exactly the device nobody develops on. Add the safe-area inset alongside it — that is separate, and only non-zero on a notched iPhone. */ --tabbar-h: 54px; } .topbar{ display:flex;align-items:center;gap:14px; background:var(--surface); color:var(--ink); padding:9px 18px; border-bottom:1px solid var(--border); } .topbar .logo{ display:flex;align-items:center;gap:9px; font-weight:700;font-size:15px;letter-spacing:-.015em;white-space:nowrap;cursor:pointer; } .topbar .logo .logo-word{ background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 55%, var(--brand-500) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .search-wrap{position:relative;flex:1;max-width:520px;} /* Must out-specify the generic input[type=text] rule further down (same specificity as input.search-input, so source order would win). */ .topbar input.search-input{ width:100%;padding:7px 12px;border-radius:var(--radius-sm); border:1px solid var(--border-2); background:var(--surface-2);color:var(--ink);font-size:13px; } .topbar input.search-input::placeholder{color:var(--ink-muted);} .topbar input.search-input:focus{border-color:var(--brand-500);background:var(--surface);} .search-results{ position:absolute;top:calc(100% + 6px);left:0;right:0; background:var(--surface);color:var(--ink); border-radius:var(--radius-sm);box-shadow:var(--shadow); max-height:360px;overflow:auto;z-index:60;border:1px solid var(--border); } .search-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;} .search-item:hover, .search-item.active{background:var(--surface-2);} /* Keyboard highlight needs to read differently from a passing mouse hover. */ .search-item.active{box-shadow:inset 2px 0 0 var(--brand-700);} .search-item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .search-item .sym{font-weight:700;color:var(--brand-700);min-width:56px;} .search-item .nm{color:var(--ink-2);font-size:12.5px;flex:1;} .search-item .exch{font-size:11px;color:var(--ink-muted);background:var(--surface-2);padding:2px 6px;border-radius:6px;} .topbar-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto;} .persona-btn{ display:flex;align-items:center;gap:7px; background:transparent;border:1px solid var(--border); color:var(--ink);padding:5px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:12.5px; } .persona-btn:hover{background:var(--surface-2);border-color:var(--border-2);} .persona-btn .caret{font-size:9px;color:var(--ink-muted);margin-inline-start:2px;} /* Account switcher menu */ .account-wrap{position:relative;} .account-menu{ position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:250px; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:0 10px 30px rgba(0,0,0,0.28);z-index:70;overflow:hidden;padding:4px; } .account-menu-head{ font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-muted);padding:7px 9px 5px; } .account-menu-sep{height:1px;background:var(--border);margin:4px 0;} .account-row{ display:flex;align-items:center;gap:9px;padding:7px 9px;cursor:pointer; border-radius:calc(var(--radius-sm) - 2px); } .account-row:hover{background:var(--surface-2);} .account-row.active{background:var(--brand-50);} .account-name{display:flex;flex-direction:column;flex:1;min-width:0;} .account-name .n{font-size:12.5px;font-weight:600;} .account-name .e{ font-size:10.5px;color:var(--ink-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .persona-avatar.sm{width:22px;height:22px;font-size:9px;} .icon-btn{ display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:var(--radius-sm); background:transparent;border:1px solid var(--border); color:var(--ink-2);cursor:pointer;font-size:14px;padding:0; } .icon-btn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border-2);} /* ------------------------------------------------- the market clock ------- Sits right of the bell. Wider than the square icon buttons because it carries text, so it opts out of the fixed 30px width rather than squeezing a time and a countdown into it. */ .mkt-clock{ width:auto; gap:7px; padding:0 9px; font-family:var(--mono); font-size:11.5px; font-weight:700; white-space:nowrap; } /* The clock and its "i" as one unit, so they cannot be separated by a wrap. */ .mkt-wrap{ display:inline-flex; align-items:center; gap:5px; flex:none; } /* RED shut, GREEN open — the owner's call, replacing the blue this shipped with. Red reads as "you cannot trade now" at a glance, which is the question the clock is there to answer. The word Open/Closed sits beside the dot, so colour is never carrying the meaning on its own. */ .mkt-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--bad); } .mkt-clock.is-open .mkt-dot{ background:var(--good); } .mkt-time{ color:var(--ink); } /* The state word carries the same colour as the dot and the countdown, so the three read as one statement rather than three separate facts. */ .mkt-state{ color:var(--bad); font-weight:800; } .mkt-until{ color:var(--bad); font-weight:600; } .mkt-clock.is-open .mkt-state, .mkt-clock.is-open .mkt-until, .mkt-clock.is-open .mkt-time{ color:var(--good); } /* Below the point where the topbar starts fighting for room, the countdown goes and the clock keeps its dot and time — the state and the hour are what earn the space. The full sentence stays in the tooltip and the aria-label, so nothing is lost, only shortened. */ @media (max-width:900px){ /* The countdown goes first — the state word and the hour are what earn the space. The full sentence stays in the tooltip and the aria-label. */ .mkt-until{ display:none; } } @media (max-width:760px){ /* Then the "i" — its legend is a paragraph, and a paragraph is the wrong thing to reach for on a phone toolbar. */ .mkt-wrap .info-tip{ display:none; } } @media (max-width:620px){ .mkt-wrap{ display:none; } } /* ----------------------------------------------------------- Creator Hub -- The real Option D portal at #/community. */ .hub-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0 14px;} .hub-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;} .hub-kpi .l{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);} .hub-kpi .v{font-size:20px;font-weight:800;font-family:var(--mono);margin-top:3px;} .hub-kpi .s{font-size:11px;color:var(--ink-muted);margin-top:2px;} .hub-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start;} @media (max-width:980px){.hub-grid{grid-template-columns:1fr;}} .hub-org-chip{ display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700; border:1px solid var(--border-2);border-radius:20px;padding:4px 12px;cursor:pointer; } .hub-org-chip:hover{background:var(--surface-2);} .hub-org-chip .ic{ width:18px;height:18px;border-radius:5px;background:var(--brand-500);color:#fff; display:inline-flex;align-items:center;justify-content:center;font-size:10px; } .hub-org-chip .sub{color:var(--ink-muted);font-weight:600;} .hub-org-edit{background:transparent;border:none;color:var(--ink-muted);cursor:pointer;font-size:12px;padding:0 2px;} .hub-org-edit:hover{color:var(--ink);} .hub-ta{ width:100%;min-height:74px;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--radius-sm);color:var(--ink);padding:10px;font-family:inherit; font-size:13px;resize:vertical; } .hub-rec{ display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px; border:1px dashed var(--brand-500);border-radius:var(--radius-sm);padding:8px 10px; background:color-mix(in srgb, var(--brand-500) 5%, transparent); } .hub-rec .s{color:var(--ink-muted);} /* Parked: the dashed brand border said "new thing, try me", which is the wrong invitation for a control that cannot be pressed. Neutral border, flat background, no accent. */ .hub-rec.is-parked{ border-style:solid; border-color:var(--border-2); background:var(--surface-2); flex-wrap:wrap; } .hub-rec.is-parked .btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; } /* The tag that explains the greying. --ink-2 on --surface-3, not muted-on-muted: the label saying WHY a control is off is the one thing in the row that has to stay readable. */ .hub-soon{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); background:var(--surface-3); border:1px solid var(--border-2); border-radius:999px; padding:2px 8px; flex:none; white-space:nowrap; } .hub-rec-preview{width:100%;max-height:260px;border-radius:var(--radius-sm);margin-top:8px;background:#000;} table.hub-perf{width:100%;border-collapse:collapse;font-size:12px;} .hub-perf th{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);text-align:left;padding:6px 12px;border-bottom:1px solid var(--border);} .hub-perf td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top;} .hub-perf td.n{font-family:var(--mono);font-weight:700;} .hub-perf tbody tr{cursor:pointer;} .hub-perf tbody tr:hover td{background:var(--surface-2);} .hub-perf .b{font-weight:600;} .hub-perf .m{font-size:10.5px;color:var(--ink-muted);margin-top:2px;} .hub-perf tr:last-child td{border-bottom:none;} /* Video attachments in channel posts (Hub screen recordings). */ .chx-att-video{width:100%;max-height:320px;border-radius:var(--radius-sm);margin-top:8px;background:#000;} /* Bell: the dot pins to the button's top-right corner (the button is the positioning context), red because it means "something needs you". */ .bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;} .bell-ic{color:var(--ink-muted);display:block;} .bell-btn:hover .bell-ic{color:var(--ink);} /* Something is waiting: the bell fills in and the dot appears. Two signals rather than one, because a 9px dot alone is easy to miss in a top bar. */ .bell-btn.has-unread .bell-ic{color:var(--ink);} .bell-btn.has-unread .bell-ic path:first-child{fill:var(--ink);} .bell-dot{ position:absolute;top:1px;right:1px;width:9px;height:9px;border-radius:50%; background:#ef4444;border:2px solid var(--surface); box-shadow:0 0 0 1px rgba(239,68,68,0.35); } /* "Coming soon" — a feature that is designed and visible but deliberately inert. Muted rather than branded: it must not compete with what works. */ .badge.soon{background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--border);} /* The mini profile card: who is this, can I follow them, what of theirs is public. Anchored to the clicked name, so it is positioned in page coordinates rather than being a centred modal. */ .mini-profile{ position:absolute;z-index:200;width:260px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);box-shadow:0 18px 44px rgba(0,0,0,0.28); padding:14px; } .mp-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;} .mp-name{font-weight:700;font-size:14px;} .mp-sub{font-size:11.5px;color:var(--ink-muted);} .mp-rows{display:flex;flex-direction:column;gap:6px;} .mp-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;} /* Two buttons side by side under the rows: View profile (always) and Follow. They share the width so neither reads as the primary action — looking at somebody is as valid an answer as following them. */ .mp-actions{display:flex;gap:8px;margin-top:12px;align-items:center;} .mp-actions .btn{flex:1;min-width:0;} .mp-follow{margin-top:0;} /* The money row. .up/.down are the app-wide green/red, so a profit here is the same colour as a profit everywhere else. */ .mp-row .mono{font-weight:700;} /* An author's name is a button, but it must still read as a name. */ .person-link{ background:none;border:none;padding:0;font:inherit;color:inherit; cursor:pointer;text-align:start; } .person-link:hover{color:var(--brand-500);text-decoration:underline;} /* Public profile (#/u/:id): somebody else's watchlists, one block per list. The symbols wrap as chips rather than sitting in a table — a watchlist is a bag of tickers, not a grid of measurements. */ .pub-wl{padding:10px 0;border-bottom:1px solid var(--border);} .pub-wl:last-child{border-bottom:none;padding-bottom:0;} .pub-wl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;} .pub-wl-syms{display:flex;flex-wrap:wrap;gap:6px;} .pub-wl-syms .chip{padding:4px 10px;font-size:11.5px;text-decoration:none;} /* Destructive corner of a settings card: set apart so "delete everything" never sits flush against the ordinary controls above it. */ .chx-danger{ margin-top:16px;padding-top:14px;border-top:1px solid var(--border); } .chx-danger-h{font-size:13px;font-weight:700;color:var(--bad);margin-bottom:4px;} .chx-danger .btn.danger{margin-top:10px;} /* A tab that needs an answer — Friends → "Sent to me" while requests wait. */ .tab-dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:#ef4444;margin-inline-start:6px;vertical-align:middle; box-shadow:0 0 0 2px rgba(239,68,68,0.22); } .persona-avatar{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;} .persona-menu{ position:absolute;top:56px;inset-inline-end:20px; background:var(--surface);color:var(--ink);border-radius:var(--radius); box-shadow:var(--shadow);border:1px solid var(--border); min-width:260px;z-index:70;overflow:hidden; } .persona-menu h4{margin:0;padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);background:var(--surface-2);} .persona-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-top:1px solid var(--border);} .persona-row:hover{background:var(--surface-2);} .persona-row.active{background:var(--brand-50);} .persona-row .persona-avatar{width:32px;height:32px;font-size:13px;} .persona-row .meta{flex:1;min-width:0;} .persona-row .meta .nm{font-weight:600;font-size:13.5px;} .persona-row .meta .role{font-size:11.5px;color:var(--ink-muted);} .body-wrap{display:flex;flex:1;min-height:0;} .sidenav{ width:206px;flex:none;background:var(--surface); border-inline-end:1px solid var(--border); padding:10px 8px;display:flex;flex-direction:column;gap:1px; transition:width .16s ease; position:sticky;top:var(--topbar-h);align-self:flex-start; height:calc(100vh - var(--topbar-h));overflow-y:auto;overflow-x:hidden; } .sidenav a{ display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm); color:var(--ink-2);font-size:13px;font-weight:500;white-space:nowrap; } .sidenav a .ic{width:18px;text-align:center;flex:none;font-size:14px;} .sidenav a .lbl{overflow:hidden;text-overflow:ellipsis;} .sidenav a:hover{background:var(--surface-2);color:var(--ink);} .sidenav a.active{background:var(--brand-50);color:var(--brand-700);font-weight:600;} .sidenav .sep{height:1px;background:var(--border);margin:7px 6px;} /* Expandable nav group (parent row + caret) */ .nav-group-row{display:flex;align-items:center;gap:2px;} .nav-group-row .nav-group-link{flex:1;min-width:0;} .nav-caret{ flex:none;width:20px;height:26px;padding:0; background:transparent;border:none;cursor:pointer; color:var(--ink-muted);font-size:9px;line-height:1; display:flex;align-items:center;justify-content:center;border-radius:4px; } .nav-caret:hover{background:var(--surface-2);color:var(--ink);} .sidenav a.nav-child{ padding-inline-start:26px;font-size:12.5px; } .sidenav a.nav-child .ic{font-size:12px;} .sidenav.collapsed .nav-caret{display:none;} .sidenav.collapsed a.nav-child{padding-inline-start:0;} /* Collapse toggle */ .nav-collapse{ display:flex;align-items:center;justify-content:flex-end; margin-bottom:4px;padding:0 2px; } .nav-collapse button{ width:26px;height:26px;border-radius:var(--radius-sm); background:transparent;border:1px solid var(--border); color:var(--ink-muted);cursor:pointer;font-size:12px;line-height:1; display:flex;align-items:center;justify-content:center; } .nav-collapse button:hover{background:var(--surface-2);color:var(--ink);} /* Collapsed state: icons only */ .sidenav.collapsed{width:52px;} .sidenav.collapsed a{justify-content:center;padding:8px 0;gap:0;} .sidenav.collapsed a .lbl{display:none;} .sidenav.collapsed .nav-collapse{justify-content:center;} /* tooltip so collapsed icons stay identifiable */ .sidenav.collapsed a{position:relative;} .sidenav.collapsed a::after{ content:attr(data-label); position:absolute;inset-inline-start:calc(100% + 8px);top:50%;transform:translateY(-50%); background:var(--ink);color:var(--page); padding:4px 8px;border-radius:var(--radius-sm);font-size:11.5px;font-weight:600; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:90; } .sidenav.collapsed a:hover::after{opacity:1;} main.content{flex:1;min-width:0;padding:18px 22px 60px;max-width:1240px;margin:0 auto;width:100%;} /* The heatmap is the one page whose value scales with width — 500 tiles in a 1240px column are slivers. It gets the whole window. */ main.content.wide{max-width:none;} /* ===== Generic pieces ===== */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);} .card-pad{padding:14px 16px;} .page-title{font-size:18px;font-weight:700;margin:0 0 3px;letter-spacing:-.01em;} .page-sub{color:var(--ink-2);font-size:12.5px;margin:0 0 16px;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}} .btn{ display:inline-flex;align-items:center;gap:6px;justify-content:center; background:var(--brand-500);color:#fff;border:1px solid var(--brand-500);padding:7px 14px; border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer; } .btn:hover{background:var(--brand-600);border-color:var(--brand-600);} .btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--border-2);} .btn.secondary:hover{background:var(--surface-2);} .btn.ghost{background:transparent;color:var(--brand-700);border-color:transparent;} .btn.ghost:hover{background:var(--surface-2);} .btn.sm{padding:4px 10px;font-size:12px;} .btn:disabled{opacity:.5;cursor:default;} .badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;} .badge.good{background:var(--good-bg);color:var(--good);} .badge.bad{background:var(--bad-bg);color:var(--bad);} .badge.brand{background:var(--brand-50);color:var(--brand-700);} .badge.live{background:var(--bad-bg);color:var(--bad);} .badge.live .dot{width:6px;height:6px;border-radius:50%;background:var(--bad);animation:pulse 1.4s infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}} /* .tabs / .tab are GONE — 2026-08-06. Every strip that used them (Admin, Chart, Earnings, Heatmap, Profile) is now a segmented control, so what is left here is only the spacing each host wants around it. See js/components/segmented.js for why, and .segctl below for the styling. Deleting the rules rather than leaving them for "something might still use it" was checked, not assumed: no class attribute in js/ or the HTML entry points matches `.tab` or `.tabs` any more. The similar names that remain — .chx-tab in Channels, .tab-dot in Friends, .chart-tab-body — are separate selectors these rules never applied to. */ .admin-tabs{margin-bottom:14px;} .earn-tabs{margin-bottom:14px;} .avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:none;} input[type=text], input[type=number], select, textarea{ border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px; font-size:13.5px;background:var(--surface);color:var(--ink);font-family:inherit; } textarea{width:100%;resize:vertical;} label.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2);font-weight:600;} .empty-hint{color:var(--ink-muted);font-size:13px;padding:20px;text-align:center;} /* The one survivor of the old demo feed's CSS: the symbol pill, still used by the Profile page's watchlist/holdings chips. */ .post-tag{font-size:11.5px;font-weight:700;color:var(--brand-700);background:var(--brand-50);padding:2px 8px;border-radius:8px;cursor:pointer;} /* Watchlist / table */ .wl-table{width:100%;border-collapse:collapse;} .wl-table th{text-align:start;font-size:11px;text-transform:uppercase;color:var(--ink-muted);padding:6px 10px;border-bottom:1px solid var(--border);} .wl-table td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:13px;} .wl-table tr:last-child td{border-bottom:none;} .wl-table tr:hover td{background:var(--surface-2);} .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .chip{padding:6px 14px;border-radius:16px;background:var(--surface-2);font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border-2);color:var(--ink-2);} .chip:hover{background:var(--surface-3);color:var(--ink);} .chip.active{background:var(--brand-500);color:#fff;border-color:var(--brand-500);} /* Reorder arrows inside a watchlist chip — quiet until hovered, and they inherit the chip's ink so they stay readable on the active (filled) chip. */ .chip-move{background:none;border:none;cursor:pointer;color:inherit;opacity:.45;font-size:10px;padding:0 3px;} .chip-move:hover{opacity:1;} .chip-pin{font-size:11px;} /* Stock detail */ .stock-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;} .stock-price{font-size:30px;font-weight:800;} .stock-sym{font-size:22px;font-weight:800;color:var(--brand-700);} .chart-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .seg{display:flex;background:var(--surface-2);border-radius:8px;padding:2px;gap:2px;border:1px solid var(--border);} .seg button{border:none;background:transparent;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;} .seg button:hover{color:var(--ink);} .seg button.active{background:var(--brand-500);color:#fff;} .indicator-list{display:flex;gap:6px;flex-wrap:wrap;} .etf-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;} .etf-card{flex:none;width:150px;padding:10px 12px;} /* The rail (dots + connecting line) runs through the VERTICAL CENTER of the strip: date above the dot, EPS + verdict below, and the line segments are drawn from each dot outward (::before/::after on the dot itself), so they sit exactly on the dots' centerline by construction. */ .earnings-timeline{display:flex;gap:0;overflow-x:auto;padding:6px 0;} .earn-node{ flex:none;width:130px;text-align:center;padding:0 6px; display:grid;grid-template-rows:1fr auto 1fr;justify-items:center; } .earn-node .lbl{align-self:end;font-size:11px;font-weight:700;margin:0 0 7px;} .earn-meta{align-self:start;display:flex;flex-direction:column;align-items:center;} .earn-dot{width:10px;height:10px;border-radius:50%;background:var(--brand-500);position:relative;} .earn-dot::before,.earn-dot::after{ content:"";position:absolute;top:50%;transform:translateY(-50%); height:2px;width:60px;background:var(--border); } .earn-dot::before{right:100%;} .earn-dot::after{left:100%;} .earn-node:first-child .earn-dot::before{display:none;} .earn-node:last-child .earn-dot::after{display:none;} .earn-node.future .earn-dot{background:var(--ink-muted);} .earn-meta .dt{font-size:10.5px;color:var(--ink-muted);margin-top:7px;} /* The analyst estimate, directly under the reported figure. Quieter than the actual on purpose: the pair reads "here is what happened, and here is what was expected", not two equal numbers the reader has to tell apart. */ .earn-meta .est{font-size:9.5px;color:var(--ink-muted);opacity:.8;margin-top:1px;} /* Three tiers, same three the Financials tab uses — see js/expectations.js. These take the app's own semantic tokens rather than the saturated dot colours: a filled badge at --warn's brightness would shout, where a 6px dot at the same value only reads. */ .badge.earn-tier.beat{background:var(--good-bg);color:var(--good);} .badge.earn-tier.inline{background:var(--warn-bg);color:var(--warn);} .badge.earn-tier.miss{background:var(--bad-bg);color:var(--bad);} /* ---- the upcoming report, last node on the timeline ---------------------- Amber throughout, and amber is NOT one of the three result colours here — green, red and the in-line yellow all describe something that happened. This node describes something that has not, so it needs a colour that cannot be mistaken for a verdict. The countdown badge is outlined rather than filled for the same reason: a solid badge in this row means a result. */ .earn-node.future .lbl{color:var(--warn);} .earn-node.future .earn-dot{ background:var(--surface);box-shadow:inset 0 0 0 2px var(--warn); } /* The rail INTO this node is dashed, so the break between reported and expected is visible along the line itself and not only at its end. */ .earn-node.future .earn-dot::before{ background:none; border-top:2px dashed var(--warn); height:0;opacity:.75; } .earn-meta .est-eps{color:var(--warn);font-weight:700;} .earn-node.future .earn-meta .est{color:var(--warn);opacity:.85;} .badge.earn-tier.upcoming{ background:transparent;color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn); } /* Friends / Messages */ .friend-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);} .friend-row:last-child{border-bottom:none;} .friend-row .meta{flex:1;min-width:0;} .friend-row .nm{font-weight:700;font-size:13.5px;} .online-dot{width:8px;height:8px;border-radius:50%;background:#c3c2b7;flex:none;} .online-dot.on{background:var(--good);} .msg-shell{display:flex;height:calc(100vh - 150px);min-height:420px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);} .conv-list{width:270px;flex:none;border-inline-end:1px solid var(--border);overflow-y:auto;} .conv-row{display:flex;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);} .conv-row:hover, .conv-row.active{background:var(--surface-2);} .conv-row .meta{flex:1;min-width:0;} .conv-row .nm{font-weight:700;font-size:13px;} .conv-row .last{font-size:11.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-pane{flex:1;display:flex;flex-direction:column;min-width:0;} .chat-head{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:10px;} .chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;} .bubble{max-width:60%;padding:9px 13px;border-radius:14px;font-size:13px;} .bubble.me{align-self:flex-end;background:var(--brand-500);color:#fff;border-end-end-radius:4px;} .bubble.them{align-self:flex-start;background:var(--surface-2);border-end-start-radius:4px;} .bubble .ts{display:block;font-size:10px;opacity:.7;margin-top:3px;} .chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);} .chat-input input{flex:1;} /* Community / rooms */ .room-list{display:flex;flex-direction:column;gap:4px;} .room-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;} .room-item:hover{background:var(--surface-2);} .room-item.active{background:var(--brand-50);color:var(--brand-700);font-weight:700;} .role-card{padding:14px;border:1px solid var(--border);border-radius:var(--radius);} .role-card h4{margin:0 0 4px;font-size:14px;} .role-card .price{font-weight:800;color:var(--brand-700);font-size:18px;} /* Integrations */ .token-box{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px dashed var(--brand-300);border-radius:var(--radius-sm);padding:10px 12px;font-family:monospace;font-size:12.5px;word-break:break-all;} .step{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);} .step:first-child{border-top:none;} .step .num{width:26px;height:26px;border-radius:50%;background:var(--brand-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none;} /* Profile */ .profile-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;} .trust-ring{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none;background:conic-gradient(var(--brand-500) calc(var(--pct)*1%), var(--surface-2) 0);} .trust-ring span{background:var(--surface);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .stat-box{text-align:center;padding:10px;} .stat-box .n{font-size:18px;font-weight:800;color:var(--brand-700);} .stat-box .l{font-size:11px;color:var(--ink-muted);} /* ===================== HOME / TERMINAL DASHBOARD ===================== */ .demo-banner{ display:flex;align-items:center;gap:8px;justify-content:center; background:var(--warn-bg);color:var(--warn); border:1px solid rgba(250,178,25,0.35);border-radius:var(--radius-sm); padding:7px 14px;font-size:12px;font-weight:700;margin-bottom:16px; letter-spacing:.02em; } /* Hero search */ .hero{padding:26px 0 22px;text-align:center;} .hero h1{font-size:26px;font-weight:800;margin:0 0 6px;letter-spacing:-.01em;} .hero p{color:var(--ink-2);font-size:13.5px;margin:0 0 18px;} .ask-wrap{position:relative;max-width:680px;margin:0 auto;} .ask-box{ display:flex;align-items:center;gap:10px; background:var(--surface);border:1px solid var(--border-2); border-radius:26px;padding:5px 6px 5px 18px; box-shadow:var(--shadow);transition:border-color .15s; } .ask-box:focus-within{border-color:var(--brand-500);} .ask-box input{ flex:1;border:none;background:transparent;color:var(--ink); font-size:14.5px;padding:10px 0;font-family:inherit; } .ask-box input::placeholder{color:var(--ink-muted);} .ask-send{ border:none;background:var(--brand-500);color:#fff;cursor:pointer; width:38px;height:38px;border-radius:50%;flex:none;font-size:15px; display:flex;align-items:center;justify-content:center; } .ask-send:hover{background:var(--brand-600);} .ask-suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px;} .ask-sugg{ font-size:12px;color:var(--ink-2);background:var(--surface-2); border:1px solid var(--border);border-radius:14px;padding:5px 12px;cursor:pointer; } .ask-sugg:hover{border-color:var(--brand-500);color:var(--ink);} /* Index strip */ .index-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} @media (max-width:900px){.index-strip{grid-template-columns:repeat(2,1fr);}} /* Roughly half the height these tiles used to be. Four index quotes are orientation, not the point of the page — at the old size they pushed the Market Summary and the heatmap below the fold on a laptop. Everything is still here, just at a density that matches how long anyone looks at it. */ /* The sparkline sits BESIDE the numbers, not on top of them. --------------------------------------------------------------------------- It used to be position:absolute at the right edge, which meant it was not in the layout at all and the tile had no idea it was there. Measured on a real tile: "54,036.93 +151.83 (+0.28%)" is 183px wide inside 176px of usable width, with the 52px spark drawn over the last 52 of those — so the percent change was always partly behind a green line. Flex makes the overlap impossible by construction rather than by choosing the right padding. The tile is width:auto in the marquee now (see .idx-marquee .index-tile), so a long index name widens its own tile instead of squeezing its numbers. The marquee scrolls, so tiles of different widths cost nothing. */ .index-tile{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:5px 10px;position:relative;overflow:hidden; display:flex;align-items:center;gap:10px; } .index-tile .idx-txt{min-width:0;} .index-tile .nm{font-size:9px;color:var(--ink-muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;} /* Value and change share a line: stacking three rows is what made these tiles tall, and the pair reads naturally side by side. nowrap because the tile sizes itself to this line — allowing a wrap would let it wrap instead of growing, and put the change under the value again. */ .index-tile .idx-nums{white-space:nowrap;line-height:1.2;} .index-tile .val{font-size:14px;font-weight:800;font-family:var(--mono);margin:0;line-height:1.2;display:inline-block;margin-inline-end:6px;} .index-tile .chg{font-size:10px;font-weight:700;font-family:var(--mono);line-height:1.2;display:inline-block;} /* margin-inline-start:auto pins it to the far edge when the tile is wider than its content — which is what min-width does to the short ones. */ .index-tile .spark{flex:none;margin-inline-start:auto;opacity:.55;line-height:0;} .up{color:var(--good);} .down{color:var(--bad);} /* ---- Paged panels: the search box and the pager (js/components/paged-panel.js) The box lives in the section header, pushed to the far end by margin-inline- start:auto — .sec-head is a flex row with space-between, and dropping a third child into it would otherwise spread all three evenly and leave the search floating in the middle. */ .panel-search{ display:inline-flex;align-items:center;gap:6px; margin-inline-start:auto; background:var(--surface-2);border:1px solid var(--border-2); border-radius:999px;padding:4px 12px; } .panel-search:focus-within{border-color:var(--brand-500);} .panel-search-ic{font-size:13px;color:var(--ink-muted);line-height:1;} .panel-search-in{ background:none;border:none;color:var(--ink); font-family:inherit;font-size:12.5px;width:132px;padding:2px 0; } .panel-search-in:focus{outline:none;} .panel-search-in::placeholder{color:var(--ink-muted);} /* The browser's own clear "x" on type=search is drawn in the UA's colours and looks pasted on in dark mode. The field is short enough to clear by hand. */ .panel-search-in::-webkit-search-cancel-button{-webkit-appearance:none;} .panel-pager{ display:flex;align-items:center;gap:5px;flex-wrap:wrap; margin-top:9px;padding:0 2px; } .panel-more{ display:inline-flex;align-items:center;gap:6px; background:none;border:1px solid var(--border-2);border-radius:999px; color:var(--ink-2);font-family:inherit;font-size:11.5px;font-weight:700; padding:4px 12px;cursor:pointer; } .panel-more:hover{border-color:var(--brand-500);color:var(--ink);} .panel-more .ic{font-size:12px;line-height:1;} .panel-page{ min-width:24px;height:24px;padding:0 6px; background:none;border:1px solid transparent;border-radius:6px; color:var(--ink-2);font-family:inherit;font-size:11.5px;font-weight:700; cursor:pointer; } .panel-page:hover:not(:disabled){background:var(--surface-2);color:var(--ink);} .panel-page.on{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-500);} /* Disabled ‹ / › keep their space rather than vanishing: buttons that appear and disappear make the row jump as you page, and the jump reads as the page having changed more than it did. */ .panel-page:disabled{opacity:.32;cursor:default;} .panel-gap{color:var(--ink-muted);font-size:11.5px;padding:0 2px;} /* Pushed to the far end, so the page buttons stay together on the left. */ .panel-count{margin-inline-start:auto;font-size:11px;color:var(--ink-muted);} /* Dimmed while a page is in flight — enough to say "working", not enough to make the rows unreadable, because most of these fetches land in under a frame or two and a spinner would flash. */ .is-loading{opacity:.55;transition:opacity .12s;} @media (max-width:560px){ /* The header stacks on a phone; a full-width box beats a 132px one squeezed next to a title. */ .panel-search{margin-inline-start:0;width:100%;} .panel-search-in{width:100%;} } /* ---- Overview: quarterly performance, four small charts ------------------ Small multiples. Two columns on a desktop, one on a phone — the panels are independent, so a narrow screen loses nothing but width. The old shared-axis overlay is gone, and with it .qmix-readout, .qmix-legend, .qmix-modes and their rules: four quantities with different volatility cannot share one axis, so the readout, the legend toggles and the Numbers/% switch were all machinery for managing a problem that no longer exists. See js/charts/quarterly-mix.js. */ .qmix-grid{ display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px; } @media (max-width:760px){ .qmix-grid{grid-template-columns:1fr;} } .qmix-mini{ border:1px solid var(--border);border-radius:10px;padding:10px 12px 4px; /* overflow:visible on the svg lets the end labels sit past the plot; the panel has to allow that too or they are clipped at its border. */ overflow:visible; } .qmix-mini-h{ font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; margin:0 0 2px; } .qmix-mini-v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;} /* The year-on-year change beside the headline figure — quieter, because the figure is the fact and the change is the comparison. */ .qmix-mini-v .c{ font-size:11.5px;font-weight:600;color:var(--ink-muted);margin-inline-start:7px; } /* ---- Chart right rail: the News section ----------------------------------- Whole-block links rather than a link inside a row: the headline, the source and the timestamp are all one target, which is what a thumb needs. */ .chart-ws-news{display:flex;flex-direction:column;} .chart-ws-news-item{ display:block;padding:8px 10px;border-bottom:1px solid var(--border); color:var(--ink);text-decoration:none; } .chart-ws-news-item:last-child{border-bottom:none;} .chart-ws-news-item:hover{background:var(--surface-2);} .chart-ws-news-item:focus-visible{outline:2px solid var(--brand-500);outline-offset:-2px;} /* Three lines maximum. A rail is narrow and some headlines are a paragraph; without the clamp one story can be taller than the four beneath it. */ .chart-ws-news-item .hl{ font-size:12px;font-weight:600;line-height:1.4; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .chart-ws-news-item .meta{ display:flex;gap:5px;align-items:center;flex-wrap:wrap; font-size:10.5px;color:var(--ink-muted);margin-top:3px; } .chart-ws-news-item .meta .dot{opacity:.6;} /* Section shell */ .sec{margin-top:22px;} .sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;} .sec-title{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:-.005em;} .sec-title .ic{color:var(--brand-500);} .sec-sub{font-size:11.5px;color:var(--ink-muted);} /* AI summary cards */ .ai-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;} .ai-card.accent{border-inline-start:3px solid var(--brand-500);} .ai-badge{ display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800; background:var(--brand-50);color:var(--brand-300);border:1px solid rgba(109,167,236,0.3); padding:2px 8px;border-radius:10px;letter-spacing:.04em; } .ai-body{font-size:13.5px;line-height:1.75;color:var(--ink-2);margin:10px 0 0;} .ai-body strong{color:var(--ink);font-weight:700;} .sources{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);} .sources-title{font-size:10.5px;font-weight:800;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px;} .source-row{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-2);padding:4px 0;} .source-row .n{ flex:none;width:16px;height:16px;border-radius:4px;background:var(--surface-3); color:var(--brand-300);font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center; font-family:var(--mono);margin-top:1px; } .source-row .src{color:var(--brand-300);font-weight:700;} .source-row .dt{color:var(--ink-muted);} /* Heatmap */ .heatmap{display:flex;flex-wrap:wrap;gap:3px;} .heat-tile{ border-radius:4px;padding:9px 10px;display:flex;flex-direction:column;justify-content:center; cursor:pointer;overflow:hidden;transition:transform .1s;min-height:54px; } .heat-tile:hover{transform:scale(1.01);outline:1.5px solid var(--ink);} .heat-tile .sym{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;} .heat-tile .pct{ font-size:13px;font-weight:600;color:rgba(255,255,255,0.94); font-family:var(--mono);font-variant-numeric:tabular-nums;margin-top:2px; } .heat-legend{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-muted);margin-top:8px;justify-content:center;} .heat-legend .sw{width:22px;height:9px;border-radius:2px;} /* Trending table */ .trend-table{width:100%;border-collapse:collapse;} .trend-table th{ text-align:start;font-size:10px;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-muted);padding:7px 10px;border-bottom:1px solid var(--border);font-weight:800; } .trend-table td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:12.5px;} .trend-table tr:last-child td{border-bottom:none;} .trend-table tbody tr{cursor:pointer;} .trend-table tbody tr:hover td{background:var(--surface-2);} .trend-table .mono{font-family:var(--mono);} .rank{color:var(--ink-muted);font-family:var(--mono);font-size:11px;} /* Earnings hub */ .earn-tabs{display:flex;gap:4px;margin-bottom:10px;} .earn-row{ display:flex;align-items:center;gap:12px;padding:11px 12px; border-bottom:1px solid var(--border);cursor:pointer; } .earn-row:last-child{border-bottom:none;} .earn-row:hover{background:var(--surface-2);} /* The next call still to happen, in a symbol's year-grouped history — an inset shadow rather than a real border so it doesn't add width and throw off alignment with the plain rows above/below it in the same card. */ .earn-row.next{box-shadow:inset 0 0 0 2px var(--brand-500);border-radius:var(--radius-sm);} .earn-when{ flex:none;width:62px;text-align:center;background:var(--surface-2); border:1px solid var(--border);border-radius:6px;padding:4px 0; } .earn-when .d{font-size:15px;font-weight:800;font-family:var(--mono);line-height:1.1;} .earn-when .m{font-size:9.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;} .earn-info{flex:1;min-width:0;} .earn-info .s{font-weight:800;font-size:12.5px;} .earn-info .n{font-size:11px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .earn-metrics{display:flex;gap:14px;flex:none;} .metric{text-align:end;} .metric .l{font-size:9.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;} .metric .v{font-size:12.5px;font-weight:700;font-family:var(--mono);} /* Earnings calendar tab — a month grid, each day split into before-open / after-close / time-unconfirmed buckets (see js/pages/earnings.js). */ .earn-cal-nav{display:flex;align-items:center;gap:8px;} .earn-cal-nav-label{font-size:13px;font-weight:700;min-width:96px;text-align:center;} .earn-cal-legend{ display:flex;gap:16px;margin-bottom:8px;font-size:11px;color:var(--ink-muted); } .earn-cal-grid{ display:grid;grid-template-columns:repeat(7,1fr);gap:1px; background:var(--border);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden; } .earn-cal-dow{ background:var(--surface-2);padding:6px 8px;font-size:10px;font-weight:700; letter-spacing:.05em;color:var(--ink-muted);text-transform:uppercase; } .earn-cal-day{ background:var(--surface);min-height:92px;padding:6px; } /* Days outside the shown month, padding the grid to full weeks. */ .earn-cal-day.out{opacity:.4;} .earn-cal-day.today{box-shadow:inset 0 0 0 2px var(--brand-500);} .earn-cal-daynum{font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:3px;} .earn-cal-day.today .earn-cal-daynum{color:var(--brand-500);} .earn-cal-bucket{margin-top:4px;} .earn-cal-bucket-lbl{ font-size:10.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.03em; margin-bottom:2px;} /* Timing colors, shared by the day-cell labels and the legend. Yellow rides --warn (bright on dark, amber on light); blue rides --brand-500 (per-theme values already tuned for contrast); orange rides --unv, which carries the per-theme override this rule used to hard-code. Same two values as before — they were lifted into a token when the trust split started using orange too, so the app has one orange rather than two that drift. */ .earn-cal-bmo{color:var(--warn);} .earn-cal-amc{color:var(--brand-500);} .earn-cal-tbd{color:var(--unv);} .earn-cal-chips{display:flex;flex-wrap:wrap;gap:3px;} .earn-cal-chip{ display:inline-flex;align-items:center;gap:4px;background:var(--surface-3); border-radius:20px;padding:1px 7px 1px 1px;font-size:10.5px;font-weight:600; color:var(--ink);white-space:nowrap;cursor:pointer; } .earn-cal-chip:hover{background:var(--surface-2);} /* .sym-logo's own margin-inline-end is sized for a normal row; the flex gap on .earn-cal-chip already spaces the logo from the ticker text. */ .earn-cal-chip .sym-logo{margin-inline-end:0;} .earn-cal-more{font-size:10.5px;color:var(--ink-muted);align-self:center;} .transcript{ background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm); padding:12px;max-height:180px;overflow-y:auto;font-size:12px;line-height:1.7; } .transcript .line{display:flex;gap:8px;padding:3px 0;} .transcript .tm{color:var(--ink-muted);font-family:var(--mono);font-size:10.5px;flex:none;padding-top:2px;} /* Screener */ .filter-pill{ display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; background:var(--brand-50);color:var(--brand-300);border:1px solid rgba(109,167,236,0.3); padding:3px 9px;border-radius:12px;font-family:var(--mono); } /* Alerts / tasks */ .alert-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);} .alert-row:last-child{border-bottom:none;} /* Notification inbox rows: whole row is a link; unread carries a brand tint and its own dot so scanning for "what's new" needs no reading. */ .notif-row{cursor:pointer;} .notif-row:hover{background:var(--surface-2);} .notif-row.unread{background:color-mix(in srgb, var(--brand-500) 7%, transparent);} .notif-row.unread .t{font-weight:700;} .notif-unread-dot{ width:8px;height:8px;border-radius:50%;background:#ef4444;flex:none; } .alert-ic{ width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--surface-2);border:1px solid var(--border);font-size:13px; } .alert-info{flex:1;min-width:0;} .alert-info .t{font-size:12.5px;font-weight:700;} .alert-info .d{font-size:11px;color:var(--ink-muted);} .switch{ width:34px;height:19px;border-radius:10px;background:var(--surface-3); border:1px solid var(--border-2);position:relative;cursor:pointer;flex:none;transition:background .15s; } .switch::after{ content:"";position:absolute;top:2px;inset-inline-start:2px; width:13px;height:13px;border-radius:50%;background:var(--ink-muted);transition:.15s; } .switch.on{background:var(--brand-500);border-color:var(--brand-500);} .switch.on::after{inset-inline-start:17px;background:#fff;} /* Per-follow "notify me when they post" control on Profile → Following. */ .following-notify{ display:flex;align-items:center;gap:6px;cursor:pointer;flex:none; } .following-notify .lbl{font-size:11px;color:var(--ink-muted);font-weight:600;} /* Plaid connect */ .connect-card{ display:flex;align-items:center;gap:14px;padding:16px 18px; background:linear-gradient(135deg, var(--brand-50), var(--surface)); border:1px solid var(--border-2);border-radius:var(--radius); } .connect-card .ic{ width:42px;height:42px;border-radius:11px;background:var(--brand-500);color:#fff; display:flex;align-items:center;justify-content:center;font-size:19px;flex:none; } /* ========================= DROPDOWN CONTROL ================================ */ .ctl-wrap{display:flex;flex-direction:column;gap:3px;} .ctl-label{ font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-muted); } .ctl-field{position:relative;display:flex;align-items:center;} select.ctl-select{ appearance:none;-webkit-appearance:none; background:var(--surface-2);color:var(--ink); border:1px solid var(--border-2);border-radius:var(--radius-sm); padding:6px 26px 6px 10px;font-size:12.5px;font-weight:600; font-family:inherit;cursor:pointer;width:100%; } select.ctl-select:hover{border-color:var(--brand-300);} select.ctl-select:focus{border-color:var(--brand-500);} .ctl-caret{ position:absolute;inset-inline-end:9px;pointer-events:none; font-size:9px;color:var(--ink-muted); } /* Multi-select — matches .ctl-select so a toolbar row stays visually even. */ .ms-wrap{position:relative;} .ms-trigger{ display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%; background:var(--surface-2);color:var(--ink); border:1px solid var(--border-2);border-radius:var(--radius-sm); padding:6px 10px;font-size:12.5px;font-weight:600; font-family:inherit;cursor:pointer; } .ms-trigger:hover{border-color:var(--brand-300);} .ms-trigger[aria-expanded="true"]{border-color:var(--brand-500);} .ms-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ms-label.empty{color:var(--ink-muted);font-weight:500;} /* Prefixed msi- (not ms-caret/ms-check) because main.css also has a second, unrelated multi-select (js/components/multi-select.js, used by Settings) that reuses those exact class names — same specificity, so whichever rule is later in the file silently wins on both, and the loser's checkbox lost its fill and stayed a blank square no matter what was selected. */ .msi-caret{font-size:9px;color:var(--ink-muted);flex-shrink:0;} /* position:fixed, not absolute — the chart top bar it sits in scrolls horizontally (overflow-x:auto), and an absolutely positioned child of a scroll container is clipped by it instead of floating over the chart. Left/top are set from the trigger's bounding rect in JS on open. */ .ms-menu{ position:fixed;min-width:160px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(0,0,0,0.28); z-index:80;padding:4px;max-height:320px;overflow-y:auto; } .ms-option{ display:flex;align-items:center;gap:7px;padding:6px 8px;cursor:pointer; border-radius:calc(var(--radius-sm) - 2px);font-size:12.5px;white-space:nowrap; } .ms-option:hover{background:var(--surface-2);} .ms-option.on{color:var(--brand-700);font-weight:600;} .msi-check{ flex:none;width:14px;height:14px;border-radius:4px; border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center; font-size:10px;color:#fff; } .ms-option.on .msi-check{background:var(--brand-500);border-color:var(--brand-500);} /* Symbol picker inside the alert modal */ .alert-symbol-wrap{position:relative;} .search-results.inline{position:absolute;inset-inline:0;top:calc(100% + 3px);} .alert-picked{font-size:11.5px;color:var(--ink-muted);margin-top:4px;} /* ============================== SECTORS ==================================== */ .sector-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .sector-summary{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px; } @media (max-width:900px){.sector-summary{grid-template-columns:1fr;}} .breadth-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;gap:2px;margin-bottom:8px;} .breadth-bar .up{background:var(--good);} .breadth-bar .down{background:var(--bad);} .breadth-text{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;} .breadth-text .up{color:var(--good);} .breadth-text .down{color:var(--bad);} .leader-row{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:3px 0;font-size:12px; } .leader-name{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .leader-val{font-weight:700;flex:none;font-variant-numeric:tabular-nums;} .sector-table{width:100%;border-collapse:collapse;font-size:12.5px;} .sector-table th{ text-align:start;font-size:10px;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-muted);font-weight:800;padding:8px 10px; border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none; } .sector-table th:hover{color:var(--ink);} .sector-table th.num{text-align:end;} .sector-table th.sorted{color:var(--brand-700);} .sort-caret{font-size:8px;margin-inline-start:3px;} .sector-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;} .sector-table td.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;} .sector-table td.muted{color:var(--ink-muted);} .sector-table tbody tr{cursor:pointer;} .sector-table tbody tr:hover td{background:var(--surface-2);} .sector-table tr.expanded td{background:var(--brand-50);} .sector-table tr.constituents-row:hover td{background:var(--surface-2);} .sector-name-cell{display:flex;align-items:center;gap:8px;} .perf-dot{width:6px;height:6px;border-radius:2px;flex:none;} .sector-name{font-weight:600;} .child-row .sector-name{font-weight:500;color:var(--ink-2);padding-inline-start:14px;} .sector-tag{ font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--border); padding:1px 5px;border-radius:3px; } td.active-tf{background:var(--surface-2);} .perf-bar{ display:block;position:relative;height:3px;margin-top:4px;width:100%; background:var(--border);border-radius:2px;overflow:hidden; } .perf-fill{position:absolute;top:0;height:100%;border-radius:2px;} .perf-fill.up{background:var(--good);} .perf-fill.down{background:var(--bad);} .constituents-cell{padding:10px 12px !important;background:var(--surface-2) !important;} .constituents{display:flex;gap:8px;flex-wrap:wrap;} .constituent{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); padding:7px 11px;cursor:pointer;min-width:118px; } .constituent:hover{border-color:var(--brand-500);} .c-sym{font-size:12px;font-weight:700;} .c-name{font-size:10px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px;} .c-chg{font-size:11px;font-weight:600;margin-top:2px;} .constituents-empty{font-size:11.5px;color:var(--ink-muted);} .up{color:var(--good);} .down{color:var(--bad);} /* ===================== CHART WORKSPACE (TradingView-style) ================== */ .chart-shell{ display:flex;gap:12px;align-items:stretch; /* Clamped: on a tall monitor an unbounded 100vh made the price pane ~1050px, which stretches candles into vertical smears and starves the indicator panels below it. */ height:clamp(440px, calc(100vh - 130px), 680px); } .chart-main{ flex:1;min-width:0;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden; } .chart-head{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:11px 14px;border-bottom:1px solid var(--border); } .chart-sym{display:flex;align-items:baseline;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.01em;} .chart-exch{font-size:10.5px;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;} .chart-name{font-size:11.5px;color:var(--ink-muted);margin-top:1px;} .chart-price{font-size:19px;font-weight:700;} /* align-items:end so every control group sits on a shared baseline regardless of whether its label wraps */ .chart-tools{ display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap; padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface-2); } .chart-inds{display:flex;flex-direction:column;gap:3px;} .chart-inds .chip-row-inline{display:flex;gap:5px;flex-wrap:wrap;} .chip.sm-chip{ padding:0 10px;height:29px;font-size:11.5px;border-radius:var(--radius-sm); display:inline-flex;align-items:center; } .chart-body{flex:1;min-height:0;display:flex;} .chart-canvas-wrap{ /* min-height, NOT the 0 this used to carry, and it is load-bearing: it is the single source of truth for how short the plot may get. The renderer measures this box and sizes the canvas to it, so whatever CSS reserves here is what the canvas gets — the two can no longer disagree. 208 = the 200px of plot the chart needs to be worth drawing, plus the 8px of vertical padding below, because the canvas lives inside the padding box. With min-height:0 the flex column would hand the plot whatever was left after the foot row, the renderer's own 200px floor would win anyway, and the surplus painted straight over the Range buttons and the E/D key — with the time-axis labels landing INSIDE that row. Measured at a 220px pane: 41px of canvas over the row, the dates 29px into it. overflow:hidden is the guarantee rather than the fix: even if a future caller hands the renderer a wrong height, the plot is clipped instead of painting on the controls below. Safe for the tooltip, which clamps itself to this element's rect with a 4px inset (see candlestick.js). */ flex:1;min-width:0;min-height:208px;overflow:hidden;padding:4px 6px; /* Crosshair at rest, grabbing mid-drag. Crosshair rather than grab because at rest the pointer's job is READING — the crosshair chips print the price and date under it — and every charting tool people arrive from signals that with this cursor. The drag affordance survives: the cursor flips to grabbing the moment a pan actually starts (.panning below). */ cursor:crosshair;touch-action:none; /* the pane pans; the browser must not */ } .chart-canvas-wrap.panning{cursor:grabbing;} /* The way back, visible only once the view has left its fitted state (the button's display is driven from paint() in js/pages/chart.js). Positioned inside the canvas wrap, clear of the price axis gutter on the right and the time axis below. */ .chart-canvas-wrap{position:relative;} .chart-reset-btn{ position:absolute;right:62px;bottom:40px;z-index:5; padding:4px 10px;font-size:11px;font-weight:600; border:1px solid var(--border-2);border-radius:99px; background:var(--surface);color:var(--ink-2);cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); } .chart-reset-btn:hover{color:var(--ink);border-color:var(--brand-500);} /* Focusable from the keyboard (tabindex is set in js/pages/chart.js), so it needs a focus ring — an invisible tab stop is worse than none, because the arrow keys start moving something the user cannot see they have selected. :focus-visible rather than :focus, so a mouse click does not outline it. */ .chart-canvas-wrap:focus{outline:none;} .chart-canvas-wrap:focus-visible{ outline:2px solid var(--brand-500);outline-offset:-2px;border-radius:var(--radius-sm); } /* Sits over the chart body, not inside the canvas wrapper — that wrapper is cleared on every repaint. */ .chart-body{position:relative;} .chart-older{ position:absolute;left:12px;top:10px;z-index:3;pointer-events:none; background:var(--surface-2);border:1px solid var(--border-2); border-radius:999px;padding:3px 10px; font-size:10.5px;font-weight:600;color:var(--ink-muted); } /* Indicator panels are fixed-height rows so they can't compete with the price pane for space — the price chart keeps whatever is left. */ .chart-sub{flex:none;border-top:1px solid var(--border);} .chart-sub-label{ font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-muted);padding:5px 14px 0; } /* Right rail */ .chart-rail{ width:288px;flex:none;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden; } .rail-head{ display:flex;align-items:center;gap:8px; padding:10px 12px;border-bottom:1px solid var(--border); } .rail-title{ font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-muted);flex:none; } .rail-dd{ display:flex;align-items:center;gap:6px;max-width:160px; background:var(--surface-2);border:1px solid var(--border-2);color:var(--ink); padding:4px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600; } .rail-dd:hover{border-color:var(--brand-300);} .rail-add{position:relative;padding:9px 10px;border-bottom:1px solid var(--border);} .rail-add input{width:100%;font-size:12.5px;padding:6px 9px;} .rail-note{ padding:8px 12px;font-size:11px;color:var(--ink-muted); border-bottom:1px solid var(--border);background:var(--surface-2); } .rail-list{flex:1;overflow-y:auto;min-height:0;} .rail-row{ display:flex;align-items:center;gap:8px;position:relative; padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--border); } .rail-row:hover{background:var(--surface-2);} .rail-row.active{background:var(--brand-50);box-shadow:inset 2px 0 0 var(--brand-500);} .rail-sym{font-size:12.5px;font-weight:700;} .rail-name{font-size:10.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rail-price{font-size:12px;font-weight:600;} .rail-chg{font-size:10.5px;font-weight:600;} .rail-remove{ position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%); width:18px;height:18px;border-radius:4px;border:none;background:var(--surface-3); color:var(--ink-muted);cursor:pointer;font-size:12px;line-height:1; display:none;align-items:center;justify-content:center;padding:0; } .rail-row:hover .rail-remove{display:flex;} .rail-remove:hover{background:var(--bad-bg);color:var(--bad);} /* Stock detail panels under the chart. They sit outside .chart-shell because that is height-clamped and overflow:hidden — nesting them would crop them. */ .chart-details{display:flex;flex-direction:column;gap:14px;margin-top:14px;} @media (max-width:1000px){ .chart-shell{flex-direction:column;height:auto;} .chart-main{min-height:420px;} .chart-rail{width:auto;max-height:340px;} } /* ---- Chart Overview: instrument header, area chart, period strip --------- */ .chart-page{max-width:1180px;} /* Expanded chart drops the cap — main.content also carries .wide then. */ .chart-page.fullchart{max-width:none;} /* Header: logo spans the text rows; one alignment edge for name/ident/price. */ .chart-ov-head{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start;padding:4px 0 16px;} .chart-ov-logo{grid-row:1 / span 3;width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none; display:flex;align-items:center;justify-content:center;background:var(--surface-2);} .chart-ov-name{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 4px;} .chart-ov-ident{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px;font-size:12px;} .chart-ov-exch{background:var(--surface-2);border:1px solid var(--border);border-radius:999px; padding:2px 9px;color:var(--ink-2);} .chart-ov-priceRow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} .chart-ov-price{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .chart-ov-asof{font-size:11px;color:var(--ink-muted);margin-top:6px;} .chart-subtabs{margin-bottom:14px;} .chart-tab-body{min-height:320px;} .heatmap-subtabs{margin-bottom:14px;} .chart-ov-actions{display:flex;justify-content:flex-end;margin-bottom:8px;} .chart-ov-chart{min-height:300px;} .chart-ov-periods{display:grid;grid-template-columns:repeat(9,1fr);gap:2px; border-top:1px solid var(--border);margin-top:10px;padding-top:10px;} .chart-period{padding:9px 6px;border-radius:var(--radius-sm);text-align:center;cursor:pointer; border:1px solid transparent;} .chart-period:hover{background:var(--surface-2);} .chart-period.active{background:var(--surface-2);border-color:var(--border);} .chart-period .l{font-size:11px;color:var(--ink-2);margin-bottom:3px;} .chart-period.active .l{color:var(--ink);font-weight:600;} .chart-period .v{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;} .chart-period .v.up{color:var(--good);} .chart-period .v.down{color:var(--bad);} /* Full chart: collapse the header to a one-line strip (~a third its height), keep the menu, let the workspace take the room. */ .chart-page.fullchart .chart-ov-head{display:flex;align-items:center;gap:12px;padding:4px 0 10px;} .chart-page.fullchart .chart-ov-logo{width:26px;height:26px;grid-row:auto;} .chart-page.fullchart .chart-ov-name{font-size:15px;margin:0;} .chart-page.fullchart .chart-ov-ident{display:none;} .chart-page.fullchart .chart-ov-asof{display:none;} .chart-page.fullchart .chart-ov-price{font-size:18px;} @media (max-width:1000px){ .chart-ov-periods{grid-template-columns:repeat(5,1fr);} } @media (max-width:620px){ .chart-ov-periods{grid-template-columns:repeat(3,1fr);} .chart-ov-head{grid-template-columns:1fr;} .chart-ov-logo{grid-row:auto;margin-bottom:8px;} } /* ---- Fullscreen chart workspace ------------------------------------------- */ /* Own grid rather than nested flex: the middle row is "whatever height is left after the top bar", and grid expresses that as 1fr with no min-height:0 dance needed at every level. */ .chart-ws{ display:grid;grid-template-rows:auto auto 1fr; /* toolbar / indicator badges / plot */ height:74vh;min-height:440px; border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; } /* Expanded mode fills the window: the page also gets .wide (chart.js), so the workspace takes every pixel left under the compact header + subtabs. */ .chart-page.fullchart .chart-ws{ height:calc(100vh - var(--topbar-h) - 148px); min-height:480px; } .chart-ws-top{ display:flex;align-items:center;gap:6px;padding:8px 10px; border-bottom:1px solid var(--border);background:var(--surface); font-size:12px;overflow-x:auto; } /* Three columns: drawing rail, chart, context rail. Only the middle one flexes — both rails hold a fixed width, because a rail that grows with the window is a rail that eats the plot on a small one. See js/pages/chart.js renderFullchart. */ /* `minmax(0,1fr)` for the plot, not `1fr`. A bare 1fr has an automatic minimum of its content's size, so below roughly 850px the canvas refused to shrink, the grid grew wider than the pane, and the whole row overflowed — which is what made the drawing rail look like it was sitting on top of the chart. Nothing was overlapping; the row was simply wider than the box holding it. The context rail gets the same treatment so it gives ground before the plot does. */ .chart-ws-mid{ display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,auto); min-height:0; /* The context rail is a fixed 268px and will not give ground, so between roughly 760 and 850px the three tracks still add up to more than the pane. Scrolling the row is the honest answer: overflowing it spills the columns over whatever is beside them, which is what "the rail is hiding the content" looked like. Nothing is covered now — it moves out of the way and you can reach it. Properly stacking the context rail under the plot at that width is the better fix and is not done here. */ } /* NO narrow-width special case here, and the previous commit's `overflow-x:auto` on this row is gone — both were solving a problem that does not exist. Correcting my own work, 2026-08-06. I "measured" the row overflowing below 850px by shrinking the .chart-page ELEMENT and reading the geometry. Media queries key off the VIEWPORT, so none of them fired during that test: the context rail stayed on screen at widths where the real app has already hidden it (the `max-width:1000px` block further down sets `display:none` on it, and has for a long time). The overflow was manufactured by the test method. Re-measured properly, by resizing the viewport: at 900px the row is `58px 581px`, the rail is display:none, and neither the row nor the page overflows. There was nothing to fix. */ /* ---------------------------------------------------- the drawing rail ---- Variant B, the labelled one — chosen by the owner over the 42px icon-only strip A. It costs about 22px of chart width and buys a rail nobody has to hover to understand. See mockups/chart-tools-b-labelled.html. 58px is not a round number picked for looks: it is the narrowest that fits "Horizontal" under a 14px glyph without hyphenating. */ .chart-rail{ width:58px; flex:none; overflow-y:auto; border-inline-end:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; align-items:center; padding:5px 0; gap:1px; } .chart-rail-btn{ width:52px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 2px; border:none; background:transparent; color:var(--ink-2); cursor:pointer; border-radius:var(--radius-sm); font-size:14px; line-height:1; font-family:inherit; } /* Lowercase, not uppercase, on the owner's call after picking B: uppercase at 8px reads as shouting and costs roughly 12% more width per word for no legibility gain. */ .chart-rail-btn span{ font-size:8px; font-weight:600; letter-spacing:.015em; line-height:1.05; text-transform:none; opacity:.9; } .chart-rail-btn:hover{ background:var(--surface-2); color:var(--ink); } .chart-rail-btn:focus-visible{ outline:2px solid var(--brand-500); outline-offset:1px; } /* #1d4fd0 rather than --brand-500 for the armed tool, the same substitution the segmented control and the timeframe pills make: white on --brand-500 measures 3.59:1 on dark and fails 1.4.3. */ .chart-rail-btn.active{ background:#1d4fd0; color:#fff; } :root[data-theme="light"] .chart-rail-btn.active{ background:var(--brand-500); } /* Destructive actions are not red until they are reachable — a permanently red icon in a toolbar becomes wallpaper. Red on hover only. */ .chart-rail-btn.danger:hover{ background:var(--bad); color:#fff; } /* Delete sits disabled until a drawing is selected. Dimmed AND inert — the attribute does the work; this only makes the state visible. */ .chart-rail-btn[disabled]{ opacity:.35; cursor:not-allowed; } .chart-rail-btn[disabled]:hover{ background:transparent; color:var(--ink-2); } .chart-rail-div{ width:40px; height:1px; background:var(--border-2); margin:4px 0; flex:none; } .chart-rail-foot{ margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:1px; } /* Six swatches, three per row — the rail is wide enough in B for three, which keeps the group two rows tall instead of three. */ .chart-rail-palette{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:5px 4px; justify-items:center; } .chart-swatch{ width:15px; height:15px; padding:0; cursor:pointer; border:1px solid var(--border-2); border-radius:3px; background:var(--sw); } .chart-swatch:hover{ transform:scale(1.15); } /* Outlined in --ink rather than filled or ticked: the swatch IS its colour, so anything drawn on top of it hides the thing being chosen. */ .chart-swatch.active{ outline:2px solid var(--ink); outline-offset:1px; border-color:transparent; } .chart-swatch:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ .chart-swatch:hover{ transform:none; } } /* Narrow screens: the plot is the point, and a 58px rail is a tenth of a phone. It becomes a horizontal strip above the chart instead of disappearing — hiding it would make the tools unreachable rather than merely cramped. */ @media (max-width:760px){ .chart-ws-mid{ grid-template-columns:1fr; } .chart-rail{ width:auto; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; border-inline-end:none; border-bottom:1px solid var(--border); padding:4px 6px; } .chart-rail-div{ width:1px; height:28px; margin:0 4px; } .chart-rail-foot{ margin-top:0; flex-direction:row; } .chart-rail-palette{ grid-template-columns:repeat(6,1fr); } } /* Same shape as .btn.secondary.sm elsewhere in the app (bordered, transparent fill, brand text on hover) rather than the borderless flat-toolbar icon look this used to have — every other button on the site has a visible border, and this one now does too. */ .chart-ws-btn{ display:inline-flex;align-items:center;gap:5px; border:1px solid var(--border-2);background:transparent;color:var(--ink); cursor:pointer;font-family:inherit;font-size:12px;font-weight:600; padding:5px 10px;border-radius:var(--radius-sm);white-space:nowrap; } .chart-ws-btn:hover{background:var(--surface-2);} .chart-ws-btn.active{background:var(--surface-3);border-color:var(--border-2);} .chart-ws-btn.sym{font-size:13px;font-weight:800;} /* Visually present but not yet wired (see js/pages/chart.js) — dimmed rather than hidden, so the eventual capability is legible without pretending it already works. */ .chart-ws-btn[disabled]{opacity:.5;cursor:default;} .chart-ws-btn[disabled]:hover{background:transparent;} .chart-ws-sep{width:1px;height:20px;background:var(--border-2);margin:0 3px;flex:none;} .chart-ws-spacer{flex:1;min-width:8px;} /* A bordered segmented control — the same idiom as the Earnings Hub's period toggle — instead of the borderless pill row this used to be. */ .chart-tf{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--radius-sm);overflow:hidden;} .chart-tf button{ border:none;border-inline-end:1px solid var(--border-2); background:transparent;color:var(--ink-2); cursor:pointer;font-family:inherit;font-size:12px;font-weight:700; padding:5px 10px; } .chart-tf button:last-child{border-inline-end:none;} .chart-tf button:hover{background:var(--surface-2);color:var(--ink);} .chart-tf button[disabled]{opacity:.4;cursor:not-allowed;} .chart-tf button[disabled]:hover{background:transparent;color:var(--ink-2);} /* overflow-y:auto is what makes "the indicators must not run over the chart" true rather than aspirational. The plot carries a min-height and each indicator panel is flex:none, so when the pane is shorter than plot + panels + foot row something has to give — and without a scroll container that something is the layout spilling over whatever sits below it. Scrolled, everything keeps its size and stays reachable. */ .chart-ws-chart{position:relative;min-width:0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;background:var(--page);} .chart-ohlc{ position:absolute;top:7px;left:10px;z-index:4; display:flex;align-items:center;gap:7px;flex-wrap:wrap; font-size:11.5px;font-variant-numeric:tabular-nums;pointer-events:none; } .chart-ohlc .sym{font-weight:700;color:var(--ink);} .chart-ohlc .meta{color:var(--ink-muted);} .chart-ohlc .val{color:var(--ink-2);} .chart-ws-rail{ width:268px;flex:none;border-inline-start:1px solid var(--border); background:var(--surface);display:flex;flex-direction:column;overflow-y:auto; } .chart-ws-rail-sec{border-bottom:1px solid var(--border);} /* Caption stacked over a full-width trigger — the ctl-label/control idiom from the top bar, so the list switcher explains itself. */ .chart-ws-rail-head{ display:flex;flex-direction:column;align-items:stretch; gap:3px;padding:8px 11px;font-size:12px;font-weight:700;color:var(--ink); } .chart-ws-rail-head-dd{position:relative;} /* Same bordered-pill idiom as .chart-ws-btn in the top bar — a borderless text trigger read as a section title, not something to click. Full width with the caret pushed to the far edge, so it reads as a