/* ========================================================================== TRADER Spring Scanner — app.css REM-first (zero raw pixel units anywhere), dark theme DEFAULT, light theme via [data-theme="light"]. Mobile-first. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme tokens -------------------------------------------------------------------------- */ :root, html[data-theme="dark"] { --bg: #111827; --surface: #1F2937; --surface-2: #273344; --border: #374151; --text: #F3F4F6; --muted: #9CA3AF; --primary: #2563EB; --primary-strong: #1D4ED8; --success: #16A34A; --warning: #D97706; --error: #DC2626; /* AA-safe text variants for small colored text on the theme background */ --primary-text: #93C5FD; --success-text: #4ADE80; --warning-text: #FBBF24; --error-text: #F87171; --primary-soft: rgba(37, 99, 235, 0.18); --success-soft: rgba(22, 163, 74, 0.16); --warning-soft: rgba(217, 119, 6, 0.16); --error-soft: rgba(220, 38, 38, 0.16); --muted-soft: rgba(156, 163, 175, 0.14); --overlay: rgba(3, 7, 18, 0.66); --shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.45); --focus-ring: #60A5FA; } html[data-theme="light"] { --bg: #F3F4F6; --surface: #FFFFFF; --surface-2: #F9FAFB; --border: #D1D5DB; --text: #111827; --muted: #4B5563; --primary: #2563EB; --primary-strong: #1D4ED8; --success: #16A34A; --warning: #D97706; --error: #DC2626; --primary-text: #1D4ED8; --success-text: #15803D; --warning-text: #92400E; --error-text: #B91C1C; --primary-soft: rgba(37, 99, 235, 0.10); --success-soft: rgba(22, 163, 74, 0.12); --warning-soft: rgba(217, 119, 6, 0.14); --error-soft: rgba(220, 38, 38, 0.10); --muted-soft: rgba(75, 85, 99, 0.10); --overlay: rgba(17, 24, 39, 0.45); --shadow: 0 0.625rem 1.875rem rgba(17, 24, 39, 0.18); --focus-ring: #2563EB; } /* Smooth theme transition — class added by JS after first paint so the initial render does not animate. */ html.theme-anim, html.theme-anim body, html.theme-anim * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html { background: var(--bg); } body.app-body { margin: 0; /* Standalone default: NO reserved band. When the fixed SHARED_DASHBOARD header actually mounts, app.js toggles html.has-shared-header and the conditional rules below apply the 3.75rem offset. */ padding-top: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Platform-header offset — applied ONLY while header-embed.js has actually injected the fixed SHARED_DASHBOARD header (.he-header). app.js detects the element (post-load check + MutationObserver) and toggles this class on , so standalone mode never shows a blank band. */ html.has-shared-header body.app-body { padding-top: 3.75rem; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; } /* Themed scrollbars (Firefox + WebKit) */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0.25rem; border: 0.125rem solid transparent; } *::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Keyboard focus — visible, theme-aware, never removed */ :focus-visible { outline: 0.125rem solid var(--focus-ring); outline-offset: 0.125rem; border-radius: 0.25rem; } .sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -3.5rem; left: 0.75rem; z-index: 200; padding: 0.625rem 1rem; background: var(--primary); color: #FFFFFF; border-radius: 0.375rem; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 4rem; } /* -------------------------------------------------------------------------- 3. Buttons & touch targets (>= 2.75rem) -------------------------------------------------------------------------- */ .btn, button.btn { min-height: 2.75rem; min-width: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 0.0625rem solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover { border-color: var(--muted); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--primary); border-color: var(--primary); color: #FFFFFF; } .btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); } .btn-danger { background: transparent; border-color: var(--error); color: var(--error-text); } .btn-danger:hover { background: var(--error-soft); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { color: var(--text); background: var(--muted-soft); } .btn-icon { width: 2.75rem; padding: 0; } .btn .spin { animation: spinner 0.9s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 4. App bar, tabs, badges -------------------------------------------------------------------------- */ .app-bar { position: sticky; /* Standalone default: stick to the very top. The shared-header offset is conditional (html.has-shared-header rule below). */ top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--surface); border-bottom: 0.0625rem solid var(--border); } /* Sit under the fixed SHARED_DASHBOARD header only when it actually mounted. */ html.has-shared-header .app-bar { top: 3.75rem; } .app-title { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 1.125rem; font-weight: 700; } .app-tagline { font-size: 0.75rem; font-weight: 500; color: var(--muted); border: 0.0625rem solid var(--border); border-radius: 999rem; padding: 0.125rem 0.625rem; white-space: nowrap; } .scan-meta { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.75rem; color: var(--muted); } .tab-nav { display: flex; gap: 0.25rem; padding: 0 1rem; background: var(--bg); border-bottom: 0.0625rem solid var(--border); overflow-x: auto; } .tab { position: relative; min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; border-bottom: 0.1875rem solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--primary-text); border-bottom-color: var(--primary); } .badge-count { min-width: 1.375rem; height: 1.375rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.375rem; border-radius: 999rem; background: var(--error); color: #FFFFFF; font-size: 0.6875rem; font-weight: 700; } /* -------------------------------------------------------------------------- 5. Panels, cards, tables -------------------------------------------------------------------------- */ .panel { padding: 1rem; max-width: 90rem; margin: 0 auto; } .card { background: var(--surface); border: 0.0625rem solid var(--border); border-radius: 0.75rem; padding: 1rem; } .card-title { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700; } .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .stat-card { background: var(--surface); border: 0.0625rem solid var(--border); border-radius: 0.75rem; padding: 0.875rem 1rem; } .stat-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .stat-value { margin-top: 0.25rem; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; border: 0.0625rem solid var(--border); border-radius: 0.75rem; background: var(--surface); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table th { text-align: left; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.75rem; border-bottom: 0.0625rem solid var(--border); white-space: nowrap; } .data-table th.sortable { cursor: pointer; /* Sortable headers are interactive — meet the 2.75rem touch floor. On a table-cell, height acts as a minimum; border-box folds the padding in. */ box-sizing: border-box; height: 2.75rem; min-height: 2.75rem; } .data-table th.sortable:hover { color: var(--text); } .data-table td { padding: 0.75rem; border-bottom: 0.0625rem solid var(--border); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr.row-click { cursor: pointer; } .data-table tbody tr.row-click:hover, .data-table tbody tr.row-click:focus-visible { background: var(--surface-2); } .data-table .empty-cell { text-align: center; color: var(--muted); padding: 2rem 1rem; } /* Responsive collapse: tables become stacked cards below the sm breakpoint */ @media (max-width: 39.9375rem) { .data-table thead { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); } .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; box-sizing: border-box; } .data-table tr { border-bottom: 0.375rem solid var(--bg); padding: 0.375rem 0; } .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-bottom: none; padding: 0.375rem 0.75rem; } .data-table td::before { content: attr(data-label); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); flex-shrink: 0; } .data-table td.td-no-label::before { content: none; } } /* -------------------------------------------------------------------------- 6. Score chips, rank badge, trend, RS -------------------------------------------------------------------------- */ .chip-strip { display: flex; flex-wrap: wrap; gap: 0.25rem; } .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999rem; border: 0.0625rem solid var(--border); background: var(--muted-soft); color: var(--muted); font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .score-cool { background: var(--muted-soft); border-color: var(--border); color: var(--muted); } .score-mild { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text); } .score-warm { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); } .score-hot { background: var(--error-soft); border-color: var(--error); color: var(--error-text); } .squeeze-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--success-text); flex-shrink: 0; } .badge-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 1.75rem; padding: 0.125rem 0.5rem; border-radius: 0.5rem; border: 0.0625rem solid var(--border); font-weight: 700; font-variant-numeric: tabular-nums; } /* Compression pulse — only for hot setups (score >= 80) */ .pulse { animation: score-pulse 2s ease-in-out infinite; } @keyframes score-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--error-soft); } 50% { box-shadow: 0 0 0 0.375rem var(--error-soft); } } .trend-up { color: var(--success-text); } .trend-down { color: var(--error-text); } .trend-flat { color: var(--muted); } .rs-cell { display: inline-flex; align-items: center; gap: 0.375rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .rs-delta { font-size: 0.75rem; font-weight: 600; } /* -------------------------------------------------------------------------- 7. Forms -------------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .field { display: flex; flex-direction: column; gap: 0.25rem; } .field label { font-size: 0.75rem; font-weight: 600; color: var(--muted); } .field input, .field select, .field textarea { min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 0.0625rem solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 0.875rem; box-sizing: border-box; width: 100%; } .field textarea { min-height: 4.5rem; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0.125rem solid var(--focus-ring); outline-offset: 0.0625rem; } .field .field-error { font-size: 0.75rem; color: var(--error-text); min-height: 1rem; } .field input.input-invalid, .field select.input-invalid, .field textarea.input-invalid { border-color: var(--error); } .warning-box { border: 0.0625rem solid var(--warning); background: var(--warning-soft); color: var(--warning-text); border-radius: 0.5rem; padding: 0.75rem; font-size: 0.8125rem; } .note-box { border: 0.0625rem solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 0.5rem; padding: 0.75rem; font-size: 0.8125rem; } .kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; font-size: 0.875rem; } .kv-grid dt { color: var(--muted); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .kv-grid dd { margin: 0 0 0.5rem; font-weight: 600; font-variant-numeric: tabular-nums; } .r-positive { color: var(--success-text); font-weight: 700; } .r-negative { color: var(--error-text); font-weight: 700; } /* -------------------------------------------------------------------------- 8. Modal (structure per spec) -------------------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--overlay); } .modal-overlay[hidden] { display: none; } .modal-container { max-height: 90vh; display: flex; flex-direction: column; width: 100%; max-width: 60rem; background: var(--surface); border: 0.0625rem solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow); animation: modal-in 0.18s ease-out; } .modal-container.modal-sm { max-width: 26rem; } /* A
may wrap .modal-body + .modal-footer (close-trade modal); keep the flex column contract intact through it. */ .modal-container > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } @keyframes modal-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 0.0625rem solid var(--border); } .modal-header h2 { margin: 0; font-size: 1.125rem; font-weight: 700; } .modal-body { overflow-y: auto; flex: 1; padding: 1rem; } /* Themed scrollbar inside the modal body */ .modal-body::-webkit-scrollbar { width: 0.5rem; } .modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0.25rem; } .modal-body { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .modal-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 0.0625rem solid var(--border); } .modal-footer .footer-note { margin-right: auto; font-size: 0.75rem; color: var(--muted); } /* Timeframe strip inside the symbol modal */ .tf-strip { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.75rem; } .tf-tab { min-height: 2.75rem; min-width: 3rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 0.0625rem solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; } .tf-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #FFFFFF; } .chart-frame { position: relative; min-height: 16rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg); overflow: hidden; } .chart-frame img { display: block; width: 100%; height: auto; } .skeleton { position: absolute; inset: 0; background: linear-gradient( 100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60% ); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } /* -------------------------------------------------------------------------- 9. Toasts & banners -------------------------------------------------------------------------- */ .toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: flex; flex-direction: column; gap: 0.5rem; max-width: 24rem; width: calc(100% - 2rem); } .toast { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border-radius: 0.5rem; border: 0.0625rem solid var(--border); border-left-width: 0.25rem; background: var(--surface); color: var(--text); font-size: 0.875rem; box-shadow: var(--shadow); animation: toast-in 0.25s ease-out; } .toast.leaving { animation: toast-out 0.2s ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { to { opacity: 0; transform: translateX(1.5rem); } } .toast-info { border-left-color: var(--primary); } .toast-success { border-left-color: var(--success); } .toast-warning { border-left-color: var(--warning); } .toast-error { border-left-color: var(--error); } .toast .toast-close { margin-left: auto; } .session-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; background: var(--warning-soft); border-bottom: 0.0625rem solid var(--warning); color: var(--warning-text); font-size: 0.875rem; } .session-banner[hidden] { display: none; } .session-banner-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.125rem; } .session-banner-link:focus-visible { outline: 0.125rem solid var(--warning); outline-offset: 0.125rem; } /* -------------------------------------------------------------------------- 10. Alerts list -------------------------------------------------------------------------- */ .alert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem; border-bottom: 0.0625rem solid var(--border); } .alert-row:last-child { border-bottom: none; } .alert-row.acked { opacity: 0.6; } .alert-row .alert-message { flex: 1 1 14rem; min-width: 0; } /* -------------------------------------------------------------------------- 11. Disclaimer footer (permanent) -------------------------------------------------------------------------- */ .disclaimer-footer { margin-top: 2rem; padding: 1rem; border-top: 0.0625rem solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.8125rem; text-align: center; } .disclaimer-footer strong { color: var(--warning-text); } /* -------------------------------------------------------------------------- 12. Breakpoint upgrades (mobile-first) -------------------------------------------------------------------------- */ @media (min-width: 48rem) { .panel { padding: 1.5rem; } .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64rem) { .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .modal-lg-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; } } /* -------------------------------------------------------------------------- 13. Motion & print safety -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } } @media print { body.app-body { padding-top: 0; background: #FFFFFF; color: #000000; } .app-bar .btn, .tab-nav, .toast-region, .modal-overlay, .session-banner, .skip-link { display: none !important; } .card, .table-wrap, .stat-card { border-color: #9CA3AF; background: #FFFFFF; } }