*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ /* Bright light grey palette */ --bg0:#f5f5f5;--bg1:#ffffff;--bg2:#ebebeb;--bg3:#e0e0e0; --border:#e2e2e2;--border2:#cccccc; --text0:#111111;--text1:#333333;--text2:#5a5a5a;--text3:#909090; /* Semantic — desaturated, print-calibrated */ --green:#1a6b3c;--green-dim:#e6f2ec; --red:#9a2820;--red-dim:#f8ecea; --amber:#7a5200;--amber-dim:#f4edd0; --blue:#1a3c6b;--blue-dim:#e6ecf5;--blue-mid:#2448a0; --fda:#6b3ca0;--fda-dim:#efe9f6; --purple:#4a2e88;--purple-dim:#eeebf8; --accent:#9a6a3c;--accent-dim:#efe6d8;--on-accent:#ffffff; /* readable text ON an --accent fill */ --edge-shadow:rgba(0,0,0,0.16); /* horizontal-scroll edge fade on dense tables (mobile) */ --row-hover:rgba(0,0,0,0.03); /* table-row & calendar-day hover tint */ --cell-today:rgba(0,0,0,0.05); /* the "today" calendar cell highlight */ --mono:"DM Mono",monospace;--sans:"DM Sans",system-ui,sans-serif;--serif:"Playfair Display",Georgia,serif; /* ── Depth, step 1 — a single warm tone difference (no borders/shadows/radius). Content carries --surface; the page sits a hair darker on --surface-sunken, so content reads as resting on a warm surface. Tunable: nudge --surface-sunken darker for more separation, or warmer (raise R, lower B) for more cream. ── */ --surface:var(--bg0); /* content sheet — matches the header (--bg0) so they read as one surface */ --surface-sunken:#EBEEF2; /* page backdrop — a hair darker, cool blueish grey */ /* Layout */ --max-w:1380px;--pad:34px; color-scheme:light; } /* ── DARK THEME ── overrides the tokens only; every var()-driven surface follows. Applied via data-theme="dark" on (set by the early boot script + the toggle). Editorial dark: a warm-neutral near-black sheet on a darker backdrop, semantic colours brightened for legibility, the -dim tints flipped to dark so coloured badges stay readable (bright text on a dark tint). */ :root[data-theme="dark"]{ /* Warm "dark paper / espresso" — brown-tinted greys + a cream-white ink, to keep the print-journal character rather than a cold slate. Backgrounds carry warmth (more R, less B); text is warm off-white. */ --bg0:#2b2722;--bg1:#332e28;--bg2:#39332c;--bg3:#433c33; --border:#3f392f;--border2:#514a3f; --text0:#eeeae3;--text1:#cbc5bb;--text2:#a49d91;--text3:#817a6e; --green:#61b787;--green-dim:#233829; --red:#e98a7e;--red-dim:#3d2520; --amber:#d8a64e;--amber-dim:#372a15; --blue:#83b0d8;--blue-dim:#22344a;--blue-mid:#a5c5ea; --fda:#b094db;--fda-dim:#2b2240; --purple:#9f8edb;--purple-dim:#282044; --accent:#d1a26e;--accent-dim:#382a1a;--on-accent:#241a0e; /* dark text reads on the lighter dark-mode sepia */ --edge-shadow:rgba(0,0,0,0.5); /* darker so the scroll fade still reads on the warm dark surface */ --row-hover:rgba(255,255,255,0.055); /* light overlay so hover is visible on dark rows */ --cell-today:rgba(255,255,255,0.08); --surface-sunken:#241f19; /* backdrop a hair darker & warmer than the content sheet — gentle depth */ color-scheme:dark; } html,body{background:var(--surface-sunken);color:var(--text0);font-family:var(--sans);font-size:15px;min-height:100vh;} /* ── TOPBAR — editorial masthead ── */ .page-top-rule{height:2px;background:var(--text0);margin-bottom:3px;} .topbar{background:var(--bg0);border-top:4px solid var(--text0);border-bottom:4px double var(--text0);position:sticky;top:0;z-index:50;} /* Single-row masthead: the left rail (tagline + timezone) and right rail (market status + clock + actions) flank the centered nameplate. Moving the stock search out to the nav-tabs row trims the right rail enough that the two rails balance and the title sits centered — while each rail stays short enough to fit one row. */ .topbar-inner{max-width:var(--max-w);margin:0 auto;padding:14px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;} .topbar-left{display:flex;flex-direction:column;align-items:flex-start;gap:10px;} .brand-tagline-left{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--text2);line-height:1.5;max-width:210px;} .brand-tagline-left::after{content:"";display:block;width:130px;height:1px;background:var(--border2);margin-top:10px;} .brand{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;user-select:none;text-align:center;} .brand:hover .brand-name{opacity:.72;} .brand-mark{display:none;} .brand-text{display:flex;flex-direction:column;align-items:center;gap:6px;} .brand-name{font-family:var(--serif);font-size:clamp(46px,7.2vw,88px);font-weight:700;letter-spacing:0.03em;color:var(--text0);line-height:0.95;transition:opacity 0.12s;text-transform:uppercase;} .brand-sep{display:none;} .brand-subtitle{font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:0.42em;color:var(--text1);text-transform:uppercase;padding-left:0.42em;} .brand-tagline{display:none;} .topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;} .market-status-row{display:flex;gap:8px;align-items:center;} .market-sep{color:var(--text3);font-family:var(--mono);font-size:10px;} .market-pill{font-family:var(--mono);font-size:10px;color:var(--text2);background:transparent;letter-spacing:0.1em;font-weight:500;text-transform:uppercase;} .market-pill.open{color:var(--green);} .clock-row{display:flex;align-items:center;gap:14px;} .clock-display{font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:0.06em;} .tz-select{font-family:var(--sans);font-size:11px;color:var(--text2);background:transparent;border:1px solid var(--border2);border-radius:2px;padding:2px 4px;max-width:150px;cursor:pointer;letter-spacing:0.02em;} .tz-select:hover{border-color:var(--text2);color:var(--text0);} .tz-select:focus{outline:none;border-color:var(--text2);} .wl-csv-link{font-family:var(--sans);font-size:11px;color:var(--blue);background:none;border:none;padding:7px 0 2px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;} .wl-csv-link:hover{color:var(--blue-mid);} .keys-btn{font-family:var(--sans);font-size:11px;padding:0;border:none;background:transparent;color:var(--accent);cursor:pointer;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:opacity 0.12s;} .keys-btn:hover{opacity:.7;} /* Subordinate masthead link (About) — present but quieter than Brief/Sign in. */ .keys-btn-quiet{color:var(--text3);font-weight:500;text-decoration:none;} .keys-btn-quiet:hover{color:var(--text1);opacity:1;} /* Light/dark toggle — a clear icon button. Shows the MODE YOU'LL SWITCH TO: a moon in light mode, a sun in dark mode. The swap is pure CSS off data-theme (set before first paint), so there's no flash and no JS needed to change the glyph. */ .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;padding:0;border:none;background:transparent;color:var(--text2);cursor:pointer;border-radius:50%;transition:color .12s,background .12s;} .theme-btn svg{width:16px;height:16px;display:block;} .theme-btn:hover{color:var(--accent);background:var(--bg2);} .theme-btn .ic-sun{display:none;} :root[data-theme="dark"] .theme-btn .ic-moon{display:none;} :root[data-theme="dark"] .theme-btn .ic-sun{display:block;} /* Persistent informational disclaimer + Methodology/About reference surfaces. */ .site-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;padding:16px 22px 22px;margin-top:8px;border-top:1px solid var(--border);} .sf-disclaimer{font-family:var(--sans);font-size:11px;color:var(--text3);line-height:1.6;max-width:760px;text-align:center;} .sf-disclaimer b{color:var(--text2);font-weight:600;} .sf-links{display:inline-flex;align-items:center;gap:8px;} .sf-sep{color:var(--text3);font-size:11px;} .sf-link{font-family:var(--sans);font-size:11px;color:var(--accent);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;letter-spacing:0.02em;white-space:nowrap;} .sf-link:hover{opacity:.7;} /* Click-to-load facade for the YouTube press-conference embed — nothing contacts Google until the visitor clicks (decline-by-default for the third-party embed). */ .presser-facade{margin-top:8px;width:100%;aspect-ratio:16/9;border-radius:2px;background:var(--bg2);border:1px dashed var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:12px;} .presser-load{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text0);background:var(--bg1);border:1px solid var(--border2);border-radius:3px;padding:9px 16px;cursor:pointer;transition:border-color .12s;} .presser-load:hover{border-color:var(--accent);} .presser-play{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10px;padding-left:2px;} .presser-facade-note{font-family:var(--sans);font-size:10.5px;color:var(--text3);line-height:1.5;max-width:320px;} .ai-drawer-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:10.5px;color:var(--text3);font-style:italic;line-height:1.6;} .ai-drawer-note a{color:var(--accent);cursor:pointer;font-style:normal;text-decoration:underline;text-underline-offset:2px;} .info-pop-note{margin-top:8px;padding-top:7px;border-top:1px solid var(--border);font-family:var(--sans);font-size:10px;font-style:italic;color:var(--text3);line-height:1.5;} /* ── WATCHLIST TICKER STRIP ── */ /* Full-bleed background; content aligned to the page column like the other bars. */ .wl-ticker{background:var(--bg2);border-bottom:1px solid var(--border);} .wl-ticker-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);display:flex;align-items:stretch;font-family:var(--mono);font-size:12px;} /* Scrolling ticker tape: the viewport clips; the track (two identical sets) animates left. */ .wl-ticker-vp{flex:1 1 auto;min-width:0;overflow:hidden;} .wl-ticker-vp.wl-manual{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;} /* reduced-motion: manual swipe/scroll */ .wl-ticker-vp.wl-manual::-webkit-scrollbar{height:0;display:none;} .wl-ticker-track{display:flex;width:max-content;} .wl-ticker-set{display:flex;} .wl-ticker-track.wl-animating{animation:wl-scroll linear infinite;will-change:transform;} @keyframes wl-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* -50% = one set width → seamless loop */ .wl-ticker:hover .wl-ticker-track.wl-animating, .wl-ticker.tab-hidden .wl-ticker-track.wl-animating{animation-play-state:paused;} /* pause on hover + when the tab is hidden */ @media(prefers-reduced-motion:reduce){.wl-ticker-track.wl-animating{animation:none;}.wl-ticker-vp{overflow-x:auto;}} /* Watchlist tab roster — search-to-add + bounded vertical list that scales to 25+. */ .wl-add{position:relative;margin-bottom:14px;} .wl-add-input{width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text0);padding:8px 11px;font-family:var(--sans);font-size:13px;border-radius:2px;outline:none;box-sizing:border-box;} .wl-add-input:focus{border-color:var(--accent);} .wl-add-dropdown{position:absolute;left:0;right:0;background:var(--bg1);border:1px solid var(--border2);border-radius:2px;box-shadow:0 4px 12px rgba(22,18,14,0.09);z-index:100;overflow-y:auto;max-height:248px;} .wl-roster-list{max-height:46vh;overflow-y:auto;border:1px solid var(--border);border-radius:3px;background:var(--bg1);scrollbar-width:thin;} .wl-roster-row{display:flex;align-items:center;gap:12px;padding:9px 13px;border-bottom:1px solid var(--border);} .wl-roster-row:last-child{border-bottom:none;} .wl-r-sym{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text0);cursor:pointer;flex-shrink:0;min-width:62px;} .wl-r-sym:hover{color:var(--accent);} .wl-r-name{font-size:13px;color:var(--text2);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .wl-r-next{font-family:var(--sans);font-size:12px;color:var(--text2);flex-shrink:0;white-space:nowrap;display:flex;align-items:center;} .wl-r-none{color:var(--text3);} .wl-r-x{font-size:16px;color:var(--text3);cursor:pointer;line-height:1;flex-shrink:0;padding:0 2px;} .wl-r-x:hover{color:var(--red);} .wl-ticker-lead{flex-shrink:0;display:flex;align-items:center;font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);padding:0 13px 0 0;border-right:1px solid var(--border);} .wl-q{flex-shrink:0;display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-right:1px solid var(--border);} .wl-q-sym{color:var(--text1);font-weight:600;} .wl-q-px{color:var(--text0);} .wl-q-ch{font-size:11px;font-weight:600;} .wl-q.up .wl-q-ch{color:var(--green);} .wl-q.down .wl-q-ch{color:var(--red);} .wl-q-na{color:var(--text3);font-size:11px;} /* Indexes (end-of-day, from FRED) read as a distinct group from the live watchlist: accent-coloured symbols + a labelled divider before the holdings. */ .wl-q.idx .wl-q-sym{color:var(--accent);} .wl-tape-sep{flex-shrink:0;display:inline-flex;align-items:center;padding:0 14px;border-right:1px solid var(--border);font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);} .wl-ticker-hint{font-family:var(--sans);font-size:11px;color:var(--text3);padding:7px 0;} .wl-ticker-asof{flex-shrink:0;margin-left:auto;display:flex;align-items:center;font-family:var(--sans);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);padding:0 0 0 13px;border-left:1px solid var(--border);} /* ── NAV TABS — full-width strip, centered content ── */ /* The tabs scroll horizontally inside .nav-tabs-scroll (not the whole strip) so the stock search at the right keeps its place and its dropdown isn't clipped. */ .nav-tabs{background:var(--bg0);border-bottom:1px solid var(--border);position:relative;} .nav-tabs-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:16px;} .nav-tabs-scroll{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;} .nav-tabs-scroll::-webkit-scrollbar{height:0;display:none;} .nav-tabs .mhs{flex-shrink:0;} .nav-tab{height:46px;padding:0 17px;display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.12s;flex-shrink:0;} .nav-tab:hover{color:var(--text1);} .nav-tab.active{color:var(--text0);border-bottom-color:var(--accent);} .tab-count{color:var(--accent);font-size:10px;font-family:var(--mono);font-weight:500;opacity:0.85;} .nav-tab.active .tab-count{color:var(--accent);opacity:1;} /* ── DATE STRIP ── */ .month-strip{background:var(--bg0);border-bottom:1px solid var(--border);} .month-strip-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;height:54px;} .month-nav{display:flex;align-items:center;gap:14px;} .month-btn{background:transparent;border:1px solid var(--border2);color:var(--text2);cursor:pointer;font-size:15px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:2px;transition:border-color 0.12s,color 0.12s;} .month-btn:hover{color:var(--text0);border-color:var(--text0);} .month-label{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text0);min-width:300px;text-align:center;} .month-summary{display:flex;gap:18px;} .ms-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);font-family:var(--sans);letter-spacing:0.02em;} .ms-dot{width:5px;height:5px;border-radius:50%;} .ms-dot.red{background:var(--red);}.ms-dot.blue{background:var(--blue);}.ms-dot.amber{background:var(--amber);}.ms-dot.green{background:var(--green);} /* ── PAGE BODY — centered editorial column ── */ .page-body{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);} /* ── LAYOUT — open newspaper columns ── */ .layout{display:grid;grid-template-columns:1fr 220px;min-height:calc(100vh - 150px);} .main{padding:24px 16px;display:flex;flex-direction:column;gap:26px;overflow:hidden;min-width:0;background:var(--surface);} .sidebar{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:24px 16px;} /* ── COLLAPSIBLE SIDEBAR ── the panel gets out of the way when wide tables need the room (defaults collapsed on the Calendar tab; see applySidebarState in app.js). Desktop-only; below the layout breakpoint the sidebar stacks under the content, so collapse is neutered. */ .sb-toggle{display:block;width:fit-content;margin:0 0 14px auto;background:none;border:none;color:var(--text3);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;padding:2px 2px 2px 8px;} .sb-toggle:hover{color:var(--text0);} .page-body.sidebar-collapsed .layout{grid-template-columns:1fr;} .page-body.sidebar-collapsed .sidebar{display:none;} /* Reopen handle — a slim vertical tab pinned to the right viewport edge. It sits in the page gutter (page-body + main padding ≥ 50px), so it never overlaps the full-width table. */ .sb-reopen{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:45;background:var(--text0);color:var(--bg0);border:none;border-radius:4px 0 0 4px;padding:14px 6px;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;box-shadow:-2px 0 10px rgba(22,18,14,0.14);} .sb-reopen:hover{opacity:.85;} .page-body.sidebar-collapsed .sb-reopen{display:block;} /* ── TODAY 2-COLUMN EDITORIAL GRID ── */ .today-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;} .today-left{display:flex;flex-direction:column;gap:24px;min-width:0;} .today-right{min-width:0;} @media(max-width:760px){.today-grid{grid-template-columns:1fr;gap:24px;}} /* ── IMPACT BADGES (upcoming) ── */ .imp-badge{display:inline-block;font-family:var(--sans);font-size:9px;font-weight:700;padding:3px 8px;border-radius:1px;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;} .imp-badge-h{border:1px solid var(--red);color:var(--red);background:transparent;} .imp-badge-m{border:1px solid var(--amber);color:var(--amber);background:transparent;} /* ── SECTION HEADERS — editorial rule beneath ── */ .section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;border-bottom:1.5px solid var(--text0);padding-bottom:9px;gap:12px;flex-wrap:wrap;} .section-title{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--text0);text-transform:uppercase;letter-spacing:0.14em;} .today-section-title{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--text0);text-transform:uppercase;letter-spacing:0.14em;border-bottom:1.5px solid var(--text0);padding-bottom:9px;margin-bottom:14px;display:block;} .filter-chips{display:flex;gap:4px;flex-wrap:wrap;} .chip{font-size:11px;padding:3px 10px;border-radius:2px;border:1px solid var(--border);color:var(--text2);cursor:pointer;background:transparent;font-family:var(--sans);letter-spacing:0.01em;transition:all 0.1s;} .chip.on{background:var(--text0);color:var(--bg1);border-color:var(--text0);} .chip:hover:not(.on){border-color:var(--border2);color:var(--text1);} /* ── CALENDAR ── */ /* Agenda tab — event-type sub-tabs that SWAP the visible section (no scroll, no jump bar). The active sub-tab is underlined in its own type color (--dot, set inline). */ .agenda-subnav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:0 0 18px;} .agenda-subtab{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.02em;color:var(--text3);background:transparent;border:none;border-bottom:2px solid transparent;padding:9px 15px;margin-bottom:-1px;cursor:pointer;line-height:1;transition:color 0.1s,border-color 0.1s;} .agenda-subtab:hover{color:var(--text1);} .agenda-subtab .agenda-dot{width:8px;height:8px;border-radius:50%;background:var(--dot,var(--text3));opacity:0.35;transition:opacity 0.1s;} .agenda-subtab.on{color:var(--text0);border-bottom-color:var(--dot,var(--text0));} .agenda-subtab.on .agenda-dot{opacity:1;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);} .cal-day-header{font-family:var(--sans);font-size:10px;color:var(--text3);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:0.06em;font-weight:500;} .cal-day{background:transparent;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:76px;padding:6px;cursor:pointer;transition:background 0.1s;} .cal-day:hover{background:var(--row-hover);} .cal-day.empty{background:transparent;} .cal-day.today{background:var(--cell-today);} .cal-day.has-events{} .cal-day-num{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text2);margin-bottom:4px;} .cal-day.today .cal-day-num{color:var(--text0);font-weight:700;} /* Aggregated event rows: macro by name, earnings/dividends as counts. */ .cal-ev{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text1);margin-bottom:3px;line-height:1.3;font-family:var(--sans);} .cal-ev .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;} .cal-ev .dot.earn{background:var(--blue);} .cal-ev .dot.macro{background:var(--red);} .cal-ev .dot.div{background:var(--amber);} .cal-ev .dot.fda{background:var(--fda);} .cal-ev-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* High-impact macro (e.g. a rate decision) pops: bold red + a haloed marker. */ .cal-ev.hi{font-weight:700;color:var(--red);} .cal-ev.hi .dot.macro{width:7px;height:7px;box-shadow:0 0 0 2px var(--red-dim);} /* FDA panels pop in their own colour. */ .cal-ev.fda.hi{color:var(--fda);} .cal-ev.fda.hi .dot.fda{width:7px;height:7px;box-shadow:0 0 0 2px var(--fda-dim);} .cal-more{font-size:10px;color:var(--text3);font-family:var(--sans);} /* IPOs: accent dot. A marked IPO pops (haloed), an unmarked one stays muted/quiet. */ .cal-ev .dot.ipo{background:var(--accent);} .cal-ev.ipo.marked{font-weight:700;color:var(--accent);} .cal-ev.ipo.marked .dot.ipo{width:7px;height:7px;box-shadow:0 0 0 2px var(--accent-dim);} .cal-ev.ipo.muted{color:var(--text3);} .cal-ev.ipo.muted .dot.ipo{background:var(--text3);} /* A day carrying a high-impact event stands out across the month grid. */ .cal-day.cal-day-critical{background:var(--red-dim);box-shadow:inset 3px 0 0 var(--red);} .cal-day.cal-day-critical:hover{background:var(--red-dim);} .cal-day.cal-day-critical .cal-day-num{color:var(--red);font-weight:700;} /* A marked IPO lights its day in the personal accent colour (not the red critical). */ .cal-day.cal-day-marked{background:var(--accent-dim);box-shadow:inset 3px 0 0 var(--accent);} .cal-day.cal-day-marked:hover{background:var(--accent-dim);} .cal-day.cal-day-marked .cal-day-num{color:var(--accent);font-weight:700;} /* ── TABLES — flat, editorial ── */ .tbl{width:100%;border-collapse:collapse;table-layout:fixed;background:transparent;border:none;overflow:hidden;} .tbl th{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;padding:9px 11px;border-bottom:1px solid var(--border);text-align:left;background:transparent;white-space:nowrap;overflow:hidden;} .tbl th.sortable{cursor:pointer;} .tbl th.sortable:hover{color:var(--text0);} .tbl th.sorted{color:var(--text0);} .tbl td{border-bottom:1px solid var(--border);padding:0;vertical-align:middle;overflow:hidden;} .tbl tr:last-child td{border-bottom:none;} .tbl tbody tr{transition:background 0.08s;cursor:pointer;} .tbl tbody tr:hover{background:var(--row-hover);} .tbl tbody tr.high-row{border-left:2px solid var(--red);} .tbl tbody tr.wl-hl{border-left:2px solid var(--blue);} .c{padding:9px 11px;} /* Dense tables scroll sideways on a phone (each is wrapped in an inline overflow-x:auto div with a min-width). Give that wrapper momentum scrolling + a SELF-HIDING edge fade so the table reads as "swipe for more" instead of "cut off". Classic scroll-shadow: the cover gradients (background- attachment:local) ride the content and mask the shadow at the very start/end; the shadow gradients (attachment:scroll) stay pinned to the visible edges, so a fade shows only on a side with more to see. Harmless on desktop — it only appears when the table actually overflows its container. */ [style*="overflow-x:auto"]{ -webkit-overflow-scrolling:touch; scrollbar-width:thin; background: linear-gradient(to right, var(--surface), transparent) 0 0/22px 100% no-repeat local, linear-gradient(to left, var(--surface), transparent) 100% 0/22px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--edge-shadow), transparent) 0 0/11px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--edge-shadow), transparent) 100% 0/11px 100% no-repeat scroll; } [style*="overflow-x:auto"]::-webkit-scrollbar{height:6px;} [style*="overflow-x:auto"]::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;} [style*="overflow-x:auto"]::-webkit-scrollbar-track{background:transparent;} .date-c{font-family:var(--mono);font-size:10px;color:var(--text2);line-height:1.5;text-align:left;white-space:nowrap;} .event-c{overflow:hidden;} .event-name{font-size:13px;font-weight:500;color:var(--text0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .event-sub{font-size:10px;color:var(--text3);margin-top:1px;} .imp-c{white-space:nowrap;text-align:center;} .imp{display:inline-block;font-family:var(--mono);font-size:8px;font-weight:500;padding:2px 7px;border-radius:1px;letter-spacing:0.04em;} .imp-h{background:var(--red-dim);color:var(--red);} .imp-m{background:var(--amber-dim);color:var(--amber);} .imp-l{background:var(--bg3);color:var(--text2);} .mono-c{font-family:var(--mono);font-size:11px;color:var(--text0);text-align:right;white-space:nowrap;} .prev-c{font-family:var(--mono);font-size:11px;color:var(--text2);text-align:right;white-space:nowrap;} .actual-c{font-family:var(--mono);font-size:11px;text-align:right;white-space:nowrap;} .beat-actual{color:var(--green);font-weight:500;} .miss-actual{color:var(--red);font-weight:500;} .react-c{overflow:hidden;} .rb-col{display:flex;flex-direction:column;gap:3px;} .rb{display:flex;align-items:center;gap:5px;} .rb:last-child{margin-bottom:0;} .rb-label{font-family:var(--sans);font-size:9px;color:var(--text3);width:28px;} .rb-wrap{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden;} .rb-fill{height:100%;border-radius:2px;} .rb-pos{background:var(--green);}.rb-neg{background:var(--red);} .rb-val{font-family:var(--mono);font-size:9px;min-width:38px;text-align:right;} .v-pos{color:var(--green);}.v-neg{color:var(--red);} .ai-txt{font-size:12px;color:var(--text2);line-height:1.45;white-space:normal;overflow:hidden;} .ai-txt b{color:var(--text0);font-weight:500;} .ticker-c{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text0);white-space:nowrap;} .co-c{} .co-name{font-size:12px;color:var(--text0);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .co-sub{font-size:10px;color:var(--text3);} .eps-c{font-family:var(--mono);font-size:11px;color:var(--text0);text-align:right;white-space:nowrap;} .beat-c{white-space:nowrap;} .beat-wrap{display:flex;align-items:center;justify-content:flex-end;gap:7px;} .beat-bar-bg{width:44px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;} .beat-bar-fill{height:100%;border-radius:2px;background:var(--green);} .beat-pct{font-family:var(--mono);font-size:11px;color:var(--text0);} .impl-c{text-align:right;white-space:nowrap;} .impl-val{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--amber);} .mkt-badge{display:inline-block;font-family:var(--mono);font-size:8px;padding:1px 5px;border-radius:1px;background:transparent;color:var(--text3);border:1px solid var(--border);margin-left:4px;vertical-align:middle;letter-spacing:0.04em;} .mkt-badge.us{color:var(--blue);border-color:var(--blue-dim);background:var(--blue-dim);} .est-badge{display:inline-block;font-family:var(--mono);font-size:8px;padding:1px 5px;border-radius:1px;background:transparent;color:var(--amber);border:1px solid var(--amber);margin-left:4px;vertical-align:middle;letter-spacing:0.04em;cursor:help;} .conf-badge{display:inline-block;font-family:var(--mono);font-size:8px;padding:1px 5px;border-radius:1px;background:transparent;color:var(--green);border:1px solid var(--green);margin-left:4px;vertical-align:middle;letter-spacing:0.04em;cursor:help;} .hr-badge{display:inline-block;font-family:var(--mono);font-size:8px;padding:1px 5px;border-radius:1px;background:transparent;border:1px solid;margin-left:4px;vertical-align:middle;letter-spacing:0.04em;cursor:help;} .hr-bmo{color:var(--green);border-color:var(--green);}.hr-amc{color:var(--blue);border-color:var(--blue);}.hr-dmh{color:var(--text3);border-color:var(--text3);} /* Tappable "how this is measured" affordance on historical-reaction stats. */ .info-i{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:5px;padding:0;border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--text3);font-family:var(--mono);font-size:9px;font-style:italic;line-height:1;cursor:pointer;vertical-align:middle;transition:border-color 0.1s,color 0.1s;} .info-i:hover{border-color:var(--text2);color:var(--text1);} .info-pop{position:fixed;z-index:300;width:264px;max-width:calc(100vw - 16px);background:var(--bg1);border:1px solid var(--border2);border-radius:3px;box-shadow:0 6px 24px rgba(22,18,14,0.16);padding:11px 13px;} .info-pop-h{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;} .info-pop-row{display:flex;gap:9px;font-family:var(--sans);font-size:11px;line-height:1.5;margin-bottom:6px;} .info-pop-row:last-child{margin-bottom:0;} .info-pop-row .k{color:var(--text3);min-width:58px;flex-shrink:0;font-weight:500;} .info-pop-row .v{color:var(--text1);} .info-pop-row .v b{color:var(--text0);font-weight:600;} .rpt-badge{display:inline-block;font-family:var(--mono);font-size:8px;padding:1px 5px;border-radius:1px;background:transparent;border:1px solid;margin-left:4px;vertical-align:middle;letter-spacing:0.04em;cursor:help;} .no-cov{font-family:var(--sans);font-size:10px;font-style:italic;color:var(--text3);cursor:help;letter-spacing:0.01em;} .loading-row td{text-align:center;padding:48px;font-family:var(--sans);font-size:12px;color:var(--text3);} .empty-row td{text-align:center;padding:36px;font-family:var(--sans);font-size:12px;color:var(--text3);} .tbl-center td,.tbl-center th{text-align:center!important;} .tbl-center .rb{justify-content:center;} .tbl-center .rb-val{text-align:center;min-width:auto;} /* ── SIDEBAR ── */ .sb-section{border-bottom:none;} .sb-section + .sb-section{margin-top:22px;} .sb-head{padding:0 14px 8px;background:transparent;border-top:none;border-bottom:1.5px solid var(--text0);display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .sb-title{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--text0);text-transform:uppercase;letter-spacing:0.13em;} .sb-badge{font-size:9px;font-weight:500;padding:1px 6px;border-radius:1px;} .badge-red{background:var(--red-dim);color:var(--red);} .badge-blue{background:var(--blue-dim);color:var(--blue);} .badge-green{background:var(--green-dim);color:var(--green);} .alert-item{display:flex;gap:9px;padding:9px 14px;border-bottom:1px solid var(--border);align-items:flex-start;} .alert-item:last-child{border-bottom:none;} .al-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;margin-top:6px;} .al-dot-red{background:var(--red);}.al-dot-blue{background:var(--blue);}.al-dot-amber{background:var(--amber);}.al-dot-green{background:var(--green);} .al-text{font-size:11px;color:var(--text1);line-height:1.5;} .al-text b{color:var(--text0);font-weight:500;} .al-time{font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:2px;} /* Empty-watchlist onboarding: a short prompt + one-tap "quick add" starter chips. */ .al-empty{padding:4px 14px 14px;} .al-empty-text{font-family:var(--sans);font-size:12px;color:var(--text2);line-height:1.55;margin-bottom:13px;} .al-empty-label{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;} .al-chips{display:flex;flex-wrap:wrap;gap:6px;} .al-chip{font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--bg2);border:1px solid var(--border2);border-radius:3px;padding:4px 10px;cursor:pointer;transition:border-color .12s,background .12s;} .al-chip:hover{border-color:var(--accent);background:var(--accent-dim);} .wl-item{display:grid;grid-template-columns:46px 1fr 52px 36px;gap:6px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--border);} .wl-item:last-child{border-bottom:none;} .wl-ticker{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text0);} .wl-event{font-size:10px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .wl-date{font-family:var(--mono);font-size:10px;color:var(--text2);text-align:right;} .wl-imp{font-family:var(--mono);font-size:9px;font-weight:500;text-align:right;} .imp-h-txt{color:var(--red);}.imp-m-txt{color:var(--amber);}.imp-l-txt{color:var(--text3);} .cal-btn{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--accent);background:none;border:1px solid var(--border2);border-radius:2px;padding:5px 9px;cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s,color .12s;} .cal-btn:hover{border-color:var(--accent);} /* Active "in watchlist" state for the modal watchlist toggle (filled = added). */ .cal-btn.on{color:var(--bg1);background:var(--blue);border-color:var(--blue);} .cal-btn.on:hover{border-color:var(--blue);opacity:.88;} .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;} .stat-cell{padding:10px 14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);} .stat-cell:nth-child(even){border-right:none;} .stat-cell:nth-last-child(-n+2){border-bottom:none;} .stat-label{font-family:var(--sans);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;font-weight:500;white-space:nowrap;} .stat-val{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--text0);line-height:1;} .stat-sub{font-size:10px;color:var(--text3);margin-top:2px;} .stat-val.green{color:var(--green);}.stat-val.red{color:var(--red);}.stat-val.amber{color:var(--amber);} /* ── WATCHLIST TAB ── */ .wl-empty{padding:36px 24px;text-align:center;} .wl-empty-title{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--text0);margin-bottom:8px;} .wl-empty-sub{font-size:13px;color:var(--text2);line-height:1.65;} .details-btn{font-family:var(--sans);font-size:12px;color:var(--blue);text-decoration:none;border:1px solid var(--border);padding:4px 10px;border-radius:2px;white-space:nowrap;transition:border-color 0.1s;} .details-btn:hover{border-color:var(--blue);} .details-btn-sm{font-family:var(--sans);font-size:12px;color:var(--blue);text-decoration:none;border:1px solid var(--border);padding:3px 9px;border-radius:2px;white-space:nowrap;} .details-btn-sm:hover{border-color:var(--blue);} .wl-section-head{display:flex;align-items:center;gap:8px;padding:10px 0 8px;border-bottom:1px solid var(--border);margin-bottom:10px;} .wl-section-label{font-family:var(--sans);font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;} .wl-section-count{font-size:10px;background:var(--bg3);color:var(--text3);padding:1px 5px;border-radius:1px;font-family:var(--sans);} .wl-ac-row{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:0;} .wl-ac-row:hover{background:var(--bg0);} .wl-ac-active{background:var(--bg0)!important;} ::-webkit-scrollbar{width:3px;height:3px;} ::-webkit-scrollbar-track{background:var(--bg1);} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:1px;} @media(max-width:1100px){:root{--pad:24px;}} @media(max-width:900px){ :root{--pad:16px;} /* Single column. The sidebar STACKS BELOW the content (it used to be display:none, which hid watchlist management, alerts and stats entirely on phones). */ .layout{grid-template-columns:1fr;} .main{padding:18px 0;} .sidebar{display:block;border-left:none;border-top:1px solid var(--border);padding:20px 0 28px;overflow:visible;} /* Stacked layout has no horizontal squeeze — neutralize the collapse here: keep the panel visible, hide the desktop reopen tab, and drop its in-panel collapse button. */ .page-body.sidebar-collapsed .sidebar{display:block;} .page-body.sidebar-collapsed .sb-reopen{display:none;} .sb-toggle{display:none;} /* Compact masthead: tz (left) + actions (right) on the top line, nameplate below. The tagline phrase is dropped; the tz picker stays so times can still be re-zoned. */ .topbar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;padding:11px var(--pad);} .brand-tagline-left{display:none;} .topbar-left{order:1;flex-direction:row;} .topbar-right{order:2;flex-direction:row;align-items:center;gap:14px;margin-left:auto;} .brand{order:3;flex:1 1 100%;align-items:flex-start;text-align:left;} .brand-name{font-size:clamp(26px,7vw,40px);} .brand-subtitle{font-size:9px;letter-spacing:0.24em;} .market-status-row,.clock-display{display:none;} /* Date strip fits a narrow screen. */ .month-label{min-width:0;font-size:16px;} .month-summary{display:none;} } @media(max-width:560px){ .brand-name{font-size:28px;} .brand-subtitle{font-size:8px;letter-spacing:0.2em;} .nav-tab{padding:0 13px;font-size:11px;height:42px;} .month-strip-inner{height:46px;} .acct-email{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Detail-modal metric grids (inline 3-/4-up tiles in services.js) → 2-up so the figures don't cram on a phone. Inline column counts need !important to override. Class-based grids (.stk-tiles, .stk-div) have their own rules and aren't matched. */ [style*="repeat(4,1fr)"],[style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important;} /* Drop columns flagged low-priority on phones (e.g. the Today table's "Details ↗" link), so the names/numbers that matter get room instead of truncating. The table's own min-width then leaves more for the flexible Company column. */ .col-hide-sm{display:none;} } /* ── Phone (~390px) ── all desktop layout is preserved above this width. ── */ @media(max-width:480px){ /* Larger tap targets (≥ ~44px) */ .nav-tab{height:44px;padding:0 14px;} .month-btn{width:38px;height:38px;font-size:17px;} .theme-btn{width:40px;height:40px;} .theme-btn svg{width:19px;height:19px;} .tbl .c{padding:13px 10px;} /* Topbar fits a narrow screen: smaller brand, compact tz picker, actions wrap */ .brand-name{font-size:22px;} .topbar-right{flex-wrap:wrap;gap:8px 12px;} .tz-select{max-width:104px;font-size:10px;padding:3px 4px;} /* Date strip: let the Today filter chips wrap below the nav instead of being clipped */ .month-strip-inner{height:auto;min-height:46px;padding-top:7px;padding-bottom:7px;} .month-strip-inner>div:first-child{flex-wrap:wrap;gap:8px 12px;} .month-label{font-size:15px;} /* Calendar → compact dot grid (labels would clip at ~50px columns); tap a day for full detail */ .cal-day{min-height:54px;padding:5px 4px;} .cal-day-header{font-size:9px;} .cal-ev{display:inline-flex;margin:0 4px 2px 0;} .cal-ev-label,.cal-more{display:none;} /* Tables already scroll inside overflow-x wrappers; stop the page itself scrolling sideways */ html,body{overflow-x:hidden;} /* Auth card fits a phone (was 24px side margins → could clip the Google button) */ .auth-card{margin:max(5vh,28px) 12px 40px;padding:26px 22px 24px;} .auth-brand{font-size:clamp(26px,8.5vw,40px);} } /* ── AUTH VIEW — login / register, opened from the "Sign in" button ── */ /* The dashboard is the landing page; this is a dismissible full-screen view. */ #auth-gate{display:none;position:fixed;inset:0;z-index:300;background:var(--surface-sunken);align-items:flex-start;justify-content:center;overflow-y:auto;padding:0;} body.show-auth #auth-gate{display:flex;} body.show-auth{overflow:hidden;} #auth-close{position:fixed;top:16px;right:22px;background:none;border:none;font-size:30px;line-height:1;color:var(--text3);cursor:pointer;z-index:301;} #auth-close:hover{color:var(--text0);} /* The form sits on a white "printed card" that lifts off the sunken backdrop — same surface/sunken model as the dashboard, just with a soft lift for this focused view. */ .auth-card{width:100%;max-width:430px;margin:max(7vh,44px) 24px 48px;background:var(--bg1);border:1px solid var(--border);border-radius:6px;box-shadow:0 1px 2px rgba(17,17,17,0.04),0 10px 34px rgba(17,17,17,0.07);padding:34px 38px 30px;} /* Classic newspaper nameplate: a thick rule with a hairline riding just inside it, mirrored top & bottom — a balanced "double rule" (the old solid-top/double-bottom pairing read lopsided because the weights didn't match). */ .auth-masthead{position:relative;text-align:center;border-top:3px solid var(--text0);border-bottom:3px solid var(--text0);padding:20px 0 18px;margin-bottom:16px;} .auth-masthead::before,.auth-masthead::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--text0);} .auth-masthead::before{top:4px;} .auth-masthead::after{bottom:4px;} /* Short sepia ornament closing the nameplate group (warm brand accent). */ .auth-rule{width:54px;height:2px;background:var(--accent);border-radius:1px;margin:0 auto 22px;} /* Sized to fit WITHIN the masthead rules in the ~430px card (12-letter wordmark) — keep max small enough that "SIGNALSTREET" never overruns the rules; nowrap so it never breaks to 2 lines. */ .auth-brand{font-family:var(--serif);font-size:clamp(30px,8.5vw,40px);font-weight:700;letter-spacing:0.02em;color:var(--text0);line-height:0.95;text-transform:uppercase;white-space:nowrap;} .auth-sub{font-family:var(--serif);font-size:11px;font-weight:400;letter-spacing:0.42em;color:var(--text1);text-transform:uppercase;padding-left:0.42em;margin-top:8px;} .auth-tag{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--text2);margin-top:14px;} .auth-title{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--text0);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;} .auth-lede{font-family:var(--sans);font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:20px;} #google-auth{display:none;margin-bottom:6px;max-width:100%;} #google-btn{display:flex;justify-content:center;min-height:40px;color-scheme:light;overflow:hidden;} .auth-or{display:flex;align-items:center;text-align:center;color:var(--text3);font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;margin:18px 0;} .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border);} .auth-or span{padding:0 12px;} .auth-field{margin-bottom:16px;} .auth-label{font-family:var(--sans);font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:6px;display:block;} .auth-input{width:100%;background:var(--bg0);border:1px solid var(--border2);color:var(--text0);padding:11px 13px;font-family:var(--sans);font-size:14px;border-radius:3px;outline:none;transition:border-color .12s,box-shadow .12s;} .auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);} .auth-submit{width:100%;background:var(--text0);color:var(--bg1);border:1px solid var(--text0);padding:12px 14px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border-radius:3px;cursor:pointer;transition:opacity .12s,transform .04s;margin-top:6px;} .auth-submit:hover{opacity:.84;} .auth-submit:active{transform:translateY(1px);} .auth-submit:disabled{opacity:.5;cursor:default;} .auth-msg{font-family:var(--sans);font-size:12px;line-height:1.45;margin:14px 0 2px;min-height:1px;} .auth-msg.err{color:var(--red);} .auth-msg.ok{color:var(--green);} .auth-switch{font-family:var(--sans);font-size:12px;color:var(--text2);text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);} .auth-switch a{color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px;} .auth-switch a:hover{color:var(--text0);} .auth-foot{font-family:var(--sans);font-size:10px;color:var(--text3);text-align:center;margin-top:26px;letter-spacing:0.03em;} /* Inline per-field validation */ .auth-field-err{font-family:var(--sans);font-size:11px;color:var(--red);margin-top:5px;line-height:1.4;} .auth-field-hint{font-family:var(--sans);font-size:11px;color:var(--text3);margin-top:5px;line-height:1.4;} .auth-field-hint.ok{color:var(--green);} .auth-input.invalid{border-color:var(--red);} .auth-input.invalid:focus{box-shadow:0 0 0 3px var(--red-dim);} /* Password field: show/hide toggle + strength hint */ .auth-input-wrap{position:relative;} .auth-input-wrap .auth-input{padding-right:58px;} .auth-pw-toggle{position:absolute;top:1px;bottom:1px;right:2px;background:none;border:none;color:var(--text3);font-family:var(--sans);font-size:10px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;padding:0 11px;} .auth-pw-toggle:hover{color:var(--text0);} .auth-pw-strength{display:none;align-items:center;gap:9px;margin-top:8px;} .auth-pw-bar{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;} .auth-pw-bar span{display:block;height:100%;width:0;border-radius:2px;transition:width .15s,background .15s;} .auth-pw-level{font-family:var(--sans);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;min-width:50px;text-align:right;} /* Signed-in chip in the topbar */ .acct-row{display:flex;align-items:center;gap:10px;} .acct-email{font-family:var(--mono);font-size:10px;color:var(--text2);letter-spacing:0.04em;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;} .acct-email:hover{color:var(--text0);text-decoration:underline;text-underline-offset:2px;} .acct-logout{font-family:var(--sans);font-size:11px;padding:0;border:none;background:transparent;color:var(--accent);cursor:pointer;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;text-decoration:underline;text-underline-offset:3px;} .acct-logout:hover{opacity:.7;} /* ── ACCESSIBILITY ── keyboard focus ring for the JS-promoted button rows + nav tabs. Scoped to role="button" and only shows for keyboard users (:focus-visible), so the mouse appearance is unchanged. The programmatically-focused dialog shows no ring. */ [role="button"]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;} [role="dialog"]:focus{outline:none;} /* ── STOCK SEARCH ── persistent ticker lookup at the right of the nav-tabs row. Desktop shows the input inline; below the topbar breakpoint it collapses to a 🔍 icon that expands (via .nav-tabs.searching, toggled by toggleMastheadSearch) into a full-width row. The dropdown reuses the watchlist autocomplete rows (.wl-ac-row). */ .mhs{display:flex;align-items:center;} .mhs-icon{display:none;background:none;border:none;color:var(--accent);font-size:13px;line-height:1;padding:3px 4px;cursor:pointer;} .mhs-icon:hover{opacity:.7;} .mhs-wrap{position:relative;} .mhs-glass{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);display:flex;pointer-events:none;transition:color .12s;} .mhs-input{width:280px;background:var(--bg1);border:1px solid var(--border2);color:var(--text0);font-family:var(--sans);font-size:13px;padding:7px 11px 7px 33px;border-radius:3px;outline:none;transition:border-color .12s,box-shadow .12s;} .mhs-input::placeholder{color:var(--text3);} .mhs-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);} .mhs-wrap:focus-within .mhs-glass{color:var(--accent);} .mhs-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:236px;background:var(--bg1);border:1px solid var(--border2);border-radius:2px;box-shadow:0 6px 18px rgba(22,18,14,0.12);z-index:120;overflow-y:auto;max-height:300px;} @media(max-width:900px){ .mhs-icon{display:inline-block;} .mhs-wrap{display:none;} .mhs-glass{display:none;} /* the mobile expand bar has its own padding; skip the inset glyph */ .nav-tabs.searching .mhs-wrap{display:block;position:absolute;top:100%;left:0;right:0;background:var(--bg0);border-bottom:1px solid var(--border2);padding:9px var(--pad);z-index:60;} .nav-tabs.searching .mhs-input{width:100%;font-size:14px;padding:9px 12px;} .nav-tabs.searching .mhs-dropdown{left:var(--pad);right:var(--pad);} } /* ── SINGLE-STOCK DETAIL VIEW (stock.js) ── full-page lookup for one ticker, assembled from existing render pieces. Tokens/`.tbl` shared with the rest of the app. */ .stk-view{display:flex;flex-direction:column;gap:24px;} .stk-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border);} .stk-back{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:4px 2px;letter-spacing:0.02em;align-self:center;} .stk-back:hover{text-decoration:underline;text-underline-offset:3px;} .stk-id{flex:1;min-width:180px;} .stk-id-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .stk-sym{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--text0);letter-spacing:0.01em;} .stk-px{font-family:var(--mono);font-size:14px;} .stk-name{font-family:var(--serif);font-size:17px;color:var(--text0);margin-top:5px;} .stk-sector{font-family:var(--sans);font-size:12px;color:var(--text3);} .stk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .stk-act{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--accent);background:transparent;border:1px solid var(--border2);border-radius:2px;padding:7px 12px;cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s,color .12s;} .stk-act:hover{border-color:var(--accent);} .stk-act-wl.on{color:var(--green);border-color:var(--green);background:var(--green-dim);} .stk-sec{display:flex;flex-direction:column;} .stk-sec-h{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text2);margin-bottom:13px;padding-bottom:7px;border-bottom:1px solid var(--border);} .stk-sub{font-family:var(--sans);font-size:13px;color:var(--text2);margin-bottom:13px;} .stk-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;} .stk-tile{background:var(--bg2);border:1px solid var(--border);border-radius:2px;padding:10px 12px;} .stk-tile-l{font-family:var(--sans);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px;font-weight:500;} .stk-tile-v{font-family:var(--mono);font-size:15px;font-weight:500;} .stk-reported{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text3);border-radius:2px;padding:13px 15px;margin-top:14px;} .stk-reported.amber{border-left-color:var(--amber);font-family:var(--sans);font-size:12px;color:var(--text2);line-height:1.55;} .stk-rpt-head{font-family:var(--sans);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;font-weight:500;margin-bottom:11px;display:flex;align-items:center;gap:9px;} .stk-rpt-tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.07em;border:1px solid;padding:2px 7px;border-radius:3px;} .stk-rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .stk-rpt-l{font-family:var(--sans);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:3px;font-weight:500;} .stk-rpt-v{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text0);} .stk-rpt-est{font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:1px;} .stk-watch{background:var(--accent-dim);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:2px;padding:13px 15px;margin-top:14px;} .stk-watch-h{font-family:var(--sans);font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:7px;font-weight:600;} .stk-watch-b{font-family:var(--serif);font-size:14px;color:var(--text0);line-height:1.6;} .stk-div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;cursor:pointer;} .stk-div:hover .stk-div-row{border-color:var(--border2);} .stk-div-row{background:var(--bg2);border:1px solid var(--border);border-radius:2px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;transition:border-color .12s;} .stk-div-l{font-family:var(--sans);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;font-weight:500;} .stk-div-v{font-family:var(--mono);font-size:14px;color:var(--text0);} .stk-empty{font-family:var(--sans);font-size:13px;color:var(--text3);padding:8px 0;line-height:1.5;} .stk-load{font-family:var(--sans);font-size:12px;color:var(--text3);padding:8px 0;} @media(max-width:560px){ .stk-tiles{grid-template-columns:repeat(2,1fr);} .stk-div{grid-template-columns:repeat(2,1fr);} .stk-rpt-grid{grid-template-columns:1fr;gap:10px;} } /* ── SECTORS TAB ── overview grid of sector/industry cards + the per-sector detail columns. */ .sector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px;} .sector-card{background:var(--bg1);border:1px solid var(--border);border-radius:3px;padding:13px 15px;cursor:pointer;transition:border-color .12s,background .12s;} .sector-card:hover{border-color:var(--border2);background:var(--bg2);} .sector-card .sc-name{font-family:var(--serif);font-size:15px;color:var(--text0);margin-bottom:7px;line-height:1.2;} .sector-card .sc-perf{font-family:var(--mono);font-size:14px;font-weight:500;display:flex;align-items:center;gap:7px;} .sector-card .sc-meta{font-family:var(--sans);font-size:10px;color:var(--text3);margin-top:6px;} .sector-inputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-bottom:8px;} .sector-input{background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:11px 13px;cursor:pointer;transition:border-color .12s;} .sector-input:hover{border-color:var(--border2);} /* Upcoming-earnings rows: grey-out on hover (matches the table-row feel elsewhere). */ .sector-erow{padding:8px 6px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:2px;transition:background .1s;} .sector-erow:hover{background:var(--row-hover);} /* Movers — gainers/laggards columns. */ .sector-movers{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .sector-mover{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-radius:2px;cursor:pointer;transition:background .1s;} .sector-mover:hover{background:var(--row-hover);} .sector-star{cursor:pointer;color:var(--text3);font-size:13px;line-height:1;transition:color .12s;} .sector-star:hover,.sector-star.on{color:var(--accent);} @media(max-width:560px){ .sector-movers{grid-template-columns:1fr;gap:16px;} } @media(max-width:560px){ .sector-cols{grid-template-columns:1fr!important;gap:18px!important;} }