/* ============================================================ PAPER THEME · Screening Mantis Additive + fully reversible. Activates ONLY when is set. Remove the attribute (or this ) to return to the exact original design. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap'); /* ---- 1. Token remap (variables cascade; no !important needed) ---- */ html[data-theme="paper"]{ --bg:#f7f4ed; --surface:#fdfbf6; --s2:#f1ede2; --s3:#e8e2d4; --border:#e2ddd0; --text:#20201c; --muted:#6b6657; --faint:#c3bba6; --green:#3f7d4f; --gbg:#e9ede9; --gbdr:#cfd9cb; --red:#a4453a; --rbg:#f3e9e6; --rbdr:#e6cfc8; --yellow:#9a7b3a; --ybg:#f5efe0; --ybdr:#e6d8b0; --blue:#4a6079; --bbg:#eceef3; --bbdr:#d2d9e2; --purple:#6b5b8a; --pbg:#efeaf2; --pbdr:#ddd4e4; --orange:#b06a3a; --obg:#f3eae0; --obdr:#e8cfb4; --teal:#2c3a4a; --tbg:#e7ebef; --tbdr:#cdd6dd; --accent:#2c3a4a; --font:'IBM Plex Sans', system-ui, sans-serif; --font-head:'Source Serif 4', Georgia, serif; --font-num:'IBM Plex Mono', ui-monospace, monospace; --shadow:0 1px 3px rgba(60,50,30,.07); --shadow-md:0 8px 28px rgba(60,50,30,.14); } /* ---- 2. Brand: serif wordmark + circular mark ---- */ html[data-theme="paper"] .logo{font-family:var(--font-head);font-weight:600;letter-spacing:0} html[data-theme="paper"] .logo-mark{border-radius:50%;font-family:var(--font-head)} /* ---- 3. Table header: navy → warm paper, dark serif labels ---- */ html[data-theme="paper"] { --th-bg-color: #e8e3d8; } html[data-theme="paper"] thead th, html[data-theme="paper"] thead th.th-sym, html[data-theme="paper"] #thead-sub-row th{ background: var(--th-bg-color) !important; color:#2c1200 !important; /* all table header labels — darker brown */ font-family:var(--font); font-size:11px !important; border-bottom:1px solid #d8d2c2 !important; } html[data-theme="paper"] thead th:hover{ --th-bg-color: #ddd8cc; background: var(--th-bg-color) !important; color:#1a0900 !important; } html[data-theme="paper"] thead th .si{ color:#7a5c3a !important; } html[data-theme="paper"] thead th:hover .si{ color:#4a2e1f !important; } /* force consistent font size across ALL header cells (overrides #results-table id specificity) */ html[data-theme="paper"] #results-table thead th { font-size:11px !important; } /* header tool buttons (⚙, +, ×) flip dark-on-light */ html[data-theme="paper"] thead th button, html[data-theme="paper"] thead th .th-tool-btn, html[data-theme="paper"] thead th .col-hide-btn{ color:#6b6657 !important; border-color:#d8d2c2 !important; background:#efe9dc !important; } html[data-theme="paper"] thead th .col-hide-btn{ background:none !important; color:#9a9484 !important; } html[data-theme="paper"] thead th .th-tool-btn:hover{ background:#e6dfce !important; } /* readable inputs (hist date) on the light header */ html[data-theme="paper"] #histDateInput{ background:#fff !important; color:#36342c !important; border-color:#d8d2c2 !important; } html[data-theme="paper"] #thHistPrice button{ background:var(--accent) !important; } /* the white "unreviewed" dot would vanish on a light header */ html[data-theme="paper"] #rf-none{ background:#e2ddd0 !important; } /* ---- 4. Table body: warm cells, mono numerics, serif symbols ---- */ html[data-theme="paper"] tbody tr td:not(.sym){ background:#fdfbf6 !important; font-family:var(--font); font-variant-numeric:tabular-nums; } html[data-theme="paper"] tbody tr td.sym{ font-family:var(--font); font-variant-numeric:tabular-nums; } html[data-theme="paper"] tbody tr:hover td{ background:#f1ede2 !important; } html[data-theme="paper"] td.sym, html[data-theme="paper"] .sym{ font-family:var(--font) !important; font-weight:600; } html[data-theme="paper"] tbody tr:hover td.sym{ background:#f1ede2 !important; } /* ---- 5. Drilldown drawer accents (panel itself stays clean light) ---- */ html[data-theme="paper"] #dd-drawer > div:first-child{ background:#faf7f0 !important; } html[data-theme="paper"] .dd-rb.active{ background:#2c3a4a !important; border-color:#2c3a4a !important; color:#fdfbf6 !important; } /* ---- 6. Scrollbars (subtle, on-palette) ---- */ html[data-theme="paper"] .tbl-wrap::-webkit-scrollbar{ height:11px; width:11px; } html[data-theme="paper"] .tbl-wrap::-webkit-scrollbar-thumb{ background:#ddd7c8; border-radius:99px; } html[data-theme="paper"] .tbl-wrap::-webkit-scrollbar-track{ background:transparent; } /* ---- 7. Modal / popup accent buttons (inline indigo → ink) ---- */ html[data-theme="paper"] #welcome-popup button[onclick="welcomeAction('continue')"]{ background:var(--accent) !important; } html[data-theme="paper"] #welcome-popup button[onclick="welcomeAction('tour')"]{ background:#eef0f3 !important; color:var(--accent) !important; border-color:var(--bbdr) !important; } html[data-theme="paper"] #welcome-popup h2{ font-family:var(--font-head) !important; } html[data-theme="paper"] #ema-cross-modal button[onclick="applyEmaCrossConfig()"]{ background:var(--accent) !important; } html[data-theme="paper"] #tut-next{ background:var(--accent) !important; } html[data-theme="paper"] #bc-list-btns button{ border-color:var(--accent) !important; } html[data-theme="paper"] #bc-list-btns button[style*="#4f46e5"]{ background:var(--accent) !important; color:#fdfbf6 !important; } /* ---- 8. Drilldown drawer → warm paper ---- */ html[data-theme="paper"] #dd-drawer{ background:var(--surface) !important; } html[data-theme="paper"] #dd-drawer > div:first-child{ background:#faf7f0 !important; border-bottom-color:var(--border) !important; } html[data-theme="paper"] #dd-sym{ font-family:var(--font-head) !important; color:var(--text) !important; } html[data-theme="paper"] #dd-signals{ background:#faf7f0 !important; border-bottom-color:var(--border) !important; } html[data-theme="paper"] #dd-summary{ background:#faf7f0 !important; border-color:var(--border) !important; } html[data-theme="paper"] #dd-summary #sector-table td{ border-bottom-color:var(--border) !important; } html[data-theme="paper"] #dd-price-chart, html[data-theme="paper"] #dd-vol-chart, html[data-theme="paper"] #dd-rsi-chart{ border-color:var(--border) !important; } html[data-theme="paper"] #dd-drawer .dd-rb{ background:var(--surface) !important; border-color:var(--border) !important; color:var(--muted) !important; } /* ---- 9. Reflected from preview experiments ---- */ /* Active filter chips (above the table): indigo → light-yellow paper chip, dark-brown text */ html[data-theme="paper"] #filter-chips span{ background:#f6edc8 !important; color:#5a3e2a !important; border-color:#e6d8b0 !important; } /* Sector column — consistent with rest of paper theme */ html[data-theme="paper"] thead th[data-col="sector"]{ font-family:var(--font) !important; } html[data-theme="paper"] tbody td:nth-child(3){ font-family:var(--font) !important; } /* ---- Paper: column body tints (Breakout + RS groups — headers unchanged) ---- */ html[data-theme="paper"] #results-table tbody td:nth-child(22), html[data-theme="paper"] #results-table tbody td:nth-child(23), html[data-theme="paper"] #results-table tbody td:nth-child(24), html[data-theme="paper"] #results-table tbody td:nth-child(25), html[data-theme="paper"] #results-table tbody td:nth-child(29), html[data-theme="paper"] #results-table tbody td:nth-child(30), html[data-theme="paper"] #results-table tbody td:nth-child(31), html[data-theme="paper"] #results-table tbody td:nth-child(32), html[data-theme="paper"] #results-table tbody td:nth-child(33), html[data-theme="paper"] #results-table tbody td:nth-child(34) { background: rgba(253, 246, 178, 0.10) !important; } html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(22), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(23), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(24), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(25), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(29), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(30), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(31), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(32), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(33), html[data-theme="paper"] #results-table tbody tr:hover td:nth-child(34) { background: rgba(253, 246, 178, 0.22) !important; }