/* ============================================================== RightProduct.ai DESIGN SYSTEM — all styling lives here, in one spot. Layers: 1 tokens · 2 base · 3 components · 4 layout/nav · 5 surface-specific. New UI must compose the components below — never paint per-instance colors in markup; add a variant class here instead. Reference: docs/design/design-system.md ============================================================== */ /* ---------- 1 · TOKENS ---------- */ :root{ --bg:#F7F8FB; --panel:#FFFFFF; --card:#FFFFFF; --line:#E4E8F0; --line-strong:#C9D3E4; --txt:#17284A; --dim:#5C6B84; --faint:#8B97AC; --acc:#275DF5; --acc-strong:#1E4FD6; --acc-bg:#EDF2FF; --acc-line:#C9D8FE; --btn:#275DF5; --good:#0E9F6E; --good-bg:#E7F6EF; --good-line:#B7E4C7; --warn:#B45309; --warn-bg:#FEF3C7; --warn-line:#FDE68A; --bad:#DC2626; --bad-bg:#FDEBEB; --bad-line:#F5C2C2; --well:#E9EDF5; --hover:#F6F8FC; --tint:#FBFCFE; --r-sm:6px; --r-md:8px; --r-lg:12px; --shadow:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04); --shadow-lg:0 20px 50px rgba(16,24,40,.18); --font:Inter,-apple-system,BlinkMacSystemFont,sans-serif; --speed:.14s; color-scheme:light; } /* Dark theme (22.9) — same components, swapped tokens. data-theme is set on by applyTheme(); "system" tracks prefers-color-scheme. */ :root[data-theme="dark"]{ --bg:#0E1320; --panel:#161C2C; --card:#161C2C; --line:#252E44; --line-strong:#38445F; --txt:#E7ECF6; --dim:#9AA6BD; --faint:#6E7A93; --acc:#7C9CFF; --acc-strong:#5B84F8; --acc-bg:#1D2A4A; --acc-line:#31437A; --btn:#3B66F0; --good:#34D399; --good-bg:#0E2B21; --good-line:#1F5B44; --warn:#FBBF24; --warn-bg:#332A10; --warn-line:#5C4A16; --bad:#F87171; --bad-bg:#331416; --bad-line:#5C2626; --well:#232B3F; --hover:#1C2436; --tint:#131928; --shadow:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-lg:0 20px 50px rgba(0,0,0,.5); color-scheme:dark; } :root[data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.55)} /* ---------- 2 · BASE ---------- */ *{box-sizing:border-box;margin:0} body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.55} button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:2px} input,textarea,select{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-md);padding:9px 12px;font:400 14px var(--font);width:100%;transition:border-color var(--speed),box-shadow var(--speed)} select{width:auto} input[type="checkbox"],input[type="radio"],input[type="file"]{width:auto;padding:0;box-shadow:none} input:hover,textarea:hover{border-color:var(--line-strong)} input:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg);outline:none} label{font-size:13px;color:var(--dim);display:block;margin-bottom:4px;font-weight:500} a{color:var(--acc);text-decoration:none} a:hover{color:var(--acc-strong)} /* ---------- 3 · COMPONENTS ---------- */ /* Buttons — primary (default) · .quiet/.ghost secondary · .danger · .pill small action · .icobtn table action · .starbtn toggle */ button{background:var(--btn);border:1px solid transparent;color:#fff;font:500 14px var(--font);padding:8px 16px;border-radius:var(--r-md);cursor:pointer;transition:background var(--speed),border-color var(--speed),color var(--speed),box-shadow var(--speed)} button:hover{background:var(--acc-strong)} button.ghost,button.quiet{background:var(--panel);border-color:var(--line);color:var(--txt)} button.ghost{color:var(--dim)} button.ghost:hover,button.quiet:hover{background:var(--hover);border-color:var(--line-strong);color:var(--txt)} button.danger{background:var(--bad);color:#fff} button.danger:hover{background:#B91C1C} button:disabled{opacity:.45;cursor:default;pointer-events:none} .pill{background:var(--panel);font-size:12.5px;font-weight:500;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;white-space:nowrap;transition:border-color var(--speed),color var(--speed),background var(--speed);text-decoration:none;display:inline-block} .pill:hover{border-color:var(--line-strong);color:var(--txt);background:var(--hover)} .pill.acc{color:var(--acc);border-color:var(--acc-line);background:var(--acc-bg)} .pill.acc:hover{border-color:var(--acc);background:var(--acc-bg)} .pill.good{color:var(--good);border-color:var(--good-line)} .pill.warn{color:var(--warn);border-color:var(--warn-line)} span.pill,a.pill{cursor:default} a.pill{cursor:pointer} .icobtn{background:none;border:1px solid var(--line);color:var(--dim);font-size:12px;padding:3px 9px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:color var(--speed),border-color var(--speed)} .icobtn:hover{color:var(--txt);border-color:var(--line-strong);background:var(--hover)} .icobtn.danger:hover{color:var(--bad);border-color:var(--bad)} .starbtn{background:none;border:1px solid var(--line);color:var(--dim);border-radius:var(--r-md);padding:4px 10px;cursor:pointer;font-size:13px;transition:color var(--speed),border-color var(--speed)} .starbtn:hover{border-color:var(--line-strong)} .starbtn.on{color:var(--warn);border-color:var(--warn)} .chip{font-size:13px;color:var(--dim);border:1px solid var(--line);border-radius:var(--r-md);padding:5px 12px;background:transparent;cursor:pointer;transition:background var(--speed),color var(--speed)} .chip:hover{background:var(--hover);color:var(--txt)} /* Badges — non-interactive status. .badge.good/.warn/.bad/.acc/.neutral */ .badge{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap;border:1px solid transparent} .badge.good{background:var(--good-bg);color:var(--good);border-color:var(--good-line)} .badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .badge.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)} .badge.acc{background:var(--acc-bg);color:var(--acc);border-color:var(--acc-line)} .badge.neutral{background:var(--well);color:var(--dim)} /* Tabs — underline pattern for switching views (filters use .pill) */ .tabs{display:flex;gap:2px;margin:14px 0 16px;border-bottom:1px solid var(--line);overflow-x:auto} .tabs button,.tabs a{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--dim);font:500 13.5px var(--font);padding:7px 12px 9px;cursor:pointer;margin-bottom:-1px;text-decoration:none;white-space:nowrap;transition:color var(--speed)} .tabs button:hover,.tabs a:hover{color:var(--txt);background:none} .tabs button.on,.tabs a.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600} .tabs .tc{font-size:11.5px;color:var(--faint);font-weight:500;margin-left:4px} /* Cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow)} .card.attn{border-color:var(--acc-line)} .card h3{font-size:15px;font-weight:600} /* Dialogs — title, body, .dlg-actions (primary sits right) */ dialog{margin:auto;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:24px;max-width:560px;width:92%} dialog::backdrop{background:rgba(23,40,74,.35)} dialog h3{font-size:17px;margin-bottom:12px} .dlg-actions{display:flex;gap:10px;margin-top:20px;align-items:center;justify-content:flex-end} .dlg-actions .note{margin-right:auto} /* Toast */ #toast{position:sticky;top:10px;z-index:50;max-width:520px;margin:8px auto 0;background:var(--panel);border:1px solid var(--acc-line);border-left:3px solid var(--acc);color:var(--txt);border-radius:var(--r-md);padding:9px 14px;font-size:13px;text-align:center;box-shadow:var(--shadow)} #toast[hidden]{display:none} /* Empty states */ .empty{color:var(--dim);font-size:14px;padding:26px 22px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--tint)} .empty-loop{text-align:left;padding:20px 22px} .empty-loop h3{font-size:15px;margin-bottom:6px;color:var(--txt)} .empty-loop ul{list-style:none;padding:0;margin:10px 0} .empty-loop li{font-size:14px;color:var(--dim);padding:4px 0} .empty-loop li b{color:var(--txt);font-weight:600} .empty-loop .cer-dot{margin-right:6px} /* Meters */ .confbar{height:6px;background:var(--well);border-radius:3px;overflow:hidden;margin-top:4px} .confbar div{height:100%;background:var(--good);border-radius:3px} .covbar{height:8px;background:var(--well);border-radius:4px;overflow:hidden;margin:6px 0 2px} .covbar div{height:100%;background:var(--acc);border-radius:4px} .wbar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim);margin-top:6px} .wbar .wname{width:110px} .wbar .wtrack{flex:1;height:5px;background:var(--well);border-radius:3px} .wbar .wtrack div{height:100%;background:var(--acc);border-radius:3px} /* Data table (capability matrix etc.) */ .cmx{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px} .cmx th,.cmx td{border:1px solid var(--line);padding:7px 10px;text-align:left} .cmx th{color:var(--dim);font-weight:600;background:var(--tint);font-size:12px;text-transform:uppercase;letter-spacing:.4px} .cmx td:first-child{font-weight:600} .cmx .ahead{color:var(--bad)}.cmx .behind{color:var(--good)}.cmx .absent{color:var(--good)} .cmx .parity{color:var(--warn)}.cmx .unknown{color:var(--faint)} .cmxwrap{overflow-x:auto} /* Verdicts */ .verdict{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px} .v-build{background:var(--good-bg);color:var(--good)} .v-modify{background:var(--warn-bg);color:var(--warn)} .v-kill{background:var(--bad-bg);color:var(--bad)} .v-insufficient_evidence{background:var(--acc-bg);color:var(--acc)} .v-revisit{background:var(--warn-bg);color:var(--warn)} /* Quotes & receipts */ .quote{border-left:2px solid var(--acc-line);padding:8px 12px;margin-top:10px;font-size:14px;background:var(--tint);border-radius:0 var(--r-sm) var(--r-sm) 0} .quote .src{font-size:12px;color:var(--dim);margin-bottom:2px} .quote .src b{color:var(--acc);font-weight:600} .receipt{font-size:13px;color:var(--dim);border-left:2px solid var(--line);padding:6px 12px;margin-top:8px} .evstrip{margin-top:10px;font-size:13px} .evstrip button{background:none;border:none;color:var(--acc);font-size:13px;padding:0;cursor:pointer} .evstrip button:hover{background:none;text-decoration:underline} /* ---------- 4 · LAYOUT & NAV ---------- */ header{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel)} header .brand{font-size:15px;font-weight:700;letter-spacing:1px} header .brand span{color:var(--acc)} .avatar{width:32px;height:32px;border-radius:50%;background:var(--acc-bg);color:var(--acc);border:1px solid var(--acc-line);font:600 13px var(--font);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-transform:uppercase;padding:0} .avatar:hover{background:var(--acc-bg);border-color:var(--acc)} .wrap{max-width:1020px;margin:0 auto;padding:0 24px 48px} .shell{display:flex;gap:0;max-width:1240px;margin:0 auto;min-height:calc(100vh - 120px)} .sidebar{flex:0 0 216px;padding:20px 12px;border-right:1px solid var(--line);background:var(--panel)} .sidebar a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-md);text-decoration:none;color:var(--dim);font-size:14px;font-weight:500;margin-bottom:1px;border-left:2px solid transparent;transition:background var(--speed),color var(--speed)} .sidebar a:hover{background:var(--hover);color:var(--txt)} .sidebar a.active{background:var(--acc-bg);color:var(--acc);font-weight:600;border-left-color:var(--acc)} .sidebar a .sb-count{margin-left:auto;font-size:11.5px;font-weight:600;background:var(--well);color:var(--dim);border-radius:999px;padding:1px 8px} .sidebar a.active .sb-count{background:var(--acc);color:#fff} .sidebar .sb-ico{width:16px;text-align:center;font-size:14px} .sidebar .sb-sep{height:1px;background:var(--line);margin:12px 6px} .sidebar .sb-label{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.7px;font-weight:600;padding:4px 12px;margin-top:8px} .content{flex:1;min-width:0;padding:22px 28px 56px;background:var(--bg)} .crumb{font-size:13px;color:var(--dim);margin-bottom:12px} .crumb a{color:var(--acc);text-decoration:none} .crumb a:hover{text-decoration:underline} .crumb .sep{margin:0 6px;color:var(--line-strong)} .page-h{font-size:22px;font-weight:650;letter-spacing:-.01em;margin:2px 0 4px} .page-sub{font-size:14px;color:var(--dim);margin-bottom:18px} .count{display:inline-block;background:var(--acc);color:#fff;font-size:12px;font-weight:600;border-radius:9px;padding:0 8px;margin-left:6px;vertical-align:1px} nav.stations{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:18px;background:var(--panel);box-shadow:var(--shadow)} nav.stations a{display:block;padding:12px 16px;text-decoration:none;color:var(--dim);border-right:1px solid var(--line);background:var(--panel)} nav.stations a:last-child{border-right:0} nav.stations a:hover{background:var(--hover)} nav.stations a .st-name{font-size:14px;font-weight:600;color:var(--txt)} nav.stations a .st-sub{font-size:13px;margin-top:2px} nav.stations a.active{background:var(--acc-bg)} nav.stations a.active .st-name,nav.stations a.active .st-sub{color:var(--acc)} .guide{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);margin-top:12px;background:var(--panel);font-size:14px;box-shadow:var(--shadow)} .guide .arrow{color:var(--acc);font-weight:700} .switch-btn{background:var(--panel);border:1px solid var(--line);color:var(--txt);font:500 14px var(--font);padding:6px 12px;border-radius:var(--r-md);cursor:pointer;transition:border-color var(--speed)} .switch-btn:hover{background:var(--hover);border-color:var(--line-strong)} .switch-menu{position:absolute;top:40px;left:0;min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;z-index:40;box-shadow:var(--shadow-lg)} .switch-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;color:var(--txt);font:400 14px var(--font);padding:9px 12px;border-radius:var(--r-sm);text-align:left;cursor:pointer} .switch-menu button:hover{background:var(--hover)} .switch-menu button.on{color:var(--acc);font-weight:600} .switch-menu .add{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;color:var(--acc)} .switch-menu.user-menu{position:absolute;top:44px;right:0;left:auto;min-width:220px} .user-menu .who{padding:9px 12px;border-bottom:1px solid var(--line);margin-bottom:4px} .user-menu .who b{display:block;font-size:14px} .user-menu .who span{font-size:12px;color:var(--dim)} /* ---------- 5 · SURFACE-SPECIFIC ---------- */ .rowsb{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap} .sum{color:var(--dim);font-size:14px;margin-top:5px} .score{font-weight:700;font-size:17px} .trend{font-size:13px} .trend.rising{color:var(--good)}.trend.flat{color:var(--warn)}.trend.falling{color:var(--bad)} .superseded{opacity:.6} .superseded .frozen{border-color:var(--warn);color:var(--warn)} .basis{font-size:13px;color:var(--dim)} .state{font-size:12px;border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:2px 10px;white-space:nowrap} .state.attn{background:var(--acc-bg);border-color:var(--acc-line);color:var(--acc)} .meta{font-size:13px;color:var(--dim)} .askrow{display:flex;gap:10px;margin:16px 0} .note{font-size:13px;color:var(--dim)} .whyscore{margin-top:10px} .coverage{font-size:13px;color:var(--dim);margin:18px 2px 10px} .coverage b{color:var(--txt);font-weight:600} .coverage a{color:var(--acc);text-decoration:none} .setup{max-width:520px;margin:48px auto} .setup .card{padding:24px} .setup h2{font-size:18px;margin-bottom:6px} .setup p{color:var(--dim);font-size:14px;margin-bottom:18px} .setup .f{margin-bottom:14px} .frozen{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 8px} .declared{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px;background:var(--tint)} .rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-top:10px} .railcur{color:var(--acc);font-weight:600} .raildim{color:var(--dim)} .studio{max-width:760px;margin:0 auto;padding-top:8px} .dircard{cursor:pointer;transition:border-color var(--speed)} .dircard:hover{border-color:var(--acc-line)} .dircard.on{border-color:var(--acc-line);background:var(--acc-bg)} .vfind{border-left:3px solid var(--line);padding:8px 12px;margin-top:8px} .vfind.supported{border-color:var(--good)} .vfind.contradicted{border-color:var(--bad)} .vfind.unevidenced{border-color:var(--acc)} .stepper{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:16px 0 6px} .step{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:64px;background:none;border:0;cursor:default;padding:0} .step:hover{background:none} .step[role="button"]{cursor:pointer} .step-dot{font-size:16px;line-height:1;color:var(--dim)} .step-lbl{font-size:12px;color:var(--dim);white-space:nowrap} .step.done .step-dot{color:var(--good)} .step.done .step-lbl{color:var(--txt)} .step.cur .step-dot{color:var(--acc)} .step.cur .step-lbl{color:var(--acc);font-weight:600} .step.up .step-dot,.step.up .step-lbl{color:var(--dim);opacity:.6} .step-conn{flex:0 0 30px;height:2px;margin-top:8px;background:var(--line);border-radius:2px} .step-conn.fill{background:var(--acc)} .st-heading{font-size:18px;font-weight:600;margin:10px 0 2px} .st-sub{font-size:14px;color:var(--dim);margin-bottom:10px} .release{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)} .release.shipped{border-color:var(--line);border-left-color:var(--warn);opacity:.85} .rel-head{display:flex;justify-content:space-between;align-items:center;gap:10px} .rel-badge{font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap} .rel-badge.open{background:var(--acc-bg);color:var(--acc);border:1px solid var(--acc-line)} .rel-badge.shipping{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)} .rel-badge.shipped{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)} .rel-life{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);margin:8px 0} .rel-life .cur{color:var(--acc);font-weight:600} .ceremonies{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0} .ceremony{flex:1 1 120px;min-width:110px;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;background:var(--panel)} .ceremony .cer-dot{font-size:13px;margin-right:5px} .ceremony .cer-name{font-size:13px;font-weight:600;color:var(--txt)} .ceremony .cer-sub{font-size:12px;color:var(--dim);margin-top:2px} .ceremony.attn{background:var(--acc-bg);border-color:var(--acc-line)} .ceremony.attn .cer-name{color:var(--acc)} .ceremony.done .cer-dot{color:var(--good)} .ceremony.wait{opacity:.6} .ceremony button{background:none;border:0;color:var(--acc);font-size:12px;padding:4px 0 0;cursor:pointer} .ceremony button:hover{background:none;text-decoration:underline} .standup{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-top:8px;background:var(--panel)} .standup-verdict{font-size:14px;font-weight:600;margin-bottom:8px} .standup-verdict.good{color:var(--good)}.standup-verdict.warn{color:var(--warn)}.standup-verdict.bad{color:var(--bad)} .standup-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 0} .standup-row .mini{flex:0 0 90px} .rel-item{border:1px solid var(--line);border-radius:var(--r-md);margin-top:8px;background:var(--card)} .rel-item>summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:14px;list-style:none} .rel-item>summary::-webkit-details-marker{display:none} .rel-item>summary::before{content:'▸';color:var(--dim);font-size:11px} .rel-item[open]>summary::before{content:'▾'} .rel-item>summary .mini{flex:0 0 84px;margin-left:auto} .rel-item .rel-item-body{padding:0 12px 12px} .qgroup{margin-bottom:20px} .qgroup-h{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)} .qgroup-h .win{font-size:12px;color:var(--acc);font-weight:600} .qgroup-h .cnt{font-size:12px;color:var(--dim);font-weight:400;margin-left:auto} .relmini{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px;cursor:pointer;background:var(--panel);transition:border-color var(--speed)} .relmini:hover{border-color:var(--acc)} .relmini.shipped{border-left-color:var(--warn);opacity:.8} .facts li{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;list-style:none} .facts button{background:none;border:none;color:var(--acc);font-size:12px;cursor:pointer;padding:0} .facts button:hover{background:none;text-decoration:underline} .facts .ledgerb{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:0 6px} .srcgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)} .srcgroup>header{padding:12px 16px 10px;border-bottom:1px solid var(--line);background:var(--panel);box-shadow:none} .srcgroup>header h3{margin:0;font-size:15px} .srcgroup>header p{margin:2px 0 0;font-size:12px;color:var(--dim)} .srcrow{display:grid;grid-template-columns:minmax(160px,2.2fr) minmax(90px,1.2fr) minmax(150px,2fr) 84px max-content;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:14px} .srcgroup .srcrow:last-of-type{border-bottom:none} .srcrow:hover{background:var(--hover)} .srcrow .nm{display:flex;align-items:center;gap:8px;min-width:0} .srcrow .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srcrow .use{font-size:12.5px;color:var(--dim)} .srcrow .fresh{font-size:12px;color:var(--dim);text-align:right} .srcrow .acts{display:flex;gap:6px;justify-content:flex-end} .srcerr{grid-column:1/-1;font-size:12px;color:var(--bad);margin:-6px 0 4px} .srcdocs{grid-column:1/-1;padding:0 4px 6px} .dot{width:8px;height:8px;border-radius:50%;flex:none} .dot.ok{background:var(--good)}.dot.err{background:var(--bad)} .srclist{padding:0;margin:8px 0 0} .srclist li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;font-size:14px;list-style:none;border-bottom:1px solid var(--line)} .srclist li:last-child{border-bottom:none} .gapsev{font-size:11px;font-weight:700;letter-spacing:.5px} .gapsev.high{color:var(--bad)}.gapsev.medium{color:var(--warn)}.gapsev.low{color:var(--dim)} .pickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .pick{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;text-align:left;cursor:pointer;color:var(--txt);font:inherit;transition:border-color var(--speed),background var(--speed)} .pick:hover{border-color:var(--acc);background:var(--acc-bg)} .pick b{display:flex;gap:8px;align-items:center;font-size:14px} .pick span{display:block;font-size:12px;color:var(--dim);margin-top:3px;font-weight:400} .auth-gate{max-width:400px;margin:80px auto;padding:0 24px} .auth-gate .card{padding:28px} .auth-gate h2{font-size:20px;margin-bottom:4px} .auth-gate p{color:var(--dim);font-size:14px;margin-bottom:20px} .auth-tabs{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .auth-tabs button{flex:1;background:var(--panel);border:0;border-radius:0;color:var(--dim);font:500 14px var(--font);padding:10px;cursor:pointer} .auth-tabs button:hover{background:var(--hover)} .auth-tabs button.on{background:var(--acc-bg);color:var(--acc)} .auth-err{color:var(--bad);font-size:13px;margin-top:8px;min-height:18px} /* Persona dock (24.2) — the team, present. Badges are evidence-gated (24.3). A floating label + gentle accent wash mark the region as THE PRODUCT TEAM without adding row height or competing with the badges. */ #dock{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:center;gap:10px;padding:10px 16px 8px;background:linear-gradient(180deg,var(--panel) 0%,var(--acc-bg) 160%);border-top:1px solid var(--line);box-shadow:0 -1px 3px rgba(16,24,40,.06)} #dock::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 8%,var(--acc-line) 40%,var(--acc-line) 60%,transparent 92%)} #dock[hidden]{display:none} .dock-label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--acc-line);border-radius:999px;color:var(--acc);font:600 10px/1 var(--font);text-transform:uppercase;letter-spacing:.8px;padding:4px 12px;pointer-events:none;white-space:nowrap} .dk{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;padding:2px 6px;cursor:pointer;border-radius:var(--r-md)} .dk:hover{background:var(--hover)} /* AI personas render as OCTAGONS; people (accounts) stay circular — one glyph tells you human vs agent anywhere in the platform. */ .ai-oct{clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)} .dk-av{width:34px;height:34px;background:var(--acc-bg);color:var(--acc);font:700 12px var(--font);display:flex;align-items:center;justify-content:center;text-transform:uppercase} .dk:hover{filter:brightness(1.08)} .dk .dk-nm{font-size:10.5px;color:var(--dim)} .dk .dk-badge{position:absolute;top:-2px;right:0;min-width:16px;height:16px;border-radius:999px;background:var(--bad);color:#fff;font:600 10px var(--font);display:flex;align-items:center;justify-content:center;padding:0 4px} .dk.quiet .dk-av{opacity:.75} body{padding-bottom:72px} /* Setup chip + fold-down (29.1 follow-up): global progress lives in the top bar, independent of whatever page is underneath. */ .setup-chip{display:inline-flex;align-items:center;gap:7px;color:var(--txt);border-color:var(--acc-line)} .setup-chip:hover{background:var(--acc-bg)} .setup-chip svg{flex:none} .switch-menu.setup-menu{position:absolute;top:40px;right:0;left:auto;min-width:330px;max-width:390px} .setup-menu .st-head{padding:9px 12px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:12px;color:var(--dim)} .setup-menu button{display:block;position:relative} .setup-menu button .st-row{display:flex;align-items:center;gap:10px} /* Stepper badge: one fixed circle per step — the NUMBER never leaves, only the fill changes (done = green ✓, current = accent, upcoming = outline), so the list always reads as one ordered sequence. */ .setup-menu button .st-n{flex:none;width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--font);border:1.5px solid var(--line-strong);color:var(--dim);background:var(--panel)} .setup-menu button .st-n.done{background:var(--good);border-color:var(--good);color:#fff} .setup-menu button .st-n.next{background:var(--acc);border-color:var(--acc);color:#fff} .setup-menu button .st-hint{display:block;font-size:12px;color:var(--dim);margin:2px 0 0 30px;white-space:normal} .setup-menu button.done-step .st-row span:last-child{color:var(--dim)} /* rail line ties the circles into one path */ .setup-menu button:not(:last-child)::after{content:'';position:absolute;left:21px;top:32px;bottom:-8px;width:1.5px;background:var(--line)} /* Profile page (26.x settings, promoted from dialog) */ .profile-page{max-width:640px} .profile-page .card{margin-bottom:14px} .pf-id{display:flex;gap:14px;align-items:center;margin-bottom:16px} .avatar.pf-big{width:52px;height:52px;font-size:19px;cursor:default} .card.danger-zone{border-color:var(--bad-line)} .card.danger-zone h3{color:var(--bad)} .pp-q{font-size:13px;color:var(--dim);font-style:italic;margin:2px 0 10px} .pp-sec{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px} .pp-ans{border-left:2px solid var(--acc-line);padding:8px 12px;margin-top:8px;background:var(--tint);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px} .quad{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 6px} .qcell{border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;min-height:86px;background:var(--panel)} .qcell.win{background:var(--good-bg);border-color:var(--good-line)} .qcell.risk{background:var(--warn-bg);border-color:var(--warn-line)} .qcell h4{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .qcell .qitem{display:block;font-size:13px;padding:2px 0;color:var(--txt);background:none;border:none;text-align:left;cursor:pointer} .qcell .qitem:hover{color:var(--acc);background:none} .qcell .qv{color:var(--faint);font-size:11.5px;margin-left:4px} .qaxis{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}