/* Slim4 Data Lite — minimal, focused UI */ :root { /* Surfaces */ --bg: #f4f5f7; --card-bg: #ffffff; --card-bg-soft: #fafbfc; /* subtle alt cards, panel insets */ --border: #e0e0e0; --border-soft: #f3f4f6; /* hairlines between rows */ --hover-bg: #f4f7fb; /* hover row tint */ /* Typography */ --text: #1a1a1a; --text-strong: #003e6a; /* headings + numeric emphasis */ --muted: #666; --muted-soft: #9ca3af; /* Brand + state — these stay constant across themes because they carry semantic meaning (green=good, red=bad, etc.). Numeric "blue" emphasis colour comes from --num-emphasis below — easier to tune separately from text-strong if needed. */ --brand: #005896; --brand-hover: #004472; --num-emphasis: #005896; /* "blue numbers" convention */ --accent: #1f7a3a; --accent-hover: #176030; --warn: #d4881c; --err: #b03030; --info: #5a6c7d; --good: #10b981; --amber: #f59e0b; --bad: #ef4444; --code-bg: #f0f0f0; } /* Dark theme — applied via (consultant * toggle in Settings). Brand + state colours kept stable; only * surface + text variables shift. System theme honoured by JS * setting data-theme="dark" when prefers-color-scheme matches. */ [data-theme="dark"] { --bg: #0f172a; /* slate-900 */ --card-bg: #1e293b; /* slate-800 */ --card-bg-soft: #172033; --border: #334155; /* slate-700 */ --border-soft: #1f2937; --hover-bg: #243044; --text: #e2e8f0; /* slate-200 */ --text-strong: #bfdbfe; /* slightly lighter than brand so headings pop on dark */ --muted: #94a3b8; --muted-soft: #64748b; --num-emphasis: #60a5fa; /* brighter blue for numbers on dark */ --code-bg: #1f2937; } /* Numeric-emphasis utility — tabular-nums alignment + the brand * emphasis colour so columns of values line up. Used as a marker * class for the privacy-blur feature below: anything tagged .num * (or any of the existing numeric containers) gets blurred when * the consultant flips the privacy toggle. */ .num, .num-blue { color: var(--num-emphasis); font-variant-numeric: tabular-nums; font-weight: 600; } /* ────────────────────────────────────────────────────────── * PRIVACY BLUR — toggle to fuzz numeric KPIs when the * consultant doesn't want shoulder-surfers reading financials. * * Common Slimstock app convention. Triggered by * . Hover restores any single number so * you can still read your own data. * ──────────────────────────────────────────────────────── */ [data-blur="on"] .num, [data-blur="on"] .num-blue, [data-blur="on"] .ct-3c-val, [data-blur="on"] .tr-c-val, [data-blur="on"] .tr-pf-3c-val, [data-blur="on"] .ct-readiness-num, [data-blur="on"] .ct-network-chip-val, [data-blur="on"] .nw-chip-val, [data-blur="on"] .ring-pct, [data-blur="on"] .ct-ring-pct, [data-blur="on"] .room-score-pct, [data-blur="on"] .ct-badge, [data-blur="on"] .nw-edge-meta, [data-blur="on"] .bp-figure, [data-blur="on"] .tr-ballpark .num { filter: blur(7px); transition: filter 0.15s ease; cursor: zoom-in; } /* Hover restores — lets you read individual numbers without * disabling the whole mode. Works for both HTML elements and * SVG (touch-only restores them via tap). */ [data-blur="on"] .num:hover, [data-blur="on"] .num-blue:hover, [data-blur="on"] .ct-3c-val:hover, [data-blur="on"] .tr-c-val:hover, [data-blur="on"] .tr-pf-3c-val:hover, [data-blur="on"] .ct-readiness-num:hover, [data-blur="on"] .ct-network-chip-val:hover, [data-blur="on"] .nw-chip-val:hover, [data-blur="on"] .ring-pct:hover, [data-blur="on"] .ct-ring-pct:hover, [data-blur="on"] .room-score-pct:hover, [data-blur="on"] .ct-badge:hover, [data-blur="on"] .nw-edge-meta:hover, [data-blur="on"] .tr-ballpark .num:hover { filter: none; cursor: zoom-out; } /* The whole financial ballpark + the inspector sample table get * blanket blur in privacy mode — those are the "this is the £ * impact" panels people read over your shoulder. */ [data-blur="on"] .tr-ballpark, [data-blur="on"] .tr-inspector-table td:not(.tr-check) { filter: blur(5px); transition: filter 0.15s ease; } [data-blur="on"] .tr-ballpark:hover, [data-blur="on"] .tr-inspector-table:hover td { filter: none; } /* Blur toggle button in the top nav — small eye icon, switches * between visible / hidden when clicked. */ .privacy-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 8px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); transition: background 0.15s ease; } .privacy-toggle:hover { background: var(--hover-bg); color: var(--text); } [data-blur="on"] .privacy-toggle { background: var(--brand); color: #fff; border-color: var(--brand); } /* AI-suggestions toggle on the Triage header. iOS-style switch + * label with the count so the consultant always knows whether AI * input is being included in the score. Sits between the headline * and the action buttons. */ .tr-ai-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 4px 10px 4px 4px; border-radius: 14px; background: var(--card-bg-soft); border: 1px solid var(--border); cursor: pointer; font-size: 12px; user-select: none; transition: background 0.15s ease, border-color 0.15s ease; } .tr-ai-toggle:hover { background: var(--hover-bg); } .tr-ai-toggle input { display: none; } .tr-ai-toggle-track { position: relative; display: inline-block; width: 34px; height: 18px; background: #cbd5e1; border-radius: 9px; transition: background 0.15s ease; flex-shrink: 0; } .tr-ai-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .tr-ai-toggle input:checked + .tr-ai-toggle-track { background: #8b5cf6; /* violet — matches the AI suggestion badge */ } .tr-ai-toggle input:checked + .tr-ai-toggle-track::after { transform: translateX(16px); } .tr-ai-toggle-label { color: var(--text); font-weight: 500; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; font-size: 14px; } .app-header { display: flex; align-items: center; padding: 12px 32px; background: var(--card-bg); /* white — preserves the logo's natural Slimstock colours */ border-bottom: 1px solid var(--border); color: var(--text); } .app-header .brand-logo { height: 36px; width: auto; display: block; } .version-tag { margin-left: 12px; color: var(--muted); font-size: 12px; } main { /* Quick Run keeps its compact 900-wide card layout via #quick-view below. Manual Mapping uses the full window width to give the two panes + the preview grid breathing room on wide displays. */ margin: 0; padding: 24px 32px 48px; } .view.hidden { display: none; } /* Quick Run keeps the original narrow centered look */ #quick-view { max-width: 900px; margin: 0 auto; } /* ── Top nav ─────────────────────────────────────────────── */ .top-nav { display: flex; gap: 4px; margin-left: 24px; } .nav-btn { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 12px; font-size: 13px; color: var(--muted); cursor: pointer; } .nav-btn:hover { background: var(--bg); color: var(--text); } .nav-btn.active { background: #005896; /* Slimstock dark blue — matches the logo accent */ color: white; border-color: #005896; } /* ── Manual Mapping view ─────────────────────────────────── */ .mapping-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; } .tb-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); } .tb-field select { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: white; min-width: 200px; } #m-status { margin-left: auto; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: transparent; color: var(--muted); transition: background 200ms ease, color 200ms ease; max-width: 480px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #m-status:not(:empty) { background: #eaf6ee; color: var(--accent); border: 1px solid #b6dbc4; } #m-status.fail { background: #fbe9e7; color: var(--err); border-color: #e0b3b3; font-weight: 600; } .tb-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 0 6px; cursor: pointer; user-select: none; } .tb-checkbox input { margin: 0; } .tb-checkbox:hover { color: var(--text); } .tb-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; } .tb-radio input { margin: 0; accent-color: var(--brand); } .mapping-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; /* Fill the viewport below the header + toolbar so each pane can scroll independently inside its own card. 280px = header (~57) + main top padding (24) + toolbar (~120 with wrap) + buffer. */ height: calc(100vh - 280px); min-height: 420px; } .mb-pane { background: var(--card-bg); border-radius: 8px; padding: 16px 18px; border: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; min-height: 0; } .mb-pane h3 { margin: 0 0 4px; font-size: 16px; } .mb-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 6px; font-weight: 600; } .mb-key-banner { background: #fff8e1; border: 1px dashed #d4a83c; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin: 4px 0 8px; } /* ── Drop targets ────────────────────────────────────────── */ .droplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .drop-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .drop-row .tcol-name { flex: 0 0 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); } .drop-row.is-key .tcol-name { color: var(--accent); font-weight: 600; } .drop-target { flex: 1; min-height: 30px; border: 1px dashed var(--border); border-radius: 6px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; background: #fafbfc; transition: background 80ms ease, border-color 80ms ease; } .drop-target.sortable-drag-over, .drop-target:has(.sortable-ghost) { background: #e8f6ee; border-color: var(--accent); } .drop-row.is-filled .drop-target { background: white; border-style: solid; } .drop-target .placeholder { color: #b6b6b6; font-size: 12px; } .mapped-tag { background: var(--accent); color: white; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .auto-tag { background: #eef2fb; color: #3a52a0; border: 1px solid #c5d3ec; border-radius: 4px; padding: 1px 8px; font-size: 12px; font-style: italic; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Dark-mode overrides for the Manual Mapping view ─────── */ /* The mapping view's drop slots were originally light-mode-only — white/near-white backgrounds against the dark page background look bizarre. These overrides keep the same visual hierarchy (subtle background for empty slots, solid for filled, dashed border, accent on drag-over) but in dark-mode-appropriate colours. */ [data-theme="dark"] .drop-target { background: var(--card-bg-soft, rgba(255, 255, 255, .04)); border-color: var(--border); color: var(--text); } [data-theme="dark"] .drop-target.sortable-drag-over, [data-theme="dark"] .drop-target:has(.sortable-ghost) { background: rgba(34, 197, 94, .15); border-color: #4ade80; } [data-theme="dark"] .drop-row.is-filled .drop-target { background: var(--card-bg); border-style: solid; } [data-theme="dark"] .drop-target .placeholder { color: var(--text-muted); } [data-theme="dark"] .auto-tag { background: rgba(99, 102, 241, .15); color: #c7d2fe; border-color: rgba(99, 102, 241, .35); } [data-theme="dark"] .mb-key-banner { background: rgba(212, 168, 60, .12); border-color: rgba(212, 168, 60, .55); color: var(--text); } [data-theme="dark"] .mapped-tag { background: #4a8fc7; color: #fff; } .tx-tag { font-size: 11px; color: var(--muted); background: #eef; border-radius: 3px; padding: 1px 5px; } .mb-x { margin-left: auto; background: transparent; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 6px; } .mb-x:hover { color: var(--err); } /* ── Source chips ────────────────────────────────────────── */ .chiplist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; background: #f0f2f5; border: 1px solid var(--border); font-size: 12px; cursor: grab; transition: transform 80ms ease; } .chip:active { cursor: grabbing; } .chip-dot { font-size: 10px; line-height: 1; } .chip-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .chip-pass { background: #eaf6ee; border-color: #b6dbc4; } .chip-pass .chip-dot { color: var(--accent); } .chip-warn { background: #fff5e0; border-color: #e6c98e; cursor: not-allowed; } .chip-warn .chip-dot { color: var(--warn); } .chip-fail { background: #fbe9e7; border-color: #e0b3b3; color: #7a3030; cursor: grab; opacity: 0.9; } .chip-fail:active { cursor: grabbing; } .chip-fail .chip-dot { color: var(--err); } .chip-in-use { background: #e8eef7; border-color: #b9c8df; opacity: 0.65; cursor: default; } .chip-in-use .chip-dot { color: #5a6c7d; } .chip-used { color: var(--muted); font-size: 11px; } .chip-ack { background: var(--warn); color: white; border: none; border-radius: 8px; padding: 1px 6px; font-size: 10px; text-transform: uppercase; cursor: pointer; } /* ── Preview grid (inside the full-screen popup) ───────── */ .preview-grid { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 6px; margin: 0; background: white; } /* ── Full-screen preview popup ───────────────────────────── */ .mb-preview-popup { position: fixed; top: 24px; right: 24px; bottom: 24px; left: 24px; background: white; border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 50, 100, 0.30); padding: 18px 22px; z-index: 150; display: flex; flex-direction: column; gap: 12px; animation: mb-preview-pop 180ms ease; } .mb-preview-popup.hidden { display: none; } @keyframes mb-preview-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .mb-preview-popup-header { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .mb-preview-popup-header strong { font-size: 15px; color: #003e6a; } .mb-preview-popup-header .meta { flex: 1; } /* Filter toolbar inside the preview popup */ .mb-preview-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .mb-preview-toolbar input[type="search"] { flex: 1; min-width: 240px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } .mb-preview-toolbar input[type="search"]:focus { outline: none; border-color: #005896; box-shadow: 0 0 0 2px rgba(0, 88, 150, 0.15); } .mb-preview-toolbar .meta { flex: 0 0 auto; } /* Cell highlighting for invisible / suspicious characters */ .cell-rogue { background: #fff3cd; outline: 1px dashed #d68910; padding: 0 2px; border-radius: 2px; cursor: help; } .cell-rogue::before, .cell-rogue::after { color: #b03a2e; } .cell-rogue::before { content: '⟦'; } .cell-rogue::after { content: '⟧'; } .mb-preview-popup .preview-grid table.prev thead th { position: sticky; top: 0; background: #005896; color: white; z-index: 1; } table.prev { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } table.prev th, table.prev td { padding: 3px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } table.prev thead th { position: sticky; top: 0; background: #f4f5f7; font-weight: 600; } /* ── Drawer (full-height right sidebar) ──────────────────── */ .mb-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 90vw; background: white; border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0, 50, 100, 0.10); padding: 18px 22px; z-index: 100; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; animation: mb-drawer-slide-in 180ms ease; } @keyframes mb-drawer-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .mb-drawer.hidden { display: none; } .mb-drawer > .row { position: sticky; top: 0; background: white; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin: 0 -22px 4px; padding-left: 22px; padding-right: 22px; z-index: 1; } .mb-drawer h4 { margin: 14px 0 6px; font-size: 13px; color: #003e6a; } .mb-drawer ul { margin: 4px 0; padding-left: 18px; } .mb-drawer li { font-size: 12px; margin-bottom: 3px; } .mb-drawer code { background: var(--code-bg); padding: 0 4px; border-radius: 3px; } .bp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .bp-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); width: 60%; } .bp-table td { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #003e6a; padding: 6px 8px; border-bottom: 1px solid var(--border); } /* SortableJS ghost */ .sortable-ghost { opacity: 0.4; } /* ── Loading indicator for file ingest ──────────────────── */ .mb-loading { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f0f6fb; border: 1px solid #cfdef0; border-radius: 8px; margin-bottom: 10px; } .mb-loading.hidden { display: none; } .mb-loading-text { display: flex; flex-direction: column; gap: 2px; } .mb-loading-text strong { font-size: 13px; color: #003e6a; } .mb-loading-text .meta { font-size: 12px; } .mb-spinner { width: 22px; height: 22px; border: 3px solid #cfdef0; border-top-color: #005896; border-radius: 50%; animation: mb-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes mb-spin { to { transform: rotate(360deg); } } /* ── Custom field-description tooltip ────────────────────── */ .mb-tooltip { position: absolute; display: none; max-width: 360px; background: #005896; /* Slimstock dark blue — same as header */ color: white; padding: 12px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 50, 100, 0.30); font-size: 13px; line-height: 1.45; z-index: 200; opacity: 0; transform: translateY(-2px); transition: opacity 140ms ease, transform 140ms ease; pointer-events: none; } .mb-tooltip.visible { opacity: 1; transform: translateY(0); } /* Cursor-tracking tooltip — no anchor arrow */ .mb-tooltip::before { display: none; } /* ── Pill strip in Manual Mapping toolbar ────────────────── */ .pill-strip { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 0 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .pill { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 11.5px; color: var(--muted); cursor: pointer; transition: background 100ms ease, color 100ms ease, border-color 100ms ease; } .pill:hover { background: #e8eef7; color: #003e6a; } .pill-mapped { background: #eaf6ee; color: var(--accent); border-color: #b6dbc4; } .pill-mapped:hover { background: #d8eedf; } .pill-active { background: #005896; color: white; border-color: #005896; font-weight: 600; } .pill-active:hover { background: #00477a; color: white; } .pill-dim { opacity: 0.6; } /* ── Settings view ───────────────────────────────────────── */ #settings-view { max-width: 900px; margin: 0 auto; } .settings-card { padding: 22px 26px; } .settings-card h2 { font-size: 16px; margin: 0 0 6px; } .settings-card .meta { margin-bottom: 12px; } .settings-actions { display: flex; gap: 8px; margin-bottom: 12px; } .interface-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; } .interface-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fafbfc; cursor: pointer; user-select: none; } .interface-row:hover { background: var(--bg); } .interface-row input { margin: 0; } .interface-row .interface-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); } .interface-row .meta { font-size: 11px; margin: 0; } .settings-input { font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: white; } .mb-tooltip .mb-tt-title { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .mb-tooltip .mb-tt-id { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; } .mb-tooltip .mb-tt-desc { color: rgba(255,255,255,0.92); font-size: 12.5px; margin-bottom: 8px; } .mb-tooltip .mb-tt-meta { font-size: 11.5px; color: rgba(255,255,255,0.78); border-top: 1px solid rgba(255,255,255,0.18); padding-top: 6px; } .mb-tooltip .mb-tt-meta strong { color: white; font-weight: 600; } .mb-tooltip .mb-tt-meta em { color: rgba(255,255,255,0.88); } /* ── Multi-select + derived chips ────────────────────────── */ .chip-selected { outline: 2px solid var(--accent); outline-offset: 1px; } .chip-derived { background: #eef2fb; border-color: #b5c3e0; } .chip-fn { font-style: italic; font-weight: 700; color: #3a52a0; font-size: 12px; line-height: 1; } .chip-del { background: transparent; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; } .chip-del:hover { color: var(--err); } /* ── Combine modal ───────────────────────────────────────── */ .mb-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 80; } .mb-modal-backdrop.hidden { display: none; } .mb-modal { background: white; border-radius: 10px; width: 460px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.25); } .mb-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; } .mb-modal-body { padding: 14px 18px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .mb-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } .combine-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .combine-field input, .combine-field select { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: white; color: var(--text); } .combine-preview { margin-top: 4px; background: #fafbfc; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; } .combine-preview ul { list-style: none; margin: 6px 0 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .combine-preview li { padding: 2px 0; } .combine-preview .sev-error { color: var(--err); font-family: inherit; } #combine-cols { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); } .card { background: var(--card-bg); border-radius: 8px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .card.error { border-left: 4px solid var(--err); } .card h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; } .card h2:not(:first-child) { margin-top: 22px; } .card h3 { font-size: 14px; margin: 18px 0 8px; font-weight: 600; } .hidden { display: none !important; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .run-row { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } .results-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .btn { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s; } .btn:hover { background: #f0f0f0; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { background: var(--accent); opacity: 0.4; } .btn-secondary { background: transparent; border-color: #ccc; color: var(--muted); } .meta { color: var(--muted); font-size: 12px; margin: 4px 0; } .meta-inline { color: var(--muted); font-weight: 400; font-size: 12px; } code { background: var(--code-bg); padding: 2px 6px; border-radius: 3px; font-size: 12px; word-break: break-all; } input[type="text"] { width: 100%; max-width: 360px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px; font-family: inherit; } input[type="text"]:focus { outline: none; border-color: var(--accent); } /* Stage list */ .stage-list { list-style: none; counter-reset: stage; padding: 0; margin: 8px 0 0; } .stage-list li { padding: 6px 0 6px 28px; position: relative; color: var(--muted); } .stage-list li::before { counter-increment: stage; content: counter(stage); position: absolute; left: 0; top: 6px; width: 18px; height: 18px; background: #ddd; color: #fff; border-radius: 50%; text-align: center; font-size: 11px; line-height: 18px; font-weight: 600; } .stage-list li.done { color: var(--text); } .stage-list li.done::before { background: var(--accent); content: "✓"; } /* Summary badges */ .summary-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: #fff; } .badge.ready { background: #1f7a3a; } .badge.partial { background: #d4881c; } .badge.blocked { background: #b03030; } .badge.missing { background: #6e6e6e; } .badge.empty { background: #9a8a3a; } /* Ballpark card */ .ballpark-card { border-left: 4px solid var(--accent); padding: 14px 18px; margin: 12px 0; background: #fafbfb; border-radius: 4px; } .ballpark-card h3 { margin-top: 0; } .ballpark-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .ballpark-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); background: #f7f8fa; font-weight: 600; } .ballpark-table td { padding: 6px 10px; border-bottom: 1px solid #eee; } .ballpark-table td.num, .ballpark-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .ratios { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); } .ratios strong { color: var(--text); } /* Generic results tables */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); background: #f7f8fa; font-weight: 600; } td { padding: 5px 10px; border-bottom: 1px solid #eee; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Flags */ #flags-list { padding-left: 0; list-style: none; margin: 4px 0; } #flags-list li { margin: 4px 0; font-size: 13px; } .sev { font-weight: 600; margin-right: 6px; } .sev-info { color: var(--info); } .sev-warn { color: var(--warn); } .sev-error { color: var(--err); } /* Per-dataset detail */ .tab-block { padding: 10px 14px; border-left: 3px solid var(--border); margin: 8px 0; } .tab-block.ready { border-left-color: var(--accent); } .tab-block.partial { border-left-color: var(--warn); } .tab-block.blocked { border-left-color: var(--err); } .tab-block.missing { border-left-color: #6e6e6e; } .tab-block.empty { border-left-color: #9a8a3a; } .tab-block-header { display: flex; gap: 10px; align-items: center; } .tab-block-header strong { font-size: 14px; } .tab-block-meta { color: var(--muted); font-size: 12px; margin-top: 4px; } .tab-block ul { margin: 6px 0; padding-left: 18px; } .tab-block ul li { font-size: 12px; margin: 2px 0; } pre { background: #f7f8fa; border: 1px solid var(--border); border-radius: 5px; padding: 10px 14px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; } /* ════════════════════════════════════════════════════════ Triage view — Agentic Data Room ════════════════════════════════════════════════════════ */ #triage-view { display: flex; flex-direction: column; gap: 20px; /* No max-width — fill the window so the inspector panel uses every spare pixel of horizontal space. */ margin: 0; position: relative; } /* ── Triage loading overlay ───────────────────────────── */ /* Same shape as Manual Mapping's loading indicator so the user sees a consistent "we're working" cue during the first Triage scan (which assembles every mapped template + runs DQ + computes the was/now ballpark — easily a few seconds on a real workbook). */ .tr-loading { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f0f6fb; border: 1px solid #cfdef0; border-radius: 8px; } .tr-loading.hidden { display: none; } .tr-loading-text { display: flex; flex-direction: column; gap: 2px; } .tr-loading-text strong { font-size: 13px; color: #003e6a; } .tr-loading-text .meta { font-size: 12px; } /* Two-column layout below the header: cards on the left (capped at a comfortable reading width so they don't stretch absurdly on a wide display), inspector on the right absorbing all remaining space. */ .triage-main { display: grid; grid-template-columns: minmax(420px, 640px) minmax(0, 1fr); gap: 20px; align-items: start; } .triage-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The right-side inspector panel — sticky so it stays visible while the user scrolls the card stack. Structured as h3-bar + white card to mirror the tier sections on the left, so both columns top-align. */ .triage-inspector { position: sticky; top: 20px; display: flex; flex-direction: column; /* Fill the viewport vertically (minus top-nav + a little breathing room) so the examples table can stretch as tall as the screen. */ height: calc(100vh - 96px); } /* h3 sibling-position bar — matches `.tr-tier h3` so the two columns align at their first content baseline. */ .tr-inspector-bar { margin: 6px 0 8px; font-size: 13px; color: #4a5b6c; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .tr-inspector-card { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0, 50, 100, 0.04); /* Grow to fill all remaining vertical space inside the inspector. overflow: hidden because the SCROLLING happens inside .tr-inspector-scroll (a nested div); putting overflow on the card would make the table headers fight the toolbar for top:0. */ flex: 1; overflow: hidden; min-height: 0; display: flex; flex-direction: column; } /* The content wrapper grows + lets the body section stretch */ .tr-inspector-content { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* The body wraps the toolbar (static) + the scroll area (the only thing that actually scrolls). Toolbar stays pinned at the top; table can then have a sticky thead that pins to the top of just its own scroll container, not fighting the toolbar. */ #tr-inspector-body { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 4px; } .tr-inspector-scroll { flex: 1; overflow: auto; min-height: 0; /* Inner scroll container — horizontal scroll for wide tables AND vertical scroll for many rows. The table's sticky thead pins to the top of THIS box. */ } .tr-inspector-card strong { font-size: 14px; color: #003e6a; display: block; margin: 0 0 4px 0; letter-spacing: 0.2px; } .tr-inspector-empty { color: #6b7c8c; } .tr-inspector-empty .meta { font-size: 12px; } .tr-inspector-content.hidden { display: none; } .tr-inspector-content .meta { font-size: 12px; margin: 0 0 12px 0; } /* Inspector sample table — proper grid of rows × columns, with a highlighted focus column for the finding's primary field. Important: width: max-content forces the table to grow to its natural content width (regardless of how narrow the card is), so wide tables overflow horizontally and the card's `overflow: auto` provides a horizontal scrollbar. min-width: 100% ensures the table still fills the card when content is narrow. */ .tr-inspector-table { border-collapse: collapse; font-size: 12px; table-layout: auto; width: max-content; min-width: 100%; } .tr-inspector-table th, .tr-inspector-table td { min-width: 100px; white-space: nowrap; } .tr-inspector-table thead th { text-align: left; font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase; color: #7a8b9c; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #e6ecf3; background: #fafbfd; position: sticky; top: 0; z-index: 2; /* above tbody but below the checkbox col header */ white-space: nowrap; } /* The checkbox column's header needs to win on BOTH axes (top + left), so it gets a higher z-index than the rest of the thead. */ .tr-inspector-table thead th.tr-check { z-index: 3; } .tr-inspector-table thead th.focus { color: #c0392b; } .tr-inspector-table tbody td { padding: 8px; border-bottom: 1px solid #f0f3f7; color: #1a1a1a; font-variant-numeric: tabular-nums; vertical-align: top; word-break: break-word; } .tr-inspector-table tbody td.focus { font-weight: 600; color: #003e6a; background: rgba(255, 243, 205, 0.4); } /* Click-to-copy on Inspector data cells. cursor:copy advertises the * affordance; the hover background hints which cell the click will hit. * tr-cell-copied is a 600ms flash applied by the JS click handler. */ .tr-inspector-table tbody td.tr-cell-copy { cursor: copy; transition: background 120ms ease, outline 120ms ease; } .tr-inspector-table tbody td.tr-cell-copy:hover { background: #eaf4ff; } .tr-inspector-table tbody td.tr-cell-copy.focus:hover { /* Preserve the yellow focus tint, just deepen it on hover. */ background: rgba(255, 220, 130, 0.55); } .tr-inspector-table tbody td.tr-cell-copied { background: #c8f1d6 !important; outline: 1.5px solid #10b981; outline-offset: -1px; } [data-theme="dark"] .tr-inspector-table tbody td.tr-cell-copy:hover { background: #1c2e44; } [data-theme="dark"] .tr-inspector-table tbody td.tr-cell-copied { background: #14342a !important; outline-color: #2e6a4d; } /* Checkbox column — sticky to the left edge so it stays visible while scrolling horizontally through many columns. */ .tr-inspector-table th.tr-check, .tr-inspector-table td.tr-check { min-width: 32px; width: 32px; text-align: center; position: sticky; left: 0; background: #ffffff; z-index: 2; } .tr-inspector-table thead th.tr-check { background: #fafbfd; } .tr-inspector-table tbody tr.tr-row-selected { background: rgba(0, 88, 150, 0.08); } .tr-inspector-table tbody tr.tr-row-selected td.tr-check { background: rgba(0, 88, 150, 0.04); } /* Sortable column headers */ .tr-inspector-table th.tr-sortable { cursor: pointer; user-select: none; } .tr-inspector-table th.tr-sortable:hover { background: #eef3f8; } .tr-sort-icon { color: #b0bec5; font-size: 9px; } .tr-sort-icon.active { color: #005896; } /* Inspector toolbar — Clear + Exclude buttons + selection count. No longer needs position: sticky because it lives OUTSIDE the scrolling .tr-inspector-scroll div now (sibling of, not parent of). */ .tr-inspector-toolbar { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; background: #fff; flex: 0 0 auto; } .tr-inspector-toolbar .meta { flex: 1; font-size: 12px; } .tr-inspector-toolbar .btn { font-size: 12px; padding: 5px 12px; } .tr-inspector-table tbody tr:last-child td { border-bottom: none; } /* Selected card gets a subtle indicator that it's "the one in the inspector" */ .tr-card.tr-card-inspected { box-shadow: 0 0 0 2px rgba(0, 88, 150, 0.18); } /* ── Header with ring ──────────────────────────────────── */ .triage-header { display: flex; gap: 28px; align-items: center; padding: 28px 28px 24px; background: #ffffff; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 50, 100, 0.04); } .triage-ring-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Shared label above any ring (main "Overall" + per-file names). * Sized so that: * - it reads as a clear column header for the ring beneath * - all rings end up at the same vertical baseline, since every * ring column starts with this same-height label */ .tr-ring-label { font-weight: 600; font-size: 14px; color: #1f2937; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; margin-bottom: 2px; } /* 3 C's mini-scorecard under the ring. Width chosen so the longest * subtitle ("same units & format") fits on one line at 10px italic. * Was 120px → 180px after the subtitles landed. */ .triage-3c { display: flex; flex-direction: column; gap: 4px; width: 180px; font-size: 11px; color: #4a5b6c; } .tr-c { /* Single-row layout with subtitle stacked under the label. Matches * the PDF cover's typography exactly — label bold-ish on top, italic * grey subtitle directly under, percent right-aligned and vertically * centred against both lines. Width is wider than before so * "same units & format" can't wrap to two lines. */ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 4px 8px; border-radius: 4px; cursor: help; /* signals the title="..." tooltip is available */ } .tr-c:hover { background: #f4f7fb; } .tr-c-lbl { grid-column: 1; grid-row: 1; letter-spacing: 0.3px; font-weight: 500; color: #4a5b6c; white-space: nowrap; } .tr-c-sub { /* Italic micro-subtitle. Kills the ambiguity of the label alone — * someone seeing 'Consistent 100%' next to obvious missing values * would otherwise (rightly) be confused. Subtitle on Correct was * dropped from markup because "business rules pass" just restates * the label without adding info. */ grid-column: 1; grid-row: 2; font-size: 10px; letter-spacing: 0.2px; color: #8a96a3; font-style: italic; white-space: nowrap; /* never wrap — widen container instead */ } .tr-c-val { /* Span both rows so the percentage centres against the label+sub * pair, not against just one line. Mirrors the PDF layout. */ grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: #003e6a; font-variant-numeric: tabular-nums; } [data-theme="dark"] .tr-c-lbl { color: #b8c5d4; } [data-theme="dark"] .tr-c-sub { color: #7a8696; } /* Per-file ring strip — sits beside the main ring in .triage-header. * Each ring is the SAME size as the main one (120×120) so the row * reads as a single scoreboard, not "headline + thumbnails". The * 3 C's block beneath matches .triage-3c in size + typography too. */ .triage-per-file { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; margin-left: 24px; padding-left: 24px; border-left: 1px solid #e6edf5; } .triage-per-file:empty { display: none; } .tr-pf { display: flex; flex-direction: column; align-items: center; gap: 8px; /* Min-width must fit the widest 3 C's row including its subtitle. * Bumped from 140px to 196px after subtitles + grid-gap landed. */ min-width: 196px; } .tr-pf-ring { display: block; } /* Mirror .triage-3c styling exactly so the per-file 3 C's block * reads identically to the main one beneath the headline ring. */ .tr-pf-3c { list-style: none; display: flex; flex-direction: column; gap: 4px; /* Width sized so 'same units & format' fits on one line. Was 140px * before subtitles landed and 'same units &' wrapped. */ width: 180px; font-size: 11px; color: #4a5b6c; padding: 0; margin: 0; } .tr-pf-3c li { /* Two-row grid: label + subtitle stack on the left, percent centred * vertically against both rows on the right. Matches the main 3 * C's block + the PDF cover layout exactly. */ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 4px 8px; border-radius: 4px; cursor: help; } .tr-pf-3c li:hover { background: #f4f7fb; } .tr-pf-3c-lbl { grid-column: 1; grid-row: 1; letter-spacing: 0.3px; font-weight: 500; color: #4a5b6c; white-space: nowrap; } .tr-pf-3c-sub { grid-column: 1; grid-row: 2; font-size: 10px; letter-spacing: 0.2px; color: #8a96a3; font-style: italic; white-space: nowrap; } .tr-pf-3c-val { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: #003e6a; font-variant-numeric: tabular-nums; } [data-theme="dark"] .tr-pf-3c-lbl { color: #b8c5d4; } [data-theme="dark"] .tr-pf-3c-sub { color: #7a8696; } /* ── Financial ballpark in the Triage header ──────────── */ .tr-ballpark { margin-top: 10px; padding: 12px 14px; background: #f4f8fc; border: 1px solid #d6e4f0; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; } .tr-ballpark.hidden { display: none; } .tr-bp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; } .tr-bp-lbl { font-size: 12px; color: #4a5b6c; } .tr-bp-val { font-size: 15px; font-weight: 600; color: #003e6a; } .tr-bp-delta { font-size: 11px; color: #6b7c8c; min-width: 140px; text-align: right; } .tr-delta-pos { color: #1f7a3a; font-weight: 600; } .tr-delta-neg { color: #b03030; font-weight: 600; } .tr-bp-foot { margin-top: 4px; padding-top: 6px; border-top: 1px dashed #d6e4f0; } .tr-bp-caption { margin-top: 6px; padding: 4px 0 2px; font-size: 11px; color: #6b7c8c; font-style: italic; border-top: 1px dashed #e5edf5; } .triage-ring { display: block; } .triage-ring .ring-track { fill: none; stroke: #e6edf5; stroke-width: 12; } .triage-ring .ring-progress { fill: none; stroke: #005896; stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.3,1), stroke 240ms ease; } /* Score-tone modifiers — drive ring stroke + centre number colour * from the readiness percent. Applied to .triage-ring AND .ct-ring * (via the shared .ring-tone-* class JS toggles). Thresholds: * ≥90 → green (healthy) * 70–89 → amber (your move) * <70 → red (broken) * Stale cached scores get the muted-grey override (ct-ring-stale) * regardless of value; we still want users to know the number's old. */ .ring-tone-good .ring-progress, .ring-tone-good .ct-ring-progress { stroke: #10b981; } .ring-tone-warn .ring-progress, .ring-tone-warn .ct-ring-progress { stroke: #f59e0b; } .ring-tone-bad .ring-progress, .ring-tone-bad .ct-ring-progress { stroke: #ef4444; } .ring-tone-good .ring-pct, .ring-tone-good .ct-ring-pct { fill: #047857; } .ring-tone-warn .ring-pct, .ring-tone-warn .ct-ring-pct { fill: #b45309; } .ring-tone-bad .ring-pct, .ring-tone-bad .ct-ring-pct { fill: #b91c1c; } .triage-ring .ring-pct { font-size: 22px; font-weight: 600; fill: #003e6a; text-anchor: middle; dominant-baseline: middle; } .triage-ring .ring-lbl { font-size: 9px; fill: #6b7c8c; text-anchor: middle; letter-spacing: 0.6px; text-transform: uppercase; } .triage-hero { flex: 1; } .triage-hero h2 { margin: 0 0 6px 0; font-size: 18px; line-height: 1.35; color: #003e6a; font-weight: 600; } .triage-hero .meta { font-size: 13px; } /* ── Tiered card stacks ───────────────────────────────── */ .triage-body { display: flex; flex-direction: column; gap: 16px; } .tr-tier h3 { margin: 6px 0 8px; font-size: 13px; color: #4a5b6c; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .tr-tier h3 .meta { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; } .tr-cards { display: flex; flex-direction: column; gap: 10px; } /* ── Individual card ──────────────────────────────────── */ .tr-card { background: #ffffff; border: 1px solid var(--border); border-left: 4px solid #c7d3df; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transition: opacity 200ms ease, transform 200ms ease, max-height 250ms ease; max-height: 600px; overflow: hidden; } .tr-card.tr-tier-blocking { border-left-color: #c0392b; } .tr-card.tr-tier-high_leverage { border-left-color: #d68910; } .tr-card.tr-tier-cosmetic { border-left-color: #2e8b57; } .tr-card.tr-tier-info { border-left-color: #5d6d7e; } .tr-card.tr-card-busy { opacity: 0.55; pointer-events: none; } .tr-card.tr-card-out { opacity: 0; transform: translateX(28px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } .tr-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .tr-card-title strong { font-size: 14px; color: #1a1a1a; display: block; margin-bottom: 2px; } .tr-card-title .meta { font-size: 12px; } .tr-card-tier { font-size: 11px; padding: 2px 8px; border-radius: 10px; color: #fff; white-space: nowrap; } .tr-card-tier.tier-blocking { background: #c0392b; } .tr-card-tier.tier-high_leverage { background: #d68910; } .tr-card-tier.tier-cosmetic { background: #2e8b57; } .tr-card-tier.tier-info { background: #5d6d7e; } .tr-card-badges { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; } .tr-card-c { font-size: 10px; padding: 2px 7px; border-radius: 9px; letter-spacing: 0.3px; background: #eef3f8; color: #3a4a5b; border: 1px solid #d2dde9; white-space: nowrap; } .tr-card-c.tr-c-complete { background: #e8f4ff; color: #1f5e9c; border-color: #b9d7f0; } .tr-card-c.tr-c-consistent { background: #fff4e0; color: #8a5a00; border-color: #f0d8a0; } .tr-card-c.tr-c-correct { background: #e6f5ec; color: #1f6b3c; border-color: #b8dfc4; } /* ── Transaction stratification card ──────────────────── * Read-only band histogram + top-N "biggest fish" table, both * rendered inline on the card body (not in the Inspector) so the * consultant sees the summary at a glance without an extra click. */ .tr-strat-h { margin: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #4a5b6c; text-transform: uppercase; } .tr-strat-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0; } .tr-strat-table th { background: #f4f7fb; color: #003e6a; font-weight: 600; padding: 6px 10px; text-align: left; border-bottom: 1px solid #d8e1ec; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; } .tr-strat-table th.num, .tr-strat-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .tr-strat-table td { padding: 6px 10px; border-bottom: 1px solid #eef2f7; color: #1a1a1a; } .tr-strat-table tbody tr:hover { background: #f9fbfd; } .tr-strat-band { font-weight: 500; } /* Sort affordance on distribution-card headers — small indicator next * to the column name, cursor flips to pointer on hover. Click cycle * is asc → desc → unsorted, driven from triage.js. */ .tr-strat-sortable { cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; } .tr-strat-sortable:hover { background: #e9eff7; } .tr-strat-sort { display: inline-block; margin-left: 4px; font-size: 10px; color: #9aa3ad; letter-spacing: 0; } .tr-strat-sort.active { color: #003e6a; } [data-theme="dark"] .tr-strat-sortable:hover { background: #243044; } [data-theme="dark"] .tr-strat-sort { color: #6b7280; } [data-theme="dark"] .tr-strat-sort.active { color: #7aa6d1; } [data-theme="dark"] .tr-strat-table th { background: #1f2937; color: #cdd9e6; border-bottom-color: #374151; } [data-theme="dark"] .tr-strat-table td { border-bottom-color: #2a3441; color: #e6ecf5; } [data-theme="dark"] .tr-strat-table tbody tr:hover { background: #1c2532; } /* ── Transaction-type curation card ──────────────────── */ .tr-type-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; /* Cap the list so the Apply / Defer buttons below it stay visible even with 20+ transaction types. Header sticks. */ max-height: 360px; overflow-y: auto; } .tr-type-row.tr-type-header { position: sticky; top: 0; z-index: 1; } .tr-type-row { display: grid; /* Include · Flip · Name · Rows · Qty · Signs */ grid-template-columns: 50px 50px 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid #e6ecf3; border-radius: 6px; cursor: pointer; background: #ffffff; transition: background 120ms ease, border-color 120ms ease; } .tr-type-row:hover { background: #f7f9fb; } .tr-type-row.tr-type-included { background: #e6f5ec; border-color: #b8dfc4; } .tr-type-row.tr-type-excluded { background: #fbeeec; border-color: #e6c5c0; opacity: 0.75; } .tr-type-row.tr-type-flipped { /* Subtle blue tint stacks with the green include tint via background blend */ box-shadow: inset 0 0 0 2px #b6d4ed; } .tr-type-row.tr-type-header { background: #f0f3f7; border-color: #d6dee6; cursor: default; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #4a5b6c; } .tr-type-row.tr-type-header:hover { background: #f0f3f7; } .tr-type-include-h, .tr-type-flip-h, .tr-type-name-h, .tr-type-rows-h, .tr-type-qty-h, .tr-type-flag-h { white-space: nowrap; } .tr-type-check, .tr-type-flip-check { margin: 0; cursor: pointer; justify-self: center; } .tr-type-flip-check:disabled { opacity: 0.3; cursor: not-allowed; } .tr-type-mixed { color: #a55a00; font-weight: 600; } .tr-type-name { font-weight: 600; font-size: 13px; color: #1a1a1a; } .tr-type-rows, .tr-type-qty { font-size: 12px; color: #4a5b6c; font-variant-numeric: tabular-nums; white-space: nowrap; } .tr-type-flag { font-size: 10px; letter-spacing: 0.2px; white-space: nowrap; } .tr-question { margin: 0; font-size: 13px; line-height: 1.45; color: #2c3e50; } /* ── "Why does this matter?" panel ──────────────────────── */ .tr-why { background: #f4f8fc; border-left: 3px solid #5b9bd5; border-radius: 6px; padding: 10px 14px; margin: 4px 0; } .tr-why-head { font-size: 12px; font-weight: 600; color: #003e6a; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tr-why p { margin: 0; font-size: 13px; line-height: 1.5; color: #2c3e50; } .tr-why-crit { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 9px; color: #fff; letter-spacing: 0.2px; white-space: nowrap; } .tr-why-crit-blocking { background: #c0392b; } .tr-why-crit-high_leverage { background: #d68910; } .tr-why-crit-cosmetic { background: #2e8b57; } .tr-why-crit-info { background: #5d6d7e; } /* ── Humanised sample rows ──────────────────────────────── */ .tr-samples { background: #fafbfd; border: 1px solid #e6ecf3; border-radius: 6px; padding: 8px 12px; } .tr-samples summary { cursor: pointer; font-size: 12px; color: #4a5b6c; font-weight: 500; margin: 0; list-style: none; outline: none; } .tr-samples summary::before { content: '▸ '; display: inline-block; transition: transform 150ms ease; font-size: 9px; color: #88a; } .tr-samples[open] summary::before { transform: rotate(90deg); } .tr-samples-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .tr-sample-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: #ffffff; border: 1px solid #eef2f6; border-radius: 5px; } .tr-sample-cell { display: flex; flex-direction: column; gap: 2px; min-width: 100px; flex: 1 1 auto; } .tr-sample-k { font-size: 10px; letter-spacing: 0.3px; color: #7a8b9c; text-transform: uppercase; } .tr-sample-v { font-size: 13px; color: #1a1a1a; font-variant-numeric: tabular-nums; } .tr-sample-focus .tr-sample-k { color: #c0392b; } .tr-sample-focus .tr-sample-v { font-weight: 600; color: #003e6a; } .tr-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tr-opt-sec { padding: 6px 12px; border: 1px solid var(--border); background: #f4f6f9; border-radius: 6px; font-size: 12px; cursor: pointer; color: #003e6a; } .tr-opt-sec:hover { background: #e8eef5; border-color: #b0c0d0; } /* ── History drawer ───────────────────────────────────── */ .tr-history { position: fixed; top: 60px; right: 0; bottom: 0; width: 380px; background: #ffffff; box-shadow: -8px 0 24px rgba(0, 50, 100, 0.10); border-left: 1px solid var(--border); z-index: 200; display: flex; flex-direction: column; animation: tr-history-in 200ms ease; } .tr-history.hidden { display: none; } @keyframes tr-history-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .tr-history-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); } .tr-history-header strong { font-size: 14px; color: #003e6a; } .tr-history-body { flex: 1; overflow: auto; padding: 12px 18px; } .tr-hist-row { padding: 10px 0; border-bottom: 1px solid #eef1f5; display: flex; flex-direction: column; gap: 4px; } .tr-hist-row code { background: #f0f3f7; padding: 1px 5px; border-radius: 3px; font-size: 11px; } .tr-hist-tag { font-size: 10px; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; color: white; letter-spacing: 0.4px; } .tr-hist-tag.tag-accept { background: #2e8b57; } .tr-hist-tag.tag-auto { background: #1f7a3a; } .tr-hist-tag.tag-reject { background: #c0392b; } .tr-hist-tag.tag-other { background: #5d6d7e; } .tr-hist-revert { align-self: flex-start; font-size: 11px; padding: 3px 9px; } /* Footer in the Decision History drawer — holds the destructive reset button so it's discoverable but not next to the everyday per-decision Revert action. */ .tr-history-footer { padding: 12px 18px; border-top: 1px solid var(--border); background: #fafbfd; } .tr-history-footer .btn { width: 100%; } .tr-btn-danger { background: #c0392b !important; border-color: #c0392b !important; color: #ffffff !important; } .tr-btn-danger:hover { background: #a93222 !important; } /* ── Snapshot history rows (share drawer styling) ─────── */ .tr-snap-row { padding: 10px 0; border-bottom: 1px solid #eef1f5; display: flex; flex-direction: column; gap: 4px; } .tr-snap-head { display: flex; gap: 10px; align-items: baseline; } .tr-snap-head strong { font-size: 13px; color: #003e6a; } .tr-snap-score { font-size: 18px; font-weight: 600; color: #1f7a3a; font-variant-numeric: tabular-nums; } .tr-snap-latest { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #005896; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; } /* ────────────────────────────────────────────────────────── * Control Tower — portfolio view across prospects * ──────────────────────────────────────────────────────── */ #control-tower-view { max-width: 1400px; margin: 0 auto; padding: 24px 28px; } .ct-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; } .ct-title { margin: 0 0 4px; font-size: 24px; font-weight: 600; } .ct-header-actions { display: flex; gap: 8px; } .ct-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: #6b7280; margin-bottom: 18px; } .ct-legend .ct-dot { margin-right: 4px; } .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; } .ct-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e5e7eb; } .ct-card { background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #d1d5db; border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; display: flex; flex-direction: column; gap: 10px; } .ct-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .ct-card.ct-status-amber { border-left-color: #f59e0b; } .ct-card.ct-status-red { border-left-color: #ef4444; } .ct-card.ct-status-grey { border-left-color: #9ca3af; } .ct-card.ct-status-green { border-left-color: #10b981; } /* "Just created" pulse — applied for ~3s after the user creates a * new prospect so they can spot the new card after the sort settles. * The new prospect auto-pins to position 0 (active) but on a dense * screen that's not always obvious. */ @keyframes ct-card-new-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 88, 150, 0.55); } 60% { box-shadow: 0 0 0 14px rgba(0, 88, 150, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 88, 150, 0); } } .ct-card.ct-card-new { animation: ct-card-new-pulse 1.4s ease-out 2; outline: 2px solid var(--brand); outline-offset: -2px; transition: outline 0.2s ease; } .ct-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .ct-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; min-width: 0; } .ct-card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Scoreboard: SVG ring + the three Cs to its right. Mirrors the * triage view (.triage-ring-wrap + .triage-3c) but at card scale. */ .ct-card-scoreboard { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; } .ct-ring { flex-shrink: 0; } .ct-ring .ct-ring-track { fill: none; stroke: #e5e7eb; stroke-width: 8; } .ct-ring .ct-ring-progress { fill: none; stroke: #005896; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.4s ease; } .ct-ring .ct-ring-pct { font-size: 18px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; fill: #111827; font-variant-numeric: tabular-nums; } .ct-ring .ct-ring-lbl { font-size: 7px; text-anchor: middle; fill: #6b7280; text-transform: uppercase; letter-spacing: 1px; } .ct-ring-stale .ct-ring-progress { stroke: #9ca3af; } .ct-ring-stale .ct-ring-pct { fill: #6b7280; } /* Tone overrides for the Control Tower rings. The shared * .ring-tone-* rules earlier in the file lose specificity battles * against the base .ct-ring .ct-ring-progress rule because the base * sits later in the stylesheet — so the ring stayed blue. Re-declaring * here, AFTER the base, with the same compound selector wins. Stale * rings keep their grey override (declared above this block, so it * still beats these). */ .ct-ring.ring-tone-good .ct-ring-progress { stroke: #10b981; } .ct-ring.ring-tone-warn .ct-ring-progress { stroke: #f59e0b; } .ct-ring.ring-tone-bad .ct-ring-progress { stroke: #ef4444; } .ct-ring.ring-tone-good .ct-ring-pct { fill: #047857; } .ct-ring.ring-tone-warn .ct-ring-pct { fill: #b45309; } .ct-ring.ring-tone-bad .ct-ring-pct { fill: #b91c1c; } /* Per-file mini-rings strip on Control Tower cards. Same logic as * the Triage view's .triage-per-file, scaled down (48px rings vs * 80px) so it fits beneath the main scoreboard without dominating * the card. */ .ct-per-file { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 0; border-top: 1px dashed #f3f4f6; margin-top: 2px; } .ct-pf { display: flex; flex-direction: column; align-items: center; gap: 1px; } .ct-pf-ring { display: block; } .ct-pf-ring .ct-ring-pct { font-size: 12px; font-weight: 600; } .ct-pf-label { font-size: 9px; color: #4b5563; text-transform: uppercase; letter-spacing: 0.4px; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .ct-3c { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .ct-3c li { display: flex; justify-content: space-between; } .ct-3c-lbl { color: #4b5563; } .ct-3c-val { font-weight: 600; font-variant-numeric: tabular-nums; color: #111827; } /* Last-touched row pair — consultant vs prospect side by side. */ .ct-touched { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 0 4px; border-top: 1px solid #f3f4f6; } .ct-touched-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4b5563; cursor: help; } .ct-touched-icon { font-size: 12px; opacity: 0.7; } .ct-touched-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-touched-prospect .ct-touched-label { color: #6b7280; } /* Inline-rename: contenteditable name shows a subtle hover affordance, * and flashes green when a save succeeds. Pointer:text gives the * "you can edit here" hint without an icon. */ .ct-card-name { cursor: text; border-radius: 3px; padding: 1px 4px; margin-left: -4px; transition: background 0.15s ease; } .ct-card-name:hover { background: #f3f4f6; } .ct-card-name:focus { background: #fff; outline: 2px solid #005896; outline-offset: 0; } .ct-card-name-saved { background: #d1fae5 !important; } /* Per-card action bar: small buttons in the bottom-right, only * visible when relevant (non-active rooms). Styled small so they * don't fight the next-action copy. */ .ct-card-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: -4px; } .ct-action-btn { font-size: 11px; padding: 3px 9px; border-radius: 5px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; } .ct-action-btn:hover { background: #f3f4f6; } .ct-act-switch:hover { border-color: #005896; color: #005896; } .ct-act-delete:hover { border-color: #ef4444; color: #ef4444; } .ct-act-delete-armed, .ct-act-delete-armed:hover { background: #ef4444; color: #fff; border-color: #ef4444; } .ct-act-timeline:hover, .ct-act-link:hover { border-color: #005896; color: #005896; } /* Portal status chip — sits in the Control Tower header. Dot * colour reflects state: green=running, grey=off, red=error. */ .ct-portal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 14px; background: #fff; color: #374151; cursor: pointer; font-variant-numeric: tabular-nums; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-portal-chip:hover { background: #f3f4f6; } .ct-portal-chip:disabled { opacity: 0.6; cursor: wait; } .ct-portal-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; } .ct-portal-on .ct-portal-dot { background: #10b981; } .ct-portal-off .ct-portal-dot { background: #9ca3af; } .ct-portal-on { border-color: #10b981; color: #047857; background: #ecfdf5; } /* Activity timeline drawer — slides in from the right of the * Control Tower view. Reads from the activity API which derives * events from the on-disk ledger + snapshots + dialect. */ .ct-drawer { position: fixed; top: 56px; /* clears the top nav */ right: 0; width: 480px; max-width: 90vw; height: calc(100vh - 56px); background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; z-index: 50; } .ct-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; } .ct-drawer-title { font-size: 14px; display: block; margin-bottom: 2px; } .ct-drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; } /* ── Critical-path drawer ─────────────────────────────────── */ .cp-milestones { list-style: none; padding: 0; margin: 0; } .cp-milestone { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; padding: 12px 14px; background: #fff; } .cp-milestone-done { background: #f0fdf4; border-color: #bbf7d0; } .cp-milestone-ready_to_signoff { background: #fffbeb; border-color: #fde68a; } .cp-milestone-blocked { background: #fef2f2; border-color: #fecaca; } .cp-mile-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 8px; flex-wrap: wrap; } .cp-mile-head strong { font-size: 14px; color: #003e6a; flex: 0 0 auto; } .cp-mile-date { margin-left: auto; font-size: 11px; } .cp-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; } .cp-pill-done { background: #bbf7d0; color: #14532d; } .cp-pill-ready { background: #fde68a; color: #92400e; } .cp-pill-open { background: #e5e7eb; color: #374151; } .cp-pill-blocked { background: #fecaca; color: #991b1b; } .cp-banner { background: #fef3c7; border-left: 3px solid #f59e0b; padding: 8px 10px; margin: 6px 0 10px 0; display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: 12px; border-radius: 4px; } .cp-banner button { margin-left: 6px; font-size: 11px; padding: 4px 10px; } .cp-activities { list-style: none; padding: 0; margin: 6px 0; } .cp-activity { display: flex; align-items: center; gap: .5rem; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.04); font-size: 12px; } .cp-activity:last-child { border-bottom: none; } .cp-owner { display: inline-block; min-width: 64px; padding: 2px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; text-align: center; letter-spacing: .3px; text-transform: uppercase; } .cp-owner-consultant { background: #dbeafe; color: #1e3a8a; } .cp-owner-prospect { background: #fce7f3; color: #831843; } .cp-owner-joint { background: #ede9fe; color: #4c1d95; } .cp-act-label { flex: 1; color: #111827; } .cp-act-done .cp-act-label { text-decoration: line-through; color: #6b7280; } .cp-act-blocked .cp-act-label { color: #991b1b; } .cp-act-owner, .cp-act-status { font-size: 11px; padding: 2px 4px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; } .cp-act-delete { background: transparent; border: 0; color: #9ca3af; font-size: 16px; cursor: pointer; padding: 0 4px; } .cp-act-delete:hover { color: #ef4444; } .cp-mile-foot { display: flex; gap: .5rem; margin-top: 6px; } .cp-mile-foot button { font-size: 11px; padding: 4px 10px; } [data-theme="dark"] .cp-milestone { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .cp-milestone-done { background: rgba(16, 185, 129, .08); border-color: rgba(34, 197, 94, .35); } [data-theme="dark"] .cp-milestone-ready_to_signoff { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .35); } [data-theme="dark"] .cp-milestone-blocked { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .35); } [data-theme="dark"] .cp-mile-head strong { color: #93c5fd; } [data-theme="dark"] .cp-banner { background: rgba(245, 158, 11, .12); color: var(--text); } [data-theme="dark"] .cp-act-label { color: var(--text); } [data-theme="dark"] .cp-act-owner, [data-theme="dark"] .cp-act-status { background: var(--input-bg, #1f2937); color: var(--text); border-color: var(--border); } .ct-timeline { list-style: none; padding: 0; margin: 0; } .ct-tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; } .ct-tl-item:last-child { border-bottom: 0; } .ct-tl-icon { font-size: 18px; text-align: center; line-height: 1.2; } .ct-tl-body { min-width: 0; } .ct-tl-line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ct-tl-line1 strong { font-size: 13px; color: #111827; } .ct-tl-actor { font-size: 10px; padding: 2px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; flex-shrink: 0; } .ct-tl-actor-consultant { background: #eff6ff; color: #1e40af; } .ct-tl-actor-system { background: #f3f4f6; color: #4b5563; } .ct-tl-actor-prospect { background: #ecfdf5; color: #047857; } .ct-tl-detail { font-size: 12px; color: #4b5563; margin: 4px 0 2px; } .ct-tl-when { margin: 2px 0 0; font-size: 11px; } /* ────────────────────────────────────────────────────────── * Prospect-facing room page (/room/{prospect_id}). * Intentionally minimal — drop zone + readiness score + file * list. No nav, no decisions, no triage chrome. * ──────────────────────────────────────────────────────── */ .room-body { background: #f5f7fa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; color: #1f2937; /* App-like layout: page fills the viewport, header pinned at top, main content takes the remaining height. Stops the 3-column shell from leaving dead space below the columns when the question card is short. */ display: flex; flex-direction: column; min-height: 100vh; height: 100vh; overflow: hidden; } .room-header { flex: 0 0 auto; } .room-body .room-main { flex: 1; min-height: 0; overflow: hidden; } .room-header { display: flex; align-items: center; gap: 18px; padding: 18px 32px; background: #fff; border-bottom: 1px solid #e5e7eb; } .room-logo { height: 38px; width: auto; } .room-header-text { line-height: 1.2; } .room-title { margin: 0; font-size: 22px; font-weight: 600; color: #003e6a; } .room-header-text .meta { margin: 2px 0 0; font-size: 13px; color: #6b7280; } /* In-app variant of the room-header — same look as the prospect-facing Portal so the consultant's Triage / Mapping views feel like the same "room". Sits inside a view (below the app-header), so we tighten the padding a touch, add a subtle accent rule on the left, and a card-style radius so it visually reads as an identity strip rather than a second page header. */ .room-header-inapp { margin: 0 0 14px 0; padding: 14px 22px; border-radius: 10px; border: 1px solid #e5e7eb; border-left: 4px solid #003e6a; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); } .room-header-inapp .room-logo { height: 30px; } .room-header-inapp .room-title { font-size: 19px; } [data-theme="dark"] .room-header-inapp { border-left-color: #4a8fc7; } .room-main { /* Fill the viewport completely — three-column shell needs every pixel on wide monitors. No max-width cap means the columns stretch all the way out; the grid's `minmax(0, Nfr)` tracks keep their proportions sensible. */ max-width: none; margin: 0; padding: 18px 20px; } .room-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; } .room-card h2, .room-card h3 { margin: 0 0 10px; color: #003e6a; } .room-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; } @media (max-width: 800px) { .room-grid { grid-template-columns: 1fr; } } /* ═══ Portal THREE-column shell (Slack/IDE-style) ════════════ */ /* Left: question + decision buttons (the "what am I being asked") Middle: agentic chat (the "talk it through") Right: example rows + status (the "evidence") Agent sits in the middle, mediating between question and data. minmax(0, ...) is critical to stop the samples table from forcing the right column wider than its share. */ .portal-shell { display: grid; grid-template-columns: minmax(0, 0.95fr) /* question column — narrowest, focused on decision */ minmax(0, 1.05fr) /* chat column — middle width, bubbles need breathing room */ minmax(0, 1.4fr); /* examples column — widest, data-dense */ gap: 18px; /* Fill the full viewport width on wide monitors — the three columns each have their own purpose so more horizontal space is genuinely useful (especially the examples table which can have 15+ columns). */ max-width: none; margin: 0; width: 100%; /* Fill the available viewport height (.room-main now stretches to fill what's left under the header). Each column then scrolls internally, so there's no wasted space below short cards. */ height: 100%; align-items: stretch; } /* Tablet / narrower laptop — collapse to 2 columns: question stays left (alongside chat), examples drops below them as a full-width strip so the table can still be wide. */ @media (max-width: 1200px) { .portal-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "left center" "right right"; } .portal-left { grid-area: left; } .portal-center { grid-area: center; } .portal-right { grid-area: right; } } /* Phone / very narrow — stack everything. */ @media (max-width: 800px) { .portal-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "center" "right"; } } /* min-width: 0 on each child is the canonical defensive pair to the minmax(0, ...) above — lets flex content (chat bubbles, samples table) shrink below its natural content width without forcing the column track to expand. */ .portal-left, .portal-center, .portal-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; /* Each column owns its vertical space — scrolls independently so a short question card doesn't leave dead space below it just because the chat column is taller. */ min-height: 0; overflow-y: auto; padding-bottom: 8px; } .portal-left { gap: 18px; } /* Readiness chip in the page header */ .room-header { position: relative; padding-right: 110px; } .room-header-readiness { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); text-align: right; } .room-readiness-pct { font-size: 24px; font-weight: 700; color: #003e6a; line-height: 1; } .room-readiness-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; } [data-theme="dark"] .room-readiness-pct { color: #93c5fd; } /* ── Agent hero card (Slice A) ────────────────────────── */ .agent-card { display: flex; gap: 16px; background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #003e6a; border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); } .agent-avatar { width: 38px; height: 38px; border-radius: 50%; background: #003e6a; color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .agent-body { flex: 1; min-width: 0; } .agent-greeting { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: #111827; } /* ── Agent question STACK + greeting strip ──────────────── */ .agent-greet-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; flex: 0 0 auto; } .agent-greet-strip .agent-avatar { width: 32px; height: 32px; border-radius: 50%; background: #003e6a; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .agent-greet-strip .agent-greeting { margin: 0; font-size: 14px; line-height: 1.4; } .agent-stack { display: flex; flex-direction: column; gap: 14px; min-height: 0; /* Stack itself doesn't scroll — the parent .portal-left column does. Keeps the scroll position stable when cards animate out. */ } .agent-question-active { box-shadow: 0 0 0 2px #003e6a, 0 1px 4px rgba(0,0,0,.06); } [data-theme="dark"] .agent-greet-strip { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .agent-question-active { box-shadow: 0 0 0 2px #4a8fc7, 0 1px 4px rgba(0,0,0,.4); } /* ── Inspector toolbar (filter input + clear) ──────────── */ .inspector-toolbar { display: flex; gap: 8px; align-items: center; padding: 6px 14px 10px; border-bottom: 1px solid #e5e7eb; } .inspector-toolbar.hidden { display: none; } .inspector-filter { flex: 1; min-width: 0; padding: 6px 10px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; } .inspector-filter:focus { outline: none; border-color: #003e6a; box-shadow: 0 0 0 2px rgba(0,62,106,.1); } .inspector-clear { font-size: 11px; padding: 4px 10px; } .inspector-clear.hidden { display: none; } [data-theme="dark"] .inspector-toolbar { border-bottom-color: var(--border); } [data-theme="dark"] .inspector-filter { background: var(--card-bg); color: var(--text); border-color: var(--border); } /* ── Sortable column headers in the Examples table ────── */ .inspector-samples-table th.inspector-sortable { cursor: pointer; user-select: none; } .inspector-samples-table th.inspector-sortable:hover { background: #eef2f7; } [data-theme="dark"] .inspector-samples-table th.inspector-sortable:hover { background: rgba(255,255,255,.06); } .inspector-sort-icon { display: inline-block; margin-left: 4px; opacity: .45; font-size: 11px; } .inspector-sort-icon.active { opacity: 1; color: #003e6a; } [data-theme="dark"] .inspector-sort-icon.active { color: #93c5fd; } /* ── Agent question card — Triage-style ────────────────── */ /* The portal's question card now mirrors the cockpit's Triage card: tier banner up top, title + severity pill, scope subtitle, crisp question text, "Why does this matter?" callout with the criticality framing, then the option buttons. No LLM rephrase layer — consultant feedback was that the softened version lost too much signal. */ .agent-question { background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #d1d5db; border-radius: 8px; padding: 16px 20px; margin-top: 4px; } .agent-q-tier { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; } .agent-q-tier.hidden { display: none; } .agent-q-tier-icon { font-size: 14px; line-height: 1; } .agent-q-tier-blocking { background: #fee2e2; color: #991b1b; } .agent-q-tier-high { background: #fef3c7; color: #92400e; } .agent-q-tier-cosmetic { background: #d1fae5; color: #065f46; } .agent-q-tier-info { background: #e0e7ff; color: #3730a3; } /* Left accent strip echoes the tier colour */ .agent-question:has(.agent-q-tier-blocking) { border-left-color: #ef4444; } .agent-question:has(.agent-q-tier-high) { border-left-color: #f59e0b; } .agent-question:has(.agent-q-tier-cosmetic) { border-left-color: #10b981; } .agent-question:has(.agent-q-tier-info) { border-left-color: #6366f1; } .agent-q-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .agent-q-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #111827; flex: 1; min-width: 0; } .agent-q-pill { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; letter-spacing: .3px; white-space: nowrap; } .agent-q-pill.hidden { display: none; } .agent-q-pill-blocking { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .agent-q-pill-high { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .agent-q-scope { margin: 0 0 14px; font-size: 12px; color: #6b7280; } .agent-q-scope.hidden { display: none; } .agent-q-text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #111827; } .agent-q-whybox { background: #eff6ff; border-left: 3px solid #3b82f6; border-radius: 4px; padding: 12px 14px; margin: 0 0 16px; } .agent-q-whybox.hidden { display: none; } .agent-q-whyhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .agent-q-whyhead strong { color: #003e6a; font-size: 13px; } .agent-q-crit { display: inline-block; font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 10px; letter-spacing: .3px; white-space: normal; } .agent-q-crit.hidden { display: none; } .agent-q-crit-blocking { background: #ef4444; color: #fff; } .agent-q-crit-high { background: #f59e0b; color: #fff; } .agent-q-whytext { margin: 0; font-size: 13px; line-height: 1.5; color: #1e3a8a; } /* Dark-mode parity */ [data-theme="dark"] .agent-question { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .agent-q-title { color: var(--text); } [data-theme="dark"] .agent-q-text { color: var(--text); } [data-theme="dark"] .agent-q-whybox { background: rgba(59, 130, 246, .12); border-left-color: #60a5fa; } [data-theme="dark"] .agent-q-whyhead strong { color: #93c5fd; } [data-theme="dark"] .agent-q-whytext { color: #bfdbfe; } [data-theme="dark"] .agent-q-tier-blocking { background: rgba(239, 68, 68, .2); color: #fca5a5; } [data-theme="dark"] .agent-q-tier-high { background: rgba(245, 158, 11, .2); color: #fcd34d; } [data-theme="dark"] .agent-q-tier-cosmetic { background: rgba(16, 185, 129, .2); color: #6ee7b7; } [data-theme="dark"] .agent-q-tier-info { background: rgba(99, 102, 241, .2); color: #c7d2fe; } [data-theme="dark"] .agent-q-pill-blocking { background: rgba(239, 68, 68, .2); color: #fca5a5; border-color: rgba(239, 68, 68, .35); } [data-theme="dark"] .agent-q-pill-high { background: rgba(245, 158, 11, .2); color: #fcd34d; border-color: rgba(245, 158, 11, .35); } /* Sample rows (collapsible table mirroring the Triage Inspector) */ .agent-q-samples { margin: 8px 0 12px; } .agent-q-samples.hidden { display: none; } .agent-samples summary { cursor: pointer; font-size: 13px; color: #003e6a; padding: 6px 10px; background: #eaf4ff; border-radius: 6px; user-select: none; font-weight: 600; } .agent-samples summary:hover { background: #dbeafe; } .agent-samples[open] summary { margin-bottom: 8px; } .agent-samples-scroll { max-height: 320px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; } .agent-samples-table { width: 100%; border-collapse: collapse; font-size: 12px; } .agent-samples-table th, .agent-samples-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .agent-samples-table thead th { position: sticky; top: 0; background: #f9fafb; font-weight: 600; color: #003e6a; border-bottom: 1px solid #d1d5db; } .agent-samples-table tbody tr:hover { background: #f9fafb; } .agent-samples-more { padding: 6px 10px; margin: 0; font-size: 11px; background: #f9fafb; border-top: 1px solid #f3f4f6; } [data-theme="dark"] .agent-question-scope { background: rgba(255, 255, 255, .05); color: var(--text-muted); } [data-theme="dark"] .agent-samples summary { background: rgba(74, 143, 199, .2); color: #93c5fd; } [data-theme="dark"] .agent-samples summary:hover { background: rgba(74, 143, 199, .3); } [data-theme="dark"] .agent-samples-scroll { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .agent-samples-table thead th { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-bottom-color: var(--border); color: #93c5fd; } [data-theme="dark"] .agent-samples-table tbody tr:hover { background: rgba(255, 255, 255, .03); } [data-theme="dark"] .agent-samples-table td { color: var(--text); } [data-theme="dark"] .agent-samples-table th, [data-theme="dark"] .agent-samples-table td { border-bottom-color: var(--border); } [data-theme="dark"] .agent-samples-more { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-top-color: var(--border); } .agent-options { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 8px; } .agent-option { text-align: left; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; font: inherit; transition: border-color .12s, background .12s; width: 100%; } .agent-option:hover:not([disabled]) { border-color: #003e6a; background: #f0f7ff; } .agent-option[data-primary="1"] { border-color: #003e6a; background: #eaf4ff; } .agent-option:disabled { opacity: .55; cursor: wait; } .agent-option-loading { position: relative; } .agent-option-loading::after { content: '…'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .agent-option-label { display: block; font-weight: 600; color: #111827; } .agent-option-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; } .agent-q-hint { margin: 12px 0 0; font-size: 11px; color: #6b7280; font-style: italic; } .agent-empty { margin-top: 8px; } .room-drop-inline { margin: 0; } /* ── Curation card (transaction_type_curation) ─────────────── Per-type checkbox list, mirroring the cockpit Triage card so the prospect sees the same UX the consultant does for this card shape. The list lives in the card body where the generic .agent-options would normally sit; the Apply button below uses the standard .agent-option styling so it looks like a primary action. */ .agent-type-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; max-height: 380px; overflow-y: auto; /* Subtle inner-scroll hint so the prospect knows there's more when the list overflows. No big "scroll arrow" — keep it quiet. */ } .agent-type-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border, #e6ecf3); border-radius: 6px; cursor: pointer; background: var(--bg-soft, #fff); transition: background 120ms ease, border-color 120ms ease; user-select: none; } .agent-type-row:hover { background: var(--bg-hover, #f7f9fb); } .agent-type-row.agent-type-included { background: #e6f5ec; border-color: #b8dfc4; } .agent-type-row.agent-type-excluded { background: #fbeeec; border-color: #e6c5c0; opacity: 0.78; } .agent-type-check { margin: 0; cursor: pointer; } .agent-type-name { font-weight: 600; font-size: 13px; color: var(--text-strong, #1a1a1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-type-rows, .agent-type-qty { font-size: 12px; color: var(--text-muted, #4a5b6c); font-variant-numeric: tabular-nums; white-space: nowrap; } .agent-type-flag { font-size: 10px; letter-spacing: 0.2px; white-space: nowrap; } /* Curation Apply lives in the same .agent-options column but we strip the column-gap to make the row feel like a single CTA. */ .agent-options-curation { margin-top: 10px; } .agent-option-primary { border-color: #003e6a; background: #eaf4ff; } [data-theme="dark"] .agent-type-row { background: var(--surface, #1f2937); border-color: var(--border, #374151); } [data-theme="dark"] .agent-type-row:hover { background: var(--surface-2, #273141); } [data-theme="dark"] .agent-type-row.agent-type-included { background: #14342a; border-color: #2e6a4d; } [data-theme="dark"] .agent-type-row.agent-type-excluded { background: #3a1f1c; border-color: #7a3b34; } [data-theme="dark"] .agent-option-primary { border-color: #7aa6d1; background: #1c2e44; } /* ═══ Chat shell (WhatsApp / Telegram feel) ════════════════ */ .chat-shell { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; /* No max-height — the shell flows naturally with the page; the INNER bubble list has its own max-height + scroll so long threads don't push the compose box off screen. Dropping overflow:hidden here is also what unblocks wheel events from reaching the bubble container's scroll. */ } .chat-header { display: flex; align-items: center; /* center so the button doesn't dip below baseline */ gap: 10px; padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .chat-title { font-size: 13px; font-weight: 600; color: #003e6a; } .chat-sub { font-size: 11px; flex: 1; /* push the Clear chat button to the right edge */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-clear { font-size: 11px; padding: 4px 10px; border-radius: 999px; /* pill shape — subtle, non-destructive feel */ white-space: nowrap; } .chat-clear:hover { background: #fee2e2; /* light red on hover — flags the destructive intent without alarming on idle */ color: #991b1b; border-color: #fca5a5; } .chat-clear:disabled { opacity: 0.6; cursor: wait; } [data-theme="dark"] .chat-clear:hover { background: #3a1f1c; color: #fca5a5; border-color: #7a3b34; } .chat-bubbles { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; /* Self-contained scroll: bubbles get their own scrollbar so the compose box pinned below stays visible. In the 3-column layout the chat is the centre column and benefits from a taller surface — give it most of the viewport when there's content. */ overflow-y: auto; min-height: 320px; max-height: calc(100vh - 280px); background: linear-gradient(180deg, #f9fafb 0%, #fff 100%); } .chat-empty { align-self: center; padding: 24px 0; text-align: center; } .chat-day { align-self: center; font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; background: rgba(0, 0, 0, .04); padding: 3px 10px; border-radius: 10px; margin: 10px 0 4px; } /* Bubble — base */ .bubble { max-width: 78%; padding: 8px 12px 7px; border-radius: 16px; font-size: 13px; line-height: 1.4; word-wrap: break-word; position: relative; } .bubble-time { display: block; font-size: 10px; margin-top: 3px; opacity: .65; } .bubble-agent { align-self: flex-start; background: #f0f0f0; color: #111827; border-bottom-left-radius: 4px; } .bubble-prospect { align-self: flex-end; background: #003e6a; color: #fff; border-bottom-right-radius: 4px; } .bubble-prospect .bubble-time { color: rgba(255,255,255,.7); } /* Burst-grouping: tighter spacing + flatter corners when adjacent bubbles share the same speaker. */ .bubble.bubble-continue.bubble-agent { border-top-left-radius: 6px; } .bubble.bubble-continue.bubble-prospect { border-top-right-radius: 6px; } /* Kind-specific accents (uploads, confirmations) */ .bubble-upload { font-style: italic; background: #fef3c7; color: #78350f; align-self: center; max-width: 60%; text-align: center; border-radius: 12px !important; font-size: 12px; } .bubble-confirmation { background: #d1fae5; color: #065f46; } .chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; border-top: 1px solid #e5e7eb; background: #fff; } .chat-compose textarea { flex: 1; resize: none; border: 1px solid #d1d5db; border-radius: 14px; padding: 11px 16px; font: inherit; font-size: 14px; line-height: 1.5; background: #fff; min-height: 64px; max-height: 220px; } .chat-compose textarea:focus { outline: none; border-color: #003e6a; box-shadow: 0 0 0 2px rgba(0,62,106,.1); } .chat-send { flex: 0 0 auto; padding: 7px 18px; font-size: 13px; border-radius: 18px; } .chat-send:disabled { opacity: .4; cursor: not-allowed; } .chat-disclaimer { font-size: 11px; font-style: italic; padding: 0 18px 12px; margin: 0; color: #6b7280; background: #fff; border-top: 1px solid transparent; } /* ═══ Inspector pane (right column) ════════════════════════ */ .inspector-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; } .inspector-head { padding: 12px 16px 6px; display: flex; align-items: baseline; gap: .5rem; justify-content: space-between; } .inspector-title { margin: 0; font-size: 13px; font-weight: 600; color: #003e6a; text-transform: uppercase; letter-spacing: .4px; } .inspector-sub { font-size: 11px; } .inspector-body { padding: 0 16px 14px; } .inspector-empty { padding: 30px 0; text-align: center; } .inspector-files-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 4px; } .inspector-why-text { margin: 0; font-size: 13px; line-height: 1.5; color: #4b5563; } /* Samples table — re-skinned for the inspector pane (was the collapsible inside the question card). Full-height, sticky head. */ .inspector-samples-body { padding: 0; border-top: 1px solid #e5e7eb; /* Critical pairing with minmax(0, ...) on the parent grid track: the body MUST clip its overflow horizontally so its child `.inspector-samples-scroll` is the thing that scrolls. */ overflow: hidden; } .inspector-samples-scroll { max-height: 560px; overflow: auto; /* Keep the scroll container within its parent so the column can't be forced wider by the table's natural width. */ width: 100%; } .inspector-samples-table { width: 100%; border-collapse: collapse; font-size: 12px; } .inspector-samples-table th, .inspector-samples-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .inspector-samples-table thead th { position: sticky; top: 0; background: #f9fafb; font-weight: 600; color: #003e6a; border-bottom: 1px solid #d1d5db; } .inspector-samples-table tbody tr:hover { background: #f9fafb; } .inspector-samples-footer { padding: 8px 16px; font-size: 11px; color: #6b7280; border-top: 1px solid #f3f4f6; background: #fafafa; } /* Dark mode for the new chat + inspector */ [data-theme="dark"] .chat-shell, [data-theme="dark"] .inspector-card { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .chat-header, [data-theme="dark"] .chat-compose, [data-theme="dark"] .chat-disclaimer { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .chat-disclaimer { color: var(--text-muted); } [data-theme="dark"] .chat-title { color: #93c5fd; } [data-theme="dark"] .chat-bubbles { background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, var(--card-bg) 100%); } [data-theme="dark"] .bubble-agent { background: rgba(255, 255, 255, .08); color: var(--text); } [data-theme="dark"] .bubble-prospect { background: #4a8fc7; color: #fff; } [data-theme="dark"] .bubble-upload { background: rgba(245, 158, 11, .15); color: #fde68a; } [data-theme="dark"] .bubble-confirmation { background: rgba(16, 185, 129, .15); color: #6ee7b7; } [data-theme="dark"] .chat-compose textarea { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .chat-day { background: rgba(255, 255, 255, .06); color: var(--text-muted); } [data-theme="dark"] .inspector-title { color: #93c5fd; } [data-theme="dark"] .inspector-why-text { color: var(--text); } [data-theme="dark"] .inspector-samples-body { border-top-color: var(--border); } [data-theme="dark"] .inspector-samples-table thead th { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-bottom-color: var(--border); color: #93c5fd; } [data-theme="dark"] .inspector-samples-table tbody tr:hover { background: rgba(255, 255, 255, .03); } [data-theme="dark"] .inspector-samples-table td { color: var(--text); } [data-theme="dark"] .inspector-samples-table th, [data-theme="dark"] .inspector-samples-table td { border-bottom-color: var(--border); } [data-theme="dark"] .inspector-samples-footer { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-top-color: var(--border); color: var(--text-muted); } /* Dark-mode parity */ [data-theme="dark"] .agent-card, [data-theme="dark"] .room-thread { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .agent-card { border-left-color: #4a8fc7; } [data-theme="dark"] .agent-greeting, [data-theme="dark"] .thread-content { color: var(--text); } [data-theme="dark"] .agent-question { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-color: var(--border); } [data-theme="dark"] .agent-question-text { color: #93c5fd; } [data-theme="dark"] .agent-option { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .agent-option-label { color: var(--text); } [data-theme="dark"] .agent-option:hover:not([disabled]) { background: rgba(74, 143, 199, .15); border-color: #4a8fc7; } [data-theme="dark"] .agent-option[data-primary="1"] { background: rgba(74, 143, 199, .18); border-color: #4a8fc7; } [data-theme="dark"] .agent-ask-form textarea { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .thread-icon { background: rgba(255,255,255,.06); } [data-theme="dark"] .thread-prospect .thread-icon { background: rgba(99,102,241,.2); color: #c7d2fe; } [data-theme="dark"] .thread-agent .thread-icon { background: rgba(168,85,247,.2); color: #e9d5ff; } [data-theme="dark"] .thread-role { color: #93c5fd; } /* Drop zone */ .room-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 32px; border: 2px dashed #cbd5e1; background: #fbfdff; min-height: 240px; transition: border-color 0.15s ease, background 0.15s ease; } .room-drop-hot { border-color: #005896 !important; background: #eff6ff !important; } .room-drop-icon { font-size: 48px; margin-bottom: 8px; } .room-drop-title { font-size: 18px; color: #003e6a; margin-bottom: 6px; } .room-drop-hint { margin-top: 12px; max-width: 480px; } .room-drop a { color: #005896; font-weight: 500; } .room-drop-progress { list-style: none; padding: 0; margin: 18px 0 0; width: 100%; max-width: 480px; text-align: left; } .room-progress-row { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 6px; background: #fff; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; } .room-progress-ok { border-color: #10b981; background: #ecfdf5; } .room-progress-error { border-color: #ef4444; background: #fef2f2; color: #991b1b; } /* Score panel */ .room-score { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; } .room-score-pct { font-size: 34px; font-weight: 700; color: #005896; font-variant-numeric: tabular-nums; } /* Files list */ .room-files { list-style: none; padding: 0; margin: 0; } .room-file { padding: 8px 0; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; } .room-file:last-child { border-bottom: 0; } .room-privacy { background: #f8fafc; } .room-locked p { margin: 0 0 8px; } /* Auto-ingest toast — bottom-right, slides up + fades after 4s. * Used by Manual Mapping when files dropped via the portal get * auto-loaded into the session. */ .mb-toast { position: fixed; bottom: 20px; right: 20px; padding: 10px 16px; background: #003e6a; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); z-index: 200; opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; max-width: 480px; } .mb-toast.mb-toast-visible { opacity: 1; transform: translateY(0); } .mb-toast.mb-toast-warn { background: #b45309; } /* AI-suggestion badge on Triage cards — visually distinct so the * consultant always knows the finding came from the LLM, not a * hard-coded rule. Subtle violet to differentiate from the * blue/green/amber tier colours already in play. */ .tr-card-ai { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: #ede9fe; color: #5b21b6; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; border: 1px solid #ddd6fe; } /* The whole card gets a faint violet accent on the left rule so * AI-sourced cards stand out in a long stack. Compound selector * outranks the tier-coloured border (.tr-tier-*) — AI provenance * takes priority over the tier colour for at-a-glance scanning. */ .tr-card.tr-card-ai-source { border-left: 4px solid #8b5cf6; } .ct-active-pill { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #005896; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; } /* ── HubSpot deal chip on the CT card ─────────────────────── */ .ct-hubspot-chip { margin: 8px 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid #fde68a; background: #fffbeb; font-size: 12px; } .ct-hubspot-name { font-weight: 600; color: #92400e; margin-bottom: 2px; } .ct-hubspot-meta { color: #78350f; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: 11px; } [data-theme="dark"] .ct-hubspot-chip { background: rgba(146, 64, 14, 0.18); border-color: rgba(253, 230, 138, 0.35); } [data-theme="dark"] .ct-hubspot-name { color: #fde68a; } [data-theme="dark"] .ct-hubspot-meta { color: #fcd34d; } /* Picker modal */ .hs-picker-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 9000; } .hs-picker-overlay.hidden { display: none; } .hs-picker-panel { background: #fff; width: min(700px, 90vw); max-height: 80vh; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .hs-picker-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; } .hs-picker-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; } .hs-picker-body input[type="search"] { width: 100%; margin-bottom: 8px; } .hs-picker-results { list-style: none; padding: 0; margin: 8px 0 0 0; } .hs-picker-row { padding: 10px 12px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; } .hs-picker-row:hover { background: #f3f4f6; border-color: #d1d5db; } .hs-picker-name { font-weight: 600; color: #003e6a; font-size: 13px; } .hs-picker-meta { font-size: 11px; color: #6b7280; margin-top: 2px; } [data-theme="dark"] .hs-picker-panel { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); } [data-theme="dark"] .hs-picker-head { border-bottom-color: var(--border); } [data-theme="dark"] .hs-picker-row:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--border); } [data-theme="dark"] .hs-picker-name { color: #93c5fd; } [data-theme="dark"] .hs-picker-meta { color: var(--text-muted); } .ct-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; vertical-align: middle; } .ct-dot-amber { background: #f59e0b; } .ct-dot-red { background: #ef4444; } .ct-dot-grey { background: #9ca3af; } .ct-dot-green { background: #10b981; } .ct-stage-strip { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0; margin: 4px 0 0; } .ct-stage-strip li { height: 4px; background: #e5e7eb; border-radius: 2px; position: relative; font-size: 0; /* hides the label visually, keeps for a11y/tooltip */ } .ct-stage-strip .ct-step-done { background: #005896; } .ct-stage-strip .ct-step-current { background: #0ea5e9; } /* "ready to sign off" — same position as current but amber-tinted so the consultant's eye is drawn to it. The Confirm button lives in the per-room critical-path detail page. */ .ct-stage-strip .ct-step-ready { background: #f59e0b; } /* todo stays default grey */ /* ── 3 date chips on the CT card ─────────────────────────── */ .ct-dates-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 12px 6px 12px; } .ct-date-chip { border: 1px solid #e5e7eb; border-left-width: 3px; border-radius: 6px; padding: 5px 7px; font-size: 11px; background: #fff; min-width: 0; } .ct-date-label { display: block; font-weight: 600; color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; } .ct-date-when { display: block; color: #111827; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-date-when strong { color: #b91c1c; } .ct-date-empty { color: #9ca3af; font-style: italic; } /* Status accents — left border colour drives the alert level */ .ct-date-met { border-left-color: #10b981; } .ct-date-upcoming { border-left-color: #3b82f6; } .ct-date-approaching { border-left-color: #f59e0b; background: #fffbeb; } .ct-date-missed { border-left-color: #ef4444; background: #fef2f2; } .ct-date-unset { border-left-color: #d1d5db; } [data-theme="dark"] .ct-date-chip { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .ct-date-when { color: var(--text); } [data-theme="dark"] .ct-date-when strong { color: #fca5a5; } [data-theme="dark"] .ct-date-approaching { background: rgba(245, 158, 11, .08); } [data-theme="dark"] .ct-date-missed { background: rgba(239, 68, 68, .08); } /* ── Dates drawer (per-room editor) ───────────────────── */ .cp-dates-editor { padding: 4px 2px; } .cp-date-row { display: flex; align-items: center; gap: .6rem; padding: 10px 12px; margin: 6px 0; border: 1px solid #e5e7eb; border-left-width: 3px; border-radius: 6px; background: #fff; } .cp-date-row-met { border-left-color: #10b981; } .cp-date-row-upcoming { border-left-color: #3b82f6; } .cp-date-row-approaching { border-left-color: #f59e0b; background: #fffbeb; } .cp-date-row-missed { border-left-color: #ef4444; background: #fef2f2; } .cp-date-row-unset { border-left-color: #d1d5db; } .cp-date-name { min-width: 80px; font-weight: 600; color: #003e6a; font-size: 13px; } .cp-date-row input[type="date"] { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: #fff; } .cp-date-hint { font-size: 11px; color: #6b7280; margin-left: 4px; } .cp-date-auto { font-size: 10px; padding: 2px 6px; border-radius: 8px; background: #e0e7ff; color: #3730a3; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; } .cp-clear { font-size: 11px; padding: 3px 8px; margin-left: auto; } /* ── Offset row (weeks input) for Data + Build in the drawer ───── */ .cp-offset-row { display: flex; align-items: center; gap: .6rem; padding: 10px 12px; margin: 6px 0; border: 1px solid #e5e7eb; border-left-width: 3px; border-radius: 6px; background: #fff; flex-wrap: wrap; } .cp-offset-row input[type="number"] { width: 60px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; text-align: right; background: #fff; } .cp-offset-unit { font-size: 12px; color: #6b7280; } .cp-offset-derived { margin-left: auto; font-size: 12px; color: #4b5563; } .cp-offset-derived strong { color: #003e6a; } [data-theme="dark"] .cp-offset-row { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cp-offset-row input[type="number"] { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .cp-offset-unit { color: var(--text-muted); } [data-theme="dark"] .cp-offset-derived strong { color: #93c5fd; } /* ── DB slot row in the drawer ───────────────────────────── */ .cp-dbslot-row { display: flex; align-items: center; gap: .6rem; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; flex-wrap: wrap; } .cp-dbslot-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: #fff; min-width: 220px; } .cp-dbslot-hint { flex: 1; min-width: 200px; font-size: 11px; } [data-theme="dark"] .cp-dbslot-row { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cp-dbslot-select { background: var(--card-bg); color: var(--text); border-color: var(--border); } /* ── Tailscale Funnel command block (Settings) ──────────── */ .ts-cmd-block { margin-top: .8rem; padding: .8rem 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; } .ts-cmd-label { font-size: 12px; color: #4b5563; line-height: 1.5; } .ts-cmd-label code { background: #ffffff; padding: 1px 5px; border-radius: 3px; border: 1px solid #e5e7eb; font-size: 11px; } .ts-cmd-row { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; } .ts-cmd-code { flex: 1; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; background: #1f2937; color: #f9fafb; padding: 7px 10px; border-radius: 4px; overflow-x: auto; white-space: nowrap; user-select: all; /* ⌘C-friendly when Copy button fails */ } .ts-cmd-copy { font-size: 12px; padding: 5px 12px; white-space: nowrap; } [data-theme="dark"] .ts-cmd-block { background: var(--card-bg-soft, rgba(255,255,255,.03)); border-color: var(--border); } [data-theme="dark"] .ts-cmd-label code { background: var(--card-bg); border-color: var(--border); color: var(--text); } /* ── DB slot pill on the Control Tower card ──────────────── */ .ct-dbslot-pill { font-size: 9px; padding: 2px 7px; border-radius: 9px; background: #4c1d95; color: #fff; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; margin-left: 4px; } [data-theme="dark"] .ct-dbslot-pill { background: rgba(168, 85, 247, .35); color: #e9d5ff; } [data-theme="dark"] .cp-date-row { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .cp-date-row-approaching { background: rgba(245, 158, 11, .08); } [data-theme="dark"] .cp-date-row-missed { background: rgba(239, 68, 68, .08); } [data-theme="dark"] .cp-date-name { color: #93c5fd; } [data-theme="dark"] .cp-date-row input[type="date"] { background: var(--card-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .cp-date-auto { background: rgba(99, 102, 241, .2); color: #c7d2fe; } .ct-card-body { flex: 1; } .ct-next-action { margin: 0 0 4px; font-size: 13px; color: #111827; } .ct-last { margin: 0; font-size: 11px; color: #6b7280; } .ct-card-footer { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid #f3f4f6; } .ct-badge { font-size: 10px; padding: 3px 7px; border-radius: 9px; background: #f3f4f6; color: #4b5563; font-variant-numeric: tabular-nums; } .ct-badge-blocking { background: #fee2e2; color: #991b1b; } .ct-badge-high { background: #fef3c7; color: #92400e; } .ct-badge-network { background: #eff6ff; color: #1e40af; } .ct-empty { grid-column: 1 / -1; padding: 40px 24px; text-align: center; background: #fafafa; border: 1px dashed #d1d5db; border-radius: 8px; } .ct-empty p { margin: 0 0 8px; } .ct-empty a { color: #005896; } /* ────────────────────────────────────────────────────────── * Network view — its own top-level tab. Topology classification * + a node-link map + a sorted list of suggested supply / transfer * relationships. Promoted out of Triage so a 1-warehouse prospect * doesn't pay for it. * ──────────────────────────────────────────────────────── */ #network-view { max-width: 1400px; margin: 0 auto; padding: 24px 28px; } .nw-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; } .nw-title { margin: 0 0 4px; font-size: 24px; font-weight: 600; } .nw-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; } .nw-map-wrap { background: #fff; border: 1px solid #e6edf5; border-radius: 8px; padding: 12px; } .nw-map { display: block; } .nw-side { min-width: 0; } .nw-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .nw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #eff6ff; border: 1px solid #cfe1f3; border-radius: 14px; font-size: 13px; } .nw-chip-label { color: #1f2937; font-weight: 500; } .nw-chip-val { font-weight: 700; color: #005896; font-variant-numeric: tabular-nums; } .nw-edges-head { margin: 4px 0 8px; font-size: 12px; font-weight: 600; color: #1f2937; text-transform: uppercase; letter-spacing: 0.4px; } .nw-edges { list-style: none; padding: 0; margin: 0 0 12px; max-height: 360px; overflow-y: auto; } .nw-edges li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; } .nw-edges li:last-child { border-bottom: 0; } .nw-edge-from, .nw-edge-to { font-weight: 600; color: #003e6a; font-variant-numeric: tabular-nums; } .nw-edge-arrow { font-size: 16px; color: #6b7280; } .nw-edge-supply .nw-edge-arrow { color: #005896; } .nw-edge-transfer .nw-edge-arrow { color: #10b981; } .nw-edge-meta { margin-left: auto; font-size: 11px; color: #6b7280; } /* ────────────────────────────────────────────────────────── * DARK MODE — layered overrides * * Rather than refactor every hardcoded colour in the 2700-line * stylesheet, we flip the most prominent surfaces here. The * effect: cards, panels, headers, drop-zones go dark; brand * colours + tier dots + score-tone colours stay intact (they * carry semantic meaning, not just style). * * Triggered by set from Settings. * ──────────────────────────────────────────────────────── */ [data-theme="dark"] body, [data-theme="dark"] .room-body { background: var(--bg); color: var(--text); } [data-theme="dark"] .app-header, [data-theme="dark"] .card, [data-theme="dark"] .settings-card, [data-theme="dark"] .ct-card, [data-theme="dark"] .nw-map-wrap, [data-theme="dark"] .room-card, [data-theme="dark"] .room-header, [data-theme="dark"] .tr-inspector-card, [data-theme="dark"] .tr-card, [data-theme="dark"] .tr-history, [data-theme="dark"] .tr-loading, [data-theme="dark"] .ct-drawer { background: var(--card-bg) !important; color: var(--text); border-color: var(--border) !important; } [data-theme="dark"] .tr-ballpark, [data-theme="dark"] .triage-per-file, [data-theme="dark"] .ct-counts, [data-theme="dark"] .room-drop, [data-theme="dark"] .room-privacy, [data-theme="dark"] .ct-portal-chip { background: var(--card-bg-soft) !important; color: var(--text); border-color: var(--border) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] strong { color: var(--text-strong); } /* Inputs + selects need explicit overrides — browsers don't inherit * background/color on form elements from the body. */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .settings-input { background: var(--card-bg-soft) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Secondary buttons / chips that defaulted to white backgrounds */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] .ct-action-btn, [data-theme="dark"] .nav-btn { background: var(--card-bg-soft); color: var(--text); border-color: var(--border); } [data-theme="dark"] .ct-action-btn:hover, [data-theme="dark"] .btn-secondary:hover { background: var(--hover-bg); } [data-theme="dark"] .nav-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Table header bands keep brand-blue, but body rows pick up the * dark surface */ [data-theme="dark"] table tbody tr, [data-theme="dark"] .tr-inspector-table tbody tr { background: var(--card-bg) !important; color: var(--text); } [data-theme="dark"] table tbody tr:nth-child(even), [data-theme="dark"] .tr-inspector-table tbody tr:nth-child(even) { background: var(--card-bg-soft) !important; } [data-theme="dark"] .meta { color: var(--muted); } [data-theme="dark"] hr { border-color: var(--border); } /* Callout / info panels that used pale tints — make them readable * on dark without losing the "this is highlighted" signal. */ [data-theme="dark"] .ct-empty, [data-theme="dark"] .tr-why { background: var(--card-bg-soft) !important; border-color: var(--border) !important; color: var(--text); } /* Ring track contrast — light grey gets lost on dark */ [data-theme="dark"] .triage-ring .ring-track, [data-theme="dark"] .ct-ring .ct-ring-track, [data-theme="dark"] .tr-pf-ring .ring-track { stroke: #334155; } [data-theme="dark"] .triage-ring .ring-pct, [data-theme="dark"] .ct-ring .ct-ring-pct { fill: var(--text-strong); } [data-theme="dark"] .triage-ring .ring-lbl, [data-theme="dark"] .ct-ring .ct-ring-lbl { fill: var(--muted); } /* Stage strip — light grey background loses contrast */ [data-theme="dark"] .ct-stage-strip li { background: #334155; } [data-theme="dark"] .ct-stage-strip .ct-step-current { background: var(--num-emphasis); } [data-theme="dark"] .ct-stage-strip .ct-step-done { background: var(--brand); } /* Network node fills + text */ [data-theme="dark"] .nw-node circle, [data-theme="dark"] svg .nw-node circle { fill: var(--card-bg); } [data-theme="dark"] .nw-node text, [data-theme="dark"] svg .nw-node text { fill: var(--text-strong); } /* Score-tone text colours need lighter shades on dark so they pop */ [data-theme="dark"] .ring-tone-good .ring-pct, [data-theme="dark"] .ring-tone-good .ct-ring-pct { fill: #34d399; } [data-theme="dark"] .ring-tone-warn .ring-pct, [data-theme="dark"] .ring-tone-warn .ct-ring-pct { fill: #fbbf24; } [data-theme="dark"] .ring-tone-bad .ring-pct, [data-theme="dark"] .ring-tone-bad .ct-ring-pct { fill: #f87171; } /* Numbers everywhere — the "blue numbers" convention. Lots of * existing rules hardcode a dark text colour on numeric values; * we redirect those to var(--num-emphasis) so they show as blue * in both themes. Use !important sparingly but here it's the * point — we explicitly want to override the local rules. */ .ct-3c-val, .tr-c-val, .tr-pf-3c-val, .ct-readiness-num, .ct-network-chip-val, .nw-chip-val, .ring-pct, .ct-ring-pct, .room-score-pct, .ct-tl-actor { color: var(--num-emphasis); font-variant-numeric: tabular-nums; } /* Restore actor-tag styling — it had a coloured background + * matching text colour that the blue override would otherwise * trample. Make actor labels keep their semantic colour. */ .ct-tl-actor-prospect { color: #047857; } .ct-tl-actor-consultant { color: #1e40af; } .ct-tl-actor-system { color: #4b5563; } [data-theme="dark"] .ct-tl-actor-prospect { color: #6ee7b7; } [data-theme="dark"] .ct-tl-actor-consultant { color: #93c5fd; } [data-theme="dark"] .ct-tl-actor-system { color: #cbd5e1; }