/* ───────────────────────────────────────────────────────────────────── Design language: HeroUI / NextUI + Claude.ai warmth Primary: violet-600 #7c3aed Surface: warm-white #f8f7f5 ───────────────────────────────────────────────────────────────────── */ #hitl-content { --p: #7c3aed; --p-50: #f5f3ff; --p-100: #ede9fe; --p-200: #ddd6fe; --p-400: #a78bfa; --p-600: #7c3aed; --p-700: #6d28d9; --p-900: #4c1d95; --bg: #f8f7f5; --surface: #ffffff; --surface-2: #fafaf8; /* deal-hub token bridge (left-nav component) */ --c-primary: #7c3aed; --c-primary-hover: #6d28d9; --c-primary-subtle: #f5f3ff; --c-primary-text: #6d28d9; --c-text: #111111; --c-text-secondary: #5a5a5a; --c-text-tertiary: #9a9a9a; --c-text-muted: #b0b0b0; --c-surface: #f8f7f5; --c-card: #ffffff; --c-border: rgba(0,0,0,.08); --c-border-light: rgba(0,0,0,.04); --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --r-sm: 8px; --r-md: 12px; --r-pill: 999px; --border: rgba(0,0,0,.08); --border-2: rgba(0,0,0,.12); --text: #111111; --text-2: #5a5a5a; --text-3: #9a9a9a; --text-inv: #ffffff; --success: #059669; --success-50:#ecfdf5; --success-100:#d1fae5; --danger: #dc2626; --danger-50: #fef2f2; --danger-100:#fee2e2; --danger-200:#fecaca; --warn: #d97706; --warn-50: #fffbeb; --warn-100: #fef3c7; --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); --shadow: 0 4px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } #hitl-content *, #hitl-content *::before, #hitl-content *::after { box-sizing: border-box; margin: 0; padding: 0; } #hitl-content { height: 100%; overflow: hidden; } #hitl-content { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; display: flex; height: 100vh; } #hitl-content button, #hitl-content input, #hitl-content select, #hitl-content textarea { font: inherit; } #hitl-content button { cursor: pointer; border: none; background: none; } /* ── LEFT NAV ─────────────────────────────────────────────────────────── */ #hitl-content .left-nav { width: 240px; background: #f8f9fa; border-right: 1px solid var(--c-border); display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; overflow: hidden; transition: width .22s ease, border-color .22s ease; } #hitl-content .left-nav.is-nav-collapsed { width: 60px; } /* Expand-hint — swap logo for arrow on hover, no dark overlay */ #hitl-content .brand-expand-hint { display: none; position: absolute; inset: 0; border-radius: 10px; align-items: center; justify-content: center; color: #fff; } #hitl-content .left-nav.is-nav-collapsed .left-nav-brand { padding: 0; justify-content: center; gap: 0; cursor: default; } #hitl-content .left-nav.is-nav-collapsed .brand-name { display: none; } #hitl-content .left-nav.is-nav-collapsed .left-nav-actions { display: none; } /* Logo becomes clickable expand trigger */ #hitl-content .left-nav.is-nav-collapsed .brand-logo { position: relative; cursor: pointer; } #hitl-content .left-nav.is-nav-collapsed .brand-logo:hover > svg { opacity: 0; } #hitl-content .left-nav.is-nav-collapsed .brand-logo:hover .brand-expand-hint { display: flex; } /* Minimised: nav items — icon only, centred */ #hitl-content .left-nav.is-nav-collapsed .left-nav-item { padding: 0; justify-content: center; } #hitl-content .left-nav.is-nav-collapsed .left-nav-item > span { display: none; } /* Grouped items: collapse the inner group div so the icon centres properly */ #hitl-content .left-nav.is-nav-collapsed .left-nav-group { width: auto; justify-content: center; } #hitl-content .left-nav.is-nav-collapsed .left-nav-group-label { gap: 0; } #hitl-content .left-nav.is-nav-collapsed .left-nav-group-label > span { display: none; } #hitl-content .left-nav.is-nav-collapsed .left-nav-item-caret { display: none; } #hitl-content .left-nav.is-nav-collapsed .left-nav-sub { display: none !important; margin: 0; } #hitl-content .left-nav.is-nav-collapsed .left-nav-items { gap: 4px; } /* Remove focus ring on nav action buttons — use subtle highlight instead */ #hitl-content .left-nav-action:focus { outline: none; } #hitl-content .left-nav-action:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } /* Minimised: footer */ #hitl-content .left-nav.is-nav-collapsed .left-nav-footer { padding: var(--sp-12) 0; align-items: center; } #hitl-content .left-nav.is-nav-collapsed .left-nav-user { flex-direction: column; align-items: center; gap: 6px; } #hitl-content .left-nav.is-nav-collapsed .left-nav-user > div:not(.left-nav-avatar) { display: none; } #hitl-content .left-nav.is-nav-collapsed .left-nav-bell { margin-left: 0; } #hitl-content .left-nav-top { padding: var(--sp-12) 0 0; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } #hitl-content .left-nav-brand { height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-8); padding: 0 var(--sp-16); color: var(--c-text); } #hitl-content .left-nav-brand-main { display: flex; align-items: center; gap: 10px; min-width: 0; } #hitl-content .brand-logo { width: 34px; height: 34px; border-radius: 10px; background: #0f172a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; padding: 0; cursor: pointer; } #hitl-content .brand-name { font-size: 15px; font-weight: 600; color: var(--c-text); letter-spacing: -.02em; } #hitl-content .left-nav-actions { display: flex; align-items: center; gap: var(--sp-8); margin-left: auto; } #hitl-content .left-nav-action { width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-tertiary); border: none; transition: background .12s; } #hitl-content .left-nav-action:hover { background: #e8eaed; } #hitl-content .left-nav-icon-svg { width: 18px; height: 18px; color: currentColor; flex-shrink: 0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #hitl-content .left-nav-action .left-nav-icon-svg { width: 18px; height: 18px; } #hitl-content .left-nav-items { margin-top: var(--sp-12); flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--sp-8); } #hitl-content .left-nav-items::-webkit-scrollbar { width: 4px; } #hitl-content .left-nav-items::-webkit-scrollbar-track { background: transparent; } #hitl-content .left-nav-items::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } #hitl-content .left-nav-item { position: relative; display: flex; align-items: center; gap: var(--sp-12); height: 40px; padding: 0 var(--sp-16) 0 var(--sp-20); color: var(--c-text-secondary); font-size: 14px; line-height: 1; text-decoration: none; font-weight: 500; border-radius: 0; transition: background .12s, color .12s; } #hitl-content .left-nav-item:hover { background: rgba(0,0,0,.04); color: var(--c-text); } #hitl-content .left-nav-item.active { background: var(--c-primary-subtle); color: var(--c-primary); } #hitl-content .left-nav-item.active::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-primary); } #hitl-content .left-nav-item .left-nav-icon-svg { width: 20px; height: 20px; } #hitl-content .left-nav-item.active .left-nav-icon-svg { color: var(--c-primary); } #hitl-content .left-nav-item-caret { margin-left: auto; color: var(--c-text-tertiary); display: inline-flex; align-items: center; } #hitl-content .left-nav-item-caret .left-nav-icon-svg { width: 16px; height: 16px; transition: transform .16s ease; } #hitl-content .left-nav-group-wrap.is-collapsed .left-nav-item-caret .left-nav-icon-svg { transform: rotate(-90deg); } #hitl-content .left-nav-group { display: flex; align-items: center; justify-content: space-between; width: 100%; } #hitl-content .left-nav-group-wrap { display: flex; flex-direction: column; } #hitl-content .left-nav-group-label { display: inline-flex; align-items: center; gap: var(--sp-8); min-width: 0; color: inherit; text-decoration: none; } #hitl-content .left-nav-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; } #hitl-content .left-nav-sub { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-4) 0 var(--sp-8) 36px; max-height: 1000px; opacity: 1; overflow: hidden; transition: max-height .25s ease, opacity .12s ease, margin .12s ease; } #hitl-content .left-nav-group-wrap.is-collapsed .left-nav-sub { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; } #hitl-content .left-nav-sub-item { display: flex; align-items: center; gap: var(--sp-8); height: 32px; color: var(--c-text-tertiary); font-size: 13px; text-decoration: none; border-radius: 6px; padding: 0 var(--sp-12); transition: background .12s, color .12s; } #hitl-content .left-nav-sub-item:hover { background: rgba(0,0,0,.04); color: var(--c-text-secondary); } #hitl-content .left-nav-dot { color: var(--c-text-muted); font-size: 14px; line-height: 1; } #hitl-content .left-nav-footer { padding: var(--sp-12) var(--sp-16); border-top: 1px solid var(--c-border); position: relative; display: flex; flex-direction: column; } #hitl-content .left-nav-user { display: flex; align-items: center; gap: 10px; color: var(--c-text); position: relative; } #hitl-content .left-nav-avatar { width: 36px; height: 36px; border-radius: 10px; background: #dde1e7; color: var(--c-text-secondary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } #hitl-content .left-nav-user-name { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--c-text); } #hitl-content .left-nav-user-org { font-size: 11px; color: var(--c-text-tertiary); line-height: 1.2; margin-top: 2px; } #hitl-content .left-nav-bell { margin-left: auto; width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-secondary); position: relative; transition: background .12s; } #hitl-content .left-nav-bell:hover { background: rgba(0,0,0,.04); } #hitl-content .left-nav-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid #f8f9fa; } /* ── APP SHELL ───────────────────────────────────────────────────────── */ #hitl-content .app { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg); } /* Prototype role bar */ #hitl-content .proto-bar { background: linear-gradient(180deg, #121318 0%, #0f1115 100%); border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 14px; height: 40px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } #hitl-content .proto-lbl { font-size: 10px; font-weight: 700; color: #cbd5e1; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 8px; line-height: 1; } #hitl-content .proto-sep { color: #475569; font-size: 11px; margin: 0 2px; } #hitl-content .proto-select { background: rgba(255,255,255,.06); color: #e2e8f0; border: 1px solid rgba(148,163,184,.34); border-radius: 8px; padding: 4px 10px; font-size: 11px; font-weight: 600; outline: none; cursor: pointer; } #hitl-content .proto-select:focus { border-color: var(--p-400); box-shadow: 0 0 0 2px rgba(124,58,237,.26); } /* Role-switch nudge shown when stage = Returned for Correction & role = approver */ #hitl-content .proto-nudge { display: none; align-items: center; gap: 5px; background: rgba(124,58,237,.22); color: #ddd6fe; border: 1px solid rgba(124,58,237,.4); border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; cursor: pointer; animation: nudge-pulse 1.8s ease-in-out infinite; } #hitl-content .proto-nudge.show { display: inline-flex; } #hitl-content .proto-nudge:hover { background: rgba(124,58,237,.35); } @keyframes nudge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } } #hitl-content .proto-right { margin-left: auto; display: flex; gap: 8px; align-items: center; } #hitl-content .proto-history { height: 26px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.06); color: #cbd5e1; border: 1px solid rgba(148,163,184,.32); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; transition: background .12s, border-color .12s; } #hitl-content .proto-history:hover { background: rgba(255,255,255,.1); border-color: rgba(148,163,184,.45); } #hitl-content .proto-right .badge { border: 1px solid rgba(255,255,255,.14); font-size: 10px; padding: 3px 9px; } #hitl-content .proto-right .badge.b-review { background: rgba(124,58,237,.22); color: #ddd6fe; } #hitl-content .proto-right .badge.b-pending { background: rgba(217,119,6,.2); color: #fde68a; } #hitl-content .proto-right .badge.b-changes { background: rgba(220,38,38,.22); color: #fecaca; } #hitl-content .proto-right .badge.b-approved { background: rgba(5,150,105,.22); color: #a7f3d0; } #hitl-content .proto-right .badge .bdot { opacity: .95; } /* Top bar — merged with page header */ #hitl-content .topbar { height: 44px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; flex-shrink: 0; gap: 10px; } #hitl-content .breadcrumb { display: flex; align-items: center; gap: 7px; } #hitl-content .bc-part { font-size: 13px; color: var(--text-3); font-weight: 400; text-decoration: none; } #hitl-content .bc-part:is(a):hover { color: var(--p); text-decoration: underline; } #hitl-content .bc-sep { font-size: 13px; color: var(--text-3); } /* nowrap: a crumb like "Connectors · Nexus" must truncate, never wrap mid-crumb */ #hitl-content .bc-part.cur { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Topbar breadcrumb — current node (name + id handle) · type tag */ #hitl-content .bc-exec-crumb { display: inline-flex; align-items: center; gap: 8px; } /* Dynamic breadcrumb-tail mount points (renderPipeBreadcrumbTail): plain children of a flex-item span don't inherit .breadcrumb's gap, so these need their own — same fix .bc-exec-crumb already applies above. */ #reviewCrumbDdSlot, #outputCrumbDdSlot { display: inline-flex; align-items: center; gap: 7px; } /* Current location — ends the trail; not a link */ #hitl-content .bc-exec-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; } /* When the execution is an intermediate crumb (e.g. Output summary view), it links to its review screen */ #hitl-content a.bc-exec-name { text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; } #hitl-content a.bc-exec-name:hover { color: var(--p); text-decoration-color: var(--p); } /* Execution ref — a quiet handle attached to the current node, not its own crumb */ #hitl-content .bc-exec-id { font-size: 12px; font-weight: 500; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-2); white-space: nowrap; background: #ececea; border-radius: 4px; padding: 1px 6px; } /* Divider that lifts the type tag out of the breadcrumb trail */ #hitl-content .bc-exec-tagsep { width: 1px; height: 14px; background: var(--border-2); flex-shrink: 0; } #hitl-content .bc-exec-sep { font-size: 11px; color: var(--border-2); } #hitl-content .wct-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 2px 6px; line-height: 1.4; white-space: nowrap; flex-shrink: 0; } #hitl-content .wct-transaction { background: #ede9fe; color: #6d28d9; } #hitl-content .wct-deal { background: #dbeafe; color: #1d4ed8; } #hitl-content .topbar-sep { width: 1px; height: 18px; background: var(--border-2); flex-shrink: 0; } #hitl-content .topbar-page-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.02em; white-space: nowrap; } #hitl-content .topbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; } /* ── Disabled-button tooltip wrapper ───────────────────────────────── */ #hitl-content .btn-tip { position: relative; display: inline-flex; } /* Viewport-layer tooltip (dynamic placement) */ #hitl-content .dyn-tip { position: fixed; top: 0; left: 0; transform: translate(-9999px, -9999px); background: #1c1c1e; color: #f4f4f5; font-size: 11px; font-weight: 500; white-space: normal; width: max-content; max-width: min(28ch, calc(100vw - 18px)); line-height: 1.35; text-wrap: pretty; overflow-wrap: anywhere; hyphens: auto; padding: 5px 10px; border-radius: 7px; pointer-events: none; z-index: 10000; box-shadow: 0 2px 8px rgba(0,0,0,.22); opacity: 0; transition: opacity .08s; } @media (max-width: 1440px){ #hitl-content .dyn-tip { max-width: min(24ch, calc(100vw - 16px)); } } #hitl-content .dyn-tip.show { opacity: 1; } /* ── BUTTONS (HeroUI) ────────────────────────────────────────────────── */ #hitl-content .btn { border-radius: var(--radius-sm); padding: 0 16px; height: 36px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; transition: opacity .12s, background .12s, box-shadow .12s, transform .06s; white-space: nowrap; line-height: 1; } #hitl-content .btn:hover:not(:disabled) { opacity: .87; } #hitl-content .btn:active:not(:disabled) { transform: scale(.975); } #hitl-content .btn:disabled { opacity: .35; cursor: not-allowed; } #hitl-content .btn-primary { background: var(--p-600); color: white; box-shadow: 0 2px 6px rgba(124,58,237,.3); } #hitl-content .btn-primary:hover:not(:disabled) { background: var(--p-700); opacity: 1; } #hitl-content .btn-ghost { background: rgba(0,0,0,.05); color: var(--text-2); } #hitl-content .btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,.08); opacity: 1; } #hitl-content .btn-outline { background: transparent; border: 1.5px solid var(--border-2); color: var(--text-2); } #hitl-content .btn-outline:hover:not(:disabled) { background: rgba(0,0,0,.04); opacity: 1; } #hitl-content .btn-flat { background: var(--p-100); color: var(--p-700); } #hitl-content .btn-flat:hover:not(:disabled) { background: var(--p-200); opacity: 1; } #hitl-content .btn-danger { background: var(--danger-100); color: var(--danger); border: 1px solid var(--danger-200); } #hitl-content .btn-danger:hover:not(:disabled) { background: var(--danger-200); opacity: 1; } #hitl-content .btn-danger-solid { background: var(--danger); color: white; box-shadow: 0 2px 6px rgba(220,38,38,.25); } #hitl-content .btn-danger-solid:hover:not(:disabled) { background: #b91c1c; opacity: 1; } #hitl-content .btn-success { background: var(--success-50); color: var(--success); border: 1px solid var(--success-100); } #hitl-content .btn-success:hover:not(:disabled) { background: var(--success-100); opacity: 1; } #hitl-content .btn-sm { height: 30px; padding: 0 12px; font-size: 12px; } #hitl-content .btn-xs { height: 26px; padding: 0 10px; font-size: 11px; border-radius: 6px; } /* ── BADGES ───────────────────────────────────────────────────────────── */ #hitl-content .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; } #hitl-content .bdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #hitl-content .b-review { background: var(--p-100); color: var(--p-700); } #hitl-content .b-review .bdot { background: var(--p-600); } #hitl-content .b-pending { background: var(--warn-100); color: #92400e; } #hitl-content .b-pending .bdot { background: var(--warn); } #hitl-content .b-changes { background: var(--danger-100); color: var(--danger); } #hitl-content .b-changes .bdot { background: var(--danger); } #hitl-content .b-approved { background: var(--success-100);color: var(--success); } #hitl-content .b-approved .bdot { background: var(--success); } /* ── STEP TITLE ROW (replaces wizard) ────────────────────────────────── */ #hitl-content .stepper-row { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 20px; min-height: 40px; display: flex; align-items: center; flex-shrink: 0; } #hitl-content .step-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .01em; } #hitl-content .step-title-wrap { display: inline-flex; align-items: center; gap: 10px; } #hitl-content .step-field-count { font-size: 12px; font-weight: 600; color: var(--c-text-tertiary); background: rgba(0,0,0,.05); border-radius: 999px; padding: 2px 8px; letter-spacing: .01em; } /* .page-header removed — content merged into .topbar */ #hitl-content .step-circle { width: 24px; height: 24px; border-radius: 50%; background: var(--p-600); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } #hitl-content .human-chip { background: rgba(0,0,0,.05); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; color: var(--text-3); } #hitl-content .page-actions { display: flex; gap: 6px; align-items: center; } /* ── INLINE BANNERS ──────────────────────────────────────────────────── */ #hitl-content .inline-banner { margin: 10px 8px; border-radius: var(--radius-sm); padding: 9px 14px; display: none; font-size: 12px; line-height: 1.5; } #hitl-content .inline-banner.show { display: block; } #hitl-content #rejBannerBody, #hitl-content #corrBannerBody { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } #hitl-content .ib-warn { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; } #hitl-content .ib-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #065f46; } #hitl-content .ib-title { font-weight: 700; font-size: 12px; white-space: nowrap; flex-shrink: 0; } #hitl-content .ib-msg { flex: 1; min-width: 0; color: inherit; } /* Unlock-pulse on re-submit button */ @keyframes btn-unlock-pulse { 0% { box-shadow: 0 0 0 0 rgba(124,58,237,.55); transform: scale(1); } 40% { box-shadow: 0 0 0 6px rgba(124,58,237,.0); transform: scale(1.04); } 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.0); transform: scale(1); } } #hitl-content .btn-unlock-pulse { animation: btn-unlock-pulse .55s ease-out; } /* DIFF STRIP */ #hitl-content .diff-strip { margin: 6px 20px 0; border-radius: var(--radius-sm); border: 1px solid var(--success-100); background: var(--success-50); display: none; overflow: hidden; } #hitl-content .diff-strip.show { display: block; } #hitl-content .diff-strip-head { padding: 8px 14px; background: var(--success-100); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--success); } #hitl-content .diff-tbl { width: 100%; border-collapse: collapse; } #hitl-content .diff-tbl th { font-size: 11px; font-weight: 600; color: #374151; padding: 6px 14px 4px; text-align: left; border-bottom: 1px solid var(--success-100); } #hitl-content .diff-tbl td { font-size: 12px; padding: 5px 14px; border-bottom: 1px solid var(--success-100); } #hitl-content .d-before { color: var(--danger); text-decoration: line-through; opacity: .75; } #hitl-content .d-after { color: var(--success); font-weight: 600; } /* ── WORKSPACE ────────────────────────────────────────────────────────── */ #hitl-content .workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 1fr) 6px minmax(340px, 480px); grid-template-rows: 1fr; overflow: hidden; } /* ── FIELDS PANEL ────────────────────────────────────────────────────── */ #hitl-content .fields-panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; background: var(--surface-2); } #hitl-content .fp-toolbar { height: 46px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } #hitl-content .fp-title { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; min-width: 0; } #hitl-content .panel-title-icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: var(--p-50); color: var(--p-600); display: flex; align-items: center; justify-content: center; border: none; padding: 0; font: inherit; } #hitl-content .panel-title-icon.is-back { cursor: pointer; } #hitl-content .panel-title-icon.is-back:hover { background: var(--p-100); color: var(--p-700); } #hitl-content .panel-title-icon:focus-visible { outline: 2px solid var(--p-600); outline-offset: 2px; border-radius: 4px; } #hitl-content .fp-title-trail { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; } #hitl-content .fp-title-crumb { font-size: inherit; font-weight: inherit; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--text); } #hitl-content .fp-title-crumb-link { border: none; background: none; padding: 2px 4px; border-radius: 4px; color: var(--text); cursor: pointer; font-size: inherit; font-weight: inherit; line-height: 1.2; transition: background .1s, color .1s; } #hitl-content .fp-title-crumb-link:hover { background: rgba(0,0,0,.05); color: var(--text); } #hitl-content .fp-title-crumb-active { color: var(--text); font-size: inherit; font-weight: inherit; } #hitl-content .fp-title-sep { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--text-3); font-size: 13px; line-height: 1; flex-shrink: 0; opacity: .8; } #hitl-content .fp-toolbar .step-field-count { flex-shrink: 0; } @media (max-width: 1100px){ #hitl-content .fp-title-crumb { max-width: 150px; } } #hitl-content .fp-spacer { flex: 1; } #hitl-content .pill-btn { height: 26px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--surface); font-size: 11px; font-weight: 600; color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background .1s; } #hitl-content .pill-btn:hover { background: rgba(0,0,0,.04); } #hitl-content .fields-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding-bottom: 72px; } #hitl-content .fields-list.panel-swap-enter { animation: panel-swap-enter .18s ease-out; } @keyframes panel-swap-enter { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── FIELD ROW (edge-to-edge, Figma style) ──────────────────────────── */ #hitl-content .field-card { background: var(--surface); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; overflow: visible; cursor: default; transition: background .12s, border-left-color .12s; } /* Neutral field hover — warm brand accent, not cold grey */ #hitl-content .field-card:not(.approved):not(.rejected):not(.reviewer-updated):not(.accepted):hover { background: rgba(0,0,0,.025); border-left-color: #3f3f46; } #hitl-content .field-card:not(.approved):not(.rejected):not(.reviewer-updated):not(.accepted):has(.ft.show) { background: rgba(0,0,0,.012); border-left-color: #3f3f46; } /* State-coloured fields */ #hitl-content .field-card.approved { border-left-color: var(--p-600); background: var(--p-50); } #hitl-content .field-card.rejected { border-left-color: var(--danger); background: #fff7f7; } #hitl-content .field-card.rejecting { border-left-color: var(--danger); } #hitl-content .field-card.reviewer-updated { border-left-color: #059669; background: #f4fbf6; } #hitl-content .field-card.accepted { border-left-color: #7ec8d8; background: #f6fcfd; } /* Hover: explicitly keep + deepen the signature border colour — never grey */ #hitl-content .field-card.approved:hover { background: var(--p-100); border-left-color: var(--p-700); } #hitl-content .field-card.rejected:hover { background: #feecec; border-left-color: #b91c1c; } #hitl-content .field-card.rejecting:hover { background: #fff7f7; border-left-color: var(--danger); } #hitl-content .field-card.reviewer-updated:hover { background: #ebf7ef; border-left-color: #047857; } #hitl-content .field-card.accepted:hover { background: #eef8fb; border-left-color: #5b9fae; } #hitl-content .field-card.reviewer-updated .field-val { color: var(--text); } #hitl-content .field-inner { padding: 7px 12px 7px 11px; display: flex; align-items: flex-start; gap: 8px; } #hitl-content .field-body { flex: 1; min-width: 0; } #hitl-content .field-key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; } #hitl-content .field-key { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } #hitl-content .field-top-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } #hitl-content .field-meta-sep { width: 1px; height: 14px; background: var(--border-2); opacity: .75; flex-shrink: 0; } #hitl-content .field-top-actions { display: inline-flex; align-items: center; gap: 4px; } /* Reviewer accept+note zone: collapses to zero width at rest, slides in on hover */ #hitl-content .field-accept-zone { display: inline-flex; align-items: center; gap: 5px; padding-left: 0; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .2s ease, opacity .15s; pointer-events: none; } #hitl-content .field-card:hover .field-accept-zone { max-width: 120px; opacity: 1; pointer-events: auto; padding-left: 6px; } #hitl-content .field-accept-zone:has(.field-action-accept.active) { max-width: 120px; opacity: 1; pointer-events: auto; padding-left: 6px; } #hitl-content .rej-badge, #hitl-content .apr-badge, #hitl-content .cor-badge, #hitl-content .upd-badge, #hitl-content .acc-badge, #hitl-content .ext-badge { display: none; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } #hitl-content .rej-badge { background: var(--danger); color: white; } #hitl-content .apr-badge { background: var(--p-600); color: white; } #hitl-content .cor-badge { background: #16a34a; color: white; } #hitl-content .upd-badge { background: #059669; color: white; } #hitl-content .acc-badge { background: #a8d8e8; color: #164e63; } #hitl-content .ext-badge { background: #f4f4f5; color: #52525b; border: 1px solid #d4d4d8; font-weight: 700; } #hitl-content .nf-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; } #hitl-content .field-card.rejected .rej-badge { display: inline-flex; } #hitl-content .field-card.approved .apr-badge { display: inline-flex; } #hitl-content .field-card.reviewer-updated .upd-badge { display: inline-flex; } #hitl-content .field-card.accepted .acc-badge { display: inline-flex; } #hitl-content .field-card.extracted .ext-badge { display: inline-flex; } /* Manual badge is source provenance — irrelevant once approved, hide it */ /* Manual source badge — identical quiet treatment to the AI-Captured badge, and same visibility rules: shown at rest, hidden once the field resolves */ #hitl-content .src-manual-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #f4f4f5; color: #52525b; border: 1px solid #d4d4d8; } #hitl-content .field-card.approved .src-manual-badge, #hitl-content .field-card.rejected .src-manual-badge, #hitl-content .field-card.accepted .src-manual-badge, #hitl-content .field-card.reviewer-updated .src-manual-badge { display: none; } /* Nested rollup: manual badge in ns-chip size */ #hitl-content .src-manual-badge.ns-chip { font-size: 9px; padding: 2px 6px; border-radius: 999px; } /* Helper text tooltip button — inline ⓘ next to field label */ .field-helper-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin-left: 3px; background: none; border: none; cursor: pointer; color: var(--text-3, #94a3b8); font-size: 11px; line-height: 1; border-radius: 50%; vertical-align: middle; flex-shrink: 0; } .field-helper-btn:hover { color: var(--p-600, #4f46e5); background: rgba(79,70,229,.07); } #hitl-content .field-action-accept { color: #0891b2; } #hitl-content .field-action-accept:hover { background: #ecfeff; border-color: #a5f3fc; } #hitl-content .field-action-accept.active { color: white; background: #0891b2; border-color: #0891b2; box-shadow: 0 0 0 2px rgba(8,145,178,.14); } #hitl-content .field-action-accept { font-size: 13px; font-weight: 700; } #hitl-content .field-action-note { color: var(--text-2); } #hitl-content .field-action-note:hover { background: rgba(0,0,0,.06); } /* Height normalisation: .field-val always reserves the same vertical space as .field-val-wrap (margin 1px + border 1.5px + padding 3px each side). This keeps all field cards the same height regardless of editable state. */ #hitl-content .field-val { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; margin-top: 1px; padding: 3px 0; border: 1.5px solid transparent; border-radius: 5px; } #hitl-content .field-val--not-found { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-style: italic; font-weight: 400; font-size: 13px; } #hitl-content .field-val--manual-empty { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-style: italic; font-weight: 400; font-size: 13px; } #hitl-content .field-val--manual-empty svg { flex-shrink: 0; opacity: .6; } #hitl-content .field-source-badge--manual { display: inline-flex; align-items: center; background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 999px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; margin-left: 6px; vertical-align: middle; } #hitl-content .field-val-wrap--not-found { cursor: text; } #hitl-content .field-card.editable .field-val-wrap--not-found:hover .field-val--not-found { color: var(--text-2); } /* Inside the click-to-edit wrapper the wrapper itself provides this space */ #hitl-content .field-val-wrap .field-val { margin-top: 0; padding: 0; border: none; border-radius: 0; } #hitl-content .field-card.rejected .field-val { color: var(--text-2); } #hitl-content .field-card.approved .field-val { color: var(--p-900); } /* Click-to-edit value affordance */ #hitl-content .field-val-wrap { border-radius: 5px; border: 1.5px solid transparent; padding: 3px 6px; margin: 1px -6px 0; transition: border-color .14s, background .14s; display: block; width: calc(100% + 12px); } #hitl-content .field-card.editable .field-val-wrap { cursor: text; } #hitl-content .field-card.editable .field-val-wrap:hover { border-color: rgba(0,0,0,.18); background: rgba(255,255,255,.85); } #hitl-content .field-card.editable.rejected .field-val-wrap:hover { border-color: rgba(220,38,38,.3); background: rgba(255,255,255,.7); } #hitl-content .field-action { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; cursor: pointer; border: 1px solid transparent; background: transparent; transition: transform .08s, background .12s, border-color .12s, color .12s, box-shadow .12s; } #hitl-content .field-action:active { transform: scale(.94); } #hitl-content .field-action-approve { color: var(--p-600); } #hitl-content .field-action-approve:hover { background: var(--p-100); border-color: var(--p-200); } #hitl-content .field-action-approve.active { color: white; background: var(--p-600); border-color: var(--p-600); box-shadow: 0 0 0 2px rgba(124,58,237,.14); } #hitl-content .field-action-reject { color: var(--danger); } #hitl-content .field-action-reject:hover { background: var(--danger-100); border-color: var(--danger-200); } #hitl-content .field-action-reject.active { color: white; background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 2px rgba(220,38,38,.14); } #hitl-content .correct-field-btn { height: 22px; padding: 0 8px; border-radius: 6px; background: #dcfce7; color: #166534; border: 1px solid #86efac; font-size: 10px; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 3px; } #hitl-content .correct-field-btn:hover { background: #bbf7d0; } /* Field trust metadata (citations + confidence) */ #hitl-content .field-trust { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; } #hitl-content .field-card.editing .field-trust { display: none; } #hitl-content .citations-row { display: inline-flex; align-items: center; gap: 2px; } #hitl-content .citation-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 4px; padding: 0 3px; background: #6b7280; color: #ffffff; border: none; font-size: 9px; font-weight: 700; flex-shrink: 0; } #hitl-content .conf-badge { display: inline-flex; align-items: center; gap: 3px; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 600; flex-shrink: 0; } #hitl-content .conf-high { background: #dcfce7; color: #166534; } #hitl-content .conf-medium { background: #fef9c3; color: #854d0e; } #hitl-content .conf-low { background: var(--danger-100); color: var(--danger); } /* Compact source pill (collapses per-page citation chips into one) — clickable: jumps the source-document panel to the cited page(s). */ #hitl-content .src-pill { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 5px 0 4px; border-radius: 4px; background: #eef1f4; color: #475569; border: 1px solid #e2e8f0; font-size: 10px; font-weight: 700; flex-shrink: 0; cursor: pointer; font-family: inherit; } #hitl-content .src-pill:hover, #hitl-content .src-pill.is-open { background: #e2e8f0; color: #1e293b; } #hitl-content .src-pill svg { opacity: .65; } #hitl-content .src-pill-count { line-height: 1; } /* Hover tooltips on citation chips and confidence badges */ #hitl-content .citation-chip, #hitl-content .conf-badge, #hitl-content .src-pill { position: relative; overflow: visible; } #hitl-content .field-edit-indicator { display: inline-flex; align-items: center; gap: 3px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 999px; padding: 1px 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; } #hitl-content .restore-btn { height: 20px; padding: 0 7px; border-radius: 4px; background: rgba(0,0,0,.04); color: var(--text-3); border: 1px solid var(--border); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; transition: background .1s, color .1s; flex-shrink: 0; } #hitl-content .restore-btn:hover { background: rgba(0,0,0,.07); color: var(--text); } /* ── FIELD THREAD (chat bubble style) ───────────────────────────────── */ #hitl-content .ft-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 2px 12px 8px; letter-spacing: .01em; } #hitl-content .ft-toggle:hover { color: var(--text-2); } /* Field comment icon button (icon-only, no text label) */ #hitl-content .field-cmt-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-3); opacity: 0.35; transition: opacity .15s, background .1s, color .1s, border-color .1s; flex-shrink: 0; } #hitl-content .field-card:hover .field-cmt-btn { opacity: 1; } #hitl-content .field-cmt-btn.has-comments { opacity: 1; color: var(--text-2); } #hitl-content .field-cmt-btn.has-unread { color: var(--p-600); opacity: 1; } #hitl-content .field-cmt-btn:hover { background: rgba(0,0,0,.05); border-color: var(--border); color: var(--text-2); opacity: 1; } #hitl-content .field-cmt-btn.is-active { color: var(--p-600); background: var(--p-50); border-color: var(--p-200); opacity: 1; } /* Unread badge — solid purple dot, attention-grabbing */ #hitl-content .fcb-count { position: absolute; top: -4px; right: -5px; background: var(--p-600); color: white; border-radius: 999px; font-size: 9px; font-weight: 700; min-width: 14px; height: 14px; padding: 0 3px; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; box-shadow: 0 0 0 1.5px var(--surface); } /* Read badge — muted grey outline, informational not alarming */ #hitl-content .fcb-count.is-read { background: var(--surface); color: var(--text-3); border: 1.5px solid var(--border-2); box-shadow: none; font-weight: 600; } #hitl-content .field-cmt-btn + .field-trust { margin-left: 0; } #hitl-content .nest-cmt-indicator { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-3); background: rgba(255,255,255,.82); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; flex-shrink: 0; } #hitl-content .nest-cmt-indicator .nest-cmt-count { font-size: 10px; font-weight: 600; color: inherit; line-height: 1; } #hitl-content .nest-cmt-indicator.has-unread { color: var(--p-700); border-color: var(--p-200); background: var(--p-50); } #hitl-content .nest-cmt-dot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 999px; background: var(--p-600); box-shadow: 0 0 0 1.5px var(--surface); pointer-events: none; } /* Toggle with notes — make it obvious */ #hitl-content .ft-toggle.has-notes { color: var(--text-2); font-weight: 700; } #hitl-content .ft-toggle.has-notes::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--p-600); flex-shrink: 0; } #hitl-content .ft { display: none; flex-direction: column; border-top: 1.5px solid rgba(0,0,0,.09); background: transparent; padding: 8px 14px 4px; } #hitl-content .ft.show { display: flex; } /* Each message row */ /* ── COMMENT rows (human messages) ──────────────────────────────────── */ #hitl-content .ft-msg { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; } #hitl-content .ft-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; margin-top: 1px; } #hitl-content .ft-avatar.approver { background: var(--warn-100); color: #78350f; } #hitl-content .ft-avatar.reviewer { background: var(--p-100); color: var(--p-700); } #hitl-content .ft-bwrap { flex: 1; min-width: 0; } #hitl-content .ft-meta { font-size: 11px; color: var(--text-3); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; } #hitl-content .ft-name { font-weight: 700; color: var(--text-2); font-size: 12px; } #hitl-content .ft-time { opacity: .65; font-size: 10px; } /* Comment bubble */ #hitl-content .ft-bubble { display: block; max-width: 100%; background: #ffffff; border-radius: 2px 10px 10px 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.55; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.04); } /* ft-tag and ft-bwrap left-borders no longer used — kept for compat */ #hitl-content .ft-tag { display: none; } #hitl-content .ft-bwrap:has(.ft-bubble-rej) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-cor) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-acc) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-unacc) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-apr) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-unapr) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-edit) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-restore) { border-left: none; padding-left: 0; } #hitl-content .ft-bwrap:has(.ft-bubble-msg) { border-left: none; padding-left: 0; } /* ── ACTIVITY rows (system events) ───────────────────────────────────── */ #hitl-content .ft-activity { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 6px 10px; border-left: 3px solid transparent; transition: background .15s; } #hitl-content .ft-activity:hover { background: rgba(0,0,0,.02); } /* Row accent variants */ #hitl-content .ft-activity--apr { background: #ffffff; border-left-color: var(--p-600); } #hitl-content .ft-activity--rej { background: #ffffff; border-left-color: #ef4444; } #hitl-content .ft-activity--edit { background: #ffffff; border-left-color: #34d399; } #hitl-content .ft-activity--rest { background: #ffffff; border-left-color: #60a5fa; } #hitl-content .ft-activity--acc { background: #ffffff; border-left-color: #22d3ee; } #hitl-content .ft-activity--neut { background: #ffffff; border-left-color: #d1d5db; } #hitl-content .ft-act-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 800; } #hitl-content .ft-act-body { flex: 1; min-width: 0; } #hitl-content .ft-act-line { font-size: 12.5px; color: #374151; line-height: 1.5; } #hitl-content .ft-act-line strong { font-weight: 600; color: #111827; } #hitl-content .ft-act-line .ft-act-time { color: #9ca3af; font-size: 11px; margin-left: 6px; } #hitl-content .ft-act-diff { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; background: rgba(0,0,0,.03); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; } #hitl-content .ft-act-diff .ft-old { color: #b91c1c; text-decoration: line-through; opacity: .75; } #hitl-content .ft-act-diff .ft-new { color: #166534; font-weight: 600; } #hitl-content .ft-act-diff .ft-arrow { color: var(--text-3); font-size: 10px; } /* Activity row tag badges */ #hitl-content .ft-act-tag { display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 2px 7px; flex-shrink: 0; letter-spacing: .01em; } #hitl-content .ft-act-tag-rej { background: #fee2e2; color: #b91c1c; } /* Rejection reason block — styled like diff but red-tinted */ #hitl-content .ft-rej-reason { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-top: 4px; background: #fff1f2; border-radius: 6px; padding: 5px 9px; font-size: 11.5px; color: #991b1b; line-height: 1.5; } #hitl-content .ft-rej-reason-lbl { font-weight: 700; color: #b91c1c; flex-shrink: 0; } #hitl-content .ft-act-tag-cor { background: #d1fae5; color: #065f46; } #hitl-content .ft-act-tag-edit { background: #d1fae5; color: #065f46; } #hitl-content .ft-act-tag-rest { background: #dbeafe; color: #1d4ed8; } #hitl-content .ft-act-tag-apr { background: #ede9fe; color: #5b21b6; } #hitl-content .ft-act-tag-unapr { background: #f3f4f6; color: #6b7280; } #hitl-content .ft-act-tag-acc { background: #cffafe; color: #155e75; } #hitl-content .ft-act-tag-unacc { background: #f3f4f6; color: #6b7280; } /* Diff inside correction bubble — kept for inline field thread */ #hitl-content .ft-diff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; } #hitl-content .ft-old { color: #b91c1c; text-decoration: line-through; opacity: .8; } #hitl-content .ft-new { color: #166534; font-weight: 700; } #hitl-content .ft-arrow { color: var(--text-3); } /* Reply bar */ #hitl-content .ft-reply-zone { padding: 2px 0 4px; } #hitl-content .ft-reply-link { font-size: 11px; font-weight: 500; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 0; } #hitl-content .ft-reply-link:hover { color: var(--p-600); } #hitl-content .ft-reply { display: none; gap: 6px; align-items: center; padding: 8px 0; } #hitl-content .ft-reply.show { display: flex; } #hitl-content .ft-reply-input { flex: 1; min-width: 0; border: 1px solid var(--border-2); border-radius: 18px; padding: 5px 12px; font-size: 12px; outline: none; background: white; } #hitl-content .ft-reply-input:focus { border-color: var(--p-400); } /* Inline reject form */ #hitl-content .rej-form { display: none; padding: 10px 14px 12px; border-top: 1px solid var(--danger-200); background: var(--danger-50); } #hitl-content .rej-form.show { display: block; } #hitl-content .rej-form-lbl { font-size: 11px; font-weight: 700; color: var(--danger); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .05em; } #hitl-content .rej-form-ta { width: 100%; min-height: 52px; border: 1.5px solid var(--danger-200); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--text); background: white; resize: none; outline: none; transition: border-color .12s; line-height: 1.5; } #hitl-content .rej-form-ta:focus { border-color: var(--danger); } #hitl-content .rej-form-ta::placeholder { color: var(--text-3); } #hitl-content .rej-form-err { display: none; font-size: 11px; color: var(--danger); margin-top: 5px; font-weight: 600; } #hitl-content .rej-form-err.show { display: block; } #hitl-content .rej-form-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; } /* Inline edit (reviewer) */ #hitl-content .field-inline-edit { width: 100%; } #hitl-content .field-inline-edit textarea { width: 100%; min-height: 52px; border: 1.5px solid var(--p-400); border-radius: 6px; padding: 7px 10px; font-size: 14px; color: var(--text); background: white; resize: vertical; outline: none; line-height: 1.4; font-family: inherit; box-shadow: 0 0 0 3px rgba(124,58,237,.08); display: block; } #hitl-content .edit-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; } /* Edit button on rejected field header (reviewer, Returned for Correction) */ #hitl-content .correct-field-cta { width: 22px; height: 22px; border-radius: 999px; background: white; color: var(--danger); border: 1px solid rgba(220,38,38,.55); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .12s, border-color .12s, box-shadow .12s; margin-left: 4px; box-shadow: 0 1px 3px rgba(220,38,38,.15); } #hitl-content .correct-field-cta:hover { background: var(--danger-50); border-color: var(--danger); box-shadow: 0 1px 4px rgba(220,38,38,.25); } /* Previous inline row edit button removed in favor of unified thread CTA */ #hitl-content .fix-field-btn { display: none; } /* ── RIGHT COLUMN ────────────────────────────────────────────────────── */ #hitl-content .right-col { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-2); min-height: 0; } #hitl-content .doc-viewer { display: flex; flex-direction: column; overflow: hidden; min-height: 0; flex: 1; } #hitl-content .doc-toolbar { height: 40px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 10px 0 12px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } #hitl-content .file-pill { height: 26px; padding: 0 8px 0 10px; border-radius: 6px; border: none; background: rgba(0,0,0,.06); font-size: 11px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 1; min-width: 0; max-width: min(240px, 60%); } #hitl-content .file-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #hitl-content .file-pill:hover { background: rgba(0,0,0,.1); color: var(--text); } #hitl-content .doc-ctrl-sep { width: 1px; height: 16px; background: var(--border-2); margin: 0 3px; flex-shrink: 0; } #hitl-content .doc-ctrl-group { display: flex; align-items: center; gap: 1px; flex-shrink: 0; } #hitl-content .doc-ctrl-btn { width: 26px; height: 26px; border-radius: 5px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-2); background: transparent; transition: background .1s, color .1s; } #hitl-content .doc-ctrl-btn:hover { background: rgba(0,0,0,.06); color: var(--text); } #hitl-content .doc-zoom-val { font-size: 11px; font-weight: 600; color: var(--text-2); min-width: 34px; text-align: center; user-select: none; } #hitl-content .doc-page-input { width: 28px; height: 22px; border: 1px solid var(--border-2); border-radius: 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text); background: var(--surface); outline: none; padding: 0; } #hitl-content .doc-page-input:focus { border-color: var(--p-400); } #hitl-content .doc-page-total { font-size: 11px; color: var(--text-3); padding: 0 3px; user-select: none; } #hitl-content .doc-body { flex: 1; overflow-y: auto; padding: 16px; background: #f4f3f1; min-height: 0; } #hitl-content .pdf-mock { background: white; border-radius: 8px; box-shadow: var(--shadow-sm); padding: 24px; } #hitl-content .pdf-title { font-size: 9px; font-weight: 700; text-align: center; color: #6b7280; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; } #hitl-content .pl { height: 5px; border-radius: 3px; background: #e5e5e5; margin-bottom: 7px; } #hitl-content .pl.f { width: 100%; } #hitl-content .pl.m { width: 72%; } #hitl-content .pl.s { width: 46%; } #hitl-content .ph { height: 5px; border-radius: 3px; background: rgba(124,58,237,.15); margin-bottom: 7px; } /* ── COLUMN RESIZE HANDLE ─────────────────────────────────────────────── */ #hitl-content .col-resize { width: 6px; cursor: col-resize; background: transparent; border-right: 1px solid var(--border); flex-shrink: 0; transition: background .15s; z-index: 10; } #hitl-content .col-resize:hover, #hitl-content .col-resize.dragging { background: var(--p-200); border-right-color: var(--p-400); } /* ── RIGHT PANEL TABS ─────────────────────────────────────────────────── */ #hitl-content .rp-tab-bar { height: 40px; display: flex; align-items: center; background: var(--surface); border-bottom: 1.5px solid var(--border); padding: 0 4px; flex-shrink: 0; } #hitl-content .rp-tab { padding: 0 12px; height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; background: none; margin-bottom: -1.5px; } #hitl-content .rp-tab:hover { color: var(--text); } #hitl-content .rp-tab.active { color: var(--p-600); border-bottom-color: var(--p-600); } #hitl-content .rp-tab-badge { background: var(--p-100); color: var(--p-700); border-radius: 999px; padding: 1px 6px; font-size: 10px; font-weight: 700; } #hitl-content .rp-tab-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: #6b7280; cursor: pointer; color: white; margin-left: 6px; padding: 0; flex-shrink: 0; transition: background .1s; } #hitl-content .rp-tab-close:hover { background: #374151; } #hitl-content .rp-pane { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; } #hitl-content .rp-pane.active { display: flex; } /* Panel header (replaces tab bar for single-view state) */ #hitl-content .rp-header-title { padding: 0 16px; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; } /* ── ROW RESIZE HANDLE ────────────────────────────────────────────────── */ #hitl-content .row-resize { height: 5px; cursor: row-resize; background: transparent; border-top: 1px solid var(--border); flex-shrink: 0; transition: background .15s; z-index: 5; } #hitl-content .row-resize:hover, #hitl-content .row-resize.dragging { background: var(--p-200); border-top-color: var(--p-400); } /* ── COMMENTS PANEL (tab pane) ──────────────────────────────────────────── */ #hitl-content .comments-panel { background: var(--surface); } /* ── COMMENTS EMPTY STATE ─────────────────────────────────────────────── */ #hitl-content .cp-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px; text-align: center; gap: 10px; } #hitl-content .cp-empty-disc { width: 44px; height: 44px; border-radius: 14px; background: var(--p-50); color: var(--p-400); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; box-shadow: 0 0 0 7px rgba(167,139,250,.07), 0 0 0 1px var(--p-200); } #hitl-content .cp-empty-title { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: -.01em; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; } #hitl-content .cp-empty-sub { font-size: 11px; color: var(--text-3); line-height: 1.65; max-width: 190px; } /* ── NOTES PANE ───────────────────────────────────────────────────── */ #hitl-content .notes-field-bar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); } #hitl-content .notes-field-icon { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: var(--p-50); color: var(--p-600); display: flex; align-items: center; justify-content: center; } #hitl-content .notes-field-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #hitl-content .notes-field-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hitl-content .notes-field-path { font-size: 10px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hitl-content .nfb-close { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-3); transition: background .1s, color .1s; } #hitl-content .nfb-close:hover { background: rgba(0,0,0,.06); color: var(--text-2); } #hitl-content .notes-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; background: #f9fafb; } /* ── No-messages empty state (field selected, but no comments) ─────────── */ #hitl-content .no-msg-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; gap: 10px; } #hitl-content .no-msg-disc { width: 52px; height: 52px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border-2); color: var(--p-400); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(124,58,237,.08), 0 0 0 6px rgba(167,139,250,.06); margin-bottom: 2px; } #hitl-content .no-msg-label { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; } #hitl-content .no-msg-sub { font-size: 11px; color: var(--text-3); line-height: 1.6; max-width: 180px; } #hitl-content .notes-composer { flex-shrink: 0; padding: 10px 12px 14px; background: var(--surface); border-top: 1px solid var(--border); } #hitl-content .nc-input-wrap { display: flex; align-items: flex-end; gap: 8px; background: #f3f4f6; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 6px 6px 6px 12px; transition: border-color .15s, background .15s; } #hitl-content .nc-input-wrap:focus-within { background: white; border-color: var(--p-400); box-shadow: 0 0 0 3px rgba(139,92,246,.07); } #hitl-content .nc-textarea { flex: 1; border: none; background: transparent; resize: none; font-size: 13px; color: var(--text); outline: none; line-height: 1.5; font-family: inherit; overflow-y: auto; max-height: 100px; padding: 3px 0; } #hitl-content .nc-textarea::placeholder { color: var(--text-3); } #hitl-content .nc-send-btn { width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--p-600); color: white; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .1s; flex-shrink: 0; } #hitl-content .nc-send-btn:hover { background: var(--p-700); } #hitl-content .nc-send-btn:active { transform: scale(.93); } /* .notes-empty kept for legacy; new empty state uses .cp-empty-state */ #hitl-content .notes-empty { display: none; } /* ── DISCUSSION THREAD ────────────────────────────────────────────────── */ #hitl-content .thread-panel { display: flex; flex-direction: column; background: var(--surface); flex: 1; min-height: 0; overflow: hidden; } #hitl-content .thread-head { padding: 11px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 8px; } #hitl-content .thread-title { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .05em; } #hitl-content .thread-count { background: var(--p-100); color: var(--p-700); border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 700; } #hitl-content .thread-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } /* Messages */ #hitl-content .msg { display: flex; gap: 9px; align-items: flex-start; } #hitl-content .msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: rgba(0,0,0,.07); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-2); } #hitl-content .msg-avatar.approver { background: var(--p-100); color: var(--p-700); } #hitl-content .msg-avatar.system-icon { background: var(--danger-100); color: var(--danger); font-size: 12px; } #hitl-content .msg-bubble { background: rgba(0,0,0,.04); border-radius: 0 10px 10px 10px; padding: 8px 12px; max-width: calc(100% - 42px); } #hitl-content .msg-bubble.approver { background: var(--p-50); border-radius: 10px 0 10px 10px; } #hitl-content .msg-bubble.system-rejection { background: var(--danger-50); border: 1px solid var(--danger-200); border-radius: 10px; } #hitl-content .msg-bubble.system-correction { background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 10px; } #hitl-content .msg-meta { font-size: 10px; color: var(--text-3); margin-bottom: 3px; font-weight: 500; } #hitl-content .msg-text { font-size: 12px; color: var(--text); line-height: 1.55; } #hitl-content .msg-field-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--danger-100); color: var(--danger); border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } #hitl-content .msg-field-tag.correction { background: #dcfce7; color: #166534; } #hitl-content .msg-field-tag.accepted { background: #cffafe; color: #164e63; } #hitl-content .msg-field-tag.reply { background: var(--p-100); color: var(--p-700); } #hitl-content .thread-divider { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0; } #hitl-content .thread-divider::before, #hitl-content .thread-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Thread input */ #hitl-content .thread-input-row { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; } #hitl-content .msg-avatar-sm { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } #hitl-content .msg-avatar-sm.reviewer { background: rgba(0,0,0,.07); color: var(--text-2); } #hitl-content .msg-avatar-sm.approver { background: var(--p-100); color: var(--p-700); } #hitl-content .thread-input { flex: 1; background: rgba(0,0,0,.04); border: 1.5px solid transparent; border-radius: 8px; padding: 7px 10px; font-size: 12px; color: var(--text); outline: none; transition: border-color .12s, background .12s; } #hitl-content .thread-input:focus { background: white; border-color: var(--p-400); } #hitl-content .thread-input::placeholder { color: var(--text-3); } /* ── AUDIT DRAWER ────────────────────────────────────────────────────── */ #hitl-content .audit-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 300px; background: var(--surface); border-left: 1px solid var(--border-2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1); z-index: 300; box-shadow: var(--shadow-lg); } #hitl-content .audit-drawer.open { transform: translateX(0); } #hitl-content .audit-head { height: 50px; padding: 0 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; } #hitl-content .audit-close { color: var(--text-3); font-size: 15px; padding: 4px; border-radius: 6px; transition: background .1s; } #hitl-content .audit-close:hover { background: rgba(0,0,0,.06); color: var(--text); } #hitl-content .audit-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; } #hitl-content .audit-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); font-size: 11px; } #hitl-content .audit-action { font-weight: 700; color: var(--text); margin-bottom: 3px; } #hitl-content .audit-who { color: var(--text-3); margin-bottom: 1px; } #hitl-content .audit-reason { color: var(--text-2); font-style: italic; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); font-size: 11px; } /* ── TOAST ────────────────────────────────────────────────────────────── */ #hitl-content .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1a1a1a; color: white; padding: 10px 20px; border-radius: 10px; font-size: 12px; font-weight: 600; z-index: 400; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 8px 24px rgba(0,0,0,.2); } #hitl-content .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } /* ── SCROLLBAR ────────────────────────────────────────────────────────── */ #hitl-content ::-webkit-scrollbar { width: 4px; height: 4px; } #hitl-content ::-webkit-scrollbar-track { background: transparent; } #hitl-content ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 2px; } /* ── VIEW MODE TOGGLE ─────────────────────────────────────────────────── */ #hitl-content .vm-toggle { gap: 5px; } #hitl-content .vm-toggle.is-active { background: var(--p-100); color: var(--p-700); border-color: var(--p-200); } /* ── PANEL NAV BAR (drill-down breadcrumb) ────────────────────────────── */ #hitl-content .fp-nav-bar { height: 38px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 4px; padding: 0 8px 0 6px; overflow: hidden; } #hitl-content .fp-back-btn { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: background .1s; } #hitl-content .fp-back-btn:hover { background: rgba(0,0,0,.06); } #hitl-content .fp-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; } #hitl-content .fp-crumb { font-size: 12px; font-weight: 500; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } #hitl-content .fp-crumb-link { color: var(--text-3); cursor: pointer; background: none; border: none; padding: 2px 4px; border-radius: 4px; transition: color .1s, background .1s; } #hitl-content .fp-crumb-link:hover { color: var(--p-600); background: var(--p-50); } #hitl-content .fp-crumb-active { color: var(--text); font-weight: 600; padding: 2px 4px; } #hitl-content .fp-crumb-sep { color: var(--text-3); font-size: 11px; padding: 0 1px; flex-shrink: 0; } /* ── GROUP ROW (root + item level) ───────────────────────────────────── */ #hitl-content .field-group-row { background: var(--surface); border-bottom: 1px solid var(--border); border-left: 3px solid var(--p-300); padding: 0 14px 0 12px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; transition: background .15s, border-left-color .15s; } #hitl-content .field-group-row:hover { background: var(--p-50); border-left-color: var(--p-500); } #hitl-content .field-group-row.expanded { border-left-color: var(--p-600); background: var(--p-50); } #hitl-content .fgr-left { display: flex; align-items: center; gap: 11px; min-width: 0; } #hitl-content .fgr-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: var(--p-100); color: var(--p-600); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(124,58,237,.12); } #hitl-content .fgr-body { min-width: 0; } #hitl-content .fgr-key { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #hitl-content .fgr-meta { font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 2px; } #hitl-content .fgr-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Citation chip on group row — pill, not number-badge */ #hitl-content .fgr-cit-chip { display: inline-flex; align-items: center; gap: 3px; background: #f1f0fe; color: var(--p-700); border: 1px solid var(--p-200); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; flex-shrink: 0; } #hitl-content .fgr-chevron { color: var(--text-3); flex-shrink: 0; transition: color .15s, transform .15s; } #hitl-content .field-group-row:hover .fgr-chevron { color: var(--p-600); } #hitl-content .field-group-row.expanded .fgr-chevron { transform: rotate(90deg); color: var(--p-600); } #hitl-content .field-group-card:hover .fgr-chevron { color: var(--p-600); } #hitl-content .field-group-card.expanded .fgr-chevron { color: var(--p-600); } /* ── GROUP BLOCK — outer wrapper that unifies header + items list ─────── */ #hitl-content .fg-group-block { border-bottom: 1px solid var(--border); border-left: 3px solid transparent; /* matches .field-card default */ transition: border-left-color .12s, background .12s; } /* Expanded: slightly darker border + light grey tint */ #hitl-content .fg-group-block.expanded { border-left-color: #a1a1aa; background: #f8f8f9; } /* Nested groups inside drilldown (Drawdowns / Interest Periods): subtle brand tint */ #hitl-content .fg-group-block.fg-drillable-group { border-left-color: var(--p-300); background: var(--p-50); } #hitl-content .fg-group-block.fg-drillable-group.expanded { border-left-color: var(--p-500); background: var(--p-50); } #hitl-content .fg-group-block.fg-drillable-group:not(.expanded):hover { border-left-color: var(--p-500); background: var(--p-50); } #hitl-content .fg-group-block.fg-drillable-group > .field-group-card { background: transparent; } #hitl-content .fg-group-block.fg-drillable-group .fg-items-list { padding-left: 4px; } #hitl-content .fg-group-block.fg-drillable-group .fg-item-card { background: var(--surface); } #hitl-content .fg-group-block.fg-drillable-group .fg-item-card:hover { background: rgba(0,0,0,.02); } /* ── GROUP CARD — visually identical to field-card; only delta: no val row, chevron instead of trust badges, expand/collapse on click ───────────── */ #hitl-content .field-group-card { cursor: pointer; border-left: none; background: var(--surface); /* drilldown: own white bg, not transparent */ transition: background .12s; } #hitl-content .field-group-card:hover { background: rgba(0,0,0,.03); } #hitl-content .fg-group-block:not(.expanded):hover { border-left-color: #a1a1aa; background: rgba(0,0,0,.02); } /* In accordion mode, fg-group-block owns the border-bottom — suppress on card */ #hitl-content .fg-group-block > .field-group-card { border-bottom: none; } /* Separator between header and items when expanded */ #hitl-content .fg-group-block.expanded > .field-group-card { border-bottom: 1px solid var(--border); } #hitl-content .field-group-card .field-key { align-items: center; } /* Group card key-row is 22px tall (chevron container); same 5px margin looks visually tighter — compensate so gap matches regular field-val spacing */ #hitl-content .field-group-card .field-key-row { margin-bottom: 8px; } #hitl-content .field-group-card .field-top-meta { justify-content: flex-end; } /* Chevron container — 22×22 to match .field-cmt-btn so right edges align */ #hitl-content .fgr-chevron-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } #hitl-content .field-group-card .fgr-chevron { color: var(--text-3); transition: color .15s, transform .15s; } #hitl-content .field-group-card:hover .fgr-chevron { color: var(--text-2); } #hitl-content .fg-group-block.expanded .fgr-chevron { transform: rotate(180deg); color: var(--text-2); } #hitl-content .ns-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } #hitl-content .ns-badges .ns-chip { display: inline-flex; } /* Item count pill — same spec as ext-badge */ #hitl-content .fg-item-count { display: inline-flex; align-items: center; background: #f4f4f5; color: #52525b; border: 1px solid #d4d4d8; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; vertical-align: middle; flex-shrink: 0; } /* Preview row — exactly field-val styling so height matches all other cards */ #hitl-content .fg-preview { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0; } #hitl-content .fg-preview-item { flex-shrink: 0; } #hitl-content .fg-preview-sep { margin: 0 8px; color: var(--text-3); font-weight: 400; font-size: 13px; flex-shrink: 0; } /* Total nested field count — shown right of meta, left of chevron */ #hitl-content .fg-total-count { display: inline-flex; align-items: center; background: var(--p-50); color: var(--p-700); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } #hitl-content .fg-mode-pill { display: inline-flex; align-items: center; background: #f8fafc; color: var(--text-3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } #hitl-content .fg-group-approve-btn { flex-shrink: 0; background: #ecfdf5; border-color: #a7f3d0; color: #047857; } #hitl-content .fg-group-approve-btn:hover { background: #d1fae5; } #hitl-content .fg-group-approve-btn--inline { height: 24px; padding: 0 8px; font-size: 10px; } /* ── ACCORDION ITEMS LIST ─────────────────────────────────────────────── */ #hitl-content .fg-items-list { background: transparent; /* inherits var(--p-50) from fg-group-block.expanded */ } #hitl-content .fg-item-card { padding: 7px 14px 7px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; } #hitl-content .fg-item-card:last-child { border-bottom: none; } #hitl-content .fg-item-card:hover { background: rgba(0,0,0,.015); } /* Left side: number badge + text stack */ #hitl-content .fg-item-card .fgi-left { display: flex; align-items: center; gap: 12px; min-width: 0; } #hitl-content .fg-item-card .fgi-idx { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: #e4e4e7; color: #52525b; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } #hitl-content .fg-item-card:hover .fgi-idx { background: #d4d4d8; color: #3f3f46; } /* Section group rows — violet rounded-square instead of grey circle */ #hitl-content .fg-subgroup-card .fgi-idx { border-radius: 5px; background: var(--p-100); color: var(--p-600); } #hitl-content .fg-subgroup-card:hover .fgi-idx { background: var(--p-200); color: var(--p-700); } /* Accordion header when expanded — remove bottom border, items list flows directly under */ #hitl-content .fg-group-accordion-hd.expanded { border-bottom: none; } #hitl-content .fg-item-card .fgi-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; } #hitl-content .fgi-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } /* Label matches field-val exactly */ #hitl-content .fg-item-card .fgi-label { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Meta matches field-key style */ #hitl-content .fg-item-card .fgi-meta { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } #hitl-content .fgi-chevron { color: var(--text-3); flex-shrink: 0; } #hitl-content .fg-item-card:hover .fgi-chevron { color: var(--text-2); } #hitl-content .fg-empty-inline { padding: 12px 14px; font-size: 12px; color: var(--text-3); } /* ── DRILL-DOWN ITEM LIST ─────────────────────────────────────────────── */ #hitl-content .fg-item-row { background: var(--surface); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; padding: 7px 14px 7px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; transition: background .12s, border-left-color .12s; } #hitl-content .fg-item-row:hover { background: rgba(0,0,0,.02); border-left-color: #3f3f46; } #hitl-content .fg-item-row.panel-entry-focus, #hitl-content .fg-item-card.panel-entry-focus { background: var(--p-50); box-shadow: inset 0 0 0 1px var(--p-200); } #hitl-content .fg-item-row.panel-entry-focus { border-left-color: #3f3f46; } #hitl-content .fgi-left { display: flex; align-items: center; gap: 12px; min-width: 0; } #hitl-content .fgi-idx { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: #e4e4e7; color: #52525b; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } #hitl-content .fgi-label { font-size: 14px; font-weight: 500; color: var(--text); } #hitl-content .fgi-meta { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-top: 5px; } #hitl-content .fgi-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--text-3); } #hitl-content .fgi-right .nest-cmt-indicator { margin-right: 2px; } /* ── EMPTY GROUP STATE ────────────────────────────────────────────────── */ #hitl-content .fg-empty { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 20px; gap: 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-3); margin-left: 12px; } #hitl-content .fg-empty--full { flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; margin: 0; text-align: center; gap: 16px; } #hitl-content .fg-empty-icon { color: var(--text-3); opacity: .5; } #hitl-content .fg-empty-label { font-size: 13px; font-weight: 600; color: var(--text-2); } #hitl-content .fg-add-btn { flex-shrink: 0; } /* ── COMPLEX FIELD EDIT INPUTS ─────────────────────────────────────────── */ #hitl-content .fedit-currency { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } #hitl-content .fedit-amount { flex: 1; border: 1.5px solid var(--p-400); border-radius: 6px; padding: 6px 10px; font-size: 14px; color: var(--text); background: white; outline: none; box-shadow: 0 0 0 3px rgba(124,58,237,.08); font-family: inherit; } #hitl-content .fedit-amount:focus { border-color: var(--p-600); } #hitl-content .fedit-ccy { width: 68px; flex-shrink: 0; border: 1.5px solid var(--p-400); border-radius: 6px; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--text); background: white; outline: none; cursor: pointer; font-family: inherit; } #hitl-content .fedit-date { width: 100%; border: 1.5px solid var(--p-400); border-radius: 6px; padding: 7px 10px; font-size: 14px; color: var(--text); background: white; outline: none; box-shadow: 0 0 0 3px rgba(124,58,237,.08); font-family: inherit; margin-bottom: 6px; display: block; } #hitl-content .fedit-suffix-wrap { display: flex; align-items: center; gap: 0; margin-bottom: 6px; border: 1.5px solid var(--p-400); border-radius: 6px; overflow: hidden; background: white; box-shadow: 0 0 0 3px rgba(124,58,237,.08); } #hitl-content .fedit-number { flex: 1; border: none; padding: 7px 10px; font-size: 14px; color: var(--text); background: transparent; outline: none; font-family: inherit; } #hitl-content .fedit-suffix { padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--surface-2); border-left: 1px solid var(--border-2); height: 100%; display: flex; align-items: center; } #hitl-content .fedit-enum { width: 100%; border: 1.5px solid var(--p-400); border-radius: 6px; padding: 7px 10px; font-size: 14px; color: var(--text); background: white; outline: none; cursor: pointer; font-family: inherit; margin-bottom: 6px; display: block; } #hitl-content ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.18); } /* ── Inline sub-group sections (Option A: 2-level drill cap) ──────────── */ #hitl-content .nested-view { padding: 12px 10px 18px; background: #f7f7f8; } #hitl-content .nested-view-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 4px 10px; } #hitl-content .nv-kicker { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } #hitl-content .nv-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 640px; } #hitl-content .nv-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } #hitl-content .nv-action-btn { border: 1px solid #d4d4d8; background: #fff; color: #52525b; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, color .12s; } #hitl-content .nv-action-btn:hover { background: #f4f4f5; border-color: #a1a1aa; color: #3f3f46; } #hitl-content .nv-action-btn.nv-approve-btn { border-color: var(--p-200); background: var(--p-50); color: var(--p-700); } #hitl-content .nv-action-btn.nv-approve-btn:hover { background: var(--p-100); border-color: var(--p-400); } #hitl-content .nv-item-low-badge { margin-left: auto; flex-shrink: 0; font-size: 9px; padding: 1px 5px; } #hitl-content .nv-meta { margin: 0 4px 10px; font-size: 12px; color: var(--text-3); } #hitl-content .nested-view-body { display: block; } #hitl-content .fg-inline-section { margin: 0; border-left: 3px solid var(--p-300); border-bottom: 1px solid var(--border); transition: border-left-color .12s; } #hitl-content .fg-inline-section:not(.collapsed) { border-left-color: var(--p-500); } #hitl-content .fg-inline-section + .fg-inline-section { margin-top: 0; } #hitl-content .field-card + .fg-inline-section { margin-top: 0; } #hitl-content .fg-inline-section-hdr { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 11px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; cursor: pointer; user-select: none; } #hitl-content .fg-inline-section-hdr:hover { background: var(--p-50); } #hitl-content .fg-inline-section-hdr svg { flex-shrink: 0; color: var(--text-3); } #hitl-content .fg-inline-section-hdr .fgis-label { flex: 1; } #hitl-content .fg-inline-section-hdr .fgis-count { font-size: 9px; font-weight: 700; color: #52525b; text-transform: none; letter-spacing: 0; background: #f4f4f5; border: 1px solid #d4d4d8; border-radius: 999px; padding: 2px 8px; } #hitl-content .fgis-chevron { transition: transform .15s; flex-shrink: 0; color: var(--text-3); } #hitl-content .fg-inline-section.collapsed .fgis-chevron { transform: rotate(-90deg); } /* Hide all children except the header when collapsed */ #hitl-content .fg-inline-section.collapsed > *:not(.fg-inline-section-hdr) { display: none; } #hitl-content .fg-inline-item { border-bottom: 1px solid var(--border); background: var(--surface); } #hitl-content .fg-inline-item:last-child { border-bottom: none; } #hitl-content .fg-inline-item-hdr { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 11px; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); cursor: default; } #hitl-content .fg-inline-item-hdr .fgii-idx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e4e4e7; color: #52525b; font-size: 11px; font-weight: 700; flex-shrink: 0; } #hitl-content .fg-inline-item-headings { min-width: 0; display: flex; flex-direction: column; gap: 5px; } #hitl-content .fg-inline-item-title { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hitl-content .fg-inline-item-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } #hitl-content .fg-inline-item-meta { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } #hitl-content .fgii-right { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } #hitl-content .fgii-right .nest-cmt-indicator { margin-right: 1px; } #hitl-content .fg-inline-item-body { background: var(--surface); padding-left: 0; } /* Nested inline section (depth ≥ 1) — left-indent only, no colour difference */ #hitl-content .fg-inline-section.depth-1 { margin-left: 16px; } #hitl-content .fg-inline-item .field-inner { padding: 7px 12px 7px 11px; } #hitl-content .fg-inline-item .field-key-row { margin-bottom: 5px; } #hitl-content .fg-inline-item .field-val { font-size: 14px; line-height: 1.4; padding: 3px 0; } #hitl-content .fg-inline-item .field-card:hover { background: #fcfcfc; border-left-color: #c9c9cf; } #hitl-content .fg-inline-item .field-card { background: transparent; } #hitl-content .fg-inline-item .field-card + .field-card { border-top: 1px solid #f1f1f3; } /* ── Inline-expanded DM3 group (Interest Pricings, Fee Pricings, Ongoing Fees) ── */ #hitl-content .fg-inline-exp-group { border-top: 1px solid var(--border); } #hitl-content .fg-inline-exp-group + .fg-inline-exp-group { border-top: 1px solid var(--border); } #hitl-content .field-card + .fg-inline-exp-group { border-top: 1px solid var(--border); } #hitl-content .fg-inline-exp-hdr { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 14px; cursor: pointer; user-select: none; background: #f8f9fb; border-bottom: 1px solid var(--border); } #hitl-content .fg-inline-exp-hdr:hover { background: #f1f3f7; } #hitl-content .fgie-label { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } #hitl-content .fgie-chevron { color: #9ca3af; flex-shrink: 0; } #hitl-content .fg-inline-exp-body { background: var(--surface); } #hitl-content .fg-inline-exp-empty { padding: 10px 14px; font-size: 12px; color: var(--text-muted, #888); } /* When collapsed, hide body */ #hitl-content .fg-inline-exp-group:not(.expanded) .fg-inline-exp-body { display: none; } /* Inline field rows */ #hitl-content .fg-inline-field-row { display: flex; align-items: center; padding: 9px 14px; border-bottom: 1px solid #f3f2fa; transition: background .1s; min-height: 38px; } #hitl-content .fg-inline-field-row:last-child { border-bottom: none; } #hitl-content .fg-inline-field-row:hover { background: rgba(0,0,0,.02); } #hitl-content .fg-inline-field-row.is-editing { background: #f9f9f9; flex-direction: column; align-items: stretch; gap: 8px; } #hitl-content .fg-inline-field-row.is-approved { background: #f0fdf4; } #hitl-content .fg-inline-field-row.is-rejected { background: #fff5f5; } #hitl-content .fg-inline-field-row.is-editable { cursor: pointer; } #hitl-content .fg-inline-field-row.is-editable:hover .fgifr-val { color: var(--text); } #hitl-content .fgifr-key { flex: 0 0 36%; font-size: 12px; font-weight: 500; color: var(--text-3); padding-top: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hitl-content .fgifr-val { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); word-break: break-word; line-height: 1.4; } #hitl-content .fg-inline-field-row.is-editable .fgifr-val { border-bottom: 1.5px dashed var(--p-300); padding-bottom: 1px; } #hitl-content .fgifr-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: 8px; opacity: 0; transition: opacity .12s; } #hitl-content .fg-inline-field-row:hover .fgifr-actions, #hitl-content .fg-inline-field-row.is-approved .fgifr-actions, #hitl-content .fg-inline-field-row.is-rejected .fgifr-actions { opacity: 1; } #hitl-content .fgifr-conf { flex-shrink: 0; margin-left: 6px; } /* Reject form inside inline rows */ #hitl-content .fg-inline-rej-form { display: none; flex-direction: column; gap: 6px; padding: 10px 14px 12px; background: #fff5f5; border-top: 1px solid #fecaca; } #hitl-content .fg-inline-rej-form.show { display: flex; } #hitl-content .fg-inline-edit-wrap { width: 100%; padding: 4px 14px 10px; } /* ── Shared status pill ───────────────────────────────────────────────── */ #hitl-content .status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } #hitl-content .status-pill .bdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #hitl-content .sp-review { background: var(--p-100); color: var(--p-700); } #hitl-content .sp-review .bdot { background: var(--p-600); } #hitl-content .sp-pending { background: var(--warn-50); color: #92400e; } #hitl-content .sp-pending .bdot { background: var(--warn); } #hitl-content .sp-progress { background: #dbeafe; color: #1d4ed8; } #hitl-content .sp-progress .bdot { background: #3b82f6; } #hitl-content .sp-approved { background: var(--success-100); color: var(--success); } #hitl-content .sp-approved .bdot { background: var(--success); } /* Real-app execution statuses */ #hitl-content .sp-completed { background: #d1fae5; color: #065f46; } #hitl-content .sp-failed { background: #fee2e2; color: #b91c1c; } #hitl-content .sp-running { background: #dbeafe; color: #1d4ed8; } #hitl-content .sp-paused { background: #fef9c3; color: #854d0e; } #hitl-content .sp-cancelled { background: #f3f4f6; color: #4b5563; } #hitl-content .status-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; border-radius: 20px; padding: 3px 8px 3px 6px; white-space: nowrap; line-height: 1; } #hitl-content .status-pill svg { flex-shrink: 0; } /* ── Shared data table component (dm-table) ───────────────────────────── */ #hitl-content .dm-table-wrap { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); } #hitl-content .dm-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: visible; } #hitl-content .dm-table th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } #hitl-content .dm-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: middle; font-size: 13px; } #hitl-content .dm-table tr:last-child td { border-bottom: none; } #hitl-content .dm-table tbody tr { cursor: pointer; } #hitl-content .dm-table tbody tr:hover td { background: #f6f6f7; } @keyframes rowFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Only animate rows once on initial view-show, not on every filter/sort re-render */ #hitl-content .wf-page-init .dm-table tbody tr { animation: rowFadeIn 0.15s ease both; } #hitl-content .wf-page-init .dm-table tbody tr:nth-child(1) { animation-delay: 0s; } #hitl-content .wf-page-init .dm-table tbody tr:nth-child(2) { animation-delay: 0.04s; } #hitl-content .wf-page-init .dm-table tbody tr:nth-child(3) { animation-delay: 0.07s; } #hitl-content .wf-page-init .dm-table tbody tr:nth-child(4) { animation-delay: 0.10s; } #hitl-content .wf-page-init .dm-table tbody tr:nth-child(n+5) { animation-delay: 0.13s; } #hitl-content .wf-page .dm-table { margin-bottom: 0; } /* Smooth row selection in vault/preflight tables — prevents harsh flash */ #hitl-content .preflight-main .dm-table tbody tr { transition: background-color .1s ease; } /* ── Workflow MAP Drawer (shared — pre-flight + approval) ─────────────── */ @keyframes map-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.28); } 60% { box-shadow: 0 0 0 5px rgba(0,0,0,.00); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,.00); } } #hitl-content .map-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.18); z-index: 300; } #hitl-content .map-overlay.open { display: block; } @keyframes map-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.30); } 60% { box-shadow: 0 0 0 5px rgba(0,0,0,.00); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,.00); } } #hitl-content .map-drawer { position: fixed; bottom: 88px; right: 24px; width: 320px; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); z-index: 301; display: flex; flex-direction: column; overflow: hidden; transform: scale(.92) translateY(12px); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease; transform-origin: bottom right; } #hitl-content .map-drawer.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; } #hitl-content .map-overlay { background: transparent; } /* no dim — but catches outside clicks */ #hitl-content .map-drawer-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; } #hitl-content .map-drawer-title { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; } #hitl-content .map-drawer-close { width: 24px; height: 24px; border-radius: 5px; border: 1.5px solid var(--border-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); background: transparent; cursor: pointer; flex-shrink: 0; transition: background .1s, color .1s; } #hitl-content .map-drawer-close:hover { background: rgba(0,0,0,.04); color: var(--text); } #hitl-content .map-drawer-body { flex: 1; padding: 18px 16px; overflow-y: auto; } #hitl-content .map-drawer-handle { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; transition: background .12s; } #hitl-content .map-drawer-handle:hover, #hitl-content .map-drawer-handle.dragging { background: var(--p-200); } #hitl-content .map-wf-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.35; letter-spacing: -.02em; } #hitl-content .map-wf-note { font-size: 12px; color: var(--text-3); font-style: normal; margin-bottom: 20px; line-height: 1.5; } #hitl-content .map-stages { display: flex; flex-direction: column; } #hitl-content .map-stage-wrap { display: flex; flex-direction: column; align-items: flex-start; } #hitl-content .map-stage { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text-3); padding: 3px 0; } #hitl-content .map-stage-line { width: 2px; height: 16px; background: var(--border-2); margin-left: 7px; } #hitl-content .map-sub-steps { padding-left: 26px; margin: 4px 0 2px; display: flex; flex-direction: column; } #hitl-content .map-stage.is-done { color: var(--text-3); } #hitl-content .map-stage.is-current { color: var(--text); font-weight: 700; } #hitl-content .map-stage-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--surface); flex-shrink: 0; } #hitl-content .map-stage.is-done .map-stage-dot { background: #ede9fe; border-color: #c4b5fd; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8L6.5 11L12.5 5' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px; } #hitl-content .map-stage.is-current .map-stage-dot { background: var(--text); border-color: var(--text); animation: map-dot-pulse 1.8s infinite; } #hitl-content .map-sub-stage { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); padding: 2px 0; } #hitl-content .map-sub-stage.is-done { color: var(--text-3); } #hitl-content .map-sub-stage.is-current { color: var(--text); font-weight: 600; } #hitl-content .map-sub-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-2); background: var(--surface); flex-shrink: 0; } #hitl-content .map-sub-stage.is-done .map-sub-dot { background: #ede9fe; border-color: #c4b5fd; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5L4.5 7.5L8.5 2.5' stroke='%237c3aed' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 8px; } #hitl-content .map-sub-stage.is-current .map-sub-dot { background: var(--text); border-color: var(--text); animation: map-dot-pulse 1.8s infinite; } #hitl-content .map-sub-line { width: 1px; height: 12px; background: var(--border-2); margin-left: 4px; } #hitl-content .map-stage.is-done + .map-stage-line, #hitl-content .map-stage-line.is-done { background: #c4b5fd; } /* MAP toggle button (topbar) */ #hitl-content .map-btn { height: 30px; padding: 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-2); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } #hitl-content .map-btn:hover { background: rgba(0,0,0,.04); color: var(--text); } #hitl-content .map-btn.is-open { background: var(--p-50); border-color: var(--p-400); color: var(--p-700); } /* ── Floating pipeline map FAB ───────────────────────────────────────────── */ #hitl-content .fab-map { position: fixed; bottom: 24px; right: 24px; z-index: 250; /* starts as a 52px circle, expands left to fit label */ height: 52px; width: 52px; border-radius: 999px; padding: 0 0 0 0; border: none; background: var(--surface); box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06); color: var(--text-2); display: inline-flex; align-items: center; justify-content: flex-end; cursor: pointer; overflow: hidden; transition: width .28s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1); --fab-progress: 0; transform-origin: right center; } #hitl-content .fab-map:hover:not(.is-hidden), #hitl-content .fab-map.is-open { width: 192px; box-shadow: 0 4px 20px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06); padding-left: 16px; } #hitl-content .fab-map.is-hidden { transform: scale(0); opacity: 0; pointer-events: none; } #hitl-content .fab-map.fab-done .fab-ring-progress { stroke: #7c3aed !important; } /* Progress ring SVG — anchored to the right 52px icon area */ #hitl-content .fab-ring { position: absolute; right: 0; top: 0; width: 52px; height: 52px; transform: rotate(-90deg); pointer-events: none; } #hitl-content .fab-ring-track { stroke: var(--border-2); } #hitl-content .fab-ring-progress { stroke: #f97316; stroke-dasharray: 138.23; /* 2π × 22 */ stroke-dashoffset: calc(138.23 * (1 - var(--fab-progress))); transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1), stroke .3s ease; } #hitl-content .fab-sparkle { position: relative; color: var(--text-2); flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } #hitl-content .fab-sparkle-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; } #hitl-content .fab-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: clip; opacity: 0; transform: translateX(10px); transition: opacity .18s ease .08s, transform .24s cubic-bezier(.4,0,.2,1) .04s; pointer-events: none; letter-spacing: -.01em; } #hitl-content .fab-map:hover:not(.is-hidden) .fab-label, #hitl-content .fab-map.is-open .fab-label { opacity: 1; transform: translateX(0); } /* ── AI Suggest badge (preflight pickers) ────────────────────────────────── */ #hitl-content .ai-suggest-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #52525b; background: #f4f4f5; border: 1px solid #d4d4d8; border-radius: 999px; padding: 3px 8px; margin-left: 8px; cursor: help; position: relative; white-space: nowrap; } #hitl-content .ai-suggest-badge::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: 6px; white-space: normal; width: max-content; max-width: 240px; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.15); text-transform: none; letter-spacing: normal; } #hitl-content .ai-suggest-badge:hover::after { opacity: 1; } /* Pre-flight topbar action area */ #hitl-content .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } #hitl-content .topbar-back-btn { height: 30px; padding: 0 12px; border: none; background: transparent; font-size: 13px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: var(--radius-sm); transition: background .1s, color .1s; } #hitl-content .topbar-back-btn:hover { background: rgba(0,0,0,.04); color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ FLOWCHART MAP (.fmap-*) — shared by pre-flight drawer + modal preview ═══════════════════════════════════════════════════════════════════════════ */ #hitl-content .fmap { display: flex; flex-direction: column; overflow-y: auto; overflow-x: visible; max-height: calc(100vh - 120px); padding-left: 4px; } #hitl-content .fmap-row { display: flex; align-items: stretch; gap: 0; overflow: visible; } #hitl-content .fmap-left { display: flex; flex-direction: column; align-items: center; width: 36px; flex-shrink: 0; overflow: visible; } #hitl-content .fmap-icon-box { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; border: 1.5px solid var(--border-2); background: var(--surface); color: var(--text-3); display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; } /* All stage-icon surfaces share STAGE_ICONS (14px SVGs); normalize to the drawer size here so the FAB and the "..." menu render identically. */ #hitl-content .fmap-icon-box svg { width: 13px; height: 13px; } #hitl-content .fmap-connector { width: 2px; flex: 1; min-height: 12px; background: var(--border-2); margin: 2px 0; } #hitl-content .fmap-body { padding: 0 0 8px 12px; flex: 1; min-width: 0; } #hitl-content .fmap-label { font-size: 13px; font-weight: 500; color: var(--text-3); line-height: 26px; white-space: nowrap; letter-spacing: -.01em; } /* State: done */ #hitl-content .fmap-row.is-done .fmap-icon-box { background: #ede9fe; border-color: #c4b5fd; color: #7c3aed; } #hitl-content .fmap-row.is-done .fmap-connector { background: #c4b5fd; } #hitl-content .fmap-row.is-done .fmap-label { color: var(--text-2); font-weight: 400; } /* State: current */ #hitl-content .fmap-row.is-current .fmap-icon-box { background: var(--p-600); border-color: var(--p-600); color: #fff; box-shadow: 0 0 0 3px rgba(249,115,22,.25), 0 0 12px rgba(249,115,22,.15); animation: stage-glow 2s ease-in-out infinite; } #hitl-content .fmap-row.is-current .fmap-label { color: var(--text); font-weight: 600; letter-spacing: -.02em; } @keyframes stage-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(249,115,22,.25), 0 0 12px rgba(249,115,22,.15); } 50% { box-shadow: 0 0 0 5px rgba(249,115,22,.15), 0 0 20px rgba(249,115,22,.10); } } /* Special: Document Intelligence stage — Gemini-tinted, dashed, not selected */ #hitl-content .fmap-row.is-ai .fmap-icon-box { border: 1.5px dashed var(--p-200); color: var(--p-500); background: transparent; } /* Sub-steps — removed, using linear-only map */ /* ═══════════════════════════════════════════════════════════════════════════ AI LAUNCH HERO (Review & Start screen) ═══════════════════════════════════════════════════════════════════════════ */ @keyframes ai-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } } @keyframes ai-orb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.35); } 50% { box-shadow: 0 0 0 12px rgba(124,58,237,.0); } } #hitl-content .ai-launch-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #3b0764 0%, #6d28d9 45%, #4338ca 100%); border-radius: 14px; padding: 24px 24px 20px; text-align: center; color: #fff; margin-bottom: 20px; max-width: 680px; } #hitl-content .ai-launch-orb { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 12px; margin: 0 auto 12px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; animation: ai-orb-pulse 2.4s ease-in-out infinite; backdrop-filter: blur(4px); } #hitl-content .ai-launch-title { position: relative; z-index: 1; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin: 0 0 6px; } #hitl-content .ai-launch-sub { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; margin: 0 auto 16px; max-width: 380px; } /* Confirmation screen — split layout: vertical stages left, details right */ /* Scrollable container so content isn't clipped by overflow:hidden preflight-main */ #hitl-content .confirm-scroll-wrap { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } #hitl-content .confirm-split-wrap { display: flex; align-items: flex-start; gap: 28px; max-width: 1016px; width: 100%; margin: 0 auto; padding: 32px 32px 48px; } /* 296px (was 260): the flattened 10-step list includes connector names + Connector/Template badges — wide enough that none of them wraps. */ #hitl-content .confirm-steps-col { flex: 0 0 296px; min-width: 0; background: linear-gradient(160deg, #3b0764 0%, #6d28d9 55%, #4338ca 100%); border-radius: 16px; padding: 28px 22px; color: #fff; align-self: flex-start; box-shadow: 0 8px 32px rgba(109,40,217,.22), 0 2px 8px rgba(0,0,0,.12); } #hitl-content .confirm-steps-header { text-align: center; margin-bottom: 24px; } #hitl-content .confirm-steps-orb { width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 12px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; } #hitl-content .confirm-steps-title { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 3px; } #hitl-content .confirm-steps-sub { font-size: 12px; color: rgba(255,255,255,.6); } /* Vertical stage list */ #hitl-content .confirm-stage-list { display: flex; flex-direction: column; } #hitl-content .cs-row { display: flex; align-items: flex-start; gap: 12px; } #hitl-content .cs-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } #hitl-content .cs-num { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.5); } #hitl-content .cs-num-done { background: rgba(255,255,255,.9); border-color: transparent; color: #7c3aed; } #hitl-content .cs-num-current { background: #f97316; border-color: #f97316; color: #fff; } #hitl-content .cs-connector { width: 2px; flex: 1; min-height: 12px; background: rgba(255,255,255,.15); margin: 4px 0; } #hitl-content .cs-connector-done { background: rgba(255,255,255,.45); } #hitl-content .cs-label { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.5); padding: 3px 0 16px; line-height: 1.35; } #hitl-content .cs-row.cs-done .cs-label { color: rgba(255,255,255,.85); font-weight: 500; } #hitl-content .cs-row.cs-current .cs-label { color: #fff; font-weight: 700; } #hitl-content .cs-dm-key { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 9px; font-weight: 500; color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; } /* Details column */ #hitl-content .confirm-details-col { flex: 1; min-width: 0; } #hitl-content .confirm-details-header { margin-bottom: 20px; } #hitl-content .confirm-details-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-bottom: 6px; } #hitl-content .confirm-details-sub { font-size: 13.5px; color: var(--text-3); line-height: 1.6; } /* Summary section */ #hitl-content .ai-summary { max-width: 100%; } #hitl-content .ai-summary-section { margin-bottom: 20px; } #hitl-content .ai-summary-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 8px; } #hitl-content .ai-summary-card { border: none; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06); } #hitl-content .ai-summary-row { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 13px; } #hitl-content .ai-summary-row:last-child { border-bottom: none; } #hitl-content .ai-summary-key { flex: 0 0 130px; font-size: 11.5px; font-weight: 500; color: var(--text-3); } #hitl-content .ai-summary-val { font-size: 13.5px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; } #hitl-content .ai-summary-chip-list { gap: 8px; } #hitl-content .source-data-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2); } #hitl-content .source-data-chip-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; } #hitl-content .source-data-chip-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--text-2); } /* ════════════════════════════════════════════════════════════════════════════ SPA VIEW SWITCHER ════════════════════════════════════════════════════════════════════════════ */ #hitl-content .spa-view { display: none; flex-direction: column; flex: 1; min-height: 0; min-width: 0; } #hitl-content .spa-view.active { display: flex; } /* ════════════════════════════════════════════════════════════════════════════ WORKFLOWS VIEW — overrides & page-specific styles ════════════════════════════════════════════════════════════════════════════ */ /* .app is defined in the base shell above — do not re-declare it here */ /* ── Workflow list page header (replaces topbar for workflow list view) ── */ #hitl-content .wf-list-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface); display: flex; align-items: flex-start; justify-content: space-between; } #hitl-content .wf-list-title { font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -.02em; } #hitl-content .wf-list-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; } #hitl-content .wf-list-count { font-weight: 500; color: var(--text-2); } #hitl-content .wf-page { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); overflow-y: auto; padding-bottom: 24px; } #hitl-content .wf-page .dm-table-wrap { margin: 0 24px; width: auto; min-height: unset; } #hitl-content .wf-page .dm-table { min-width: unset; } #hitl-content .wf-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 24px; } #hitl-content .wf-search-wrap { position: relative; flex: 1; max-width: 280px; } #hitl-content .wf-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } #hitl-content .wf-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #hitl-content .wf-search { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); background: var(--surface); outline: none; transition: border-color .12s; } #hitl-content .wf-search:focus { border-color: var(--p-400); } #hitl-content .wf-search::placeholder { color: var(--text-3); } #hitl-content .wf-tab { height: 30px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--border-2); background: transparent; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } #hitl-content .wf-tab:hover { border-color: #cbd5e1; color: var(--text); } #hitl-content .wf-tab.active { background: var(--p-50); border-color: var(--p); color: var(--p-700); font-weight: 600; } /* ── Toolbar right group (filter + columns) ────────────────────────────── */ #hitl-content .wf-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } #hitl-content .cols-dd-wrap { position: relative; } #hitl-content .wf-cols-btn { height: 34px; padding: 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-2); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .12s; } #hitl-content .wf-cols-btn:hover { background: var(--bg-2); } #hitl-content .wf-cols-btn.is-open { border-color: var(--p-400); background: var(--p-50); color: var(--p-700); } /* ── Workflow table filter button ───────────────────────────────────────── */ #hitl-content .wf-filter-wrap { position: relative; } #hitl-content .wf-filter-btn { height: 34px; padding: 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-2); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .12s; } #hitl-content .wf-filter-btn:hover { background: var(--bg-2); } #hitl-content .wf-filter-btn.is-open, #hitl-content .wf-filter-btn.has-filters { border-color: var(--p-400); background: var(--p-50); color: var(--p-700); } #hitl-content .wf-filter-count { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 99px; background: var(--p-600); color: white; font-size: 10px; font-weight: 700; flex-shrink: 0; } #hitl-content .wf-filter-dd { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs), 0 8px 24px rgba(0,0,0,.1); z-index: 200; padding: 6px; } #hitl-content .wf-filter-dd-section { padding: 2px 2px; } #hitl-content .wf-filter-dd-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 4px 10px 2px; display: block; } #hitl-content .wf-filter-dd-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: 6px; user-select: none; transition: background .1s; } #hitl-content .wf-filter-dd-item:hover { background: var(--bg-2); } #hitl-content .wf-filter-dd-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--p-600); cursor: pointer; flex-shrink: 0; } #hitl-content .wf-filter-dd-divider { height: 1px; background: var(--border); margin: 4px 0; } #hitl-content .wf-filter-dd-footer { display: flex; justify-content: flex-end; padding: 2px 4px 4px; } #hitl-content .wf-filter-clear { font-size: 11.5px; font-weight: 500; color: var(--p-600); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; } #hitl-content .wf-filter-clear:hover { background: var(--p-50); } /* ── Vault filter dropdown (same pattern, scoped to preflight) ───────────── */ #hitl-content .vault-filter-wrap { position: relative; } #hitl-content .vault-filter-btn.is-open { border-color: var(--p-400); background: var(--p-50); color: var(--p-700); } #hitl-content .vault-filter-dd { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs), 0 8px 24px rgba(0,0,0,.1); z-index: 200; padding: 6px; } #hitl-content .cols-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs), 0 8px 24px rgba(0,0,0,.1); min-width: 165px; z-index: 200; overflow: hidden; } #hitl-content .cols-dd-item { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 13px; color: var(--text-2); cursor: pointer; border-bottom: 1px solid var(--border); user-select: none; } #hitl-content .cols-dd-item:last-child { border-bottom: none; } #hitl-content .cols-dd-item:hover { background: var(--bg-2); } #hitl-content .cols-dd-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--p-600); cursor: pointer; flex-shrink: 0; } #hitl-content .cols-dd-header { padding: 8px 14px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); border-bottom: 1px solid var(--border); } /* Workflows table column widths */ #hitl-content .th-cb { width: 44px; min-width: 44px; padding: 0 8px; } #hitl-content .th-id { width: 96px; min-width: 80px; padding-right: 4px; } #hitl-content .th-name { width: 220px; min-width: 180px; } #hitl-content .th-wf { width: 230px; min-width: 180px; } #hitl-content .th-type { width: 120px; min-width: 100px; } #hitl-content .th-ltask { width: 200px; min-width: 160px; } #hitl-content .th-st { width: 150px; min-width: 130px; } #hitl-content .th-deal { width: 210px; min-width: 160px; } #hitl-content .th-fac { width: 170px; min-width: 130px; } #hitl-content .th-upd { width: 130px; min-width: 110px; } #hitl-content .th-act { width: 52px; min-width: 52px; } /* Sticky columns — exact admin-dm shadow values */ #hitl-content .th-cb, #hitl-content .td-cb { position: sticky; left: 0; z-index: 3; background: var(--surface); padding: 0 8px; } #hitl-content .th-id, #hitl-content .td-id { position: sticky; left: 44px; z-index: 3; background: var(--surface); padding-right: 4px; } #hitl-content .th-name, #hitl-content .td-name { position: sticky; left: 140px; z-index: 3; background: var(--surface); box-shadow: 6px 0 8px -8px rgba(15,23,42,.20); } #hitl-content .th-wf, #hitl-content .td-wf { position: sticky; left: 360px; z-index: 3; background: var(--surface); box-shadow: inset -1px 0 0 rgba(15,23,42,.06), 8px 0 12px -10px rgba(15,23,42,.18); } /* sticky HEADER cells get the surface-2 header background */ #hitl-content .dm-table thead .th-cb, #hitl-content .dm-table thead .th-id, #hitl-content .dm-table thead .th-name, #hitl-content .dm-table thead .th-wf { background: var(--surface-2); } #hitl-content .dm-table thead th { border-bottom: 1px solid var(--border); } #hitl-content .dm-table td { border-bottom: 1px solid var(--border); } #hitl-content .dm-table tr:last-child td { border-bottom: none; } #hitl-content .dm-table tbody tr:hover .td-cb, #hitl-content .dm-table tbody tr:hover .td-id, #hitl-content .dm-table tbody tr:hover .td-name, #hitl-content .dm-table tbody tr:hover .td-wf { background: #f6f6f7; } #hitl-content .wf-sort-caret { display: inline-flex; align-items: center; justify-content: center; width: 12px; margin-left: 5px; font-size: 11px; color: var(--text-3); opacity: 0; transition: opacity .12s ease, color .12s ease; } #hitl-content .th-sort:hover .wf-sort-caret, #hitl-content .wf-sort-caret.is-active { opacity: 1; } #hitl-content .wf-sort-caret.is-active { color: var(--p-700); } #hitl-content .cell-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } #hitl-content .wf-cb { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border-2); appearance: none; -webkit-appearance: none; cursor: pointer; display: block; background: var(--surface); transition: border-color .1s; } #hitl-content .wf-cb:hover { border-color: var(--p-400); } #hitl-content .wf-cb:checked { background: var(--p-600); border-color: var(--p-600); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; } #hitl-content .wf-id-cell { display: inline-flex; align-items: center; gap: 4px; } #hitl-content .wf-id { font-size: 11.5px; font-weight: 600; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-3); white-space: nowrap; text-decoration: none; display: inline-block; } #hitl-content .wf-id:hover { color: var(--p-600); } #hitl-content .wf-id-copy { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .1s, color .1s; opacity: 0; pointer-events: none; } #hitl-content .wf-id-copy:hover { background: var(--bg-2); color: var(--text); } #hitl-content .td-id:hover .wf-id-copy { opacity: 1; pointer-events: auto; } #hitl-content .wf-name-text { font-weight: 500; color: var(--text); font-size: 13px; max-width: 210px; } #hitl-content .wf-exec-name { font-weight: 500; color: var(--text); font-size: 13px; max-width: 210px; } #hitl-content .wf-type-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; line-height: 1.4; } #hitl-content .wt-transaction { background: #ede9fe; color: #5b21b6; } #hitl-content .wt-deal { background: #dbeafe; color: #1d4ed8; } #hitl-content .th-act, #hitl-content .td-act { position: sticky; right: 0; background: var(--surface); z-index: 4; box-shadow: inset 1px 0 0 rgba(15,23,42,.06), -8px 0 12px -10px rgba(15,23,42,.20); width: 52px; min-width: 52px; text-align: center; } #hitl-content .dm-table thead .th-act { background: var(--surface-2); z-index: 6; } #hitl-content .dm-table tbody tr:hover .td-act { background: #f6f6f7; } /* ── Row more-button (matches dm-more-btn in admin-dm) ───────────────────── */ #hitl-content .wf-row-menu-wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; overflow: visible; } #hitl-content .wf-act-btn { width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease; } #hitl-content .dm-table tr:hover .wf-act-btn, #hitl-content .wf-act-btn:hover { background: rgba(255,255,255,.9); border-color: #d8dee8; color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.06); } #hitl-content .wf-act-btn.is-open { background: #ede9fe; border-color: rgba(109,40,217,.22); color: #6d28d9; box-shadow: 0 1px 2px rgba(109,40,217,.12); } #hitl-content .wf-act-btn:active { transform: translateY(1px); } /* ── Row dropdown menu ───────────────────────────────────────────────────── */ #hitl-content .wf-row-menu { position: absolute; top: calc(100% + 4px); right: 0; display: none; min-width: 164px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.07); overflow: hidden; z-index: 50; padding: 5px; } #hitl-content .wf-row-menu.open { display: block; } #hitl-content .wf-row-menu-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; transition: background-color .14s ease, color .14s ease; } #hitl-content .wf-row-menu-item:hover { background: #f8fafc; color: var(--text); } #hitl-content .wf-row-menu-item:disabled { opacity: .45; pointer-events: none; cursor: default; } #hitl-content .wf-row-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } #hitl-content .wf-row-menu-danger { color: #e11d48 !important; } #hitl-content .wf-row-menu-danger:hover { background: #fff1f2 !important; color: #be123c !important; } /* ── Citation source-pill page picker (multi-page fields) ────────────────── Reuses the .wf-row-menu visual language: fixed portal, positioned via getBoundingClientRect, closed on outside click. */ /* #hitl-content prefix required on both: the `#hitl-content *` reset zeroes padding on bare class rules, which jammed the label into the top corner. */ #hitl-content .cite-pop { position: fixed; display: none; min-width: 240px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.07); overflow: hidden; z-index: 200; padding: 6px; } #hitl-content .cite-pop-label { padding: 7px 10px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3, #94a3b8); } /* Each row: numbered citation chip · truncated document name. The number is the citation's identity (matches the live app); the page number lives in the hover snippet card, not the row. The whole row is the click target. */ #hitl-content .cite-pop-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 10px; border-radius: 8px; border: none; background: transparent; font-size: 12.5px; color: var(--text-2, #334155); text-align: left; cursor: pointer; } #hitl-content .cite-pop-item:hover { background: #f8fafc; color: var(--text, #0f172a); } #hitl-content .cite-pop-item:hover .citation-chip { background: var(--p-600, #4f46b8); } #hitl-content .cite-pop-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Citation snippet card ─────────────────────────────────────────────── Dark hover card matching the live app's citation tooltip: quoted document text, plain-language note, "Page N · document" footer. Appended to document.body (ensureCiteSnipEl) so it can layer above the field modal (z-index 3000 > .ou-modal-overlay's 2000) — classes stay UNSCOPED for the same reason (#hitl-content-prefixed rules don't reach body children). pointer-events:none so the card never traps the hover that opened it. */ .cite-snip { position: fixed; display: none; width: 300px; max-width: calc(100vw - 16px); background: #232037; color: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(15,23,42,.35), 0 2px 8px rgba(15,23,42,.2); z-index: 3000; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } .cite-snip-quote { font-size: 12px; font-style: italic; line-height: 1.55; color: #d6d3e8; border-left: 2px solid #8b5cf6; padding-left: 9px; margin-bottom: 8px; } .cite-snip-note { font-size: 12px; line-height: 1.5; color: #f4f3fa; margin-bottom: 8px; } .cite-snip-meta { font-size: 10.5px; color: #a5a1c0; } /* Brief highlight pulse on the source-document page after a citation jump — the honest stand-in for a real bounding-box highlight in this prototype. Shared by both doc-viewer instances: the Review screen's #docViewer and the Connectors screen's slide-in #ouDocViewer. */ #docViewer .pdf-mock.doc-flash, #ouDocViewer .pdf-mock.doc-flash { animation: docFlashPulse .9s ease-out; } @keyframes docFlashPulse { 0% { box-shadow: 0 0 0 3px rgba(79,70,229,.35); } 100% { box-shadow: 0 0 0 3px rgba(79,70,229,0); } } /* ── Breadcrumb "..." step menu — jump to any pipeline step ────────────────── */ /* #hitl-content prefix required: #hitl-content button {border:none; background:none} (specificity 101) beats a plain .pipe-crumb-dots class otherwise — see the equivalent note at .src-pill above. */ /* Resting grey box (not just on hover) so it reads as a button at rest. */ #hitl-content .pipe-crumb-dots { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; margin: 0 1px; border: 1px solid var(--border-2, #e2e8f0); border-radius: 7px; background: #f1f5f9; color: var(--text-2, #475569); cursor: pointer; transition: background-color .1s, color .1s, border-color .1s; } #hitl-content .pipe-crumb-dots:hover, #hitl-content .pipe-crumb-dots.is-open { background: var(--p-50, #eeedfe); border-color: var(--p-100, #cecbf6); color: var(--p-700, #3c3489); } #pipeCrumbDd { position: fixed; display: none; width: 316px; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08); padding: 14px; z-index: 200; } /* #hitl-content prefix: the `#hitl-content *` reset zeroes bare-class padding */ #hitl-content .pipe-dd-label { padding: 2px 8px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3, #94a3b8); } /* Rows reuse .fmap-row/.fmap-icon-box/.fmap-connector from the FAB drawer (see pipeDropdownHtml) — one visual language for "jump to a step," not two competing ones. .pipe-dd-fmap only trims the drawer's spacing. */ #hitl-content .pipe-dd-fmap { padding-left: 2px; max-height: none; overflow: visible; } .pipe-dd-fmap .fmap-row[aria-disabled="true"] { cursor: default; } /* Menu rows breathe more than the drawer's: taller gap between steps. */ #hitl-content .pipe-dd-fmap .fmap-body { padding: 1px 0 18px 12px; } #hitl-content .pipe-dd-fmap .fmap-row:last-child .fmap-body { padding-bottom: 4px; } /* Menu context: no pulsing beacon — a static ring marks the live step; the whole-row hover darkens the label so reachable rows read as menu items. */ #hitl-content .pipe-dd-fmap .fmap-row.is-current .fmap-icon-box { animation: none; box-shadow: 0 0 0 3px rgba(249,115,22,.22); } #hitl-content .pipe-dd-fmap .fmap-row--clickable:hover .fmap-label { color: var(--text); } /* Read-only replay marker — the step currently open as a frozen replica. Amber, matching the frozen banner; distinct from is-current (real progress) and from the done checkmark it usually sits on top of. */ #hitl-content .fmap-row.is-viewing .fmap-icon-box { border-color: #f3d38a; box-shadow: 0 0 0 3px rgba(245,158,11,.20); } #hitl-content .fmap-viewing-pill { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--warn-50); border: 1px solid #fde68a; color: #92400e; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; position: relative; top: -1px; } /* Breadcrumb tail tag while a frozen replica is open */ #hitl-content .bc-frozen-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--warn-50); border: 1px solid #fde68a; color: #92400e; font-size: 10.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } /* ── FAB drawer rows: completed steps are clickable read-only replays ─────── */ .fmap-row--clickable { cursor: pointer; } .fmap-row--clickable:hover .fmap-icon-box { box-shadow: 0 0 0 2px var(--p-100, #cecbf6); } /* ── Frozen step chrome — completed-step read-only replay ──────────────────── */ /* Moved under the active view's topbar at render time (pipeApplyFrozenChrome) so it always reads as "beneath the breadcrumb," not a page-wide alert. */ #pipeFrozenBanner { display: none; align-items: center; gap: 10px; flex-shrink: 0; padding: 9px 20px; background: var(--warn-50); border-bottom: 1px solid #fde68a; color: #92400e; font-size: 12.5px; } .pipe-frozen-icon { display: inline-flex; flex-shrink: 0; } #hitl-content .pipe-frozen-return { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f3d38a; background: #fff; color: #92400e; border-radius: 8px; padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(146,64,14,.08); } #hitl-content .pipe-frozen-return:hover { background: #92400e; color: #fff; border-color: #92400e; } #hitl-content .pipe-frozen-return svg { flex-shrink: 0; } /* Only the step CONTENT is disabled — never .topbar/breadcrumb, so the "..." step menu and Workflows link stay reachable while browsing history. */ /* …but the topbar's live ACTION buttons (Back / Start Execution / Submit) act on live state, not the replica — those do get locked out while frozen. */ #hitl-content.pipe-frozen-mode #topbarActions, #hitl-content.pipe-frozen-mode #hitlTopbarRight { pointer-events: none; opacity: .45; } #hitl-content.pipe-frozen-mode .preflight-layout button, #hitl-content.pipe-frozen-mode .preflight-layout input, #hitl-content.pipe-frozen-mode .preflight-layout select, #hitl-content.pipe-frozen-mode .preflight-layout textarea, #hitl-content.pipe-frozen-mode .preflight-layout a, #hitl-content.pipe-frozen-mode .workspace button, #hitl-content.pipe-frozen-mode .workspace input, #hitl-content.pipe-frozen-mode .workspace select, #hitl-content.pipe-frozen-mode .workspace textarea, #hitl-content.pipe-frozen-mode .workspace a, #hitl-content.pipe-frozen-mode .ou-page button, #hitl-content.pipe-frozen-mode .ou-page input, #hitl-content.pipe-frozen-mode .ou-page select, #hitl-content.pipe-frozen-mode .ou-page textarea, #hitl-content.pipe-frozen-mode .ou-page a { pointer-events: none; opacity: .55; cursor: not-allowed; } /* Frozen Select Workflow replica: same page frame as the other preflight steps — padded scroll area, centered card — instead of bare markup sitting flush-left in the zero-padding .preflight-main. #hitl-content prefix required: the `#hitl-content *` reset (specificity 101) zeroes margin/padding on any bare class rule — this is why the old unprefixed .pipe-wf-summary padding never actually rendered. */ #hitl-content .pipe-wf-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px 48px; } #hitl-content .pipe-wf-summary { max-width: 640px; margin: 0 auto; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-xs); } #hitl-content .pipe-wf-stats { display: flex; gap: 12px; margin-top: 16px; } #hitl-content .pipe-wf-stat { background: var(--surface-1, #f8fafc); border-radius: var(--radius, 10px); padding: 14px 18px; min-width: 130px; } #hitl-content .pipe-wf-stat-num { font-size: 22px; font-weight: 600; color: var(--text, #0f172a); line-height: 1.2; } #hitl-content .pipe-wf-stat-label { font-size: 12px; color: var(--text-3, #94a3b8); margin-top: 2px; } #hitl-content .td-vault-act { width: 52px; min-width: 52px; text-align: center; position: sticky; right: 0; background: var(--surface); box-shadow: inset 1px 0 0 rgba(15,23,42,.06), -8px 0 12px -10px rgba(15,23,42,.20); z-index: 4; transition: background-color .1s ease; } #hitl-content .wf-time { font-size: 12px; color: var(--text-3); white-space: nowrap; } #hitl-content .proto-screen-lbl { font-size: 11px; color: #94a3b8; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.28); border-radius: 999px; padding: 3px 9px; } #hitl-content a.bc-part { color: var(--text-2); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 2px; text-decoration-thickness: 1px; } #hitl-content a.bc-part:hover { color: var(--p); text-decoration-color: var(--p); } #hitl-content .wf-title-wrap { display: flex; align-items: baseline; gap: 8px; } /* kept for non-wf views */ #hitl-content .wf-count { font-size: 13px; color: var(--text-3); font-weight: 400; } /* ── Workflow selection modal ────────────────────────────────────────────── */ @keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } } #hitl-content .wfm-overlay-enter { animation: modalOverlayIn .18s ease both; } #hitl-content .wfm-enter { animation: modalIn .22s cubic-bezier(.22,.68,0,1.2) both; } @keyframes fmapRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } #hitl-content .fmap-row-animated { animation: fmapRowIn .25s ease both; } #hitl-content .fmap-row-animated:nth-child(1) { animation-delay: .06s; } #hitl-content .fmap-row-animated:nth-child(2) { animation-delay: .13s; } #hitl-content .fmap-row-animated:nth-child(3) { animation-delay: .20s; } #hitl-content .fmap-row-animated:nth-child(4) { animation-delay: .27s; } #hitl-content .fmap-row-animated:nth-child(5) { animation-delay: .34s; } #hitl-content .wfm-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; } #hitl-content .wfm-item:last-child { border-bottom: none; } #hitl-content .wfm-item:hover { background: var(--bg-2); } #hitl-content .wfm-item.is-selected { background: var(--p-50); } #hitl-content .wfm-item-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: border-color .12s, background .12s; } #hitl-content .wfm-item.is-selected .wfm-item-radio { border-color: var(--p-600); background: var(--p-600); } #hitl-content .wfm-item-radio-dot { width: 6px; height: 6px; border-radius: 50%; background: white; } #hitl-content .wfm-item-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; } #hitl-content .wfm-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--text-3); } #hitl-content .wfm-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 4px; padding: 2px 6px; } #hitl-content .wfm-tx { background: #ede9fe; color: #6d28d9; } #hitl-content .wfm-deal { background: #dbeafe; color: #1d4ed8; } #hitl-content .wfm-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 200px; text-align: center; } #hitl-content .wfm-preview-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; align-items: flex-start; } #hitl-content .wfm-preview-name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.02em; } #hitl-content .wfm-preview-desc { font-size: 13px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; } #hitl-content .wfm-preview-divider { height: 1px; background: var(--border); margin-bottom: 18px; } #hitl-content .wfm-preview-flow-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 10px; } #hitl-content .wfm-preview-note { font-size: 11px; color: var(--text-3); margin-top: 14px; font-style: italic; line-height: 1.5; } #hitl-content .wfm-preview-meta { margin-top: 14px; font-size: 12px; color: var(--text-3); display: flex; gap: 12px; } #hitl-content .wfm-type-filter { height: 26px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--border-2); background: transparent; font-size: 11px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background .1s, border-color .1s, color .1s; } #hitl-content .wfm-type-filter:hover { border-color: #cbd5e1; color: var(--text); } #hitl-content .wfm-type-filter.active { background: var(--p-50); border-color: var(--p); color: var(--p-700); font-weight: 600; } /* ════════════════════════════════════════════════════════════════════════════ PREFLIGHT VIEW — page-specific styles ════════════════════════════════════════════════════════════════════════════ */ #hitl-content .preflight-body { flex: 1; min-height: 0; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 0; } #hitl-content .step-hdr { padding: 20px 24px 16px; background: var(--surface); border-bottom: 1px solid var(--border); margin-bottom: 0; flex-shrink: 0; } #hitl-content .step-dm-key { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; color: var(--p-600); background: var(--p-50); border: 1px solid var(--p-100); border-radius: 4px; padding: 2px 7px; font-weight: 500; margin-left: 10px; vertical-align: middle; position: relative; top: -1px; } #hitl-content .step-heading { font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -.02em; } #hitl-content .step-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; margin-bottom: 0; line-height: 1.5; } #hitl-content .step-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-style: italic; margin-bottom: 0; } #hitl-content .step-hint-wait { color: var(--text-3); } #hitl-content .step-hint-ok { color: var(--success); font-weight: 500; font-style: normal; } /* Ensure HITL topbars are always 44px regardless of shell CSS cascade */ #hitl-content #view-preflight .topbar, #hitl-content #view-review .topbar { height: 44px !important; padding: 0 20px !important; } #hitl-content /* Undo admin-dm's topbar-sep { flex:1 } #hitl-content which makes it expand to a wide grey box */ #view-preflight .topbar-sep, #hitl-content #view-review .topbar-sep, #hitl-content #view-output .topbar-sep { flex: none !important; width: 1px !important; height: 18px !important; } /* Output summary breadcrumb: mute the workflow-name crumb so only the current page ("Output summary") reads as the active page. */ #hitl-content #view-output .bc-exec-name { color: var(--text-2); font-weight: 500; } #hitl-content #view-output .bc-part.cur { font-size: 13px; color: var(--text); font-weight: 600; } #hitl-content .topbar-wf-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-left: 4px; } #hitl-content .topbar-wf-ctx-sep { color: var(--border-2); margin: 0 3px; } #hitl-content .topbar-wf-ctx-name { font-size: 12px; font-weight: 500; color: var(--text-2); } #hitl-content .breadcrumb { flex-wrap: nowrap; flex-shrink: 1; } #hitl-content #topbarActions { flex-shrink: 0; } #hitl-content .topbar-deal-name { font-size: 12px; font-weight: 400; color: var(--text-2); white-space: nowrap; } #hitl-content .topbar-exec-id { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; } #hitl-content .preflight-layout { display: flex; flex: 1; min-height: 0; height: calc(100vh - 40px - 44px); overflow: hidden; } #hitl-content .preflight-main { flex: 1; min-height: 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; background: var(--bg); } #hitl-content .upload-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; } #hitl-content .upload-tab { height: 36px; padding: 0 16px; border: none; background: transparent; font-size: 13px; font-weight: 500; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s; } #hitl-content .upload-tab.active { color: var(--p-700); font-weight: 600; border-bottom-color: var(--p-600); } #hitl-content .upload-tab:hover:not(.active) { color: var(--text-2); } #hitl-content .upload-tab-pane { display: none; flex-direction: column; flex: 1; min-height: 0; } #hitl-content .upload-tab-pane.active { display: flex; } /* Context bar — Step 1 workflow context */ #hitl-content .pf-ctx-bar { display: flex; align-items: center; gap: 6px; padding: 10px 24px; background: var(--neutral-100); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-3); } #hitl-content .pf-ctx-label { font-weight: 600; color: var(--text-3); } #hitl-content .pf-ctx-value { font-weight: 500; color: var(--text); } #hitl-content .pf-ctx-edit { margin-left: auto; background: none; border: none; color: var(--p-600); font-size: 12px; font-weight: 500; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background .15s; } #hitl-content .pf-ctx-edit:hover { background: var(--p-50); } /* Data Vault empty state */ #hitl-content .vault-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--text-3); } #hitl-content .vault-empty-icon { margin-bottom: 12px; color: var(--text-3); opacity: .5; } #hitl-content .vault-empty-heading { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } #hitl-content .vault-empty-body { font-size: 12px; color: var(--text-3); } /* Facility search */ #hitl-content .fac-search-wrap { position: relative; max-width: 280px; flex: 1; margin-bottom: 8px; } #hitl-content .fac-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #hitl-content .fac-search { width: 100%; height: 36px; padding: 0 12px 0 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); color: var(--text); outline: none; transition: border-color .15s; } #hitl-content .fac-search:focus { border-color: var(--p-400); } #hitl-content .fac-search::placeholder { color: var(--text-3); } #hitl-content .vault-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 24px; } #hitl-content .vault-search-wrap { position: relative; max-width: 280px; flex: 1; } #hitl-content .vault-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #hitl-content .vault-search { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); background: var(--surface); outline: none; } #hitl-content .vault-search:focus { border-color: var(--p-400); } #hitl-content .vault-filter-btn { height: 34px; padding: 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-2); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .12s; } #hitl-content .vault-filter-btn:hover { background: var(--bg-2); } #hitl-content .vault-upload-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: #fff; border: none; border-radius: var(--radius-sm); background: #7c3aed; padding: 0 12px; height: 30px; cursor: pointer; white-space: nowrap; margin-left: auto; box-shadow: 0 1px 3px rgba(124,58,237,.25); transition: background .15s, box-shadow .15s; } #hitl-content .vault-upload-btn:hover { background: #6d28d9; box-shadow: 0 2px 5px rgba(124,58,237,.32); } #hitl-content .vault-cb { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border-2); appearance: none; -webkit-appearance: none; cursor: pointer; display: block; background: var(--surface); transition: border-color .1s; } #hitl-content .vault-cb:hover { border-color: var(--p-400); } #hitl-content .vault-cb:checked { background: var(--p-600); border-color: var(--p-600); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; } #hitl-content .vault-file-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; background: #fee2e2; color: #b91c1c; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; } #hitl-content .vault-file-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hitl-content .vault-file-meta { font-size: 11px; color: var(--text-3); margin-top: 1px; } #hitl-content .vault-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; color: var(--text-3); } /* Vault / preflight table columns */ #hitl-content .vault-table-wrap { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: auto; position: relative; min-width: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 0 24px 24px; background: var(--surface); } #hitl-content .pf-vault-table { width: 100%; min-width: 912px; table-layout: fixed; border-collapse: separate; border-spacing: 0; } #hitl-content .dm-table thead .td-vault-act { background: var(--surface-2); z-index: 6; } #hitl-content .pf-td-cb { width: 40px; min-width: 40px; padding-right: 0; } #hitl-content .pf-td-id { width: 110px; min-width: 110px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; color: var(--text-3); font-weight: 600; } #hitl-content .pf-td-name { min-width: 220px; overflow: hidden; } #hitl-content .pf-td-sm { width: 80px; min-width: 70px; font-size: 12px; color: var(--text-3); } #hitl-content .pf-td-by { width: 130px; min-width: 130px; font-size: 13px; color: var(--text-2); } #hitl-content .pf-td-date { width: 120px; min-width: 120px; font-size: 12px; color: var(--text-3); white-space: nowrap; } #hitl-content .confirm-center-wrap { display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px; } #hitl-content .confirm-center-wrap .ai-launch-hero { width: 100%; max-width: 600px; } #hitl-content .confirm-center-wrap .ai-summary { width: 100%; max-width: 600px; } /* Two-column confirmation layout */ #hitl-content .confirm-two-col { display: flex; gap: 24px; width: 100%; max-width: 900px; padding: 0 24px 32px; align-items: flex-start; } #hitl-content .confirm-left { flex: 1; min-width: 0; } #hitl-content .confirm-right { width: 240px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.06); } #hitl-content .confirm-journey-title { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; } /* Shared box geometry — the AI pill and dm-key tag render as identically-sized boxes wherever a stage label appears (FAB stepper, New Execution preview); only color and typeface vary per variant below. */ #hitl-content .fmap-ai-pill, #hitl-content .fmap-dm-key { display: inline-flex; align-items: center; font-size: 9.5px; border-radius: 4px; padding: 1.5px 6px; margin-left: 6px; vertical-align: middle; line-height: 1.3; } #hitl-content .fmap-ai-pill { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--p-600); background: var(--p-50); border: 1px solid var(--p-200); } #hitl-content .fmap-dm-key { font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 500; color: var(--p-500); background: var(--p-50); border: 1px solid var(--p-100); } #hitl-content .upload-zone { max-width: 640px; border: 1.5px dashed var(--border-2); border-radius: var(--radius); padding: 40px 24px; text-align: center; cursor: pointer; background: var(--bg-2); transition: border-color .14s, background .14s; margin-bottom: 16px; } #hitl-content .upload-zone:hover { border-color: var(--p-400); background: var(--p-50); } #hitl-content .upload-zone-icon { color: var(--text-3); margin-bottom: 10px; display: flex; justify-content: center; } #hitl-content .upload-zone-text { font-size: 14px; font-weight: 600; color: var(--text-2); } #hitl-content .upload-zone-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; } #hitl-content .picker-wrap { display: flex; flex-direction: column; gap: 12px; padding: 12px 24px 24px; } #hitl-content .picker-search-wrap { position: relative; max-width: 480px; } #hitl-content .picker-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #hitl-content .picker-search { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); background: var(--surface); outline: none; } #hitl-content .picker-search:focus { border-color: var(--p-400); } #hitl-content .pick-radio-cell { width: 36px; padding-right: 0; } #hitl-content .pick-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; background: var(--surface); flex-shrink: 0; cursor: pointer; transition: border-color .12s, background .12s; } #hitl-content .pick-radio.is-selected { border-color: var(--p-600); background: var(--p-600); } #hitl-content .pick-radio-dot { width: 6px; height: 6px; border-radius: 50%; background: white; display: none; } #hitl-content .pick-radio.is-selected .pick-radio-dot { display: block; } #hitl-content .pick-id { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; font-weight: 600; color: var(--text-3); background: none; border: none; padding: 0; white-space: nowrap; display: inline; } #hitl-content .fac-type-badge { display: inline-flex; align-items: center; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } #hitl-content .ft-term { background: #dcfce7; color: #166534; } #hitl-content .ft-revolver { background: #fef9c3; color: #854d0e; } #hitl-content .ft-bridge { background: #fee2e2; color: #991b1b; } #hitl-content .selection-chip { display: flex; align-items: center; gap: 10px; background: var(--p-50); border: 1px solid var(--p-100); border-radius: var(--radius-sm); padding: 10px 14px; } #hitl-content .selection-chip-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--p-100); color: var(--p-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #hitl-content .selection-chip-text { flex: 1; min-width: 0; } #hitl-content .selection-chip-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p-500); margin-bottom: 2px; } #hitl-content .selection-chip-value { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); } #hitl-content .selection-chip-change { font-size: 12px; font-weight: 500; color: var(--p-600); background: none; border: 1px solid var(--p-200); border-radius: 6px; cursor: pointer; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; transition: background .1s; } #hitl-content .selection-chip-change:hover { background: var(--p-100); border-color: var(--p-300); } #hitl-content .confirm-card { max-width: 600px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } #hitl-content .confirm-header { padding: 16px 20px; background: var(--p-50); border-bottom: 1px solid var(--p-100); display: flex; align-items: center; gap: 10px; } #hitl-content .confirm-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: var(--p-100); color: var(--p-600); display: flex; align-items: center; justify-content: center; } #hitl-content .confirm-title { font-size: 15px; font-weight: 700; color: var(--p-900); letter-spacing: -.01em; } #hitl-content .confirm-type-badge { font-size: 11px; font-weight: 600; color: var(--p-600); background: var(--p-100); border-radius: 5px; padding: 2px 7px; margin-top: 2px; display: inline-block; } #hitl-content .confirm-rows { padding: 0; } #hitl-content .confirm-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); } #hitl-content .confirm-row:last-child { border-bottom: none; } #hitl-content .confirm-key { flex: 0 0 140px; font-size: 12px; font-weight: 500; color: var(--text-3); padding-top: 1px; } #hitl-content .confirm-val { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; } #hitl-content .confirm-val.is-file { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; font-weight: 500; color: var(--text-2); } /* Back button (preflight topbar) */ #hitl-content .topbar-back-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-2); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background .12s; } #hitl-content .topbar-back-btn:hover { background: var(--bg-2); } /* Step transition animations */ @keyframes stepFwd { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } @keyframes stepRev { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } #hitl-content .step-anim-fwd { animation: stepFwd .18s cubic-bezier(.25,.46,.45,.94); } #hitl-content .step-anim-rev { animation: stepRev .18s cubic-bezier(.25,.46,.45,.94); } #hitl-content .topbar-step-hint { font-size: 12px; color: var(--text-3); white-space: nowrap; } /* ── Upload Files Modal (pfu-*) ──────────────────────────────────────────── */ /* ALL rules scoped under #pfUploadModal (specificity 110) to beat the #hitl-content * { padding:0; margin:0 } reset (specificity 100) and #hitl-content button { background:none; border:none } (specificity 101). */ @keyframes pfuModalIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes pfuOverlayIn { from { opacity: 0; } to { opacity: 1; } } #pfUploadOverlay.pfu-overlay-enter { animation: pfuOverlayIn .18s ease both; } #pfUploadModal.pfu-enter { animation: pfuModalIn .24s cubic-bezier(.22,.68,0,1.2) both; } /* Modal shell */ #pfUploadModal { background: #fff; border-radius: 14px; width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 56px); display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Close button */ #pfUploadModal .pfu-modal-close { width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(0,0,0,.1) !important; background: #fff !important; color: #9a9a9a; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, color .12s; flex-shrink: 0; } #pfUploadModal .pfu-modal-close:hover { background: #f3f4f6 !important; color: #111; } /* File list */ #pfFileList { display: flex; flex-direction: column; gap: 8px; } /* Drop zone — always slim one-line row */ #pfUploadModal .pfu-dropzone { border: 1.5px dashed rgba(0,0,0,.15); border-radius: 10px; padding: 18px 20px; background: #f9fafb; display: flex; align-items: center; gap: 10px; transition: border-color .15s, background .15s; cursor: pointer; user-select: none; } #pfUploadModal .pfu-dropzone:hover, #pfUploadModal .pfu-dropzone.is-drag-over { border-color: #7c3aed; background: #f5f3ff; } #pfUploadModal .pfu-dropzone:hover .ui-icon, #pfUploadModal .pfu-dropzone.is-drag-over .ui-icon { color: #7c3aed !important; } #pfUploadModal .pfu-dropzone-label { font-size: 13px; font-weight: 500; color: #374151; flex: 1; } #pfUploadModal .pfu-dropzone-sub { font-size: 11.5px; color: #9a9a9a; white-space: nowrap; } /* File row */ #pfUploadModal .pfu-file-row { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 10px 12px; background: #fff; transition: border-color .2s, background .2s; } /* Very subtle tints — just enough to create visual rhythm, not to shout */ #pfUploadModal .pfu-file-row.is-protected, #pfUploadModal .pfu-file-row.is-error { background: #fffef5; border-color: rgba(217,119,6,.18); } #pfUploadModal .pfu-file-row.is-unlocked { background: #f9fefb; border-color: rgba(22,163,74,.18); } #pfUploadModal .pfu-file-row.is-clean { background: #f9fafb; border-color: transparent; } #pfUploadModal .pfu-file-row.is-unsupported, #pfUploadModal .pfu-file-row.is-unsupported-pwd { background: #fef6f6; border-color: rgba(220,38,38,.14); } #pfUploadModal .pfu-file-row.is-skipped { opacity: .5; } #pfUploadModal .pfu-row-top { display: flex; align-items: center; gap: 11px; } /* File type icon */ #pfUploadModal .pfu-ext-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f1f5f9; color: #64748b; } #pfUploadModal .pfu-ext-icon--error, #pfUploadModal .pfu-ext-icon--unsupported-pwd { background: #fef2f2; color: #dc2626; } #pfUploadModal .pfu-ext-icon--clean { background: #f1f5f9; color: #64748b; } #pfUploadModal .pfu-ext-icon--protected { background: #fffbeb; color: #b45309; } /* Sub-line note — red for unsupported */ #pfUploadModal .pfu-row-sub-warn { font-size: 11px; color: #dc2626; } /* Right-side cluster: badge + ring button */ #pfUploadModal .pfu-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; align-self: flex-start; margin-top: 1px; } /* Ring button — progress ring during scanning, × circle when terminal */ #pfUploadModal .pfu-ring-btn { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12) !important; background: #fff !important; color: #9a9a9a; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; padding: 0; font-family: inherit; } #pfUploadModal .pfu-ring-btn:hover { background: #f3f4f6 !important; color: #374151; border-color: rgba(0,0,0,.2) !important; } #pfUploadModal .pfu-ring-btn.is-loading { border: none !important; background: transparent !important; cursor: default; } #pfUploadModal .pfu-ring-btn.is-loading:hover { background: transparent !important; } /* Ensure the × SVG renders as block to eliminate inline baseline offset */ #pfUploadModal .pfu-ring-btn > svg { display: block; } /* Progress ring SVG */ #pfUploadModal .pfu-ring-svg { transform: rotate(-90deg); display: block; } #pfUploadModal .pfu-ring-track { fill: none; stroke: rgba(0,0,0,.1); stroke-width: 2; } #pfUploadModal .pfu-ring-fill { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 56.5; animation: pfuRingPulse 1.4s ease-in-out infinite; } @keyframes pfuRingPulse { 0% { stroke-dashoffset: 56.5; opacity: .5; } 50% { stroke-dashoffset: 12; opacity: 1; } 100% { stroke-dashoffset: 56.5; opacity: .5; } } #pfUploadModal .pfu-row-meta { flex: 1; min-width: 0; } #pfUploadModal .pfu-row-name { font-size: 13px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } #pfUploadModal .pfu-row-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; } #pfUploadModal .pfu-row-size { font-size: 11px; color: #9a9a9a; } #pfUploadModal .pfu-row-sep { font-size: 10px; color: #d1d5db; } /* Status label — no pill, no background. Color + position carry the meaning. */ #pfUploadModal .pfu-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; flex-shrink: 0; } #pfUploadModal .pfu-badge-scanning { color: #94a3b8; } #pfUploadModal .pfu-badge-clean { color: #16a34a; } #pfUploadModal .pfu-badge-protected { color: #b45309; } #pfUploadModal .pfu-badge-unlocking { color: #94a3b8; } #pfUploadModal .pfu-badge-unlocked { color: #16a34a; } #pfUploadModal .pfu-badge-skipped { color: #9ca3af; } /* Spinner */ #pfUploadModal .pfu-spin { width: 10px; height: 10px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: pfuSpin .65s linear infinite; display: inline-block; flex-shrink: 0; } @keyframes pfuSpin { to { transform: rotate(360deg); } } /* Password prompt — inline, no inner border */ #pfUploadModal .pfu-pwd-inline { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 0; } #pfUploadModal .pfu-pwd-row { display: flex; align-items: center; gap: 8px; } #pfUploadModal .pfu-pwd-wrap { position: relative; flex: 1; } #pfUploadModal .pfu-pwd-input { width: 100%; box-sizing: border-box; height: 34px; padding: 0 36px 0 12px; border: 1px solid #d1d5db !important; border-radius: 8px; font-size: 13px; color: #111; background: #fff !important; outline: none; font-family: inherit; transition: border-color .15s, box-shadow .15s; } #pfUploadModal .pfu-pwd-input::placeholder { color: #b0b0b0; } #pfUploadModal .pfu-pwd-input:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,.1); } #pfUploadModal .pfu-pwd-input.is-wrong { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1); } #pfUploadModal .pfu-pwd-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none !important; border: none !important; color: #9a9a9a; cursor: pointer; padding: 0; display: flex; align-items: center; transition: color .12s; } #pfUploadModal .pfu-pwd-toggle:hover { color: #5a5a5a; } #pfUploadModal .pfu-unlock-btn { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #1f2937 !important; background: #1f2937 !important; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: background .15s, border-color .15s; font-family: inherit; } #pfUploadModal .pfu-unlock-btn:hover:not(:disabled) { background: #111827 !important; border-color: #111827 !important; } #pfUploadModal .pfu-unlock-btn:disabled { opacity: .45; cursor: not-allowed; } #pfUploadModal .pfu-pwd-error { font-size: 11px; color: #dc2626; display: flex; align-items: center; gap: 4px; } @keyframes pfuShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } #pfUploadModal .pfu-shake { animation: pfuShake .3s ease; } /* Unsupported — inline note + text-link skip */ #pfUploadModal .pfu-unsupported-inline { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.06); font-size: 12px; color: #6b7280; line-height: 1.4; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } #pfUploadModal .pfu-skip-link { background: none !important; border: none !important; color: #374151; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 12px; padding: 0; font-family: inherit; white-space: nowrap; flex-shrink: 0; } #pfUploadModal .pfu-skip-link:hover { color: #111; } /* Unsupported file + ? — inline clickable label that reveals the reason */ #pfUploadModal .pfu-unsupported-why { background: none !important; border: none !important; padding: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; line-height: inherit; } #pfUploadModal .pfu-unsupported-why .pfu-row-sub-warn { color: #dc2626; transition: color .12s; } #pfUploadModal .pfu-why-badge { flex-shrink: 0; display: block; } #pfUploadModal .pfu-unsupported-why:hover .pfu-row-sub-warn { color: #b91c1c; } /* Footer buttons — match .btn-ghost and .btn-primary from design system */ #pfUploadModal .pfu-btn-cancel { height: 36px; padding: 0 18px; border-radius: 8px; border: none !important; background: rgba(0,0,0,.05) !important; color: #5a5a5a; font-size: 13px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; font-family: inherit; transition: background .12s; } #pfUploadModal .pfu-btn-cancel:hover { background: rgba(0,0,0,.08) !important; } #pfUploadModal .pfu-btn-add { height: 36px; padding: 0 18px; border-radius: 8px; border: none !important; background: #7c3aed !important; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 6px rgba(124,58,237,.3); transition: background .12s, opacity .12s, box-shadow .12s; } #pfUploadModal .pfu-btn-add:hover:not(:disabled) { background: #6d28d9 !important; opacity: 1; } #pfUploadModal .pfu-btn-add:disabled { opacity: .35 !important; cursor: not-allowed; box-shadow: none; background: #7c3aed !important; } /* File count badge in header */ #pfUploadModal .pfu-count { font-size: 12px; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 9px; line-height: 1.6; } /* Pinned add-files zone — no border, padding gap provides separation */ #pfUploadModal .pfu-pinned { border-bottom: none; } /* Scroll region — subtle inset shadow cue that content scrolls under the pinned zone */ #pfUploadModal .pfu-scroll { background: linear-gradient(#fff 30%, rgba(255,255,255,0)) center top, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.07), rgba(0,0,0,0)) center top; background-repeat: no-repeat; background-size: 100% 24px, 100% 8px; background-attachment: local, scroll; } /* Shared privacy note — pinned strip above footer (shown when ≥1 password file) */ #pfUploadModal .pfu-privacy-note { display: none; flex-shrink: 0; padding: 8px 20px; border-top: none; background: transparent; font-size: 11.5px; color: #b0b0b0; text-align: center; align-items: center; justify-content: center; gap: 5px; } #pfUploadModal .pfu-privacy-note.is-visible { display: flex; } /* New vault row flash */ @keyframes pfuVaultFlash { 0% { background: #d1fae5; } 100% { background: transparent; } } .pfu-vault-new-flash { animation: pfuVaultFlash 1.4s ease-out forwards; } /* ════════════════════════════════════════════════════════════════════════════ OUTPUT VIEW — Dispatch Map ════════════════════════════════════════════════════════════════════════════ */ /* ── Page shell ─────────────────────────────────────────────────────────── */ #hitl-content .ou-page { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: var(--bg); position: relative; /* anchors the slide-in source-document panel below */ } /* Canvas is injected into #ouConnectors — make it the flex-filling host. */ #hitl-content #ouConnectors { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* ── Source-document panel — slide-in, docked to the right, not a modal ──── Genuinely reuses .right-col (same grey shell + .rp-tab-bar header the Review screen's doc-viewer sits in — not just its inner .doc-viewer/ .doc-toolbar), positioned as an overlay instead of a permanent grid column since it's opened on demand rather than always visible. Deliberately no scrim: the fields table must stay fully interactive underneath, so clicking a different Source chip while the panel is open re-jumps it instead of being blocked by a click-catching overlay. Outside-click-to-close is a document-level listener instead (see the ou-src-panel case in the shared document click handler), same pattern as the citations popover. */ #hitl-content .ou-src-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; max-width: 92%; border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(15,23,42,.12); transform: translateX(100%); transition: transform .26s cubic-bezier(.22,1,.36,1); z-index: 31; } #hitl-content .ou-src-panel.is-open { transform: translateX(0); } #hitl-content .ou-src-panel .rp-tab { cursor: default; } /* single static tab, not a switcher */ #hitl-content .ou-src-panel-close { margin-right: 4px; width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; } /* ── Summary bar (compact confirmation strip) ─────────────────────────────── */ #hitl-content #ouHero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 11px 24px; flex-shrink: 0; } #hitl-content .ou-summary-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } #hitl-content .ou-summary-left { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Icon + label pairing mirrors the fields-panel title (.panel-title-icon), so the Output header reads consistently with the Review screen's "Deal ID: 7264" pattern. */ #hitl-content .ou-summary-title-group { display: flex; align-items: center; gap: 7px; } #hitl-content .ou-summary-title-group .panel-title-icon svg { width: 12px; height: 12px; } #hitl-content .ou-summary-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.1; } #hitl-content .ou-summary-approver { display: inline-flex; align-items: center; gap: 8px; } #hitl-content .ou-summary-approver .ft-avatar { width: 22px; height: 22px; margin-top: 0; } #hitl-content .ou-approver-text { font-size: 12px; color: var(--text-3); } #hitl-content .ou-approver-text strong { color: var(--text-2); font-weight: 600; } #hitl-content .ou-summary-spacer { flex: 1; min-width: 12px; } #hitl-content .ou-summary-total { font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; } /* ── Segmented distribution bar (sleek) ───────────────────────────────────── */ #hitl-content .ou-segbar { display: flex; height: 4px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; } #hitl-content .ou-seg { display: block; min-width: 4px; border-radius: 999px; } #hitl-content .ou-seg--sent { background: var(--p); } #hitl-content .ou-seg--held { background: #cbd5e1; } #hitl-content .ou-seg--att { background: var(--warn); } /* ── Legend ───────────────────────────────────────────────────────────────── */ #hitl-content .ou-legend { display: flex; gap: 14px; flex-wrap: wrap; } #hitl-content .ou-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); } #hitl-content .ou-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } #hitl-content .ou-legend-item--sent .ou-legend-dot { background: var(--p); } #hitl-content .ou-legend-item--held .ou-legend-dot { background: #cbd5e1; } #hitl-content .ou-legend-item--att .ou-legend-dot { background: var(--warn); } /* ── Header mode toggle (Flow map / Back to review) ───────────────────────── */ #hitl-content .ou-mode-btn { flex-shrink: 0; } #hitl-content .ou-mode-btn svg { flex-shrink: 0; } /* ═══ DESTINATION REVIEW (default Output view) ═══════════════════════════════ */ /* ── Destination overview cards (switcher = overview; equal tiles, no order) ── No section label above — the cards and the pager carry the identity. */ /* ── Single-connector step header — replaces the old multi-card row. Nothing about what comes after a connector is fixed (could be another connector, a maker-checker step, anything), so this screen no longer shows a permanent row of same-type tiles implying a rigid chain. Each connector is its own step page; the full sequence lives only in the FAB drawer / breadcrumb menu (pipeFmapStagesHtml). */ /* Part of the page, not a stacked white band: the panel below is the surface card, so the header sits transparent on the page background with real breathing room above and below (overrides .step-hdr's band treatment). */ #hitl-content .ou-conn-hdr { display: flex; flex-direction: column; max-width: 1120px; margin: 0 auto 16px; background: transparent; border-bottom: none; padding: 26px 2px 0; } #hitl-content .ou-conn-hdr .step-heading { display: flex; align-items: center; gap: 10px; } #hitl-content .ou-conn-hdr-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } #hitl-content .ou-conn-hdr-icon svg { width: 13px; height: 13px; } #hitl-content .ou-dcard-icon--connector { background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100); } #hitl-content .ou-dcard-icon--template { background: #f0f9ff; color: #0369a1; border: 1px solid #e0f2fe; } #hitl-content .ou-conn-hdr-stats { display: flex; align-items: center; gap: 12px; margin-top: 12px; } /* Hover-expand (restored): the field distribution bar grows under the cursor so the segment proportions become readable; per-segment titles carry the exact counts. Same grid-track easing as the old .ou-dcard breakdown. */ #hitl-content .ou-conn-hdr-stats .ou-dcard-bar { width: 160px; flex-shrink: 0; transition: width .32s cubic-bezier(.22,1,.36,1); } #hitl-content .ou-conn-hdr-stats:hover .ou-dcard-bar { width: 280px; } #hitl-content .ou-conn-hdr-stats .ou-segbar { transition: height .32s cubic-bezier(.22,1,.36,1); } #hitl-content .ou-conn-hdr-stats:hover .ou-segbar { height: 10px; } #hitl-content .ou-dcard-counts { font-size: 11.5px; color: var(--text-2); white-space: nowrap; } #hitl-content .ou-dcard-att { color: #b45309; font-weight: 600; } /* ── Topbar primary action (replaces the old in-flow confirm banner) ───────── */ /* display:contents so the divider + button injected by ouTopbarActionHtml participate directly in .topbar-right's flex gap. */ #hitl-content #ouTopbarAction { display: contents; } #hitl-content .ou-topbar-done { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--success-50); border: 1px solid var(--success-100); color: var(--success); font-size: 12px; font-weight: 600; white-space: nowrap; } /* Icon-only outline buttons (Refresh / Export) — square, tooltip carries the label */ #hitl-content .btn-icon-only { padding: 0 8px; } #hitl-content .btn-icon-only svg { display: block; flex-shrink: 0; } /* Connector sub-step styles removed — connectors now render as first-class flattened rows in every step-list surface (pipeFmapStagesHtml / pipeDisplaySteps), reusing the standard .fmap-row / .cs-row styles. */ /* ── Scroll area + destination panel ──────────────────────────────────────── */ #hitl-content .ou-rev-scroll { flex: 1; min-height: 0; overflow-y: auto; /* No top padding: sticky descendants pin inside a scroller's padding, so any padding-top becomes a strip where rows stay visible above the pinned header. Top spacing lives on .ou-conn-hdr's own padding instead. */ padding: 0 32px 48px; } #hitl-content .ou-rev-panel { max-width: 1120px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-xs); /* clip (not hidden): hidden creates a scroll container, which would trap the sticky header/group bands — clip keeps the rounded-corner crop without one */ overflow: clip; } /* ── Fields table — compact scan mode ──────────────────────────────────────── Built for 50+ fields: single-line rows, 4 columns (field · value · details · mapping), sticky column header + sticky outcome bands against .ou-rev-scroll. */ #hitl-content .ou-rev-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; } #hitl-content .ou-rev-table th { position: sticky; top: 0; z-index: 3; text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); line-height: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } #hitl-content .ou-rev-table th:first-child, #hitl-content .ou-rev-table td:first-child { padding-left: 24px; } #hitl-content .ou-rev-table th:last-child, #hitl-content .ou-rev-table td:last-child { padding-right: 24px; } #hitl-content .ou-rev-table th.ou-rev-td-field { width: 19%; } #hitl-content .ou-rev-table th.ou-rev-td-value { width: 24%; } #hitl-content .ou-rev-table th.ou-rev-td-source { width: 12%; } #hitl-content .ou-rev-table th.ou-rev-td-details { width: 29%; } #hitl-content .ou-rev-table th.ou-rev-td-map { width: 16%; } /* Outcome group bands — sticky just below the column header (31px tall) so deep in a 50-row section you still know which outcome you're scanning */ #hitl-content .ou-rev-group td { position: sticky; top: 30px; z-index: 2; padding: 6px 16px 6px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } #hitl-content .ou-rev-group-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; } #hitl-content .ou-rev-group--att td { color: #92400e; } #hitl-content .ou-rev-group--att .ou-rev-group-dot { background: var(--warn); } #hitl-content .ou-rev-group--held td { color: var(--text-3); } #hitl-content .ou-rev-group--held .ou-rev-group-dot { background: #cbd5e1; } #hitl-content .ou-rev-group--sent td { color: var(--p-700); } #hitl-content .ou-rev-group--sent .ou-rev-group-dot { background: var(--p); } /* Field rows — ONE text voice: every data cell (field, value, source text, template section) is the same size, weight, and colour. Emphasis is reserved for semantically distinct elements only: status chips, code chips, page-ref chips, and muted empty states. */ #hitl-content .ou-rev-row { cursor: pointer; transition: background .1s; } #hitl-content .ou-rev-row:hover { background: var(--surface-2); } #hitl-content .ou-rev-row td { padding: 8px 16px; border-bottom: 1px solid var(--c-border-light); font-size: 12.5px; font-weight: 400; color: var(--text); vertical-align: middle; } /* Field cell: outcome dot + name — per-row state survives without a chip column */ #hitl-content .ou-rev-fieldwrap { display: flex; align-items: center; gap: 8px; min-width: 0; } #hitl-content .ou-rev-rowdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } #hitl-content .ou-rev-rowdot--att { background: var(--warn); } #hitl-content .ou-rev-rowdot--held { background: #cbd5e1; } #hitl-content .ou-rev-rowdot--sent { background: var(--p); } #hitl-content .ou-rev-fieldname { font-weight: 500; flex: 1; min-width: 0; } /* Source cell: same src-pill + picker pattern as the Review screen (ouRevSourceChips / ouSourcePillClick) — .src-pill itself is styled once, near .citation-chip, shared by both screens. */ /* Destination cell: quiet one-line mono key / template section */ #hitl-content .ou-rev-map { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-3); } #hitl-content .ou-rev-none { font-size: 12.5px; color: var(--text-3); } #hitl-content .ou-rev-code { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2.5px 8px; white-space: nowrap; } #hitl-content .ou-rev-section, #hitl-content .ou-rev-source-txt { font-size: 13px; font-weight: 400; color: var(--text); } /* Source citations: labelled page chips + compact "System" chip */ #hitl-content .ou-rev-cite { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2.5px 7px; white-space: nowrap; } #hitl-content .ou-rev-cite svg { flex-shrink: 0; opacity: .65; } #hitl-content .ou-rev-cite--sys { color: var(--text-3); } /* Non-AI source provenance badges (Source column): Manual / Deal Hub. Same size family as .src-pill but inert — there is nothing to open; the tooltip carries the provenance detail. Dashed border distinguishes "no document citations by design" from the solid, clickable AI pill. */ #hitl-content .ou-src-type { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; border-radius: 4px; background: #f8fafc; color: #64748b; border: 1px dashed #cbd5e1; font-size: 10px; font-weight: 700; flex-shrink: 0; position: relative; overflow: visible; white-space: nowrap; } #hitl-content .ou-src-type svg { opacity: .7; } /* 2-line clamp for long values / reasons; full text on hover + in the modal */ #hitl-content .ou-rev-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* One-line ellipsis; the fixed table layout constrains each cell's width */ #hitl-content .ou-rev-clamp1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Status chips */ #hitl-content .ou-rev-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3.5px 10px; border-radius: 999px; white-space: nowrap; } #hitl-content .ou-rev-chip svg { width: 12px; height: 12px; flex-shrink: 0; } #hitl-content .ou-rev-chip--sent { background: var(--p-50); color: var(--p-700); border: 1px solid var(--p-100); } #hitl-content .ou-rev-chip--not-sent { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; } #hitl-content .ou-rev-chip--attention { background: var(--warn-50); color: #b45309; border: 1px solid #fde68a; } /* Details column — the "why" (and remedy) lives in its own column so rows stay visually alignable; small quiet text, colour only on attention rows. */ #hitl-content .ou-rev-detail { font-size: 12px; line-height: 1.5; color: var(--text-3); } #hitl-content .ou-rev-detail--att { color: #92400e; } #hitl-content .ou-rev-fix-chip { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; padding: 1px 5px; margin-right: 5px; vertical-align: 1px; flex-shrink: 0; } /* ═══ APPROVAL → OUTPUT TRANSITION ═══════════════════════════════════════════ Full-screen affirmation: check draws in, then the approved record fans out to all destinations IN PARALLEL (simultaneous wires — peers, not a sequence). */ #hitl-content .ou-transition, .ou-transition { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: #f8f7f5; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; opacity: 1; transition: opacity .4s ease; cursor: pointer; } .ou-transition.is-leaving { opacity: 0; } .ou-transition * { box-sizing: border-box; margin: 0; padding: 0; } .ou-tr-stack { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; } /* Check: ring + tick stroke-draw */ .ou-tr-check { width: 56px; height: 56px; margin-bottom: 22px; opacity: 0; transform: scale(.6); } .ou-transition.is-playing .ou-tr-check { animation: ouTrPop .45s cubic-bezier(.34,1.56,.64,1) forwards; } .ou-tr-check-ring { stroke: #7c3aed; fill: #f5f3ff; stroke-dasharray: 158; stroke-dashoffset: 158; } .ou-transition.is-playing .ou-tr-check-ring { animation: ouTrDraw .55s ease-out .1s forwards; } .ou-tr-check-tick { stroke: #7c3aed; stroke-dasharray: 34; stroke-dashoffset: 34; } .ou-transition.is-playing .ou-tr-check-tick { animation: ouTrDraw .35s ease-out .5s forwards; } .ou-tr-title { font-size: 22px; font-weight: 700; color: #111111; letter-spacing: -.02em; opacity: 0; transform: translateY(8px); } .ou-transition.is-playing .ou-tr-title { animation: ouTrRise .45s ease-out .35s forwards; } .ou-tr-sub { font-size: 13.5px; color: #5a5a5a; margin-top: 7px; opacity: 0; transform: translateY(8px); } .ou-transition.is-playing .ou-tr-sub { animation: ouTrRise .45s ease-out .5s forwards; } /* Record → destinations fan-out */ .ou-tr-flow { display: flex; flex-direction: column; align-items: center; margin-top: 34px; position: relative; } .ou-tr-source { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); opacity: 0; transform: translateY(8px); } .ou-transition.is-playing .ou-tr-source { animation: ouTrRise .45s ease-out .75s forwards; } .ou-tr-source-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #f5f3ff; color: #6d28d9; border: 1px solid #ede9fe; } .ou-tr-source-text { display: flex; flex-direction: column; gap: 1px; text-align: left; } .ou-tr-source-name { font-size: 12.5px; font-weight: 700; color: #111111; } .ou-tr-source-sub { font-size: 11px; color: #9a9a9a; } .ou-tr-lanes { display: flex; gap: 28px; align-items: flex-start; margin-top: 48px; } /* Measured connectors (drawn by ouTrDrawWires) — staggered per connector index (--tr-i, set inline by ouTrDrawWires) so the handoff reads as sequential delivery, matching the Connectors screen it lands on. Each connector's wire draws, its dot travels, then its checkmark pops — in delivery order — before the next connector's beat starts. Base delays below are connector 0's timing; --tr-i adds one full beat (.55s) per subsequent connector. */ .ou-tr-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .ou-tr-wire-path { fill: none; stroke: #ddd6fe; stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--plen); stroke-dashoffset: var(--plen); } .ou-transition.is-playing .ou-tr-wire-path { animation: ouTrWireDraw .4s ease-out forwards; animation-delay: calc(1s + var(--tr-i, 0) * .55s); } .ou-tr-dot { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #7c3aed; opacity: 0; offset-rotate: 0deg; pointer-events: none; } .ou-transition.is-playing .ou-tr-dot { animation: ouTrDotTravel .5s ease-in-out forwards; animation-delay: calc(1.4s + var(--tr-i, 0) * .55s); } .ou-tr-chip { display: inline-flex; align-items: center; gap: 9px; background: #ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 9px 13px; box-shadow: 0 1px 4px rgba(0,0,0,.06); opacity: 0; transform: translateY(10px); } .ou-transition.is-playing .ou-tr-chip { animation: ouTrRise .5s cubic-bezier(.22,1,.36,1) 1.25s forwards; } .ou-tr-chip-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } .ou-tr-chip-icon--connector { background: #f5f3ff; color: #6d28d9; border: 1px solid #ede9fe; } .ou-tr-chip-icon--template { background: #f0f9ff; color: #0369a1; border: 1px solid #e0f2fe; } .ou-tr-chip-text { display: flex; flex-direction: column; gap: 1px; text-align: left; } .ou-tr-chip-name { font-size: 12px; font-weight: 700; color: #111111; } .ou-tr-chip-sub { font-size: 10.5px; color: #9a9a9a; } .ou-tr-chip-check { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f5f3ff; color: #6d28d9; border: 1px solid #ede9fe; opacity: 0; transform: scale(.5); } .ou-transition.is-playing .ou-tr-chip-check { animation: ouTrPop .3s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(1.8s + var(--tr-i, 0) * .55s); } .ou-tr-hint { margin-top: 36px; font-size: 11.5px; color: #9a9a9a; opacity: 0; } /* Waits for the last connector's checkmark (--tr-n set inline: connector count) */ .ou-transition.is-playing .ou-tr-hint { animation: ouTrFade .4s ease-out forwards; animation-delay: calc(2s + max(0, var(--tr-n, 1) - 1) * .55s); } @keyframes ouTrPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes ouTrRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ouTrFade { from { opacity: 0; } to { opacity: 1; } } @keyframes ouTrDraw { to { stroke-dashoffset: 0; } } @keyframes ouTrWireDraw { to { stroke-dashoffset: 0; } } @keyframes ouTrDotTravel { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } /* ── End-of-card destination controls ─────────────────────────────────────── */ #hitl-content .ou-rev-cardnav { max-width: 1120px; margin: 16px auto 0; display: flex; align-items: center; justify-content: center; gap: 14px; } #hitl-content .ou-rev-nav-arrow { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; transition: background .12s, color .12s; } #hitl-content .ou-rev-nav-arrow:hover:not(:disabled) { background: rgba(17,17,17,.05); color: var(--text); } #hitl-content .ou-rev-nav-arrow:disabled { opacity: .3; cursor: default; } #hitl-content .ou-rev-nav-pos { font-size: 11.5px; color: var(--text-3); white-space: nowrap; } /* ── Whiteboard canvas (source → wires → destinations) ──────────────────────── */ #hitl-content .ou-canvas { position: relative; overflow: hidden; flex: 1; min-height: 0; background-color: #f6f5f2; background-image: radial-gradient(rgba(17,17,17,.10) 1.4px, transparent 1.5px); background-size: 26px 26px; background-position: 0 0; touch-action: none; cursor: grab; } #hitl-content .ou-canvas.ou-panning { cursor: grabbing; } #hitl-content .ou-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } #hitl-content .ou-wires { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; overflow: visible; } #hitl-content .ou-wire { fill: none; stroke: #c4b5fd; stroke-width: 1.75; stroke-linecap: round; opacity: .85; } #hitl-content .ou-wire-dot { fill: var(--p); } #hitl-content .ou-source { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 20px 10px 12px; box-shadow: 0 1px 2px rgba(16,12,40,.04), 0 6px 16px -6px rgba(16,12,40,.12); cursor: grab; user-select: none; touch-action: none; } #hitl-content .ou-source:active { cursor: grabbing; } #hitl-content .ou-source::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--p); border: 2px solid var(--surface); z-index: 3; } /* Incoming port — mirrors ::after so the pipeline trail visibly feeds in from above */ #hitl-content .ou-source::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--p); border: 2px solid var(--surface); z-index: 3; } #hitl-content .ou-source-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--p-50), #ede9fe); color: var(--p-600); border: 1px solid var(--p-200, #ddd6fe); } #hitl-content .ou-source-text { display: flex; flex-direction: column; } #hitl-content .ou-source-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; } #hitl-content .ou-source-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; } /* ── Pre-approve pipeline trail — echoes the floating pipeline map's (.fmap-*) icon/label styling so the Output screen reads as a continuation of the same workflow, not a disconnected report. Kept smaller/muted than .fmap-icon-box since the destination cards remain the primary focus. ── */ #hitl-content .ou-trail { position: absolute; z-index: 2; pointer-events: none; } #hitl-content .ou-trail-row { display: flex; align-items: flex-start; } #hitl-content .ou-trail-step { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; flex-shrink: 0; } #hitl-content .ou-trail-step-icon { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #ede9fe; border: 1.5px solid #c4b5fd; color: #7c3aed; } #hitl-content .ou-trail-step-icon svg { width: 12px; height: 12px; } #hitl-content .ou-trail-step-label { font-size: 9.5px; font-weight: 600; color: var(--text-3); text-align: center; line-height: 1.25; } #hitl-content .ou-trail-connector { width: 20px; height: 2px; background: #c4b5fd; margin-top: 11px; flex-shrink: 0; } #hitl-content .ou-zoom { position: absolute; right: 16px; bottom: 16px; z-index: 7; display: flex; flex-direction: row; align-items: center; gap: 2px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 12px; padding: 4px; box-shadow: 0 2px 6px rgba(16,12,40,.06), 0 12px 28px -10px rgba(16,12,40,.18); } #hitl-content .ou-zoom-btn { width: 30px; height: 30px; border: none; background: transparent; color: var(--text-2); font-size: 17px; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background .12s, color .12s; } #hitl-content .ou-zoom-btn:hover { background: var(--p-50); color: var(--p); } #hitl-content .ou-zoom-pct { min-width: 46px; height: 30px; border: none; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px; font-family: inherit; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; transition: background .12s; } #hitl-content .ou-zoom-pct:hover { background: var(--p-50); color: var(--p); } #hitl-content .ou-zoom-div { width: 1px; height: 18px; background: var(--border-2); margin: 0 2px; } #hitl-content .ou-canvas-hint { position: absolute; left: 16px; bottom: 16px; z-index: 7; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); padding: 6px 8px 6px 12px; border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(16,12,40,.06); } #hitl-content .ou-hint-close { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 11px; line-height: 1; font-family: inherit; transition: background .12s, color .12s; } #hitl-content .ou-hint-close:hover { background: var(--bg-2, rgba(0,0,0,.06)); color: var(--text); } /* Topbar: last-updated + refresh */ #hitl-content #view-output .ou-last-updated { font-size: 12px; color: var(--text-3); margin-right: 2px; white-space: nowrap; } #hitl-content #view-output .ou-refresh-btn, #hitl-content #view-output .ou-export-btn { display: inline-flex; align-items: center; gap: 6px; } /* ── Destination node ─────────────────────────────────────────────────────── */ #hitl-content .ou-dest { position: absolute; width: 300px; background: var(--surface); border: 1px solid rgba(16,12,40,.07); border-radius: 16px; padding: 0 18px 16px; display: flex; flex-direction: column; gap: 13px; box-shadow: 0 1px 2px rgba(16,12,40,.04), 0 10px 26px -12px rgba(16,12,40,.16); z-index: 1; transition: box-shadow .16s, transform .16s; } #hitl-content .ou-dest:hover { box-shadow: 0 2px 4px rgba(16,12,40,.05), 0 18px 40px -14px rgba(16,12,40,.26); } #hitl-content .ou-dest.ou-dragging { box-shadow: 0 2px 4px rgba(16,12,40,.06), 0 24px 50px -12px rgba(16,12,40,.34); z-index: 5; } /* Connection port — sits on the top edge, on top of the card (never behind). */ #hitl-content .ou-dest::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--p); border: 2px solid var(--surface); z-index: 3; } #hitl-content .ou-dest-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 -18px; padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: grab; user-select: none; touch-action: none; } #hitl-content .ou-dest-head:active { cursor: grabbing; } #hitl-content .ou-dest-head-row { display: flex; align-items: center; gap: 11px; width: 100%; } #hitl-content .ou-dest-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); } #hitl-content .ou-dest-icon svg { width: 14px; height: 14px; } #hitl-content .ou-dest--ok .ou-dest-icon { background: var(--p-50); color: var(--p-600); border-color: var(--p-200, #ddd6fe); } #hitl-content .ou-dest--att .ou-dest-icon { background: var(--warn-50); color: var(--warn); border-color: #fcd34d; } #hitl-content .ou-dest-head-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; gap: 2px; } #hitl-content .ou-dest-name { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.2; } #hitl-content .ou-dest-sub { font-size: 11px; color: var(--text-3); } /* Type badge — small, icon + label, sits on top of the card name (ext-badge spec) */ #hitl-content .ou-dest-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #52525b; background: #f4f4f5; border: 1px solid #d4d4d8; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; } #hitl-content .ou-dest-kind svg { width: 9px; height: 9px; } #hitl-content .ou-dest-body { display: flex; flex-direction: column; gap: 14px; max-height: 248px; overflow-y: auto; overflow-x: hidden; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } #hitl-content .ou-dest-body::-webkit-scrollbar { width: 7px; } #hitl-content .ou-dest-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; } #hitl-content .ou-dest-body::-webkit-scrollbar-track { background: transparent; } /* When more rows are below the fold, fade the bottom edge as a "more" cue. */ #hitl-content .ou-dest-body.is-overflow { -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - 26px), transparent 100%); } #hitl-content .ou-dest-att { display: flex; flex-direction: column; gap: 8px; } /* "N more" pill — explicit scroll affordance, shown only when content overflows */ #hitl-content .ou-dest-more { display: none; align-items: center; justify-content: center; gap: 5px; margin: -4px auto 0; padding: 4px 12px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-2); cursor: pointer; box-shadow: var(--shadow-xs); font-family: inherit; transition: border-color .12s, color .12s; } #hitl-content .ou-dest-more.show { display: inline-flex; } #hitl-content .ou-dest-more:hover { border-color: var(--p-300, #c4b5fd); color: var(--p); } #hitl-content .ou-dest-more svg { opacity: .8; } /* ── Field groups + tiles ─────────────────────────────────────────────────── */ #hitl-content .ou-dest-group { display: flex; flex-direction: column; gap: 8px; } #hitl-content .ou-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } #hitl-content .ou-tile-wrap { display: flex; flex-wrap: wrap; gap: 6px; } #hitl-content .ou-tile { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; font-family: inherit; color: var(--text); background: var(--surface); cursor: pointer; border: 1px solid var(--border); transition: border-color .12s, box-shadow .12s, transform .12s; } #hitl-content .ou-tile:hover { border-color: var(--border-2); box-shadow: var(--shadow-xs); transform: translateY(-1px); } #hitl-content .ou-tile-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #hitl-content .ou-tile-ic svg { width: 15px; height: 15px; } #hitl-content .ou-tile-name { white-space: nowrap; } #hitl-content .ou-tile--sent .ou-tile-ic { color: var(--p); } #hitl-content .ou-tile--not-sent { color: var(--text-2); } #hitl-content .ou-tile--not-sent .ou-tile-ic { color: #94a3b8; } #hitl-content .ou-tile--attention .ou-tile-ic { color: var(--warn); } /* ── Trail steps (reused in modal) ──────────────────────────────────────── */ .ou-trail-list { display: flex; flex-direction: column; } .ou-trail-step { display: flex; gap: 13px; padding-bottom: 18px; } .ou-trail-step--last { padding-bottom: 4px; } .ou-trail-step-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 28px; } .ou-trail-step-icon { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; } .ou-trail-step-icon svg { width: 12px; height: 12px; } .ou-trail-step-icon--neutral { border-color: #ddd6fe; color: #7c3aed; background: #f5f3ff; } .ou-trail-step-icon--sent { border-color: #7c3aed; color: #fff; background: #7c3aed; } .ou-trail-step-icon--not-sent { border-color: #cbd5e1; color: #64748b; background: #f1f5f9; } .ou-trail-step-icon--attention { border-color: #f59e0b; color: #fff; background: #f59e0b; } .ou-trail-step-line { width: 2px; flex: 1; background: #ece9f5; margin-top: 4px; min-height: 14px; border-radius: 2px; } .ou-trail-step-body { flex: 1; min-width: 0; padding-top: 4px; } .ou-trail-step-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ou-trail-step-label { font-size: 13px; font-weight: 600; color: #1f2937; } .ou-trail-step-time { font-size: 11px; color: #9ca3af; font-family: 'SF Mono','Fira Code',ui-monospace,monospace; flex-shrink: 0; } .ou-trail-step-detail { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.5; } .ou-trail-step--not-sent .ou-trail-step-detail { color: #64748b; } .ou-trail-step--attention .ou-trail-step-detail { color: #92400e; } /* ── Field trail modal ───────────────────────────────────────────────────── */ .ou-modal-overlay { position: fixed; inset: 0; background: rgba(17,12,34,.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } .ou-modal { background: #fff; border-radius: 16px; width: 540px; max-width: 100%; max-height: calc(100vh - 56px); display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(17,12,34,.28), 0 0 0 1px rgba(0,0,0,.05); overflow: hidden; } .ou-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 26px 20px; flex-shrink: 0; } .ou-modal-head-main { min-width: 0; } .ou-modal-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; } .ou-modal--sent .ou-modal-chip { background: #f5f3ff; color: #6d28d9; } .ou-modal--not-sent .ou-modal-chip { background: #f1f5f9; color: #475569; } .ou-modal--attention .ou-modal-chip { background: var(--warn-50); color: #b45309; } .ou-modal-field-name { font-size: 19px; font-weight: 700; color: #0f0a1e; letter-spacing: -.02em; line-height: 1.2; } .ou-modal-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; margin-top: 6px; } .ou-modal-meta-icon { display: inline-flex; color: #9ca3af; } .ou-modal-meta-icon svg { width: 12px; height: 12px; } .ou-modal-close { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; border: 1px solid #e5e7eb; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #6b7280; cursor: pointer; transition: background .12s, color .12s; } .ou-modal-close:hover { background: #f3f4f6; color: #111; } /* Info sections — Value and Source share one card style for consistency */ .ou-modal-body { display: flex; flex-direction: column; gap: 10px; padding: 0 26px; } .ou-modal-section { position: relative; background: #faf9fc; border: 1px solid #efeef4; border-radius: 12px; padding: 13px 16px; } /* Label-only header — same height in both cards, so label→content gaps match */ .ou-modal-section-head { display: flex; align-items: center; min-height: 16px; } .ou-modal-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; } /* Value typography mirrors the review/approve screen field value (.field-val) */ .ou-modal-value { display: block; margin-top: 8px; padding-right: 34px; font-size: 14px; font-weight: 500; color: #111; line-height: 1.45; word-break: break-word; } .ou-modal-value--empty { color: #9ca3af; font-style: italic; } /* Very long values clamp to 5 lines with a "Show full value" expander so the value card can't crowd the journey out of the modal. */ .ou-modal-value--clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .ou-modal-value-toggle { margin-top: 6px; border: none; background: none; padding: 0; font-size: 12px; font-weight: 600; color: #6d28d9; cursor: pointer; font-family: inherit; } .ou-modal-value-toggle:hover { text-decoration: underline; } .ou-modal-source { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .ou-modal-source-val { font-size: 13px; color: #6b7280; word-break: break-word; } /* Uncapped citation list — same visual design as .cite-pop-item (numbered citation chip, truncated document name; the page lives in the hover snippet card) but laid out inline in the modal instead of a fixed-position popover, since the modal already has the vertical room to show every citation without collapsing them. NOT reusing .cite-pop-item/.cite-pop-doc-name directly: this modal is appended to document.body, outside #hitl-content, so every #hitl-content-prefixed rule silently doesn't apply here — hence dedicated, unprefixed classes below instead. */ .ou-modal-source-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; width: 100%; } .ou-modal-source-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px; border-radius: 8px; border: none; background: transparent; font-size: 12.5px; color: #374151; text-align: left; cursor: pointer; font-family: inherit; } .ou-modal-source-item:hover { background: #f8fafc; color: #0f172a; } .ou-modal-source-item:hover .citation-chip { background: #4f46b8; } .ou-modal-source-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Manual / Deal Hub provenance block — the modal-side counterpart of the table's .ou-src-type badge (no citations to list, so explain the origin) */ .ou-modal-prov { display: flex; gap: 10px; margin-top: 8px; align-items: flex-start; } .ou-modal-prov-icon { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: #eef2f7; color: #64748b; display: inline-flex; align-items: center; justify-content: center; } .ou-modal-prov-body { min-width: 0; } .ou-modal-prov-title { font-size: 13px; font-weight: 600; color: #111; } .ou-modal-prov-desc { font-size: 12px; color: #6b7280; line-height: 1.55; margin-top: 2px; } /* Copy lives in the card's top-right, out of header flow, so it never inflates the label row */ .ou-copy-icon { position: absolute; top: 11px; right: 13px; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: border-color .12s, color .12s, background .12s; } .ou-copy-icon:hover { border-color: #c4b5fd; color: #7c3aed; } /* Modal is appended to (outside #hitl-content), so re-declare the citation chip unscoped — mirrors #hitl-content .citation-chip. */ .ou-modal .citations-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; } .ou-modal .citation-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 5px; padding: 0 5px; background: #6b7280; color: #fff; border: none; font-size: 10px; font-weight: 700; flex-shrink: 0; } .ou-modal-trail { flex: 1; overflow-y: auto; padding: 22px 26px 8px; } .ou-modal-trail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .ou-modal-trail-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9ca3af; } .ou-modal-trail-date { font-size: 11px; font-weight: 600; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: 2px 9px; } .ou-modal-footer { display: flex; align-items: center; gap: 12px; padding: 14px 26px; border-top: 1px solid #f0f0f4; flex-shrink: 0; } .ou-modal-footer-meta { font-size: 11.5px; color: #9ca3af; }