| |
| |
| |
| |
| |
|
|
| :root { |
| --bg: #f8fafc; |
| --surface: #ffffff; |
| --surface-2: #f1f5f9; |
| --border: #e2e8f0; |
| --border-strong: #cbd5e1; |
|
|
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-muted: #94a3b8; |
|
|
| --accent: #1d4ed8; |
| --accent-hover: #1e40af; |
| --accent-subtle: #eff6ff; |
|
|
| |
| --conf-high-bg: #f0fdf4; |
| --conf-high-border: #bbf7d0; |
| --conf-high-text: #15803d; |
| --conf-high-dot: #16a34a; |
|
|
| --conf-medium-bg: #fffbeb; |
| --conf-medium-border: #fde68a; |
| --conf-medium-text: #b45309; |
| --conf-medium-dot: #d97706; |
|
|
| --conf-low-bg: #fef2f2; |
| --conf-low-border: #fecaca; |
| --conf-low-text: #b91c1c; |
| --conf-low-dot: #dc2626; |
|
|
| |
| --sev-critical: #7f1d1d; |
| --sev-critical-bg: #fef2f2; |
| --sev-high: #dc2626; |
| --sev-high-bg: #fef2f2; |
| --sev-medium: #d97706; |
| --sev-medium-bg: #fffbeb; |
| --sev-low: #64748b; |
| --sev-low-bg: #f8fafc; |
|
|
| |
| --rec-buy: #15803d; |
| --rec-buy-bg: #f0fdf4; |
| --rec-hold: #1d4ed8; |
| --rec-hold-bg: #eff6ff; |
| --rec-avoid: #dc2626; |
| --rec-avoid-bg: #fef2f2; |
| --rec-skip: #64748b; |
| --rec-skip-bg: #f8fafc; |
|
|
| --sidebar-w: 220px; |
| --radius: 6px; |
| --radius-lg: 10px; |
|
|
| --font-ui: 'Inter', system-ui, -apple-system, sans-serif; |
| --font-mono: 'JetBrains Mono', 'Menlo', monospace; |
| } |
|
|
| |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| font-family: var(--font-ui); |
| font-size: 14px; |
| line-height: 1.6; |
| color: var(--text-primary); |
| background: var(--bg); |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| a { color: inherit; text-decoration: none; } |
|
|
| button { cursor: pointer; font-family: var(--font-ui); } |
|
|
| ul { list-style: none; } |
|
|
| .sr-only { |
| position: absolute; |
| width: 1px; height: 1px; |
| padding: 0; margin: -1px; |
| overflow: hidden; |
| clip: rect(0,0,0,0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| |
|
|
| .app-layout { |
| display: flex; |
| min-height: 100vh; |
| } |
|
|
| |
|
|
| .sidebar { |
| width: var(--sidebar-w); |
| min-height: 100vh; |
| background: var(--surface); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| position: sticky; |
| top: 0; |
| align-self: flex-start; |
| height: 100vh; |
| } |
|
|
| .sidebar__brand { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 20px 16px 16px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .sidebar__logo { |
| width: 30px; |
| height: 30px; |
| background: var(--accent); |
| color: #fff; |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.5px; |
| border-radius: 6px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
|
|
| .sidebar__name { |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| letter-spacing: -0.2px; |
| } |
|
|
| .sidebar__nav { |
| display: flex; |
| flex-direction: column; |
| padding: 12px 8px; |
| flex: 1; |
| gap: 2px; |
| } |
|
|
| .sidebar__item { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 8px 10px; |
| border-radius: var(--radius); |
| color: var(--text-secondary); |
| font-size: 13.5px; |
| font-weight: 500; |
| transition: background 0.1s, color 0.1s; |
| border-left: 2px solid transparent; |
| } |
|
|
| .sidebar__item:hover { |
| background: var(--surface-2); |
| color: var(--text-primary); |
| } |
|
|
| .sidebar__item--active { |
| background: var(--accent-subtle); |
| color: var(--accent); |
| border-left-color: var(--accent); |
| } |
|
|
| .sidebar__icon { display: flex; align-items: center; flex-shrink: 0; } |
|
|
| .sidebar__footer { |
| padding: 12px 16px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .sidebar__version { |
| font-size: 11px; |
| color: var(--text-muted); |
| font-family: var(--font-mono); |
| } |
|
|
| |
|
|
| .main-content { |
| flex: 1; |
| min-width: 0; |
| overflow-y: auto; |
| } |
|
|
| |
|
|
| .page { |
| max-width: 900px; |
| margin: 0 auto; |
| padding: 36px 40px 60px; |
| display: flex; |
| flex-direction: column; |
| gap: 24px; |
| } |
|
|
| .page--chat { |
| height: 100vh; |
| max-width: 780px; |
| overflow: hidden; |
| } |
|
|
| .page-header { display: flex; flex-direction: column; gap: 4px; } |
|
|
| .page-title { |
| font-size: 22px; |
| font-weight: 700; |
| color: var(--text-primary); |
| letter-spacing: -0.4px; |
| } |
|
|
| .page-subtitle { |
| font-size: 14px; |
| color: var(--text-secondary); |
| } |
|
|
| |
|
|
| .form-label { |
| display: block; |
| font-size: 12.5px; |
| font-weight: 500; |
| color: var(--text-secondary); |
| margin-bottom: 6px; |
| letter-spacing: 0.1px; |
| } |
|
|
| .form-input { |
| width: 100%; |
| height: 38px; |
| padding: 0 12px; |
| border: 1px solid var(--border-strong); |
| border-radius: var(--radius); |
| background: var(--surface); |
| color: var(--text-primary); |
| font-size: 14px; |
| font-family: var(--font-ui); |
| outline: none; |
| transition: border-color 0.15s, box-shadow 0.15s; |
| } |
|
|
| .form-input:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(29,78,216,0.12); |
| } |
|
|
| .form-input::placeholder { color: var(--text-muted); } |
|
|
| .form-input--sm { max-width: 130px; } |
|
|
| .form-field { display: flex; flex-direction: column; flex: 1; } |
| .form-field--sm { flex: 0 0 130px; } |
|
|
| .form-row { |
| display: flex; |
| gap: 12px; |
| align-items: flex-end; |
| } |
|
|
| |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| height: 38px; |
| padding: 0 16px; |
| border-radius: var(--radius); |
| font-size: 13.5px; |
| font-weight: 500; |
| border: 1px solid transparent; |
| transition: background 0.1s, box-shadow 0.1s, opacity 0.1s; |
| white-space: nowrap; |
| } |
|
|
| .btn:disabled { opacity: 0.5; cursor: not-allowed; } |
|
|
| .btn--primary { |
| background: var(--accent); |
| color: #fff; |
| border-color: var(--accent); |
| } |
|
|
| .btn--primary:hover:not(:disabled) { background: var(--accent-hover); } |
|
|
| .btn--ghost { |
| background: transparent; |
| color: var(--text-secondary); |
| border-color: var(--border-strong); |
| } |
|
|
| .btn--ghost:hover:not(:disabled) { |
| background: var(--surface-2); |
| color: var(--text-primary); |
| } |
|
|
| .btn--icon { |
| padding: 0; |
| width: 38px; |
| justify-content: center; |
| background: var(--accent); |
| color: #fff; |
| border-color: var(--accent); |
| flex-shrink: 0; |
| } |
|
|
| .btn--icon:hover:not(:disabled) { background: var(--accent-hover); } |
|
|
| |
|
|
| .dropzone { |
| border: 2px dashed var(--border-strong); |
| border-radius: var(--radius-lg); |
| background: var(--surface); |
| padding: 48px 32px; |
| text-align: center; |
| cursor: pointer; |
| transition: border-color 0.15s, background 0.15s; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .dropzone:hover, |
| .dropzone:focus-visible, |
| .dropzone--active { |
| border-color: var(--accent); |
| background: var(--accent-subtle); |
| } |
|
|
| .dropzone--filled { border-style: solid; border-color: var(--accent); } |
|
|
| .dropzone__icon { color: var(--text-muted); } |
| .dropzone__icon--file { color: var(--accent); } |
|
|
| .dropzone__primary { font-weight: 500; color: var(--text-primary); } |
| .dropzone__secondary { font-size: 13px; color: var(--text-muted); } |
| .dropzone__filename { font-weight: 600; color: var(--text-primary); font-size: 15px; } |
| .dropzone__size { font-size: 13px; color: var(--text-secondary); } |
|
|
| |
|
|
| .upload-form { display: flex; flex-direction: column; gap: 16px; } |
|
|
| |
|
|
| .upload-result { display: flex; flex-direction: column; gap: 16px; } |
|
|
| .low-confidence-panel { |
| border: 1px solid var(--conf-low-border); |
| background: var(--conf-low-bg); |
| border-radius: var(--radius-lg); |
| padding: 20px 24px; |
| } |
|
|
| .low-confidence-panel__title { |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--conf-low-text); |
| margin-bottom: 6px; |
| } |
|
|
| .low-confidence-panel__desc { |
| font-size: 13px; |
| color: var(--text-secondary); |
| margin-bottom: 14px; |
| } |
|
|
| .low-confidence-list { display: flex; flex-direction: column; gap: 6px; } |
|
|
| .low-confidence-list__item { |
| font-size: 13px; |
| color: var(--text-primary); |
| font-family: var(--font-mono); |
| background: rgba(220,38,38,0.06); |
| border-radius: 4px; |
| padding: 4px 10px; |
| border-left: 3px solid var(--conf-low-dot); |
| } |
|
|
| |
|
|
| .alert { |
| display: flex; |
| gap: 12px; |
| padding: 14px 16px; |
| border-radius: var(--radius); |
| border: 1px solid; |
| font-size: 13.5px; |
| } |
|
|
| .alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } |
| .alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } |
| .alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } |
| .alert--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } |
|
|
| .alert__icon { margin-top: 1px; flex-shrink: 0; } |
| .alert__title { font-weight: 600; margin-bottom: 2px; } |
| .alert__content { line-height: 1.5; } |
|
|
| |
|
|
| .spinner-wrap { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 16px 0; |
| color: var(--text-secondary); |
| font-size: 13.5px; |
| } |
|
|
| .spinner { |
| width: 18px; |
| height: 18px; |
| border: 2px solid var(--border); |
| border-top-color: var(--accent); |
| border-radius: 50%; |
| animation: spin 0.7s linear infinite; |
| flex-shrink: 0; |
| } |
|
|
| @keyframes spin { to { transform: rotate(360deg); } } |
|
|
| |
|
|
| .confidence-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| padding: 2px 8px; |
| border-radius: 100px; |
| font-size: 11px; |
| font-weight: 500; |
| letter-spacing: 0.1px; |
| border: 1px solid; |
| white-space: nowrap; |
| } |
|
|
| .confidence-badge__dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| } |
|
|
| .confidence-badge--high { |
| background: var(--conf-high-bg); |
| border-color: var(--conf-high-border); |
| color: var(--conf-high-text); |
| } |
|
|
| .confidence-badge--medium { |
| background: var(--conf-medium-bg); |
| border-color: var(--conf-medium-border); |
| color: var(--conf-medium-text); |
| } |
|
|
| .confidence-badge--low { |
| background: var(--conf-low-bg); |
| border-color: var(--conf-low-border); |
| color: var(--conf-low-text); |
| } |
|
|
| .confidence-badge--md { font-size: 12px; padding: 3px 10px; } |
|
|
| |
|
|
| .severity-badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 11px; |
| font-weight: 600; |
| letter-spacing: 0.4px; |
| text-transform: uppercase; |
| } |
|
|
| .severity--critical { background: var(--sev-critical-bg); color: var(--sev-critical); } |
| .severity--high { background: var(--sev-high-bg); color: var(--sev-high); } |
| .severity--medium { background: var(--sev-medium-bg); color: var(--sev-medium); } |
| .severity--low { background: var(--sev-low-bg); color: var(--sev-low); } |
|
|
| |
|
|
| .rec-badge { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| min-width: 100px; |
| padding: 12px 20px; |
| border-radius: var(--radius-lg); |
| border: 1.5px solid; |
| text-align: center; |
| } |
|
|
| .rec-badge__label { |
| font-size: 18px; |
| font-weight: 800; |
| letter-spacing: 1px; |
| } |
|
|
| .rec-badge__desc { |
| font-size: 11px; |
| font-weight: 400; |
| margin-top: 2px; |
| opacity: 0.75; |
| } |
|
|
| .rec-badge--buy { background: var(--rec-buy-bg); color: var(--rec-buy); border-color: #bbf7d0; } |
| .rec-badge--hold { background: var(--rec-hold-bg); color: var(--rec-hold); border-color: #bfdbfe; } |
| .rec-badge--avoid { background: var(--rec-avoid-bg); color: var(--rec-avoid); border-color: #fecaca; } |
| .rec-badge--skip { background: var(--rec-skip-bg); color: var(--rec-skip); border-color: var(--border); } |
|
|
| |
|
|
| .lookup-form { |
| display: flex; |
| gap: 10px; |
| align-items: flex-end; |
| } |
|
|
| |
|
|
| .report-layout { display: flex; flex-direction: column; gap: 32px; } |
|
|
| .report-hero { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 20px 24px; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| } |
|
|
| .report-hero__info { display: flex; flex-direction: column; gap: 2px; } |
|
|
| .report-hero__company { |
| font-size: 20px; |
| font-weight: 700; |
| color: var(--text-primary); |
| letter-spacing: -0.3px; |
| } |
|
|
| .report-hero__year { |
| font-size: 13px; |
| color: var(--text-secondary); |
| font-family: var(--font-mono); |
| } |
|
|
| |
|
|
| .report-section { display: flex; flex-direction: column; gap: 14px; } |
|
|
| .section-title { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text-secondary); |
| letter-spacing: 0.6px; |
| text-transform: uppercase; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .section-count { |
| background: var(--surface-2); |
| color: var(--text-secondary); |
| padding: 1px 7px; |
| border-radius: 100px; |
| font-size: 11px; |
| font-weight: 500; |
| } |
|
|
| |
|
|
| .metrics-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .metric-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 14px 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| transition: border-color 0.1s; |
| } |
|
|
| .metric-card:hover { border-color: var(--border-strong); } |
|
|
| .metric-card--flagged { |
| border-color: var(--conf-medium-border); |
| background: var(--conf-medium-bg); |
| } |
|
|
| .metric-card__label { |
| font-size: 11.5px; |
| color: var(--text-muted); |
| font-weight: 500; |
| letter-spacing: 0.1px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .metric-card__value { |
| font-size: 18px; |
| font-weight: 700; |
| color: var(--text-primary); |
| font-family: var(--font-mono); |
| letter-spacing: -0.5px; |
| line-height: 1.2; |
| } |
|
|
| .metric-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; } |
|
|
| .metric-card__clarify { |
| font-size: 12px; |
| color: var(--conf-medium-text); |
| } |
|
|
| |
|
|
| .flags-list { display: flex; flex-direction: column; gap: 10px; } |
|
|
| .flag-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 14px 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .flag-card__header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .flag-card__text { font-size: 14px; font-weight: 500; color: var(--text-primary); flex: 1; } |
| .flag-card__badges { display: flex; gap: 6px; flex-shrink: 0; align-items: center; } |
| .flag-card__detail { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } |
|
|
| |
|
|
| .triggers-meta { margin-bottom: 4px; } |
|
|
| .triggers-list { display: flex; flex-direction: column; gap: 6px; } |
|
|
| .triggers-list__item { |
| display: flex; |
| align-items: flex-start; |
| gap: 10px; |
| font-size: 13.5px; |
| color: var(--text-primary); |
| padding: 8px 12px; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| } |
|
|
| .triggers-list__item::before { |
| content: ''; |
| width: 4px; |
| height: 4px; |
| border-radius: 50%; |
| background: var(--accent); |
| margin-top: 7px; |
| flex-shrink: 0; |
| } |
|
|
| .reasoning-text { |
| font-size: 13.5px; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| padding: 12px 16px; |
| background: var(--surface-2); |
| border-radius: var(--radius); |
| border-left: 3px solid var(--accent); |
| } |
|
|
| |
|
|
| .narrative-text { |
| font-size: 14px; |
| color: var(--text-secondary); |
| line-height: 1.75; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| |
|
|
| .chat-context { |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| } |
|
|
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| padding: 4px 0 8px; |
| } |
|
|
| .chat-empty { |
| color: var(--text-muted); |
| font-size: 13.5px; |
| padding: 32px 0; |
| } |
|
|
| .chat-suggestions { |
| margin-top: 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .chat-suggestions li { |
| font-style: italic; |
| padding: 6px 12px; |
| background: var(--surface-2); |
| border-radius: var(--radius); |
| font-size: 13px; |
| color: var(--text-secondary); |
| } |
|
|
| .chat-bubble { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| max-width: 85%; |
| } |
|
|
| .chat-bubble--user { align-self: flex-end; } |
| .chat-bubble--assistant { align-self: flex-start; } |
|
|
| .chat-bubble__role { |
| font-size: 11.5px; |
| font-weight: 600; |
| color: var(--text-muted); |
| letter-spacing: 0.3px; |
| } |
|
|
| .chat-bubble--user .chat-bubble__role { text-align: right; } |
|
|
| .chat-bubble__body { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 12px 16px; |
| font-size: 14px; |
| line-height: 1.6; |
| color: var(--text-primary); |
| } |
|
|
| .chat-bubble--user .chat-bubble__body { |
| background: var(--accent); |
| color: #fff; |
| border-color: var(--accent); |
| } |
|
|
| .chat-bubble__meta { display: flex; gap: 8px; } |
|
|
| .chat-typing { |
| display: flex; |
| gap: 4px; |
| padding: 14px 18px; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| width: 56px; |
| } |
|
|
| .chat-typing span { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--text-muted); |
| animation: pulse 1.2s infinite; |
| } |
|
|
| .chat-typing span:nth-child(2) { animation-delay: 0.2s; } |
| .chat-typing span:nth-child(3) { animation-delay: 0.4s; } |
|
|
| @keyframes pulse { |
| 0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); } |
| 40% { opacity: 1; transform: scale(1); } |
| } |
|
|
| .chat-input-row { |
| display: flex; |
| gap: 8px; |
| padding-top: 8px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .chat-input { flex: 1; } |
|
|
| |
|
|
| .flagged-value { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| font-family: var(--font-mono); |
| font-weight: 600; |
| padding: 1px 5px; |
| border-radius: 4px; |
| } |
|
|
| .flagged-value--medium { background: var(--conf-medium-bg); color: var(--conf-medium-text); } |
| .flagged-value--low { background: var(--conf-low-bg); color: var(--conf-low-text); } |
|
|
| |
|
|
| .compare-form { display: flex; flex-direction: column; gap: 10px; } |
|
|
| .compare-entry { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .compare-entry__num { |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--text-muted); |
| width: 20px; |
| text-align: center; |
| flex-shrink: 0; |
| font-family: var(--font-mono); |
| } |
|
|
| .compare-actions { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding-top: 4px; |
| } |
|
|
| .compare-table-wrap { |
| overflow-x: auto; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| } |
|
|
| .compare-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 13.5px; |
| } |
|
|
| .compare-table th { |
| background: var(--surface-2); |
| padding: 10px 14px; |
| text-align: left; |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--text-secondary); |
| letter-spacing: 0.3px; |
| border-bottom: 1px solid var(--border); |
| white-space: nowrap; |
| } |
|
|
| .compare-table td { |
| padding: 10px 14px; |
| border-bottom: 1px solid var(--border); |
| vertical-align: middle; |
| } |
|
|
| .compare-table tr:last-child td { border-bottom: none; } |
|
|
| .compare-table tr:hover td { background: var(--surface-2); } |
|
|
| .compare-table__metric-col { |
| font-weight: 500; |
| color: var(--text-secondary); |
| font-size: 12.5px; |
| white-space: nowrap; |
| } |
|
|
| .compare-table__cell { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .compare-table__cell--low { background: var(--conf-low-bg); } |
|
|
| .compare-table__val { |
| font-family: var(--font-mono); |
| font-weight: 600; |
| color: var(--text-primary); |
| font-size: 13px; |
| } |
|
|
| |
| .compare-table td.compare-table__cell { |
| display: table-cell; |
| } |
|
|
| .compare-table td .compare-table__val { |
| display: block; |
| } |
|
|
| |
|
|
| .search-bar { |
| position: relative; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .search-bar__icon { |
| position: absolute; |
| left: 12px; |
| color: var(--text-muted); |
| pointer-events: none; |
| } |
|
|
| .search-bar__input { padding-left: 36px; } |
|
|
| .company-list { display: flex; flex-direction: column; gap: 10px; } |
|
|
| .company-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 16px 20px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| transition: border-color 0.1s; |
| } |
|
|
| .company-card:hover { border-color: var(--border-strong); } |
|
|
| .company-card__info { display: flex; flex-direction: column; gap: 2px; } |
|
|
| .company-card__name { |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .company-card__years { |
| font-size: 12.5px; |
| color: var(--text-muted); |
| } |
|
|
| .company-card__filings { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } |
|
|
| .filing-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 5px 12px; |
| border: 1px solid var(--border); |
| border-radius: 100px; |
| background: var(--surface-2); |
| color: var(--text-secondary); |
| font-size: 12.5px; |
| font-weight: 500; |
| transition: background 0.1s, color 0.1s, border-color 0.1s; |
| font-family: var(--font-ui); |
| } |
|
|
| .filing-pill:hover { |
| background: var(--accent-subtle); |
| color: var(--accent); |
| border-color: #bfdbfe; |
| } |
|
|
| |
|
|
| .empty-state { |
| text-align: center; |
| padding: 40px 0; |
| color: var(--text-muted); |
| font-size: 14px; |
| } |
|
|
| |
|
|
| @media (max-width: 720px) { |
| .sidebar { |
| width: 60px; |
| } |
|
|
| .sidebar__name, |
| .sidebar__label, |
| .sidebar__version { display: none; } |
|
|
| .sidebar__brand { justify-content: center; padding: 16px 8px; } |
|
|
| .sidebar__item { |
| justify-content: center; |
| border-left: none; |
| padding: 10px; |
| } |
|
|
| .sidebar__item--active { border-bottom: 2px solid var(--accent); } |
|
|
| .page { padding: 20px 16px 40px; } |
|
|
| .lookup-form { flex-wrap: wrap; } |
|
|
| .metrics-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } |
|
|
| .report-hero { flex-direction: column; gap: 16px; align-items: flex-start; } |
|
|
| .company-card { flex-direction: column; align-items: flex-start; } |
| .company-card__filings { justify-content: flex-start; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .spinner, .chat-typing span { animation: none; } |
| } |
|
|
