:root { --bg:#15101c; --deep:#0e0a14; --surface:#1b1525; --raised:#1a1422; --text:#ece7f3; --muted:#a79fb5; --quiet:#7e7690; --border:rgba(255,255,255,.08); --accent:#b14fc4; --accent-strong:#c77bd8; --accent-wash:rgba(177,79,196,.16); --success:#56c28a; --warning:#e6b24a; --critical:#ec7088; --info:#6fa3d6; --radius:8px; --shadow:0 14px 36px rgba(0,0,0,.28); --ease:cubic-bezier(.22,.61,.36,1); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--deep); font-variant-numeric:lining-nums tabular-nums; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(70rem 36rem at 100% -10%, rgba(177,79,196,.14), transparent 48%),var(--bg); } button,input,select { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } a { color:var(--accent-strong); } button { cursor:pointer; } :focus-visible { outline:3px solid var(--accent-strong); outline-offset:3px; } .skip-link { position:fixed; left:12px; top:-60px; z-index:10; padding:10px 14px; border-radius:4px; background:#fff; color:#15101c; transition:top .14s var(--ease); } .skip-link:focus { top:12px; }
.app-shell { max-width:1440px; margin:0 auto; padding:0 40px 56px; } .topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); } .brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:-.02em; } .brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:6px; background:var(--accent); color:#fff; font-family:ui-monospace,monospace; font-size:14px; box-shadow:0 5px 18px rgba(177,79,196,.3); } .environment { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); } .status-dot { width:8px; height:8px; border-radius:50%; background:var(--success); }
.section-nav { display:flex; gap:4px; padding:16px 0; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; } .section-nav::-webkit-scrollbar { display:none; } .nav-link { min-height:40px; padding:10px 12px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; font-size:14px; } .nav-link:hover { color:var(--text); } .nav-link.active { color:var(--text); border-color:var(--accent-strong); font-weight:650; } .nav-count { display:inline-grid; min-width:19px; height:19px; padding:0 5px; place-items:center; border-radius:999px; background:var(--accent-wash); color:var(--accent-strong); font-size:12px; }
main { padding-top:36px; } .page { animation:page-enter .2s var(--ease); } .page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; } .eyebrow { margin:0 0 7px; color:var(--accent-strong); font-size:12px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(27px,3vw,38px); letter-spacing:-.045em; line-height:1.08; } h2 { margin-bottom:8px; font-size:19px; letter-spacing:-.025em; line-height:1.25; } h3 { margin-bottom:6px; font-size:15px; } .lede,.next-step p { margin-bottom:0; max-width:760px; color:var(--muted); line-height:1.55; }
.surface { border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 45%),var(--surface); box-shadow:var(--shadow); } .metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; } .metric { min-height:142px; padding:20px; } .metric .label { color:var(--muted); font-size:13px; } .metric strong { display:block; margin:12px 0 5px; font-size:32px; letter-spacing:-.045em; } .metric .subtext { margin:0; color:var(--quiet); font-size:12px; line-height:1.4; } .metric.success strong { color:var(--success); } .metric.warning strong { color:var(--warning); } .metric.info strong { color:var(--info); }
.scope-banner,.next-step { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:24px; margin-bottom:24px; background:linear-gradient(100deg,rgba(177,79,196,.16),transparent 65%),var(--surface); } .scope-banner { border-color:rgba(199,123,216,.28); } .scope-banner h2 { margin-bottom:6px; } .scope-banner p:last-child { max-width:820px; margin:0; color:var(--muted); line-height:1.5; } .button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:4px; padding:0 14px; text-decoration:none; font-weight:650; font-size:14px; white-space:nowrap; transition:background .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease); } .button.primary { background:var(--accent); color:#fff; } .button.primary:hover { background:var(--accent-strong); } .button.secondary { background:transparent; color:var(--text); border-color:var(--border); } .button.secondary:hover { border-color:rgba(199,123,216,.58); background:var(--accent-wash); }
.activity { padding:20px; } .section-title { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:10px; } .section-title h2 { margin:0; } .section-title a { font-size:13px; } .compact-list { display:grid; } .compact-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:14px 0; border-top:1px solid var(--border); } .compact-row:first-child { border-top:0; } .compact-row button { padding:0; color:var(--text); text-align:left; border:0; background:transparent; font-weight:650; } .meta { color:var(--muted); font-size:13px; } .badge { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:3px 8px; border:1px solid currentColor; border-radius:999px; font-size:12px; font-weight:650; white-space:nowrap; } .badge.high,.badge.ready,.badge.success { color:var(--success); background:rgba(86,194,138,.09); } .badge.medium,.badge.review,.badge.warning { color:var(--warning); background:rgba(230,178,74,.09); } .badge.low,.badge.unmatched { color:var(--critical); background:rgba(236,112,136,.09); } .badge.info { color:var(--info); background:rgba(111,163,214,.09); } .badge.neutral { color:var(--muted); background:rgba(167,159,181,.08); }
.table-surface { padding:20px; } .toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px 180px; gap:12px; } .field { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:650; } .field input,.field select { width:100%; height:40px; border:1px solid var(--border); border-radius:4px; padding:0 10px; background:var(--raised); color:var(--text); } .field input::placeholder { color:var(--quiet); } .result-count { min-height:20px; margin:18px 0 8px; color:var(--muted); font-size:13px; } .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:720px; text-align:left; } th { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:650; } td { padding:14px 12px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:14px; } td:first-child { font-weight:650; } .table-action { color:var(--accent-strong); border:0; padding:6px 0; background:transparent; font-size:13px; font-weight:650; } .empty { padding:28px 0; color:var(--muted); text-align:center; }
.review-tools { margin-bottom:14px; padding:16px 20px; } .review-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px; gap:12px; } .review-toolbar.three-columns { grid-template-columns:minmax(260px,1fr) 230px 180px; } .filter-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); } .filter-chips-label { margin-right:4px; color:var(--muted); font-size:12px; font-weight:650; } .filter-chip { display:inline-flex; min-height:34px; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font-size:13px; } .filter-chip span { min-width:18px; padding:1px 5px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text); font-size:11px; text-align:center; } .filter-chip:hover,.filter-chip.active { border-color:rgba(199,123,216,.58); background:var(--accent-wash); color:var(--text); } .review-tools .result-count { margin:12px 0 0; } .review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .review-item { padding:20px; } .review-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .review-item p { color:var(--muted); line-height:1.5; font-size:14px; } .review-meta { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; } .review-item .button { width:100%; } .review-more { grid-column:1/-1; display:flex; justify-content:center; padding:8px 0 16px; }
.provenance-card { padding:24px; } .provenance-list { margin:0; padding:0; list-style:none; } .provenance-list li { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:15px 0; border-top:1px solid var(--border); } .provenance-list li:first-child { border-top:0; } .provenance-list dt { color:var(--muted); font-size:13px; } .provenance-list dd { margin:0; line-height:1.5; } code { font-family:ui-monospace,"Cascadia Code",monospace; color:#d8b9de; font-size:.9em; word-break:break-word; }
.drawer { width:min(780px,100%); max-width:780px; height:100%; max-height:100%; margin:0 0 0 auto; padding:0; border:1px solid var(--border); background:var(--raised); color:var(--text); box-shadow:-20px 0 60px rgba(0,0,0,.42); } .drawer::backdrop { background:rgba(8,5,12,.68); } .drawer-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:24px; border-bottom:1px solid var(--border); } .drawer-head h2 { margin:0; } .icon-button { width:40px; height:40px; flex:0 0 auto; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--text); font-size:26px; line-height:1; } .icon-button:hover { background:var(--accent-wash); } .drawer-body { height:calc(100vh - 112px); overflow:auto; padding:24px; } .detail-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; } .detail-fact { padding:13px; border:1px solid var(--border); border-radius:6px; background:var(--surface); } .detail-fact span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; } .detail-fact strong { font-size:13px; line-height:1.45; overflow-wrap:anywhere; } .detail-fact p { margin:0; color:var(--text); font-size:13px; line-height:1.55; overflow-wrap:anywhere; } .detail-section { margin-top:28px; } .detail-section > h3 { margin-bottom:12px; } .party-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .evidence-list,.attachment-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .evidence-list li,.attachment-list li { padding:12px; border-left:2px solid var(--accent); background:var(--surface); color:var(--muted); font-size:13px; line-height:1.45; } .attachment-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; } .attachment-list strong,.attachment-list span { display:block; overflow-wrap:anywhere; } .attachment-list p { grid-column:1/-1; margin:0; color:var(--quiet); } .button.compact { min-height:34px; padding:0 10px; } .thread { margin:0; padding:0; list-style:none; } .message-thread { display:grid; gap:10px; border:0; } .message-thread .message-card { padding:0; border:1px solid var(--border); border-radius:6px; background:var(--surface); } .message-thread .message-card::before { display:none; } .message-card details { padding:0; } .message-card summary { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px; cursor:pointer; list-style:none; } .message-card summary::-webkit-details-marker { display:none; } .message-card summary > span:first-child { min-width:0; } .message-card time,.message-card small { display:block; color:var(--quiet); font-size:12px; } .message-card strong { display:block; margin:4px 0; color:var(--text); overflow-wrap:anywhere; } .message-meta { display:grid; gap:4px; padding:12px 14px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; overflow-wrap:anywhere; } .message-card pre { max-height:440px; margin:0; padding:14px; overflow:auto; border-top:1px solid var(--border); background:var(--deep); color:var(--text); font:13px/1.55 ui-monospace,"Cascadia Code",monospace; white-space:pre-wrap; overflow-wrap:anywhere; } .message-card .text-link,.message-card .availability-note { display:block; margin:12px 14px 14px; font-size:12px; } .crm-event-card { border-left:2px solid var(--info)!important; } .crm-transcript,.crm-attachments { padding:14px; border-top:1px solid var(--border); } .crm-transcript h4 { margin:0 0 8px; } .crm-transcript pre { border:1px solid var(--border); border-radius:4px; } .availability-note,.empty-inline { color:var(--quiet); } .text-link { color:var(--accent-strong); }
.toast { position:fixed; right:20px; bottom:20px; max-width:min(390px,calc(100% - 40px)); padding:12px 14px; border:1px solid var(--border); border-radius:4px; background:#25202e; color:var(--text); box-shadow:var(--shadow); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .14s var(--ease),transform .14s var(--ease); } .toast.show { opacity:1; transform:none; } .sr-only { position:absolute; left:0; top:0; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
@keyframes page-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } } @media (max-width:920px) { .review-toolbar.three-columns { grid-template-columns:minmax(220px,1fr) 210px; } .review-toolbar.three-columns .search-field { grid-column:1/-1; } } @media (max-width:760px) { .app-shell { padding:0 16px 32px; } .topbar { min-height:64px; } .environment { font-size:12px; } main { padding-top:24px; } .page-heading,.scope-banner,.next-step { display:grid; } .metric-grid { grid-template-columns:repeat(2,1fr); } .metric { min-height:124px; padding:16px; } .metric strong { font-size:27px; } .toolbar,.review-toolbar,.review-toolbar.three-columns { grid-template-columns:1fr; } .review-toolbar.three-columns .search-field { grid-column:auto; } .review-grid { grid-template-columns:1fr; } .compact-row { grid-template-columns:minmax(0,1fr) auto; } .compact-row .meta { grid-column:1/-1; grid-row:2; } .detail-summary { grid-template-columns:1fr; } .provenance-list li { grid-template-columns:1fr; gap:5px; } .drawer-head,.drawer-body { padding:18px; } .drawer-body { height:calc(100vh - 100px); } }
@media (max-width:560px) { .party-grid { grid-template-columns:1fr; } .attachment-list li { grid-template-columns:1fr; } .attachment-list p { grid-column:auto; } .message-card summary { display:grid; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }