:root{--bg:#f7f8fa;--white:#fff;--ink:#222c35;--muted:#7b838d;--line:#e7e9ec;--green:#197b5b;--green-light:#edf7f2;--red:#bc625e;--sidebar:226px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #8fcdb5;outline-offset:3px}input:focus,select:focus,textarea:focus{outline:2px solid #abd7c5;outline-offset:1px}button:disabled{opacity:.55;cursor:wait}svg.icon{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}[data-icon]{display:inline-flex;align-items:center;justify-content:center}[hidden]{display:none!important}.sidebar{width:var(--sidebar);background:#fff;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:31px 17px 16px;z-index:10}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-mono-600-latin.woff2) format("woff2")}.brand{display:flex;align-items:center;padding:0 10px;gap:9px}.brand-mark{width:28px;height:28px;flex-shrink:0;background:url(/static/logomark.svg) center/contain no-repeat}.brand-name{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:15px;line-height:1.05;letter-spacing:-.4px;display:flex;flex-direction:column;color:var(--ink)}.brand-caret{display:inline-block;width:7px;height:11px;background:var(--green);margin-left:3px;vertical-align:-1px}.workspace{margin:37px 2px 30px;padding:12px 9px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600}.workspace small{display:block;font-size:7px;letter-spacing:.7px;color:var(--muted);margin-top:5px;font-weight:500}.workspace-icon{width:29px;height:30px;background:#f1f3f5;border:1px solid #e6e9ec;border-radius:5px;display:grid;place-items:center;color:#65717a}.workspace-chevron{margin-left:auto;color:#9ba3aa}.nav-label{font-size:9px;letter-spacing:1.4px;color:#9a9fa6;padding:0 13px;margin-bottom:13px;font-weight:600}nav{display:grid;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:11px 12px;font-size:11px;border-radius:6px;color:#727c87;white-space:nowrap}.nav-item.active{background:#edf5f1;color:#1b7157;font-weight:650}.nav-item:hover{background:#f1f5f3}.nav-shortcut{margin-left:auto;font-size:13px;opacity:.6}.sidebar-note{margin:64px 14px 0}.note-symbol{color:#41876e;font-size:27px;display:block;margin-bottom:14px}.sidebar-note strong{font-size:13px;line-height:1.75;font-weight:550;letter-spacing:-.2px}.sidebar-note p{font-size:10px;line-height:1.9;color:#9198a0}.note-line{display:block;width:25px;height:2px;background:#d8e8e0;margin-top:20px}.sidebar-bottom{margin-top:auto;padding-top:30px}.system-state{display:flex;align-items:center;gap:7px;font-size:9px;color:#8c949c;padding:0 12px 17px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#43977a;flex-shrink:0;box-shadow:0 0 0 3px #edf5f0}.sidebar-version{border-top:1px solid var(--line);margin-top:14px;padding:18px 9px 0;color:#8a929a;font-size:7px;letter-spacing:1px;display:flex;justify-content:space-between}.sidebar-version span{font-size:6px;letter-spacing:.5px;color:#afb3b8}main{margin-left:var(--sidebar)}.topbar{height:75px;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between;background:#fbfcfd}.breadcrumb{font-size:10px;color:#9299a1;display:flex;gap:13px;align-items:center}.breadcrumb strong{font-weight:500;color:#515d69}.breadcrumb>span{color:#b8bec4}.topbar-right{display:flex;align-items:center;gap:21px}.topbar-date{font-size:10px;color:#8a949d}.avatar{width:27px;height:27px;border-radius:50%;border:1px solid #dce3df;background:#eef2ef;display:grid;place-items:center;font-size:8px;font-weight:600;color:#5b7366}.dataset-badge{border:1px solid #e1e5e1;padding:5px 8px;border-radius:4px;color:#7c857c;font-size:9px;background:#f3f5f1;display:flex;gap:10px}.content{padding:38px 38px 0;max-width:1720px;margin:auto}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font-size:8px;letter-spacing:1.7px;color:#6f8b7e;font-weight:650;display:flex;align-items:center;gap:6px;margin:3px 0 15px}.eyebrow>span{width:5px;height:5px;border:1px solid #739480;border-radius:50%}h1{font-size:36px;line-height:1.18;letter-spacing:-1.4px;font-weight:550;margin:0}h1>span{color:#8a939a;font-weight:450}.page-heading p{font-size:11px;color:#828b95;margin:15px 0 0}.heading-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;margin-bottom:2px}.capture-label{font-size:9px;display:flex;gap:7px;align-items:center;color:#929ba3}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:11px;font-weight:550;min-height:36px}.button.primary{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 2px #123b2010}.button.primary:hover{background:#126448}.button:hover{filter:brightness(.98)}.demo-notice{display:flex;align-items:center;gap:9px;background:#f0f3f0;border:1px solid #e3e8e3;border-radius:5px;padding:9px 12px;margin:0 0 20px;color:#7b867c;font-size:9px}.demo-notice .icon{width:14px;height:14px}.demo-notice strong{font-weight:550;color:#5e6e61}.demo-notice button{margin-left:auto;white-space:nowrap;font-size:9px;color:#5e7566}.demo-notice button>span{margin-left:7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:29px}.stat-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:#fff;padding:18px 18px 15px;min-height:123px}.stat-label{display:flex;align-items:center;gap:8px;color:#889099;font-size:10px}.stat-label .icon{height:14px;width:14px;color:#8d989f}.stat-value{font-size:29px;letter-spacing:-1px;font-weight:550;margin:13px 0 8px;line-height:1}.stat-bottom{font-size:8px;color:#969da5;display:flex;gap:5px;align-items:center;position:relative;z-index:1}.stat-bottom strong{color:var(--green);font-weight:550}.stat-card>svg{position:absolute;right:18px;top:50px;width:75px;height:35px;opacity:.8}.stat-card:nth-child(3) .stat-value{color:var(--green)}.stat-card:nth-child(4) .stat-value{display:flex;align-items:baseline;gap:6px}.stat-card .of-total{font-size:14px;color:#acb3b9;letter-spacing:0;font-weight:400}.explorer{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 2px 5px #26323802}.explorer-heading{padding:19px 20px;display:flex;align-items:center;justify-content:space-between}.section-heading{display:flex;align-items:center;gap:8px}h2{font-size:14px;letter-spacing:-.2px;margin:0;font-weight:600}.count-badge{font-size:9px;color:#819087;background:#f2f5f3;border:1px solid #e7ece8;border-radius:4px;padding:2px 5px}.segmented{display:flex;border:1px solid #e6e9ec;background:#f6f7f8;padding:3px;border-radius:6px}.segmented button{font-size:9px;color:#929aa3;padding:5px 14px;border-radius:3px}.segmented button.selected{background:#fff;color:#44515b;box-shadow:0 1px 3px #00000015}.filters{display:flex;align-items:center;padding:0 20px 19px;gap:8px}.search{display:flex;align-items:center;border:1px solid #e6e9ec;border-radius:5px;height:33px;padding:0 9px;gap:7px;max-width:235px;flex:1;min-width:145px}.search .icon{width:14px;height:14px;color:#9aa3ab}.search input{width:100%;min-width:0;font-size:10px;border:0;outline:none;background:transparent;color:#42515c}.search input::placeholder{color:#a0a7ad}.search kbd{font-family:inherit;font-size:9px;color:#b2b7bd;background:#fafbfc;border:1px solid #eceff0;border-radius:3px;padding:0 4px}.select-wrap{display:flex;align-items:center;gap:5px;border:1px solid #e6e9ec;height:33px;border-radius:5px;padding:0 8px;color:#8c969f}.select-wrap .icon{width:13px;height:13px}select{color:#64717d;background:transparent;font-size:9px;cursor:pointer;border:0;max-width:180px}select option{background:#fff;color:#28352e}.select-wrap select{height:29px;max-width:155px}.sort-control{display:flex;margin-left:auto;align-items:center;gap:5px;color:#929ba3;white-space:nowrap}.sort-control .icon{width:13px;height:13px}.sort-control select{font-size:9px;max-width:126px}.clear-filters{font-size:9px;color:var(--green);padding:3px}.table-caption{display:flex;justify-content:space-between;padding:11px 20px;border-top:1px solid var(--line);background:#fcfdfd;font-size:7px;letter-spacing:1.1px;color:#98a1aa}.table-caption>span:first-child{display:flex;align-items:center;gap:6px}.small-dot{width:4px;height:4px;background:#91a99b;border-radius:50%}.table-caption>span:last-child{letter-spacing:.1px;font-size:8px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;table-layout:fixed;min-width:875px;font-variant-numeric:tabular-nums}thead{background:#f7f9fa;color:#8c959f}th{font-size:8px;font-weight:500;text-align:right;padding:11px 8px;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}th.company-col{width:190px;text-align:left;padding-left:20px}th.trend-col{width:103px;text-align:center}th.change-col{width:87px;padding-right:20px}th.latest-col{color:#4c6f5f;background:#f0f5f2}th .sort-arrow{font-size:10px;padding-left:3px}tbody tr{cursor:pointer;border-bottom:1px solid #f0f1f3}tbody tr:last-child{border-bottom:0}tbody tr:hover{background:#f6faf7}td{height:61px;font-size:10px;text-align:right;padding:0 8px;color:#85919b}td.company-cell{text-align:left;padding:11px 8px 11px 20px}.company-content{display:flex;align-items:center;gap:10px}.company-logo{width:30px;height:30px;flex-shrink:0;border:1px solid #e9eaf0;border-radius:7px;background:#fff;display:grid;place-items:center;overflow:hidden;font-size:15px;font-weight:700;color:var(--logo-color,#65746b);letter-spacing:-1px}.company-logo.linear{background:#f2efff;color:#776ae2;font-size:28px}.company-logo.vercel{color:#171717;font-size:19px}.company-logo.ramp{font-size:24px;color:#768649;background:#f6f8f0}.company-logo.figma{font-size:18px;color:#a26751;background:#fff5ef}.company-logo.notion{font-family:Georgia,serif;color:#111;font-size:24px}.company-logo.anthropic{font-family:Georgia,serif;background:#f2e9df;color:#715543;font-size:19px;letter-spacing:-2px}.company-logo.stripe{color:#7562df;background:#f6f3ff;font-size:25px}.company-logo.datadog{color:#8660a7;background:#f8f3fb}.company-logo.cloudflare{background:#fff7eb;color:#d88f36;font-size:24px}.company-logo.coinbase{color:white;background:#3466df;font-size:21px}.company-logo.shopify{background:#f1f7ed;color:#699e42;font-style:italic;font-size:19px}.company-logo.twilio{color:#d7585a;background:#fff3f2;font-size:21px}.company-name{font-size:10px;font-weight:600;color:#36434e;display:block;line-height:1.5}.company-meta{font-size:8px;color:#98a0a9;margin-top:3px;display:flex;gap:6px;align-items:center}.pay-dot{font-size:7px;color:#8aa697;border-left:1px solid #e2e9e5;padding-left:5px}.source-issue{width:4px;height:4px;background:#c77f58;display:inline-block;border-radius:50%}.trend-cell{padding:0 13px}.sparkline{display:block;width:100%;height:28px}.latest-cell{font-weight:600;color:#456752;background:#f5f9f5}.heat{display:inline-block;min-width:30px;padding:5px 4px;border-radius:3px}.delta-cell{padding-right:20px}.delta{display:inline-flex;justify-content:center;align-items:center;gap:3px;font-size:9px;white-space:nowrap;color:#438566;background:#eef7f1;padding:4px 5px;border-radius:4px;font-weight:550}.delta.negative{color:#bc7770;background:#fcf2f1}.delta.neutral{color:#96a0a7;background:#f3f5f6}.table-footer{border-top:1px solid var(--line);padding:14px 20px;display:flex;justify-content:space-between;color:#9aa3ac;font-size:8px;gap:15px}.table-footer>span:last-child{display:flex;align-items:center;gap:6px}.legend-swatch{width:9px;height:9px;border-radius:2px;background:#e3eee3;border:1px solid #d9e7db}.footer-divider{padding:0 6px;color:#d2d7da}.insight-note{display:flex;align-items:center;gap:13px;padding:21px 3px}.insight-icon{color:#819b8f;border:1px solid #dfe8e1;border-radius:6px;width:29px;height:31px;flex-shrink:0;background:#f1f6f1}.insight-icon .icon{width:15px;height:15px}.insight-note strong{font-size:9px;font-weight:550;color:#6d797f}.insight-note p{font-size:9px;color:#99a1a9;margin:5px 0 0}.insight-note button{margin-left:auto;font-size:9px;color:#74877b;white-space:nowrap}.insight-note button span{margin-left:7px}.page-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 0 23px;color:#a7afb7;font-size:8px}.page-footer>span:last-child{font-size:7px;letter-spacing:1.5px;display:flex;align-items:center;gap:8px}.footer-asterisk{font-size:17px;color:#8ea49a}.empty-state{padding:60px 25px;text-align:center;color:#8f9a9f}.empty-state h3{color:#4b6054;font-size:17px;font-weight:500}.empty-state p{font-size:12px;line-height:1.8}.empty-state .button{margin-top:10px}.loading{padding:70px;text-align:center;color:#97a29b;font-size:12px}.overlay{position:fixed;inset:0;background:#1f302e50;backdrop-filter:blur(3px);z-index:30;display:flex;justify-content:center;align-items:center;padding:24px}.modal{position:relative;background:#fff;width:470px;max-width:100%;max-height:90vh;overflow:auto;border-radius:12px;padding:30px;box-shadow:0 25px 100px #142a2530}.modal.wide{width:670px}.modal.drawer{height:100vh;max-height:100vh;width:590px;margin-left:auto;border-radius:0;padding:34px}.overlay:has(.drawer){padding:0}.modal h2{font-size:22px;font-weight:550;margin-bottom:10px;letter-spacing:-.6px}.modal .modal-subtitle{font-size:12px;color:#8a949c;line-height:1.7;margin:0 0 23px}.modal-close{position:absolute;right:15px;top:14px;font-size:23px;font-weight:300;color:#8d969d;width:28px;height:28px;border-radius:4px;z-index:2}.modal-close:hover{background:#f0f3f2}.form-field{display:grid;gap:7px;margin-bottom:16px;font-size:11px;color:#58676b}.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid #dfe5e2;border-radius:5px;background:#fcfdfc;min-height:39px;padding:10px;font-size:12px;color:#354a3e;max-width:none}.form-field textarea{resize:vertical;min-height:110px}.form-field small{font-size:10px;line-height:1.6;color:#919b94}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.form-error{font-size:11px;color:#b45858;line-height:1.6;margin-top:10px}.methodology{font-size:12px;line-height:1.9;color:#6a777d}.methodology h3{font-size:13px;color:#34483c;margin:22px 0 7px}.methodology a{color:var(--green);text-decoration:underline}.detail-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;margin-top:6px}.detail-header .company-logo{width:46px;height:46px;font-size:25px}.detail-header h2{margin:0 0 5px}.detail-header p{margin:0;font-size:11px;color:#929c9f}.detail-summary{background:#f5f8f5;border:1px solid #e5ece5;padding:16px;border-radius:7px;display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.detail-summary strong{font-size:26px;font-weight:500;letter-spacing:-1px}.detail-summary span{font-size:11px;color:#88978c}.detail-section-title{font-size:11px;letter-spacing:.3px;display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px;color:#526b5a}.detail-section-title small{font-size:9px;color:#91a095}.department-row{padding:11px 0;display:grid;grid-template-columns:1fr auto;gap:6px;border-bottom:1px solid #edf0ee}.department-row .native-name{font-size:11px;color:#455a4d}.department-row .category-name{font-size:9px;color:#8da194;grid-column:1}.department-row>strong{grid-column:2;grid-row:1;font-size:11px;font-weight:500}.department-row button{font-size:9px;color:var(--green);text-align:left;padding:0;justify-self:start}.job-list{display:grid;gap:0}.job-row{padding:14px 0;border-bottom:1px solid #edf0ee;display:flex;justify-content:space-between;gap:10px}.job-row a,.job-row strong{font-size:11px;font-weight:500;color:#455a4d}.job-row a:hover{color:var(--green);text-decoration:underline}.job-row small{display:block;font-size:9px;color:#93a098;margin-top:6px}.pay-pill{font-size:8px;white-space:nowrap;color:#779887;background:#eef6f0;padding:4px 6px;border-radius:3px;height:max-content}.detail-tools{display:flex;gap:8px;margin-bottom:20px}.run-item{padding:9px 0;font-size:10px;color:#8d9891;border-bottom:1px solid #eef0ee;line-height:1.8;overflow-wrap:anywhere}.run-item strong{color:#627c6c;font-weight:500}.run-item.failed strong{color:var(--red)}.error-note{background:#fff4ef;padding:12px;border-radius:5px;color:#b47b60;font-size:10px;line-height:1.7;overflow-wrap:anywhere}.annotation-card{padding:16px;background:#f7f9f7;border:1px solid #e4eae5;border-radius:6px;margin:12px 0}.annotation-card p{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0}.annotation-card small{color:#93a097;font-size:9px}.annotation-card code{display:block;font-size:9px;color:#7f9085;overflow-wrap:anywhere;margin:6px 0}.annotation-card.resolved{opacity:.55}.annotation-card>div{display:flex;justify-content:space-between;align-items:center}.annotation-card button{font-size:10px;color:var(--green)}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 20px;border-radius:6px;background:#253c32;color:#fff;box-shadow:0 4px 15px #0002;font-size:12px;opacity:0;pointer-events:none;transition:all .2s;z-index:70;max-width:90vw}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}#admin-dock{position:fixed;bottom:18px;right:25px;display:flex;align-items:center;gap:12px;background:#233e32;color:#d7e8dc;padding:8px 10px 8px 13px;border:1px solid #44634e;box-shadow:0 4px 20px #14271e30;border-radius:8px;z-index:20}#admin-dock>span{font-size:7px;letter-spacing:1px}.admin-dot{width:5px;height:5px;background:#92bfa2;border-radius:100%}#admin-dock button{font-size:10px;display:flex;align-items:center;gap:6px;border-left:1px solid #4a6354;padding:3px 2px 3px 12px}#admin-dock .icon{width:13px;height:13px}#notes-count{background:#42644d;border-radius:3px;padding:1px 4px;font-size:8px}#annotation-banner{position:fixed;top:15px;left:50%;transform:translateX(-50%);z-index:60;background:#244e3c;color:#fff;padding:12px 20px;box-shadow:0 5px 20px #0002;border-radius:7px;display:flex;align-items:center;gap:25px;font-size:12px}#annotation-banner button{border:1px solid #ffffff50;border-radius:4px;padding:4px 8px;color:#dce8df;font-size:11px}body.annotating{cursor:crosshair}body.annotating *{cursor:crosshair!important}.annotation-target{outline:2px solid #279b70!important;outline-offset:3px!important;background-color:#b3e4c533!important}.annotation-context{border:1px solid #e5eae6;background:#f6f8f5;padding:11px;font-size:10px;color:#85968b;overflow-wrap:anywhere;border-radius:5px;margin:15px 0}.source-card{padding:16px;background:#f7f9f7;border:1px solid #e5ebe6;border-radius:6px;margin:12px 0;display:flex;align-items:center;justify-content:space-between}.source-card strong{font-size:13px;color:#4b6053}.source-card span{font-size:10px;color:#93a297}.modal .button.full{width:100%}.detail-filter{margin:15px 0}.detail-filter input{width:100%;border:1px solid #e1e7e3;border-radius:5px;padding:10px;font-size:11px}.negative-text{color:var(--red)!important}
@media(min-width:1550px){:root{--sidebar:244px}.content{padding:46px 48px 0}.topbar{padding:0 48px}.stat-card{padding:22px;min-height:136px}h1{font-size:42px}.stats{margin-bottom:35px}td{height:66px}.company-name{font-size:12px}.company-meta{font-size:9px}td{font-size:11px}th{font-size:9px}.company-col{width:220px!important}.trend-col{width:130px!important}.page-heading{margin-bottom:33px}}
@media(max-width:1180px){:root{--sidebar:195px}.sidebar{padding-left:11px;padding-right:11px}.brand{gap:8px}.brand-name{font-size:14px}.workspace{padding:10px 6px;font-size:10px}.workspace small{font-size:6px}.nav-item{font-size:10px}.content{padding:28px 24px 0}.topbar{padding:0 24px}.filters{flex-wrap:wrap}.search{max-width:none}.sort-control{margin-left:auto}.stat-card{padding:15px 12px}.stat-card>svg{width:49px;right:10px}.stat-value{font-size:26px}.stats{gap:10px}.stat-bottom{font-size:7px}.demo-notice{font-size:8px}.demo-notice button{font-size:8px}h1{font-size:33px}}
@media(max-width:900px){:root{--sidebar:68px}.sidebar{padding:25px 9px 15px;align-items:center}.brand{padding:0}.brand-name,.workspace,.nav-label,.sidebar-note,.nav-shortcut,.sidebar-version,.system-state{display:none}.brand-mark{margin:0;width:30px;height:30px}.sidebar nav{margin-top:45px;width:100%}.nav-item{font-size:0;justify-content:center;padding:13px}.nav-item .icon{width:18px;height:18px}.sidebar-bottom{width:100%;padding:0}#admin-label{display:none}.stats{grid-template-columns:repeat(2,1fr)}.stat-card>svg{width:85px}.stat-card{min-height:115px;padding:17px}.stat-bottom{font-size:9px}.demo-notice{flex-wrap:wrap;line-height:1.8}.demo-notice button{margin-left:23px}.topbar-date{display:none}.page-heading{align-items:flex-start}.heading-actions{margin-top:25px}.capture-label{display:none}.content{padding-top:25px}.insight-note p{font-size:8px}.table-footer{font-size:7px}}
@media(max-width:600px){:root{--sidebar:0px}.sidebar{position:static;width:100%;height:58px;flex-direction:row;padding:0 17px;border-right:0;border-bottom:1px solid var(--line);justify-content:space-between}.brand{gap:8px}.brand-name{display:flex;font-size:14px}.brand-mark{width:26px;height:26px}.sidebar nav{display:none}.sidebar-bottom{margin:0;width:auto}.sidebar-bottom .nav-item{padding:5px}.topbar{height:48px;padding:0 18px}.breadcrumb{font-size:9px;gap:9px}.topbar-right{gap:10px}.avatar{display:none}.content{padding:27px 16px 0}.eyebrow{font-size:7px;letter-spacing:1.2px}h1{font-size:31px}.page-heading{flex-direction:column;gap:17px}.page-heading p{font-size:10px}.heading-actions{margin:0;align-self:flex-start}.heading-actions .button{font-size:10px;min-height:32px;padding:7px 10px}.stats{gap:9px;margin-bottom:20px}.stat-card{padding:14px 12px;min-height:113px}.stat-label{font-size:9px;gap:5px}.stat-value{font-size:26px}.stat-card>svg{width:40px;right:8px;top:43px}.stat-bottom{font-size:7px}.explorer-heading{padding:16px 12px}.section-heading h2{font-size:12px}.segmented button{padding:5px 8px;font-size:8px}.filters{padding:0 12px 14px;gap:7px}.search{flex-basis:100%;height:34px}.select-wrap{flex:1;min-width:0;padding:0 6px}.select-wrap select{width:100%;font-size:8px;min-width:0}.select-wrap .icon{width:12px}.sort-control{padding-top:3px}.table-caption{padding:10px 12px;font-size:6px;letter-spacing:.8px}.table-caption>span:last-child{font-size:7px}.table-footer{padding:12px;flex-wrap:wrap;gap:10px;font-size:7px}.insight-note{padding:20px 0;gap:9px;flex-wrap:wrap}.insight-note p{font-size:8px;max-width:260px;line-height:1.6}.insight-note button{margin-left:38px;font-size:8px}.page-footer{font-size:7px;padding-bottom:70px}.page-footer>span:last-child{font-size:6px}.modal{padding:26px 21px}.overlay{padding:14px}.modal.drawer{width:100%;padding:28px 20px}.modal h2{font-size:21px}#admin-dock{right:10px;bottom:10px;gap:9px}#annotation-banner{width:calc(100% - 20px);padding:10px;gap:8px;font-size:10px}#toast{bottom:65px}.demo-notice{padding:8px;font-size:8px;gap:7px}.demo-notice>span:nth-child(2){flex:1}.demo-notice button{font-size:8px}}

@media(max-width:600px){.select-wrap{flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px)}.sort-control{margin-left:auto}th.company-col,td.company-cell{position:sticky;left:0;z-index:1;background:#fff}th.company-col{background:#f7f9fa}tbody tr:hover td.company-cell{background:#f6faf7}}

.system-state{align-items:flex-start;gap:8px}.system-state>.status-dot{margin-top:3px}.system-copy{display:grid;gap:4px}.system-copy strong{font-size:9px;font-weight:500;color:#7d8982}.system-copy small{font-size:8px;color:#a0a7a3;white-space:nowrap}.job-row{align-items:flex-start;gap:16px}.job-copy{min-width:0}.pay-details{display:grid;justify-items:end;gap:3px;max-width:210px;text-align:right;flex-shrink:0}.pay-details strong{color:#527b66;font-size:10px;line-height:1.35}.pay-details small{color:#829d8f;font-size:8px;margin:0;text-transform:uppercase;letter-spacing:.4px}

@media(max-width:600px){.job-row{gap:10px}.pay-details{max-width:145px}.pay-details strong{font-size:9px}}

/* ==========================================================================
   Trend charts and the momentum column.
   Everything below is the chart view, mounted inside the explorer card, plus the
   diverging strips that replaced the level sparkline in the explorer's MOMENTUM
   column. Declarations are the validated ones from the reviewed mockups, not a
   second pass at the same design.
   ========================================================================== */

:root {
  /* The three states of a period-over-period move. The app's --green and --red are
     already the same two hues, and --muted is the flat grey; they are restated here
     under the names the chart code uses, so a mark never reads from a token whose
     name belongs to a different job. viz.COLORS in charts.js carries the same three
     values for the SVG fills. */
  --up: #197b5b;
  --down: #bc625e;
  --flat: #7b838d;
  --nodata: #dfe3e6;
  /* Categorical slots for the comparison plot only. Blue, orange, violet, aqua,
     chosen by running the palette checker with --pairs all, because two lines on one
     plot can sit next to each other anywhere. Worst pair: CVD dE 9.2, normal-vision
     dE 16.3, and that is the best four-slot result on this surface. Six slots cannot
     clear those floors in any order, which is why the plot caps at four.
     Aqua sits below 3:1 on the surface, so the relief rule applies and is met: every
     line carries an end label, a legend entry, and a row in the table twin.
     Green and red are absent - they already mean adding and cutting in the bars. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #4a3aa7;
  --series-4: #1baf7a;
  --viz-grid: #eef0f2;
  --viz-rule: #d8dde1;
}

/* ---------- the momentum column ---------- */

/* width:100%;height:auto is load-bearing: it keeps the strip's own aspect ratio, so
   the 78x34 viewBox renders as a 78x34 strip in the 77px cell instead of being
   letterboxed into whatever height the cell happens to have. */
.trend-cell .trend-bars { width: 100%; height: auto; }
.trend-bars { display: block; overflow: visible; }
/* The zero rule. A diverging bar is read against it, so it is what makes "adding"
   above and "cutting" below legible without colour. */
.trend-bars .bar-zero { stroke: var(--viz-rule); stroke-width: 1; }
/* The nearest-column hover band. Hidden by default; the pointer layer in charts.js
   moves it. Scoped to .trend-bars, which is the only mark that emits one. */
.trend-bars .bar-band { fill: #0b2c1e; opacity: 0; transition: opacity .1s; }
.trend-bars:hover .bar-band { opacity: .055; }
/* The diverging key: colour plus the position that makes the colour legible to a
   red/green colourblind reader. The flat key is a 3px rule because that is what a
   flat period actually looks like on the chart. */
.trend-key { display: inline-flex; align-items: center; gap: 11px; }
.trend-key span { display: inline-flex; align-items: center; gap: 5px; }
.trend-key i { width: 6px; height: 10px; border-radius: 1px; display: block; }
.trend-key i.up { background: var(--up); }
.trend-key i.flat { background: var(--flat); height: 3px; }
.trend-key i.down { background: var(--down); }
#trend-key:empty { display: none; }

/* ---------- the line ---------- */

.viz-line { display: block; width: 100%; }
.viz-line .grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-line .axis { stroke: var(--viz-rule); stroke-width: 1; }
.viz-line .tick { fill: #9aa3ac; font-size: 8px; font-variant-numeric: tabular-nums; }
.viz-line .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-line .end-dot { stroke: var(--white); stroke-width: 2; }
.viz-line .crosshair { stroke: var(--viz-rule); stroke-width: 1; }
.viz-line .end-label { fill: #5c6a73; font-size: 9px; font-weight: 550; }

/* ---------- the chart pane ---------- */

#chart-pane { padding: 0 20px 20px; }
#chart-pane .chart-layout { display: grid; grid-template-columns: 232px 1fr; gap: 15px; align-items: start; }
/* The right column holds the plot and the board. Two cards rather than one so each
   keeps its own head, its own controls and its own note. */
#chart-pane .chart-stack { display: grid; gap: 15px; align-items: start; }
/* The explorer card is already a white surface, so the cards inside it step down to
   the page's own background rather than stacking white on white. */
#chart-pane .viz-card, #chart-pane .rail { background: var(--bg); box-shadow: none; }

.rail { border: 1px solid var(--line); border-radius: 8px; padding: 15px 13px; }
.rail-label { font-size: 7px; letter-spacing: 1.2px; color: #98a1aa; padding: 0 3px; margin-bottom: 10px; display: flex; justify-content: space-between; }
.rail-list { display: grid; gap: 1px; max-height: 396px; overflow: auto; }
.rail-item { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 5px; font-size: 10px; color: #52616c; text-align: left; width: 100%; }
.rail-item:hover { background: #f4f7f5; }
.rail-item.on { background: #edf5f1; color: #1b7157; font-weight: 600; }
.rail-item small { margin-left: auto; font-size: 8px; color: #9aa3ac; font-variant-numeric: tabular-nums; font-weight: 400; }
.rail-foot { font-size: 8px; color: #9aa3ac; line-height: 1.7; border-top: 1px solid var(--line); margin-top: 10px; padding: 10px 3px 0; }
.rail-key { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; border: 1px solid #00000018; }
.rail-key.empty, .rail-item:disabled .rail-key { background: #fff; border: 1px dashed #ccd3d8; }
/* The app's global button:disabled says cursor:wait, which is right for its own
   submitting buttons and wrong for "you already picked four". */
.rail-item:disabled, .mover:disabled { cursor: default; opacity: .38; }

.viz-card { border: 1px solid var(--line); border-radius: 8px; padding: 19px 20px; }
.viz-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.viz-card-head h3 { font-size: 12px; font-weight: 600; margin: 0; letter-spacing: -.1px; }
.viz-card-head p { font-size: 9px; color: #94a0a7; margin: 6px 0 0; line-height: 1.7; }
.viz-card-body { margin-top: 16px; }
.viz-note { font-size: 8px; color: #9aa3ac; margin: 10px 0 0; line-height: 1.8; }
.chart-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.segmented.tiny button { font-size: 8px; padding: 4px 9px; }

/* Legend. Required whenever two or more series share a plot. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: #6d7a83; }
/* The footer's swatch rule (which this reuses) sets no flex-shrink, and a long
   company name beside a swatch would squash it out of square. */
.legend-item .legend-swatch { flex-shrink: 0; }

/* ---------- table twin ---------- */

/* The app's table is table-layout:fixed with an 875px floor, which is right for the
   explorer and wrong for four rows of numbers in a card. */
.table-twin { max-height: 384px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.table-twin table { min-width: 0; table-layout: auto; }
.table-twin th, .table-twin td { text-align: right; padding: 8px 10px; height: auto; font-size: 9px; font-variant-numeric: tabular-nums; }
.table-twin th { position: sticky; top: 0; background: #f7f9fa; z-index: 1; }
.table-twin th:first-child, .table-twin td:first-child { text-align: left; }
.table-twin td { border-bottom: 1px solid #f0f1f3; color: #6d7a83; }
.table-twin .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

/* ---------- the board ---------- */

.mover-list { display: grid; }
.mover { display: grid; align-items: center; gap: 10px; padding: 7px 5px; width: 100%; text-align: left; border-radius: 5px; }
/* A board row is a button: clicking one plots that company, the same pick the rail
   makes, and the leading key is the rail's own, so a picked company wears the same
   swatch in both places. */
.mover.pickable { grid-template-columns: 9px 84px 1fr 56px; }
.mover.pickable:hover { background: #f4f7f5; }
/* The app's global button:disabled dims to 55%, which is right for a submitting
   button and wrong for a board row: the row is data first and only its pick
   affordance is out of reach, so the ranking stays at full strength and what goes
   missing is the hover and the pointer. Dimming the marks here would make the bars
   of the companies you have not picked look like a different value. */
.mover.pickable:disabled { opacity: 1; cursor: default; }
.mover.pickable:disabled:hover { background: none; }
.mover-name { font-size: 9px; color: #52616c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover.pickable[aria-pressed="true"] .mover-name { color: #1b7157; font-weight: 600; }
.mover-track { position: relative; height: 15px; }
.mover-track:before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--viz-rule); }
.mover-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.mover-fill.up { background: var(--up); }
.mover-fill.down { background: var(--down); }
.mover-fill.flat { background: var(--flat); }
.mover-value { font-size: 9px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: #6d7a83; }
.mover-empty { font-size: 9px; color: #9aa3ac; margin: 0; padding: 7px 5px; }

/* ---------- too few companies to compare ---------- */

.pick-hint { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: #f7f9fa; border: 1px dashed #dde3e7; border-radius: 6px; }
.pick-hint .icon { width: 17px; height: 17px; color: #9aa5ac; }
.pick-hint strong { font-size: 10px; font-weight: 600; color: #5c6a73; display: block; }
.pick-hint p { font-size: 9px; color: #98a1a9; margin: 4px 0 0; }

/* ---------- tooltip ---------- */

/* Below the modal overlay's 30: the mockups had no dialogs, and here a stale tooltip
   must not float over an open drawer. */
#viz-tip { position: fixed; z-index: 25; pointer-events: none; background: #253c32; color: #fff; border-radius: 5px; padding: 7px 10px; font-size: 9px; line-height: 1.65; box-shadow: 0 4px 16px #0003; opacity: 0; transition: opacity .1s; max-width: 260px; }
#viz-tip.visible { opacity: 1; }
#viz-tip .tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
#viz-tip .tip-row i { width: 7px; height: 7px; border-radius: 2px; display: block; flex-shrink: 0; }
#viz-tip .tip-row b { margin-left: auto; font-weight: 600; padding-left: 12px; font-variant-numeric: tabular-nums; }
#viz-tip .tip-head { display: block; color: #b9cfc2; margin-bottom: 5px; font-size: 8px; letter-spacing: .3px; }

/* ---------- responsive ---------- */

/* The rail is 232px of a content column that is still ~940px here, so the layout
   only needs to give way once, at 900, where it stacks. */
@media (max-width: 900px) {
  #chart-pane .chart-layout { grid-template-columns: 1fr; }
  .rail-list { max-height: 210px; }
}

@media (max-width: 600px) {
  #chart-pane { padding: 0 12px 14px; }
  .viz-card { padding: 16px 13px; }
  /* The head is title-and-sub left, controls right. On a phone the sub is the
     longest line on the card, so beside a pair of buttons it collapses into a
     one-word-per-line sliver - it takes the full width instead. */
  .viz-card-head { flex-direction: column; gap: 11px; }
  .viz-card-head .chart-head-actions { justify-content: flex-start; }
  .mover.pickable { grid-template-columns: 9px 62px 1fr 46px; gap: 8px; }
  /* The bar key must survive on touch, where the column's title attribute is
     unreachable: wrap the caption rather than dropping the legend. */
  .table-caption { flex-wrap: wrap; gap: 7px 12px; }
  .table-caption .trend-key { order: 3; width: 100%; gap: 14px; }
}

/* Brand marks: PNGs are the companies' own apple-touch-icons and fill the
   tile; SVGs are brand glyphs sized like the symbol monograms. Percent sizing
   scales with the larger drawer tile. */
.company-logo img{display:block}
.company-logo img.tile{width:100%;height:100%;object-fit:contain;padding:2px;border-radius:5px}
.company-logo img.glyph{width:58%;height:58%}
.company-logo:has(img.glyph[src$="/modal.svg"]),.company-logo:has(img.glyph[src$="/robinhood.svg"]){background:#111;border-color:#111}